快速便捷把一个类似数组的可迭代对象创建成一个新的数组实例 只要一个对象有length,Array.from就能把它变成一个数组,返回新的数组
let likeArr = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
}
// ES5的写法
var arr1 = [].slice.call(likeArr) // ['a', 'b', 'c']
// ES6的写法
let arr2 = Array.from(likeArr) // ['a', 'b', 'c']
// NodeList对象
let div = document.querySelectorAll('div')
console.log(div); // NodeList(8) [div#cst, div, div.gb_3, …]
console.log(Array.from(div)); //(8) [div#cst, div, div.gb_3, …]
// arguments对象
function foo() {
var args = Array.from(arguments)
console.log(args)
}
foo(1,2,34,666,333,663) // [1, 2, 34, 666, 333, 663]
// String
Array.from('abc') // ["a", "b", "c"]
// Set
Array.from(new Set(['abc', 'def'])) // ["abc", "def"]
// Map
Array.from(new Map([[1, 'abc'], [2, 'def']])) // [[1, 'abc'], [2, 'def']]
Array.from({length: 10}, (v, i) => i) // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]复制代码
let arrayLike = [1,3,5]
Array.from(arrayLike, x => x + 1) // [2, 4, 6]
// 等同于
Array.from(arrayLike).map(x => x + 1) // [2, 4, 6]
Array() // []
Array(3) // [, , ,]
Array(3, 4, 5) // [3, 4, 5]
Array.of() // []
Array.of(undefined) // [undefined]
Array.of(3) // [3]
Array.of(3, 4, 5) // [3, 4, 5]
可以在当前数组内部,将指定位置的数组项复制到其他位置,会覆盖原数组项,然后返回当前数组。使用该方法会修改当前数组。
Array.prototype.copyWithin(target, start = 0, end = this.length)
它接受三个参数:
(1)target(必需):从该位置开始替换数据。如果为负值,表示倒数。
(2)start(可选):从该位置开始读取数据,默认为 0。如果为负值,表示倒数。
(3)end(可选):到该位置前停止读取数据,默认等于数组长度。如果为负值,表示倒数。
这三个参数都应该是数值,如果不是,会自动转为数值。
// 将3号位复制到0号位
['a','b','c','d','e','f','g'].copyWithin(0, 3, 4)
// ["d", "b", "c", "d", "e", "f", "g"]
// start、end 为负数的情况
['a','b','c','d','e','f','g'].copyWithin(0, -3, -1)
// ["e", "f", "c", "d", "e", "f", "g"]
[1,2,3,4,5].fill('a');
// ["a", "a", "a", "a", "a"]
new Array(3).fill(12)
// [12, 12, 12]
[1,2,3,4,5].fill('a',2,4);
// [1, 2, "a", "a", 5]
let arr = new Array(3).fill({name: "aaa"});
arr[0].name = "bbb";
console.log(arr) // [{name: "bbb"}, {name: "bbb"}, {name: "bbb"}]
let arr = new Array(3).fill([]);
arr[0].push("ccc");
console.log(arr) // [["ccc"], ["ccc"], ["ccc"]]
[1, 4, -5, 10].find((n) => n < 0)
// -5
[1, 4, -5, 10].find((n) => n < -10)
// undefined
[1, 5, 10, 15].find(function(value, index, arr) {
return value > 9;
})
// 10
[1, 5, 10, 15].find(function(value, index, arr) {
return console.log(value, index, arr)
})
1 0 [1, 5, 10, 15]
5 1 [1, 5, 10, 15]
10 2 [1, 5, 10, 15]
15 3 [1, 5, 10, 15]
[1, 5, 10, 15].findIndex(function(value, index, arr) {
return value > 9;
})
// 2
// ES5
if (arr.indexOf(el) !== -1) { }
// ES6
['a','b','c','d'].includes('c',2) //true
['a','b','c','d'].includes('c',3) //false
// 如果第二个参数为负数,则表示从倒数第几位向后搜索
['a','b','c','d'].includes('c',-1) //false (-1指的是倒数第一位'd')
['a','b','c','d'].includes('c',-2) //true (-2指的是倒数第二位'c')
for (let index of ['a', 'b', 'c'].keys()) {
console.log(index)
}
// 0
// 1
// 2
for (let elem of ['a', 'b', 'c'].values()) {
console.log(elem)
}
// 'a'
// 'b'
// 'c'
for (let [index, elem] of ['a', 'b', 'c'].entries()) {
console.log(index, elem)
}
// 0 "a"
// 1 "b"
// 2 "c"
[1, 2, [3, 4]].flat()
// [1, 2, 3, 4]
[1, 2, [3, [4, 5]]].flat(2)
// [1, 2, 3, 4, 5]
[1, [2, [3, [4]]]].flat(Infinity)
// [1, 2, 3, 4]
[2, 3, 4].flatMap((x) => [x, x * 2])
// [2, 4, 3, 6, 4, 8]
// 相当于 [[2, 4], [3, 6], [4, 8]].flat()
// 注:flatMap() 只能展开一层数组
- copyWithin、fill 会改变数组自身
- includes、flat、flatMap不会改变数组自身
- entries、keys、values、find、findeIndex属于数组遍历方法