ECMA6新数组的方法详解

石头剪刀布左

已于 2022-03-07 10:12:53 修改

阅读量187

点赞数 1

文章标签： elementui javascript vue.js

于 2022-03-05 14:14:16 首次发布

本文链接：https://blog.csdn.net/m0_67624022/article/details/123292978

版权

数组天生的一个缺陷：（new Array给一个参数和给两个参数的结果不同）

给Array中传入一个参数n的时候，结果为：长度为n的空数组

给Array中传入两个或两个以上参数的时候，结果为：[参数1，参数2，参数3...]

示例代码：

<SCRipt>
        let arr = new Array();
        console.log(arr);//空数组

        // 写入一个参数的时候
        let arr1 = new Array(3);
        console.log(arr1);//长度为3的空数组

        // 写入两个或两个以上的参数
        let arr2 = new Array(3,9);
        console.log(arr2);//[3,9]

        let arr3 = new Array(3,9,6);
        console.log(arr3);//[3,9,6]

</SCRipt>

新增方法：

of:

作用：创建一个数组，解决new Array的缺陷，即将类数组序列转化为真正的数组

语法：Array.of(元素序列)

序列：用逗号隔开的数据

示例代码：

<SCRipt>
        let arr = new Array();
        console.log(Array.of());//[]

        // 写入一个参数的时候
        let arr1 = new Array(3);
        console.log(Array.of(3));//[3]

        // // 写入两个或两个以上的参数
        let arr2 = new Array(3,9);
        console.log(Array.of(3,9));//[3,9]

        let arr3 = new Array(3,9,6);
        console.log(Array.of(3,9,6));//[3,9,6]
</SCRipt>

from：

作用：将类数组/伪数组转换为真正的数组。

语法：Array.from(类数组)

示例代码：

<body>
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <SCRipt>    
        let btns = document.querySelectorAll("button");
        console.log(btns);//伪数组：NodeList(3) [button, button, button]

        //Array.from(类数组/伪数组)
        // 将类数组/伪数组转换为真正的数组。
        console.log(Array.from(btns));//[button, button, button]
    </SCRipt>    
</body>

运行结果：

filter：

作用：filter会自动循环数组，filter会给每一个数组项都判断return返回的条件，如果条件成立，就留下这个数组项，如果条件不成立，就舍弃掉这个数组项，最后留下的数组项生成一个新数组，然后返回出来

用法：数组 . filter（function（item，idx）{

return 条件判断表达式
}）

注意：idx：索引

item：数组项

示例代码：

<script>
        let arr = [1,2,3,4,5,6,7,8,9,0];
        let arr1 = arr.filter(function(item,idx){
            return item;
        });
        console.log(arr1);//[1, 2, 3, 4, 5, 6, 7, 8, 9]

        let arr2 = [1,2,3,4,5,6,7,8,9,0];
        let arr3 = arr.filter(function(item,idx){
            return item >= 6;
        });
        console.log(arr3);//[6, 7, 8, 9]
</script>

find：

作用：遍历并查找数据，在原数组中查找第一个复合返回值条件的元素，并将其返回。
注：find方法找到立即结束遍历，找不到返回undefined。

用法：数组 . find（function（item，idx）{

return 条件判断表达式
}）

注意：idx：索引

item：数组项

示例代码：

<script>
        let arr = [1,2,3,4,5,6,7,8,9,0];
        let arr1 = arr.find(function(item,idx){
            return item;
        });

        // 找到第一个数组项返回出来，立即结束循环
        console.log(arr1);//[1]

        let arr2 = [1,2,3,4,5,6,7,8,9,0];
        let arr3 = arr.find(function(item,idx){
            return item > 6;
        });

        // 找到第一个满条件的数组项返回出来
        console.log(arr3);//[7]
</script>

includes：

作用：查询参数是否在数组中存在，返回值是布尔类型。
注：只支持基本数据类型。
用法：数组. includes(查找内容)

示例代码：

    <script>
        let arr = [1,2,3,7,8,9,0,{name:"张三"}];
        console.log(arr.includes(6));//false
        console.log(arr.includes(1));//true

        // 只支持基本数据类型。
        console.log(arr.includes({name:"张三"}));//false
    </script>

flat：

作用：将多维数组降维，返回值是一个一维数组。

用法：数组. flat(数字n)

注意：n取值是数字，默认值是1， Infinity直接降维1维

例如：有一个三维数组

当n=1,相当于把数组降了1维，原数组变成2维

当n=2,相当于把数组降了2维，原数组变成1维

示例代码：

<script>
        let arr=[1,2,3,[3,4,56,[2,4,6,8],4,6,4],4,7,9];//三维数组/多维数组
        console.log(arr.flat(2)); //[1, 2, 3, 3, 4, 56, 2, 4, 6, 8, 4, 6, 4, 4, 7, 9]
        console.log(arr.flat(1));//[1, 2, 3, 3, 4, 56, Array(4), 4, 6, 4, 4, 7, 9]
        console.log(arr.flat(Infinity));//[1, 2, 3, 3, 4, 56, 2, 4, 6, 8, 4, 6, 4, 4, 7, 9]
</script>

石头剪刀布左

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ECMA6新数组的方法详解

数组天生的一个缺陷：给Array中传入一个参数n的时候，结果为：长度为n的空数组给Array中传入两个或两个以上参数的时候，结果为：[参数1，参数2，参数3...]示例代码：<SCRipt> let arr = new Array(); console.log(arr);//空数组 // 写入一个参数的时候 let arr1 = new Array(3); co...
复制链接

扫一扫

ECMA6新数组的方法详解

新增方法：

of:

from：

filter：

find：

includes：

flat：

“相关推荐”对你有帮助么？