Javascript

最新推荐文章于 2022-05-11 14:03:38 发布

CongJiYong

最新推荐文章于 2022-05-11 14:03:38 发布

阅读量156

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/CongJiYong/article/details/108560207

版权

JavaScript 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

函数arguments未知参数

 function sum(){
        alert(arguments.length); //未知参数个数
        alert(arguments[0]);  //调用参数和数组一样从元素0开始
        s=0;
        for(var i = 0; i< arguments.length; i++){
           s +=arguments[i];   //使用方法
        }
        alert(s);
    }
        sum(3,4,5,6,7,8,9,9);

JavaScript事件驱动

<head>	
	<script>
	//写在head里面使用onload，不要写在body后面
    window.onload = function(){ //写在这里代码，在页面加载完成以后执行 
        var oBtn =  document.getElementById("btn");//事件驱动
        alert(oBtn);
        oBtn.onclick = function(){
            alert("按钮单机事件");
        }
    }

    </script>
</head>
<body>
    <input type = "button" value = "按钮" id = "btn">
</body>

JavaScript清空文本框内容

<head>
    <script>
        window.onload = function(){
            var oBtn = document.getElementById("btn");
            var oTxt = document.getElementById("txt");
            oBtn.onclick = function(){
                oTxt.value = "";
            }
        }
    </script>
</head>
<body>
    <input type="text" value="默认的文字" id = "txt">
    <input type="button" value="清空文本" id = "btn">
</body>

JavaScript定义数组

    <script>
        //数组的定义
        var arr = new Array(1,true,'hello'); //第一种方法
        for(var i=0;i<arr.length;i++){
            alert(arr[i]);
        }
        var arr = new Array(10);  //第二种方法
      //省略new运算符创建数组
		var arr = Array(1,true,'asdf');
        //下面这种括号方法常用
          var arr = [1,true,"hello"];
    </script>

数组赋值随机数

//数值赋值随机数
        var arr = [];
        for(var i = 0;i < 10; i++){
            arr[i] = Math.random();
        }

遍历数组for in

 <script>
        /*
        for..in进行遍历 快速遍历比for循环效率高
         将数组中每一个元素从头到尾遍历
        【格式】
        for(var 变量 in 数组){

        }
        */
        var arr = ["red","blue","green"];
        for(var i in arr){
            document.write(arr[i] + "<br/>");

        }
    </script>

数组增加删除元素pop() push()

    <script>
      /*
        栈结构： 从一个口进，从一个口出
        【特点】先进后出

        push()
        【格式】数组.push(元素..)
        【功能】给数组末尾添加元素
        【参数】我们要添加的元素，参数个数随意

        pop()
        【格式】数组.pop();
        【功能】移除数组末尾的最后一个元素

        shift()
        【格式】数组.shift()
        【功能】从数组的头部取下一个元素
        【返回值】取下的元素
        
        unshift()
        【格式】数组.unshift(参数..)
        【功能】从数组的头部插入元素
        【参数】我们插入数组的元素，参数的个数随意
        【返回值】插入元素以后，数组的长度
      */
     var arr = ["钢铁侠","蚁人","绿巨人"];
     var res = arr.push("蜘蛛侠","坏人");  //添加数组元素,改变原数组
     alert(arr);
     alert(res); //参数个数

     arr.pop(); //删除数组的最后一个元素
     alert(arr);
     var res = arr.shift(); //取数组的第一个元素
     alert(res);
    arr.unshift("丛继永");//把数组第一个元素顶替，insert模式
    alert(arr);
    </script>

数组方法（增删改查）

