ES6数组的扩展

今天培训了,只能自己看这些东西啦。一天时间又过去了。现在文章,或者我的印象笔记都是采用Markdown 来写了, 是不是看起来比较整洁了。有点想改用Hexo, 看着很不错,markdown 也写得比较有意思 貌似。 一直想弄 ,但是又怕麻烦。

Array.from
1
2
3
4
5
6
7
8
9
10
11
12
13
14
let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
};
// ES5的写法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']
等同于:
var arr1 = Array.prototype.slice.call(arrayLike); // ['a', 'b', 'c']
// ES6的写法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

查看之前文章Array.prototype.slice.call介绍

不过,对象数组的写法需要严格按照规范写,比如:

1
2
3
4
var foo = {0:'hello',1:'world',length:4};
Array.prototype.slice.call(foo); // ["hello", "world", undefined × 2]
Array.from(arrayLike); // ["hello", "world", undefined, undefined]

Array.from() 的第一个参数决定第二个参数的执行次数,

1
2
Array.from({ length: 3 }); // [undefined, undefined, undefinded]
Array.from({length:3},() =>'binjs'); // ['binjs', 'binjs', 'binjs']

Array.from() 还可以接受第二个参数,作用类似于数组的map方法,用来对每个元素进行处理,将处理后的值放入返回的数组。

1
2
3
4
5
6
Array.from(arrayLike, x => x * x);
// 等同于
Array.from(arrayLike).map(x => x * x);
Array.from([1, 2, 3], (x) => x * x)
// [1, 4, 9]

只要是部署了Iterator接口的数据结构,Array.from都能将其转为数组。

1
2
3
4
Array.from('hello'); // ['h', 'e', 'l', 'l', 'o']
let namesSet = new Set(['a', 'b']);
Array.from(namesSet); // ['a', 'b']

Array.of

方法用于将一组值,转换为数组。

1
2
3
4
Array.of() // []
Array.of(undefined) // [undefined]
Array.of(1) // [1]
Array.of(1, 2) // [1, 2]
includes

与字符串的includes方法类似

1
[1,2,3].includes(1); // true

ind() 和 findIndex()

find() 返回数组中满足测试条件的一个元素,如果没有满足条件的元素,则返回 undefined

1
[1, 4, -5, 10].find((n) => n < 0)

find方法的回调函数可以接受三个参数,依次为当前的值、当前的位置和原数组。

1
2
3
4
5
[1, 3, 5].find(function(value, index, arr) {
console.log(value);
console.log(index);
console.log(arr);
})

findIndex() 用来查找指定的索引,如果找不到指定的元素, 则返回 -1

1
2
3
[1, 5, 10, 15].findIndex(function(value, index, arr) {
return value > 9;
}) // 2
fill()

fill() 用来进行数组的填充 ,第二和第三个参数表示开始和结束位置

1
2
['a', 'b', 'c'].fill(7, 0, 1) //[7, "b", "c"]
['a', 'b', 'c'].fill(7, 0, 2) // [7, 7, "c"]

fill() 可以用来初始化一个数组

1
2
3
4
5
['a', 'b', 'c'].fill(7)
// [7, 7, 7]
new Array(3).fill(7)
// [7, 7, 7]
0%