ES6新增语法二（数组新特性）

原创已于 2022-10-09 16:07:28 修改 · 873 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#es6 #前端 #ecmascript

于 2022-10-09 16:02:26 首次发布

本文详细介绍了ES6中数组的新特性，包括扩展运算符的四种用法，Array构造函数的Array.from()和Array.of()方法，以及数组对象新增的find(), findIndex(), entries(), keys(), includes(), Array.isArray(), filter(), map(), some(), every(), reduce()和forEach()等方法，全面解析这些新特性的使用场景和功能。" 75174768,5715847,Spring MVC MyBatis配置一对多关系实战：<association>与实体类,"['JavaWeb', 'Spring框架', 'MyBatis框架', '数据库设计']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目录

数组新特性

1、扩展运算符

1.1、复制数组

1.2、合并数组

1.3、用于解构赋值

1.4、用于字符串

2、Array构造函数新增方法

2.1、Array.from()

2.2、Array.of(a,b,c)

3、数组对象新增方法

3.1、find(callback)

3.2、findIndex(callback)

3.3、entries()

3.4、keys()

3.5、includes()

3.6、Array.isArray(arr)

3.7、filter(callback)

3.8、map(callback)

3.9、some(callback)

3.10、every(callback)

3.11、reduce()

3.12、forEach(callback)

数组新特性

1、扩展运算符

1.1、复制数组
//复制数组
   var  arr1=[1,2,3];
   var  arr2=[...arr1];
1.2、合并数组
//合并数组
var  a=[1,2,3];
var  b=[4,5,6];
var  c=[7,8,9,];

//ES5
var  d= a.concat(b,c);

//ES6
var  e = [...a,...b,...c];
1.3、用于解构赋值
let  [a,b,...args] = [1,2,3,4,5]
1.4、用于字符串
//用于字符串
let  arr = [..."hellow"]
2、Array构造函数新增方法

2.1、Array.from()

将类数组对象转换为纯数组
var P = document.getElementsByTagName("p")
    var newP = Array.from(P)
    console.log(P);
    console.log(newP);
2.2、Array.of(a,b,c)

将参数列表返回一个数组，相当于创建数组

3、数组对象新增方法

3.1、find(callback)

作用：返回数组中第一个满足条件的元素
let arr = [9, 2, 0, 1, 16, -9, 7, 56, 100];
    let result = arr.find(val => val > 10)
    console.log(result);
3.2、findIndex(callback)

作用：返回数组中第一个满足条件的元素的索引
let arr = [9, 2, 0, 1, 16, -9, 7, 56, 100];
    let result = arr.findIndex(val => val > 10)
    console.log(result);
3.3、entries()

作用：帮助数组遍历每一个索引值与value值
let arr = [9, 2, 0, 1, 16, -9, 7, 56, 100];
    for (let [key, value] of arr.entries()) {
        console.log(key, value);
    }
3.4、keys()

作用：帮助数组遍历所有的key值
let arr = [9, 2, 0, 1, 16, -9, 7, 56, 100];
    for (let key of arr.keys()) {
        console.log(key);
    }
3.5、includes()

作用：检索数组是否包含某个值，返回布尔值
let arr = [9, 2, 0, 1, 16, -9, 7, 56, 100];
    console.log(arr.includes(0));
3.6、Array.isArray(arr)

作用：验证是否是一个数组，返回布尔值
let arr = [9, 2, 0, 1, 16, -9, 7, 56, 100];
    console.log(Array.isArray(arr));
3.7、filter(callback)

作用：过滤数组单元，将满足条件的元素过滤

注意：自动将每一个元素放入callback中进行处理，如果返回值为true，将元素放入新数组中，否则不操作
let arr = [9, 2, 0, 1, 16, -9, 7, 56, 100];
    let newarr = arr.filter(val => val >10)
    console.log(newarr);
3.8、map(callback)

作用：对数组进行遍历，将计算后的值返回新数组
let arr = [9, 2, 0, 1, 16, -9, 7, 56, 100];
    let newarr = arr.map(val => val * 10)
    console.log(newarr);
3.9、some(callback)

作用：对数组进行遍历，如果有一个满足条件，则返回true，并终止遍历，否则返回false

3.10、every(callback)

作用：对数组进行遍历，如果有一个不满足条件，则返回false，并终止遍历，否则返回true

3.11、reduce()
reduce(function(preValue,nowValue,index,arrSelf)
{
        return   preValue+nowValue
})
作用：累加数组单元

preValue：上一个值

nowValue：下一个值

index：当前值下标

arrSelf：当前数组
//累加
let arr = [9, 2, 0, 1, 16, -9, 7, 56, 100];
    let newarr = arr.reduce((preVal,nowVal) => preVal += nowVal)
    console.log(newarr);
3.12、forEach(callback)

作用：遍历数组

无返回值