常用的数组的内置方法

LebaiA
已于 2022-09-23 15:22:58 修改
阅读量130
点赞数 1
文章标签： javascript 前端 vue.js html
于 2022-09-22 20:18:33 首次发布
本文链接：https://blog.csdn.net/LebaiA/article/details/126998971
版权
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>



    <script>
        var obj = {};
        var aaa = 10;
        console.log(aaa.constructor);
        console.log(obj.constructor);
        console.log(typeof obj);

        var arr = [1, 2, "学习", true, "JavaScript"];
        console.log(typeof arr);
        // 1.arr.constructor 返回数组的原型函数
        console.log(arr.constructor);

        // 2.arr.length  返回数组对象的元素个数，长度
        console.log(arr.length);//5

        var arr = [1, 2, "学习", true, "JavaScript"];
        // 3.arr.push(新元素,...) 可以给数组末尾添加一个或者多个元素，返回值是新数组的长度；
        var newArr = arr.push("赵丽颖", "175cm");
        console.log(newArr);//6
        console.log(arr);//[1, 2, '学习', true, 'JavaScript', '赵丽颖', '175cm']

        // 4. arr.pop() 删除数组末尾的最后一个元素，返回删除的元素
        console.log(arr.pop());// 175cm
        console.log(arr);

        // 5.arr.unshift() 可以给数组开头，添加一个或者多个元素，返回新数组的长度
        console.log(arr.unshift("中国", "河南省100分"));// 8
        console.log(arr);

        // 6.arr.shift() 删除数组开头的第一个元素，返回删除的元素
        console.log(arr.shift());// 中国
        console.log(arr);  // ['河南省100分', 1, 2, '学习', true, 'JavaScript', '赵丽颖'] 

        // 7. arr.slice(x,y); 可以截取数组的指定元素，该方法不会改变原来的数组
        // 而是将截取的新元素，封装一个新数组返回
        // （1）从x开始索引复制(包含开始位置)，不包含y结束索引位置;
        // （2）如果没有第二个参数y，默认截取到数组末尾
        // （3）结束索引可以传递一个负数，则从后往前截取
        var newArr = arr.slice(1, 4);
        console.log(newArr);//[1,2,"学习"]

        console.log(arr.slice(3));//[ '学习', true, 'JavaScript', '赵丽颖']
        console.log(arr.slice(2, -3));//[2,"学习"] 末尾倒数第一个元素索引是 -1

        // 8.arr.splice(x,y,[z1,z2,z3...可选])
        // 该方法用删除数组的指定元素，直接修改原数组，返回删除的元素
        // 第一个参数x 表示开始位置的索引号
        // 第二个参数y 表示删除元素的数量
        // 第三个参数z... ,可选值，可以传递一些新元素，这些值会自动插入到开始位置前边

        var arr = ['河南省100分', 1, 2, '学习', true, 'JavaScript', '赵丽颖'];
        console.log(arr.splice(1, 3));//[1,2,"学习"]
        console.log(arr);// ['河南省100分',  true, 'JavaScript', '赵丽颖']

        console.log(arr.splice(2, 0, "孙悟空", "如来"));// []

        console.log(arr);//['河南省100分',  true,"孙悟空","如来", 'JavaScript', '赵丽颖']

        // 9.arr.concat() 该方法和连接一个或者多个数组，并将连接的数组返回，该方法不会影响原数组
        var arr1 = ["加油", "努力"];
        var arr2 = [true, false];
        var arr3 = [100, 200];
        console.log(arr1.concat(arr2));//["加油", "努力",true, false]

        var newarr = arr1.concat(arr2, arr3);
        console.log(newarr);//["加油", "努力",true, false,100, 200]
        console.log(arr1)

        // 10. join() 该方法可以将数组转化成一个字符串,不会影响原数组，将转化的字符串返回
        //join() 方法 可以指定一个字符串作为连接符，如果不指定默认为逗号

        var arr = ['河南省100分', true, "孙悟空", "如来", 'JavaScript', '赵丽颖']
        var arrStr = arr.join();
        var arrStr2 = arr.join("@");
        console.log(arrStr);
        console.log(arrStr2);

        // 11. reverse() 反转数组（前后换位置）该方法直接改变数组元素的排列顺序
        console.log(arr);//
        console.log(arr.reverse());//['赵丽颖', 'JavaScript', '如来', '孙悟空', true, '河南省100分']


        // 12. indexof() 该方法 可以检测数组中是否包含指定元素
        // 如果存在多个，返回第一次出现的索引号，如果不存在返回-1
        var arr = ['河南省100分', true, "孙悟空", "如来", 'JavaScript', "孙悟空", '赵丽颖'];
        console.log(arr.indexOf("ABC"));//-1
        console.log(arr.indexOf("孙悟空"));// 2



        // 13. includes() 方法用来判断一个数组是否包含一个指定的值，
        // 根据情况，如果包含则返回 true，否则返回 false。        
        console.log(arr.includes("孙悟空"));//true
        console.log(arr.includes("ABC"));// false

        // 14. Array.isArray() 用于确定传递的值是否是一个数组,如果是数组返回 true，否则返回 false。
        var str = [];
        var abc = "0a0a0";
        console.log(Array.isArray(arr));//true

        console.log(Array.isArray(str));// true
        console.log(Array.isArray(abc));// false

        // 15. toString() 方法返回一个字符串，表示指定的数组及其元素。
        var arr1 = [1, 2, 'a', '1a'];
        console.log(arr1.join());//
        console.log(arr1.toString());// "1,2,a,1a"

        var a = 100;
        // Number.toString()
        var b = true;
        console.log(a.toString());
        console.log(b.toString())
        console.log(arr1.join() === arr1.toString());//

        var arr = ['河南省100分', true, "孙悟空", "如来", 'JavaScript', '赵丽颖']


        // 16.  Array.from(); // 该方法对一个类似数组 转化为真数组, 就可以使用数组的内置方法
        var boxList = document.getElementsByClassName("box");
        // document 文档 html文档
        // 通过类名获取元素 返回的结果是一个伪数组 ，内置方法不可用，属性可以
        console.log(boxList.length);// 6
        // console.log(boxList.push("abc"));//报错，因为伪数组不能使用数组内置方法

        var boxList = Array.from(boxList);
        console.log(boxList.push("abc"));//6
        console.log(boxList);//
        


    //    boxList[1].style.color ="red";


    </script>
</body>

</html>