<script>
        /*
            cancat()
            【格式】数组1.concat(数组2);
            【功能】将连个数组，合并成一个新数组，源数组不会被改变
            【返回值】合并好的新数组
            【参数】要合并的的数组

            slice()
            【格式】数组.slice(start,end);
            【功能】基于当前数组获取指定区域元素并创建一个新数组。原数组不改变。
            【参数】start开始获取区域的下表，end结束获取区域的下标,不包括end下标位置元素
            【返回值】指定区域元素生成新数组

            splice 可以完成删除，插入，替换操作
            【格式】数组.splice(start,length,元素..)
            【参数】参数1 截取的开始下标
                    参数2 截取的长度 删除几个元素
                    参数3 在截取的开始下标位置，我们要插入的元素，插入的元素的个数随意

            join()
            【格式】数组.join()
            【功能】使用拼接符将数组中元素拼接成字符串
            【参数】拼接符
            【返回值】拼接好的字符串
        */
        var arr1 = ["钢铁侠","绿巨人"];
        var arr2 = ["美国队长","丛继永"];
        var arr = arr1.concat(arr2); //合并两个数组，赋值给一个新的数组
        alert(arr);

        var arr = ["1",2,3,4,5];
        var newarr = arr.slice(1,3);
        alert(arr);
        alert(newarr);
        //splice删除功能
        var arr = ["red","blue","green"];
        var res = arr.splice(1,1);
        alert(res); //res为删除的元素
        alert(arr); //arr为数组删除元素之后的数组

        //splice插入功能
        var res = arr.splice(1,0,"丛继永");
        alert(arr);

        //替换功能 先删除，然后在插入
        var res = arr.splice(2,1,"yellow1");
        alert(res);
        alert(arr);
        //将数组拼接成字符串
        var arr = [10,20,30];
        var str = arr.join("");//“”里面可以天+-*/之类
        alert(str);
    </script>

数组排序函数

 <script>
        /*
            系统提供排序方法
            reverse() 逆向排序
            【格式】数组.reverse();

            sort()
            【格式】 数组.sort()
            【功能】将数组中的元素升序进行排序。从小到达
            注：sort默认是按照字符串进行排序 1 10 11 之类的会出现问题
            要求：一般情况下，我们需要自己区编写排序算法，系统提供给我们的排序函数用的比较少
            

        */
        var arr = [10,20,30,40];
        alert(arr.reverse());

        arr = [10,1,5,15];
        arr.sort()
        alert(arr);

    </script>

字符串的概念

<script>
        /*
            字符串的概念
            字符串一旦创建他们的值就不能在改变，要改变某个变量保存的字符串，
            首先要销毁原来的字符串，然后再用另一个包含新值的字符串填充该变量
            在js中将所有的单引号或者双引号括起来的都叫做字符串
            字符串创建的方法
            1、通过new运算符创建
            
            访问字符串的字符
            charAt()
            【格式】字符串.charAt(下标)
            【返回值】对应下标的字符
            【注】我们可以直接通过字符下标去访问该字符
            str.charAt(1);
            str[1]
        
        */
        var str = new String ("hello");
        alert(typeof str);
        alert(str.length); //输出字符串个数

        alert(str.charAt(1));
        alert(str[1]);
        var str = 'hello';
        //str[1]="x";不能改成功
        str = "hxllo"; //可以更改
        alert(str);
    </script>

字符串函数

 <script>
        document.write("hello".sub()+"world".sup);//字符串上标，下标
        /*
            charCodeAt
            【格式】字符串.charCodeAt(下标)
            返回值：返回字符串中对应下标字符的Ascii码

        */
        var str = "hello";
        alert(str.charCodeAt(1)); //字符转换成Ascii码
        /*
            String.fromCharCode();
            【格式】String.fromCharCode(ASCII码值);
            参数：Ascii码值
            返回值：Ascii码值对应字符组成的字符串
        
        */
        str = String.fromCharCode(97,98,99); //Ascii码转换成字符
        alert(str);
        /*
            concat()
            【格式】字符串1.concat(字符串2);
            返回值：拼接后的字符串，生成新的字符串
            【注】 一般情况下很少使用

        */

    </script>

在这里插入图片描述

字符串查找方法

<script>
        /*
            indexof()
            【格式】字符串.IndexOf(子串,开始查找的位置);
            【返回值】如果在字符串中查找到了子串第一次出现的位置，
            返回子串出现的位置，否则没有查找到返回0

        */
        var str = "asdfbgadsf";
        alert(str.indexOf("d",0)); //字符子串在字符串中第一次出现的位置
        /*
            lastIndexOf()
            【格式】字符串.lastIndexOf(子串);
            【返回值】子串在字符串中最后出现的位置，如果没有返回-1
        */
        var str = "congjiyong";
        alert(str.lastIndexOf("o"));//字符子串在字符串中最后一次出现的位置
        /*
           search()参数可以是正则表达式
            "abc" /abc/ig
            【注】正则表达式可以添加修饰符，i代表忽略大小写，g代表全局匹配
        */
        var str = "Abcabcabc";
        alert(str.search(/abc/i));
    </script>

