ES6——数组扩展 ... Array.from() Array.of() flat() reduce()

本文详细介绍了ES6中数组的扩展运算符、Array.from()、Array.of()、find()和findIndex()、fill()、entries()、keys()、values()、includes()、flat()及reduce()等实用方法,涵盖了类数组对象转换、数组查找填充、遍历和组合等核心功能。

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

1.扩展运算符…

ES6——扩展运算符…

2.Array.from()

将两类对象转为真正的数组:类数组(querrySelectAll)和可遍历(iterable)的对象(包括 ES6 新增的数据结构 Set 和 Map)

类数组

1.赋给length属性的对象

    //将类数组转化为真正的数组
    let k={
        0:'a',
        1:'b',
        length:2  //没有length属性就不行
    }
    console.log(Array.from(k));  //['a', 'b']

2.字符串也有length属性,它也是类数组

    let str='hello';
    console.log(Array.from(str)); // ['h', 'e', 'l', 'l', 'o']

3.参数如果是真正的数组 则返回一个全新数组

    let s1=[1,2,3];
    let s2=Array.from(s1);
    console.log(s2==s1); //false

3.Array.of()

一组值,转换为数组

Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1

这个方法的主要目的,是弥补数组构造函数Array()的不足。因为参数个数的不同,会导致Array()的行为有差异。

只有当参数个数不少于 2 个时,Array()才会返回由参数组成的新数组

Array() // []
Array(3) // [, , ,]
Array(3, 11, 8) // [3, 11, 8]

4.find() 和 findIndex()

find方法,用于找出第一个符合条件的数组成员

    var result1=[1,2,3,4].find(function (item) {
        return item%2==0;
    })
    console.log(result1);  //2

findIndex方法,返回第一个符合条件的数组成员的位置。
如果所有成员都不符合条件,则返回-1

    var result1=[1,2,3,4].findIndex(function (item) {
        return item%2==0;
    })
    console.log(result1);  //1

5.fill() 填充数组

使用给定值,填充一个数组

console.log(new Array(5).fill('a')); //['a', 'a', 'a', 'a', 'a']

fill方法还可以接受第二个和第三个参数,用于指定填充的起始位置和结束位置。

['a', 'b', 'c'].fill(7, 1, 2)  // ['a', 7, 'c']

6.数组实例的 entries(),keys() 和 values()

Set,Map,Object中都有这些方法

entries(),keys()和values()——用于遍历数组。
它们都返回一个遍历器对象,可以用for…of循环进行遍历
唯一的区别是keys()是对键名的遍历、values()是对键值的遍历,entries()是对键值对的遍历。

    let yes=[1,2,3,4];
    console.log(yes.keys()); //Array Iterator {}
    console.log(yes.values()); //Array Iterator {}
    console.log(yes.entries()); //Array Iterator {}
	let yes=[1,2,3,4];
    for(let key of yes.keys()){
        console.log(key); //0 1 2 3
    }
    for(let key of yes.values()){
        console.log(key); //1 2 3 4
    }
    for(let [key,value] of yes.entries()){
        console.log(key,value);
        //0 1
        //1 2
        //2 3
        //3 4
    }

7.includes()

console.log([1, 2, 3].includes(1)); //true
console.log([1, 2, 3].includes(1,1)); //false 从1号索引开始找

8.flat()

将嵌套的数组“拉平”,变成一维的数组。
该方法返回一个新数组,对原数据没有影响

//默认只能拉平一层
console.log([1, 2, [3, 4]].flat()); //[1, 2, 3, 4]

//如果拉平多层 设置层数
console.log([1, 2, [3, [4, 5]]].flat(2)); // [1, 2, 3, 4, 5]

//如果层数太多 设置Infinity
console.log([1, 2, [3, 4, [5, 6, [7, 8]]]].flat(Infinity)); //[1, 2, 3, 4, 5, 6, 7, 8]

9.reduce()

reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。对空数组是不会执行回调函数的。

1.计算数组总和

var num = [1,2,3,4,5];
var res = num.reduce(function(total,num){
    return total+num;
    //return total + Math.round(num);//对数组元素四舍五入并计算总和
},0);
console.log(res); //15

//num.reduce((total,num) => total += num, 0);
//没有初始值initialValue(即上面例子中的0),当数组为0时会抛出异常提示reduce函数没有初始值,所以为兼容性一般加上initialValue

2.合并二维数组

var red = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) {
 return a.concat(b);
}, []);
console.log(red);  //[0, 1, 2, 3, 4, 5]

3.统计一个数组中有多少个不重复的单词
reduce()函数

ES6(ECMAScript 2015)引入了大量新的数组方法,增强了数组的处理能力。其中一些重要的新增方法包括: 1. **find**: 这个方法返回数组中满足提供的测试函数的第一个元素,如果没有找到符合条件的,则返回undefined。 ```javascript const numbers = [1, 2, 3, 4, 5]; const result = numbers.find(item => item > 3); // 返回4 ``` 2. **findIndex**: 类似于`find`,但它返回满足条件的第一个元素的索引,找不到则返回-1。 ```javascript const index = numbers.findIndex(item => item == 4); // 返回3 ``` 3. **filter**: 通过测试函数过滤数组,返回一个新的只包含满足条件元素的新数组。 ```javascript const evenNumbers = numbers.filter(item => item % 2 === 0); // 返回[2, 4] ``` 4. **map**: 对数组的每个元素应用一个映射函数,并返回新数组,原数组不变。 ```javascript const squared = numbers.map(item => item * item); // 返回[1, 4, 9, 16, 25] ``` 5. **reduce**: 用于迭代数组并对每个元素应用一个归约函数,最终得到一个单一的累积值。 ```javascript const sum = numbers.reduce((total, num) => total + num, 0); // 返回15 ``` 6. **flat**: 展开嵌套的数组成扁平化的数组。 ```javascript const nestedArray = [[1, 2], [3, 4]]; const flattened = nestedArray.flat(); // 返回[1, 2, 3, 4] ``` 7. **fill**: 将指定值填充到数组从开始到结束的所有元素,支持指定起始和结束位置。 ```javascript numbers.fill(0, 2); // [1, 2, 0, 4, 5] ``` 8. **includes**: 检查数组是否包含某个元素,返回布尔值。 ```javascript const hasThree = numbers.includes(3); // 返回true ``` 这些方法使得处理数组更加方便高效,提高了代码的可读性和简洁度。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

致可乐

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值