ES6学习——数组的扩展

总结

1. Array.from() : 将类数组对象和可遍历对象转化为真正的数组

2. Array.of() ： 将一组值转化为数组

3. Int32Array()

4. find()找出数组中复合某个条件的元素。如果没有，返回undefined

5. findIndex()返回第一个复合条件的数组成员的位置，如果没有，返回-1

6. fill()使用给定值填充数组

7. 数组实例的 entries()，keys() , values()——用于遍历数组

8. includes()：返回一个布尔值，表示某数组是否包含给定的值，该方法属于ES7

9. 字符串的includes()方法，表示某个字符串是否包含另一个字符串

1. Array.from()

let arraylike = {
    '0' : 'a',
    '1' : 'b',
    '2' : 'c',
    'length' : 3
}
// 传统写法
var arr1 = [].slice.call(arraylike);
console.log(arr1);  //Array [ "a", "b", "c" ]
// 新写法
var arr2 = Array.from(arraylike);
console.log(arr2);  //Array [ "a", "b", "c" ]

let ps = document.querySelectorAll('p');
Array.from(ps).forEach(function(p){
    console.log(p);
})

知识点：querySelectorAll()方法返回一个类数组对象，只有将这个对象转化为真正的的数组，才能用forEach方法

只要部署了Interator接口的数据结构，Array.from()都能将其转化为数组，比如字符串和Set

console.log(Array.from('hello'));   // ["h", "e", "l", "l", "o"]
let nameSet = new Set(['a','b']);

console.log(Array.from(nameSet));   // ["a", "b"]

如果传入的参数是一个真正的数组？将会返回一个一模一样的新数组

console.log(Array.from([1,2,3]));   // [1,2,3]

而扩展运算符(...)也可以将某些数据解构转化为数组，因为扩展运算符背后调用的是遍历器接口，如果一个对象没有部署该接口就无法转换

任何有length属性的对象，都可以通过Array.from()方法转换为数组

Array.from()还可以接受第二个参数，用来对每个元素进行处理，并将处理后的值放入返回的数组

console.log(Array.from('12345', (x)=>x*x)); // [1, 4, 9, 16, 25]，这里将字符串先转化为数组，又进行平方处理，返回处理后的结果

console.log(Array.from([1,2,,,4,,5,2], (n)=>n || 0));   // [1, 2, 0, 0, 4, 0, 5, 2]，将布尔值是FALSE的转化为0

function type(){
    return Array.from(arguments,value => typeof value);
}
console.log(type('123',12,[],null,{},NaN)); // ["string", "number", "object", "object", "object", "number"]，返回函数参数的类型

还可以将字符串转化成数组，然后返回字符串的长度

2. Array.of()

将一组值转化为数组，它总是返回参数组成的列表，如果没有参数就返回一个空数组

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

console.log(Array.of(1,2,4));   // [1,2,4]
console.log(Array(1,2,4));  // [1,2,4]
console.log(Array.of(3));   // [3]
console.log(Array(3));  // [undefined*3]

对比上述代码可以看出来，当只传入一个参数时，Array.of()可以正常解析，而Array()就认为是3个undefined值，即解析失败

Array.of()基本上可以取代Array()和new Array，而且不存在由于参数不同而导致的重载

数组实例的copyWithin()方法

在当前数组内部将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回新数组

Array.prototype.copyWithin(target,start,end)

• target: 表示从此位置开始替换（必须）

• start，end表示截取的字符串（可选），这两个参数也可以为负数

• 这三个都是数值，如果不是就转化为数值
  console.log([0,1,2,3,4,5,6,7,8,9].copyWithin(0,5)); // [5, 6, 7, 8, 9, 5, 6, 7, 8, 9]
  这句代码表示从第5个位置截取到最后一个位置，然后将他们放在第0个位置，0以及后边的就被覆盖掉了

  console.log(['a','b','c','d','e','f','g','h'].copyWithin(0,5,6)); // ["f", "b", "c", "d", "e", "f", "g", "h"]
  这句代码把第5到6的f放在了第0个位置
  
  console.log([].copyWithin.call({length: 5, 3: 1},0,3));   // Object {0: 1, 3: 1, length: 5}
  将3号位置复制到0号位置
  