JavaScript严格模式

<script>
        /*
        ECMA标准 ECMAJavascript
        ECMA 5 第五版
        ECMA6
        严格模式 
        "use strict";

        写在哪个作用域下，这个作用域下所有的代码都遵从严格模式。
        【注】不要轻易在全局范围开头增加"use strict";建议在作用域内使用

        【注】从字面意思理解，即这种严格模式下，
        浏览器会对JS的要求更加的苛刻
        
        */
        function m1(){
            max = 10;
            /*
                如果给变量赋值的时候，没有使用var声明该变量，
                那么当全局变量就行处理
            */
        }
        m1();
        alert(max);

        function m(){
            "use strict" //使用严格模式
            max = 10; //必须使用 var 就不能省略了，会报错
        }

    </script>

数组的额外方法

<script>
        /*
            indexOf 数组新增方法，也是字符串方法 
            【格式】数组.indexOf(元素,index);
            【使用】数组.indexOf(查找的元素,从第几个下标开始查找);
            【返回值】查找不到返回-1,查找到返回数组下标
            【注】使用的方式和字符串的方式一致
        
        */
        var arr = [10, 20, 30, 40 ,50];
        alert(arr.indexOf(30,0));
        /*
            forEach()
            【格式】数组.forEach(function(item, index, array){
                item 当前遍历到的元素
                index 当前遍历到的下标
                array 当前数组
            【功能】遍历数组
            });
        
        */
        var arr = [10, 20, 30];
        arr.forEach(function(item, index, array){
            alert(item + "," + index + "," + array);
        });
        
        arr.forEach(alert); // 10,20,30
        /*
            map 映射  遍历->操作->返回
        */
        var arr = [20, 30, 40, 50];
        var newArr = arr.map(function(item, index, array){
            return item + 2;
        });
        alert(newArr);


        /*
            reduce 归并
        */
        var arr = [10, 20, 30, 40, 50];
        var res = arr.reduce(function(pre, next, index, array){
            //pre 上一次遍历return后面的值
            //next 当前遍历到的元素
            alert(pre + "," + next);
            return pre + next;
        });

        /*
            filter 过滤

        */
       var res = [10, 20, 30 ,40 , 50].filter(function(item,index,array){
            return item > 30;//找出大于30的元素

       })
       alert(res);
       /*
            some 某些
            判断return后面的条件是否成立，如果成立返回true,否则返回false
            【注】如果匹配成功，则返回true,后面的不在进行遍历
       */
       var arr = [10, 20, 30, 40, 50];
       var res = arr.some(function(item, index, array){
           return item == 30;

       })
       alert(res);
       /*
        every 跟some一样，但是要求每一项都符合，才返回true,
        有一项不符合就返回false
        【注】如果判断有元素不符合条件，返回false，直接终止循环
       */
       var arr = [10, 20, 30, 40, 50];
       var res = arr.every(function(item, index, array){
            alert(item);
            return item >20; //返回假，必须每一项到符合返回true
       });
       alert(res);

    </script>

Math对象

<script>
        /*
            Math对象用于执行数学任务
            Math常用的属性  Math.PI 约等于 3.14159

        
        */
        alert(Math.round(3.5)); //四舍五入
        alert(Math.random());//随机0~1之间的随机数
        /*
            Math.max()返回较大的数
            Math.min()返回较小的数
        
        */
        alert(Math.max(10, 20, 30)); //取最大数
        alert(Math.abs(-10));//取绝对值
       /*
        Math.ceil()向上取整
        Math.floor()向下取整
       */
       alert(Math.ceil(3.1)); //返回4
       alert(Math.floor(3.1));//返回3
       /*
        Math.pow(x,y);
        求x的y次方
        Math.sqrt(4); //开平方
       */

    </script>