ES6之主要知识点数组

Posted 坚持不懈?

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ES6之主要知识点数组相关的知识,希望对你有一定的参考价值。

引自http://es6.ruanyifeng.com/#docs/array

1.扩展运算符(...)

扩展运算符(spread)是三个点(...)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列。

该运算符主要用于函数调用。

function push(array, ...items) {
  array.push(...items);
}

function add(x, y) {
  return x + y;
}

var numbers = [4, 38];
add(...numbers) // 42

替代数组的 apply 方法

由于扩展运算符可以展开数组,所以不再需要apply方法,将数组转为函数的参数了。

// ES5 的写法
function f(x, y, z) {
  // ...
}
var args = [0, 1, 2];
f.apply(null, args);

// ES6的写法
function f(x, y, z) {
  // ...
}
var args = [0, 1, 2];
f(...args);

扩展运算符的应用

(1)合并数组

// ES5的合并数组
arr1.concat(arr2, arr3);
// [ ‘a‘, ‘b‘, ‘c‘, ‘d‘, ‘e‘ ]

// ES6的合并数组
[...arr1, ...arr2, ...arr3]
// [ ‘a‘, ‘b‘, ‘c‘, ‘d‘, ‘e‘ ]

 

(2)与解构赋值结合‘

// ES5
a = list[0], rest = list.slice(1)
// ES6
[a, ...rest] = list

(3)字符串

正确识别32位的Unicode字符。

x\uD83D\uDE80y.length // 4
[...x\uD83D\uDE80y].length // 3

(4)Map 和 Set 结构,Generator 函数

let map = new Map([
  [1, one],
  [2, two],
  [3, three],
]);

let arr = [...map.keys()]; // [1, 2, 3]
var go = function*(){
  yield 1;
  yield 2;
  yield 3;
};

[...go()] // [1, 2, 3]

2.Array.from()

Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和

可遍历(iterable)的对象(包括ES6新增的数据结构Set和Map)。

let arrayLike = {
    0: a,
    1: b,
    2: c,
    length: 3
};

// ES5的写法
var arr1 = [].slice.call(arrayLike); // [‘a‘, ‘b‘, ‘c‘]

// ES6的写法
let arr2 = Array.from(arrayLike); // [‘a‘, ‘b‘, ‘c‘]

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

Array.from(arrayLike, x => x * x);
// 等同于
Array.from(arrayLike).map(x => x * x);

Array.from([1, 2, 3], (x) => x * x)

3.Array.of()

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

Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1

Array.of基本上可以用来替代Array()new Array(),并且不存在由于参数不同而导致的重载。它的行为非常统一。

4.数组实例的 copyWithin()

Array.prototype.copyWithin(target, start = 0, end = this.length)

它接受三个参数。

  • target(必需):从该位置开始替换数据。
  • start(可选):从该位置开始读取数据,默认为0。如果为负值,表示倒数。
  • end(可选):到该位置前停止读取数据,默认等于数组长度。如果为负值,表示倒数。
[1, 2, 3, 4, 5].copyWithin(0, 3)
// [4, 5, 3, 4, 5]

 

5.数组实例的 find() 和 findIndex()

数组实例的find方法,用于找出第一个符合条件的数组成员。它的参数是一个回调函数,所有数组成员依次执行该回调函数,

直到找出第一个返回值为true的成员,然后返回该成员。如果没有符合条件的成员,则返回undefined

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

数组实例的findIndex方法的用法与find方法非常类似,返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1

6.数组实例的fill()

fill方法使用给定值,填充一个数组。

[a, b, c].fill(7)
// [7, 7, 7]

new Array(3).fill(7)
// [7, 7, 7]

7.数组实例的 entries(),keys() 和 values()

for (let index of [a, b].keys()) {
  console.log(index);
}
// 0
// 1

for (let elem of [a, b].values()) {
  console.log(elem);
}
// ‘a‘
// ‘b‘

for (let [index, elem] of [a, b].entries()) {
  console.log(index, elem);
}
// 0 "a"
// 1 "b"

8.数组实例的 includes()

Array.prototype.includes方法返回一个布尔值,表示某个数组是否包含给定的值,与字符串的includes方法类似

[1, 2, 3].includes(2)     // true
[1, 2, 3].includes(4)     // false
[1, 2, NaN].includes(NaN) // true

该方法的第二个参数表示搜索的起始位置,默认为0。如果第二个参数为负数,则表示倒数的位置、

indexOf方法有两个缺点,一是不够语义化,它的含义是找到参数值的第一个出现位置,所以要去比较是否不等于-1,表达起来不够直观。

二是,它内部使用严格相等运算符(===)进行判断,这会导致对NaN的误判。[NaN].indexOf(NaN)

 

以上是关于ES6之主要知识点数组的主要内容,如果未能解决你的问题,请参考以下文章

ES6系列_6之新增的数组知识

ES6知识点整理之----数组扩展----API新增

ES6之主要知识点(三)字符串

ES6之主要知识点Symbol

ES6之主要知识点Proxy

ES6之主要知识点(五)函数