3. Int32Array()

    // from a length
 var int32 = new Int32Array(2);
int32[0] = 42;
console.log(int32[0]);  // 42
console.log(int32.length);  // 2
console.log(int32.BYTES_PER_ELEMENT);   // 4

// from a array
var arr = new Int32Array([34,21]);
console.log(arr.length);    // 2
console.log(arr[1]);    // 21

// from another array
var x = new Int32Array([21,34]);
var y = new Int32Array(x);
console.log(y[0]);  // 21

4. find()找出数组中复合某个条件的元素。如果没有，返回undefined

  console.log([1,4,2,-5,8].find((n) => n<0));   // -5

5. findIndex()返回第一个复合条件的数组成员的位置，如果没有，返回-1

  console.log([8,41,6,5,2,6,-6,2,5].findIndex((x) => x>8)); // 1

他们可以发现NaN，弥补了indexof的不足

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

6. fill()使用给定值填充数组

fill()用于空数组初始化非常方便，当数组非空时，里边的元素会全部被抹去

fill()还可以指定第二，三个位置，用于指定填充的起始位置和结束位置

  // 填充数组
  console.log(['a','b','c'].fill(3));   // [3,3,3]
// 初始化数组
console.log(new Array(3).fill(7));  // [7,7,7]
// 有起始位置和结束位置的填充
console.log(['a','b','f','s'].fill('x',2,3));   // ["a", "b", "x", "s"]

7. 数组实例的 entries()，keys() , values()——用于遍历数组

他们都返回一个遍历器对象，可以用for...of循环遍历

• keys() : 对键的遍历

• values() : 对值的遍历，浏览器不支持？

• entries() : 对键值对的遍历
  for(let [index,elem] of ['a','c'].entries()){
  console.log(index,elem); // 0 'a' 1 'b'
  }

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

8. includes()：返回一个布尔值，表示某数组是否包含给定的值，该方法属于ES7

console.log(['a','b','c'].includes('a'));   // true

该方法的第二个参数表示搜索的开始位置，默认为0，如果为负数，倒着搜，如果超过了length，就重置，从0开始搜

9. 字符串的includes()方法，表示某个字符串是否包含另一个字符串

let a = 'hello world, I am a good boy';
let b = 'hell';
let c = 'jkfs';

console.log(a.includes(b)); // true
console.log(a.includes(c)); // false

10. 数组的空位

注意：由于空位的处理不统一，所以应当尽量避免空位

表示数组的某一位置上没有值

注意：空位不是undefined，一个位置等于undefined时依旧有值，空位是没有任何值的。

console.log(0 in [undefined,undefined,undefined]);  // true
console.log(0 in [,,,]);    // false

上述说明，undefined是有值的，而空位是没有值的

ES5对空位的处理很不一致，大多数会忽略空位，而ES6明确了空位转为undefined

Array.from()将数组的空位转为undefined，也就是这个方法不会忽略空位

console.log(Array.from(['a',,'b']));    // ["a", undefined, "b"]

扩展运算符(...)也会将空位转为undefined

console.log([...['a',,'b']]);   // ["a", undefined, "b"]

copyWithin()会连空位一起复制

console.log([,'a','b',,].copyWithin(2,0));  //[undefined × 1, "a", undefined × 1, "a"]

fill()将空位视为正常的位置

console.log(new Array(4).fill(3));  // [3, 3, 3, 3]

for...of循环也会遍历空位

let arr = [,,,];
for(let i of arr){
    console.log(1); // 1 1 1
}

keys() values() entries() find() findIndex()会将空位处理成undefined

console.log([...[,'a'].entries()]);
console.log([...[,'a'].keys()]);
// console.log([...[,'a'].values()]);   // 浏览器不支持values()

console.log([,'a'].find(x => true));    // undefined
console.log([,'a'].findIndex(x => true));   // 0

11. 数组推导

留着以后学