数组的扩展

1、Array.from()
用于将两类对象转为真正的数组:

  1. 类数组(array-like)对象与可遍历的对象转化为数组并返回
let arrayLike = {
      '0' : 'a',
      '1' : 'b',
      '2' : 'c',
      length : 3
};

//ES5 写法

var arr1 = [].slice.call(arrayLike);  // ['a','b','c']

//ES6 写法

var arr2 = Array.from(arrayLike);  // ['a','b','c']

ES5

var divs = document.querySelectAll("div");
[].slice.call(divs).forEach(function (node) {
   console.log(node);         
})

ES6

var divs = document.querySelectAll("div");
Array.from(divs).forEach(function (node) {
   console.log(node);         
})
  1. Array.from()也可以将ES6中新增的Set、Map等结构转化为数组:
    // 将Set结构转化为数组
Array.from(new Set([1, 2, 3])); // [1, 2, 3]

//将Map结构转化为数组

Array.from(new Map(["name", "ty"])); // ["name", "ty"]

字符串既是类数组又是可遍历的,所以Array.from()也可将字符串转化为数组:

Array.from("tyz"); // ["t", "y", "z"]

Array.from()还有两个可选参数,完整语法如下:

Array.from(obj, mapFn, thisArg)
mapFn其实就是数组的map方法,对数组的每个元素处理。thisArg是执行环境的上下文。 Array.from(obj, mapFn, thisArg) 等同于 Array.from(obj).map(mapFn, thisArg)。

2、Array.of()

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

Array(3) // [undefined, undefined, undefined] 

3、数组实例 copyWithin()
数组实例的copyWithin方法,在当前数组内部,将指定位置的成员复制到其他位置(会覆盖原有成员),然后返回当前数组。
Array.prototype.copyWithin(target, start = 0, end = this.length)
target (必需):从该位置开始替换数据。
start (可选):从该位置开始读取数据,默认为 0 。如果为负值,表示倒数。
end (可选):到该位置前停止读取数据,默认等于数组长度。如果为负值,表示倒数。

//  将 3 号位复制到 0 号位  
[1, 2, 3, 4, 5].copyWithin(0, 3, 4)  
// [4, 2, 3, 4, 5]  
// -2 相当于 3 号位, -1 相当于 4 号位  
[1, 2, 3, 4, 5].copyWithin(0, -2, -1)  
// [4, 2, 3, 4, 5]  
//  将 3 号位复制到 0 号位  
[].copyWithin.call({length: 5, 3: 1}, 0, 3)  
// {0: 1, 3: 1, length: 5}  
//  将 2 号位到数组结束,复制到 0 号位  
var i32a = new Int32Array([1, 2, 3, 4, 5]);  
i32a.copyWithin(0, 2);  
// Int32Array [3, 4, 5, 4, 5]  
//  对于没有部署 TypedArray 的 copyWithin 方法的平台  
//  需要采用下面的写法  
[].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4);  
// Int32Array [4, 2, 3, 4, 5]  

4、Array.prototype.find()与Array.prototype.findIndex()
参数包括一个回调函数和一个可选参数(执行环境上下文)。回调函数会遍历数组的所有元素,直到找到符合条件的元素,然后find()方法返回该元素。

[1, 2, 3, 4].find(function(el, index, arr) {
   return el > 2; 
}) // 3

[1, 2, 3, 4].find(function(el, index, arr) { 
  return el > 4; 
}) // undefined

findIndex()方法与find()方法用法类似,返回的是第一个符合条件的元素的索引,如果没有则返回-1。

[1, 2, 3, 4].findIndex(function(el, index, arr) {
   return el > 2; 
}) // 2

[1, 2, 3, 4].findIndex(function(el, index, arr) { 
  return el > 4; 
}) // -1

5、Array.prototype.fill()
fill(value, start, end)

[1, 2, 3].fill(4) // [4, 4, 4]
[1, 2, 3].fill(4, 1, 2) // [1, 4, 3]
[1, 2, 3].fill(4, -3, -2) // [4, 2, 3]

6、Array.prototype.entries()、Array.prototype.keys()与Array.prototype.values()
entries()、keys与values都返回一个数组迭代器对象

for (let i of entries) {
  console.log(i)
} // [0, 1]、[1, 2]、[2, 3]
for (let [index, value] of entries) {
  console.log(index, value)
} // 0 1、1 2、2 3

for (let key of keys) {
  console.log(key)
} // 0, 1, 2
for (let value of values) {
  console.log(value)
} // 1, 2, 3

var entries = [1, 2, 3].entries();
console.log(entries.next().value); // [0, 1]
console.log(entries.next().value); // [1, 2]
console.log(entries.next().value); // [2, 3]

var keys = [1, 2, 3].keys();
console.log(keys.next().value); // 0
console.log(keys.next().value); // 1
console.log(keys.next().value); // 2

var valuess = [1, 2, 3].values();
console.log(values.next().value); // 1
console.log(values.next().value); // 2
console.log(values.next().value); // 3

7、Array.prototype.includes()
返回布尔值,是否包含给定的值

assert([1, 2, 3].includes(2) === true);
assert([1, 2, 3].includes(4) === false);
assert([1, 2, NaN].includes(NaN) === true);
assert([1, 2, -0].includes(+0) === true);
assert([1, 2, +0].includes(-0) === true);
assert(["a", "b", "c"].includes("a") === true);
assert(["a", "b", "c"].includes("a", 1) === false);

8、数组的空位

Array(3)  // [, , ,]
0 in [undefined, undefined, undefined]  //true
0 in [, , ,] //false

ES5 大多方法会将空位跳过
ES6 则是明确将空位转为undefined

9、数组推导

var a1 = [1,2,3,4];
var a2 = [for (i of a1) i * 2];
a2 // [2,4,6,8]

(for (x of a) for (y of b) if (x > y) [x,y])
function* generatorComprehension() {
    for (x of a) {
        for (y of b) {
            if (x > y) {
                yield [x,y];
            }
        }
    }
}

你可能感兴趣的:(数组的扩展)