2017.12.9-学习笔记：篇五之es6数组的扩展
数组的扩展
→点我去看基本的数组方法
→点我去看基本的字符串方法
→点我去看ES5新增的数组方法
→点我去看ES6新增的字符串方法
1.扩展运算符（...）
它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。
console.log(...[1, 2, 3])
// 1 2 3
console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5
- 该运算符主要用于函数调用，如替代数组的 apply 方法
function add(a, b, c) {
console.log(a + b + c);
}
let arr = [1, 2, 3];
add.apply(null, arr); // 6 ==> es5
add(...arr); // 6 ==> es6
Math.max.apply(null, [1, 2, 3]); // 3 ==> es5 写法
Math.max(...[1, 2, 3]); // 3 ==> ES6 写法
- 扩展运算符的应用
// 1.复制数组
const a = [1, 2];
const b = [...a];
const [...c] = a;
// 2.合并数组(取代concat)
var a = [1, 2];
var b = [3, 4];
a.concat(b); // [1,2,3,4] ==> es5 写法
[...a, ...b]; // [1,2,3,4] ==> es6 写法
// 3.与解构赋值结合，生成数组
let [a, ...b] = [1, 2, 3, 4]
a // 1
b // [2,3,4]
// 4.将字符串转为真正的数组
let str = "abc";
[...str] // ["a","b","c"];
Array.from('abc'); // ['a','b','c'];
str.split("").reverse().join(""); ==> es5 写法
[...str].reverse().join(""); ==> es6 写法
2.array.from
Array.from(arrayLike: ?, mapFn?: fn(elt: ?, i: number), thisArg?: ?)
-
参数
arg1：类似数组的对象
arg2：map 函数
arg3：绑定 map 函数内的 this -
该方法用于将两类对象转为正真的数组：类似数组的对象和遍历的对象( 包括 set 和 map )
let arrLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
};
var arr1 = [].slice.call(arrLike); // ["a", "b", "c"] ==> es5
let arr2 = Array.from(arrLike); // ["a", "b", "c"] ==> es6
-
实际应用中，常见的类似数组的对象是 DOM 操作返回的 NodeList 集合，以及函数内部的 arguments 对象
-
将字符串转为数组
Array.from('abc'); // ['a','b','c'];
[...'abc']; // ['a','b','c'];
'abc'.split(''); // ['a','b','c'];
-
扩展运算符背后调用的是遍历器接口(Symbol.iterator)，如果一个对象没有部署这个接口，就无法转换。Array.from方法还支持类似数组的对象。所谓类似数组的对象，本质特征只有一点，即必须有length属性。因此，任何有length属性的对象，都可以通过Array.from方法转为数组，而此时扩展运算符就无法转换。
-
Array.from还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组。
Array.from('123',x=>x+'a'); // ["1a", "2a", "3a"]
- 栗子，返回各种数据的类型
// 用arguments
function typesOf() {
return Array.from(arguments, p => typeof p)
}
typesOf(null, [], NaN, 'abc', undefined, {}); // ["object", "object", "number", "string", "undefined", "object"]
// 用rest参数
function typesOf(...rest) {
return Array.from(rest, p => typeof p)
}
typesOf(null, [], NaN, 'abc', undefined, {}); // ["object", "object", "number", "string", "undefined", "object"]
- 栗子，处理两次函数
Array.from({length:2},()=>'a'); // ["a", "a"]
将 Set 结构转为数组
let items = new Set([1, 2, 3]);
let array = Array.from(items);
3.array.of
1.该方法返回参数值组成的数组。如果没有参数，就返回一个空数组。
2.替代Array()或new Array()，并且不存在由于参数不同而导致的重载。
( 感觉没什么用,直接用中括号不就完了吗 [ ] )
4.数组实例的copyWithin
[].copyWithin(target: number, start: number, end?: number)
-
参数
arg1：从该位置开始替换数据
arg2：从该位置开始读取数据，默认为 0。如果为负值，表示倒数
arg3：到该位置前停止读取数据，默认等于数组长度。如果为负值，表示倒数 -
数组实例的copyWithin方法，在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组。也就是说，使用这个方法，会修改当前数组。
['a','b','c'].copyWithin(0,1); // ["b", "c", "c"];
5.数组实例的find和findIndex
- 找出第一个符合条件的数组成员（下标）(好像没什么使用场景)
[].find(callback: fn(element: ?, index: number, array: [?]) : bool, thisArg?: ?)
[].findIndex(callback: fn(element: ?, index: number, array: [?]), thisArg?: ?)
6.数组实例的fill
- 替换、填充数组
[].fill(value: ?, start?: number, end?: number)
9.数组实例的includes
[].includes(value: ?)
- 返回布尔值，判断某数组是否包含某个 value 值
- es5 中用
indexOf(value)===-1?来判断是否包含
编程风格之类数组对象转数组
let ps = document.querySelectorAll('p');
// es5
[].slice.call(ps).forEach(p=> {
console.log(p.innerText);
});
// es6
Array.from(ps).forEach(p=> {
console.log(p.innerText);
});
[...ps].forEach(p=>{console.log(p.innerText)});
