ECMAScript 6——数组

1.扩展运算符之(spread)(...)

例如:

  1. console.log(...[4,5,6])
    //4 5 6
  2. console.log(1,...[4,5,6],7)
    //1 4 5 6 7
  3. const arr=[...(x>0?['a']:[]),'b'];
    //...运算符后面可以放表达式
  4. [...[],1]
    //[1] ...运算符号是空数组不产生任何结果。

可能会用到的地方:
函数
例:function f(z,x,c,v,b,n){}
var args=[0,1];
f(-1,...args,2,...[3])
此时...args等同于...[0,1]也就是0 1

2.es5的apply()方法被es6(spread)(...)取代,更方便。

举例
1.两者的对比之求数组最大值
例:
//ES5的写法
Math.max.apply(null,[1,2,3])
//ES6的写法
Math.max(...[1,2,3])
//等同于
Math.max(1,2,3)

更方便的应用于:

1..用于将一个数组添加到另一个数组的尾部

//ES5的写法
var arr1=[0,1,2];
var arr2=[3,4,5];
Array.prototype.push.apply(arr1,arr2);
//ES6的写法
var arr1=[0,1,2];
var arr2=[3,4,5];
arr1.push(...arr2);

2.与解构赋值结合使用,用于返回一个对象但是需要不同的分组的情况

const [first,...rest]=[1,2,3,4,5];
//first对应于值1
//rest对应于值[2,3,4,5]

3.函数返回值,es5中js只能返回一个值,如果是多个值则需要返回数组或者对象,es6(...)运算符可以直接解析返回的一堆数据

var dateFields = readDateFields(database);
var d = new Date(...dateFields);

4.用于将字符串转化为真正的数组

[...'hello']
// [ "h", "e", "l", "l", "o" ]

3.Array.of()

Array.of()将一组值,转化为数组
Array.of(3, 11, 8) // [3,11,8]
Array.of基本上可以用来替代Array()或new Array(),并且不存在由于参数不同而导致的重载。它的行为非常统一。
两者的对比:
Array()
Array() // []
Array(3) // [, , ,]
Array(3, 11, 8) // [3, 11, 8]
Array.of
Array.of() // []
Array.of(undefined) // [undefined]
Array.of(1) // [1]
Array.of(1, 2) // [1, 2]

4.数组实例的 copyWithin()

Array.prototype.copyWithin(target, start = 0, end = this.length)
它接受三个参数。

target(必需):从该位置开始替换数据。
start(可选):从该位置开始读取数据,默认为0。如果为负值,表示倒数。
end(可选):到该位置前停止读取数据,默认等于数组长度。如果为负值,表示倒数。

5.数组实例的 find() 和 findIndex()


举例
1.[1, 5, 10, 15].find(function(value, index, arr) {
return value > 9;
}) // 10
2.[1, 5, 10, 15].findIndex(function(value, index, arr) {
return value > 9;
}) // 2

find()方法找到的是第一个目标值,第二个就不管了。findIndex()找到的是第一目标值的索引位子,第二个就不继续找了。当然也弥补了indexof()方法的不足


[NaN].indexOf(NaN)
// -1
[NaN].findIndex(y => Object.is(NaN, y))
// 0

6.遍历数组的不同方法


entries(),keys() 和 values()。区别是keys()是对键名的遍历、values()是对键值的遍历,entries()是对键值对的遍历。
for (let index of ['a', 'b'].keys()) {
console.log(index);
}
// 0
// 1

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

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

7.includes(),indexOf()查找是否包含某个值


[1, 2, 3].includes(3, 3); // false 第一个参数表示要查找的值,
[1, 2, 3].includes(3, -1); // true
[NaN].indexOf(NaN)
// -1

你可能感兴趣的