ES6之数组Array新特性


其他数组相关传送门

  1. JavaScript数组高阶函数
  2. JavaScript常用数组处理
  3. JavaScript 数组处理

Array.of() 函数

将一组值,转换成数组

Array.of('a', 'b', 0, 1, null, undefined); // ["a", "b", 0, 1, null, undefined]

扩展运算符

扩展运算符 ... 可以用于将一个数组的元素展开到另一个数组中,或者用于函数调用时展开参数列表。

const arr1 = [1, 2, 3];  
const arr2 = [...arr1, 4, 5]; // [1, 2, 3, 4, 5]

数组解构

ES6引入了对象的解构赋值,同时也可以用于数组。

const [first, second, ...rest] = [1, 2, 3, 4, 5];  
console.log(first); // 1  
console.log(second); // 2  
console.log(rest); // [3, 4, 5]

Array.from( ) 函数

可以将类似数组的对象或者可遍历的对象转换成真正的数组

有哪些是类似数组的对象?最常见的就是调用getElementsByTagName方法得到的结果,它就是一个类似数组的结果

let ele = document.getElementsByTagName('a');
ele instanceof Array;  //结果:false,不是数组
ele instanceof Object; //结果:true,是对象

Array.from(ele) instanceof Array;//结果:true,是数组

经过Array.from函数处理返回的结果,变成了一个真正的数组。

Array.from函数其中一个用处就是将字符串转换成数组

let str = 'hello';
Array.from(str); //结果:["h", "e", "l", "l", "o"]

使用 ES6的扩展运算符 也能达到上面的效果:

let ele = document.getElementsByTagName('a');
[...ele] instanceof Array;
// 等价于
Array.from(ele) instanceof Array;


let str = 'hello';
[...str]
// 等价于
Array.from(str); 

find( ) 函数

找出数组中符合条件的第一个元素,否则返回 undefined。

let arr = [1, 2, 3, 4, 5, 6];
let arr2 = arr.find((value) => {
    return value > 2;
});
console.log(arr2); // 3

let arr3 = arr.find((value) => {
    return value > 7;
});
console.log(arr3); // undefined

看上面的代码,find()函数的参数是一个匿名函数,数组的每个元素都会进入匿名函数执行,直到结果为true,find函数就会返回value的值:3。倘若所有元素都不符合匿名函数的条件,find( )函数就会返回undefind


findIndex( ) 函数

返回符合条件的第一个数组成员的位置,否则返回 -1

let arr = [7, 8, 9, 10];
let arr2 = arr.findIndex((value) => {
    return value > 8;
});
console.log(arr2) // 2

let arr3 = arr.findIndex((value) => {
    return value > 11;
});
console.log(arr3) // -1

数组元素中大于8的元素是9,而元素9的位置正式2,(数组元素是从0算起)。倘若所有元素都不符合匿名函数的条件,findIndex( )函数就会返回-1


fill( ) 函数

用指定的值,填充到数组

let arr = [1,2,3];
let arr1 = arr.fill(4);
console.log(arr1); // [4,4,4]

经过fill( )函数处理后的数组arr已经变成了[4,4,4];正如函数名fill(填充)一样。所有元素都被填充为数字4了。

fill( )函数提供了一些参数,用于指定填充的起始位置和结束位置。

let arr = [7, 8, 9, 10];
let arr1 = arr.fill('a',1,3);
console.log(arr1); // [7, 'a', 'a', 10]

上面的代码中第2个参数和第3个参数的意思是:从位置1的元素开始填充'a',截止到位置3之前,所以是位置1和位置2的元素被a填充了,得到的结果:[7, 'a', 'a', 10]


copyWithin( ) 函数

将一系列元素复制到另一个位置,覆盖原有元素,会直接修改原数组,而不是返回一个新的数组。

copyWithin(target ,start , end)

  • target(必需):整数,指定复制序列到该位置。如果是负数,则表示倒数。
  • start(可选):整数,指定复制序列的起始位置。如果是负数,则表示倒数。如果省略该参数,则默认为0。
  • end(可选):整数,指定复制序列的结束位置(但不包括该位置的元素)。如果省略该参数,则默认为数组的长度。如果是负数,则表示倒数。
const arr = [1, 2, 3, 4, 5];  
// 将从位置 3 到数组结束的元素复制到从位置 0 开始的位置  
arr.copyWithin(0, 3);  
console.log(arr); // 输出: [4, 5, 3, 4, 5]

在上面的例子中,copyWithin() 方法将数组 [4, 5] 复制到数组的开始位置,覆盖了原有的 [1, 2]


includes( ) 函数

用来判断一个数组是否包含一个指定的值,根据情况,如果需要,搜索也会是区分大小写的。

const arr = [1, 2, 3];  
arr.includes(2); // true

entries( ) 函数

对数组的键值对进行遍历,返回一个遍历器,可以用for…of对其进行遍历

for(let [i,v] of ['a', 'b'].entries()){
    console.log(i,v);
}
//0 "a"
//1 "b"

我们将entries( )函数返回的一个遍历器,用for…of进行遍历,并打印出结果,能得到数组的键值:0和1,以及对应的数组元素:‘a‘和’b‘。


keys( )函数

对数组的索引键进行遍历,返回一个遍历器

for(let index of ['a', 'b'].keys()){
    console.log(index);
}
//0
//1

values( )函数

对数组的元素进行遍历,返回一个遍历器

for(let value of ['a', 'b'].values()){
    console.log(value);
}
//a
//b

数组推导

用简洁的写法,直接通过现有的数组生成新数组

举个例子:加入我们有一个数组,我在这个数组的基础上,每个元素乘以2,得到一个新数组。

我们看看传统的实现方法:

var arr1 = [1,2,3,4];
var arr2 = [];
for(let i=0;i<arr1.length;i++){
	//每个元素乘以2后,push到数组arr2
	arr2.push(arr1[i]*2);
}
console.log(arr2);
//结果:[2,4,6,8]

用ES6提供的新写法:(数组推导)

var arr1 = [1, 2, 3, 4];
var arr2 = [for(i of arr1) i * 2];
console.log(arr2);
//结果: [ 2, 4, 6, 8 ]

在数组推导中,for…of后面还可以加上if语句:

var array1 = [1, 2, 3, 4];
var array2 = [for(i of array1)  if(i>3) i];
console.log(array2);
//结果: [4]

总结

ES6为数组带来了很多很实用的方法:Array.of( )、Array.from( )、find( )、findIndex( )、fill( )、entries( )、values(),此外还有一个更简洁的语法:数组推导,能让我们更方便地生成一个新数组。

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

猫老板的豆

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

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

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

打赏作者

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

抵扣说明:

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

余额充值