学习es6时做得小笔记
// Array.from() 将对象(object,Set,Map,iterable)转为真正的数组
let arrayObj = {
'0': 2,
length: 1 //必须要
};
// ES5的写法
var arr1 = [].slice.call(arrayObj); // ["a"]
// ES6的写法
let arr2 = Array.from(arrayObj); // ["a"]
// ES6 set
let arr3 = Array.from(new Set([1, 2, 3, 4, 4])); // [1, 2, 3, 4]
// 实际应用
// DOM操作返回的NodeList集合,将它们转为真正的数组
let divDomArray = document.querySelectorAll('div');
Array.from(divDomArray).forEach(function(divDom) {
//console.log(divDom);
});
// arguments对象
function foo() {
let args = Array.from(arguments);
}
// 扩展运算符(`...`)也可以将某些数据结构转为数组
function foo() {
let args = [...arguments];
}
var divDomArray2 = [...divDomArray];
// 应用
Array.from(arrayObj, x => x * x);
// 等同于
Array.from(arrayObj).map(x => x * x);
Array.from([1, , 2, , 3], (n) => n || 0);
// 返回各种数据的类型
function typesOf() {
return Array.from(arguments, value => typeof value)
}
// Array.of()
// 将一组值,转换为数组。
Array.of(3, 11, 8) // [3,11,8]
// 数组实例的find()和findIndex()
// 用于找出第一个符合条件的数组成员。它的参数是一个回调函数,
// 所有数组成员依次执行该回调函数,直到找出第一个返回值为`true`的成员,
// 然后返回该成员。如果没有符合条件的成员,则返回`undefined`。
[1, 4, -5, 10].find((n) => n < 0)
// -5
// 回调函数可以接受三个参数,依次为当前的值、当前的位置和原数组
[1, 5, 10, 15].find(function(value, index, arr) {
return value > 9;
}) // 10
// 数组实例的fill()
// 填充数组
['a', 'b', 'c'].fill(7)
// [7, 7, 7]
// 数组实例的includes()
[1, 2, 3].includes(2); // true
[1, 2, 3].includes(4); // false
[1, 2, NaN].includes(NaN); // true
/*
另外,Map和Set数据结构有一个`has`方法,需要注意与`includes`区分。
- Map结构的`has`方法,是用来查找键名的,
比如`Map.prototype.has(key)`、`WeakMap.prototype.has(key)`、`Reflect.has(target, propertyKey)`。
- Set结构的`has`方法,是用来查找值的,
比如`Set.prototype.has(value)`、`WeakSet.prototype.has(value)`。
*/
// 空位转为`undefined`