ES6学习——数组的扩展
2017-05-07 本文已影响61人
椰果粒
总结
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
