ES6学习之数组

扩展运算符

定义

扩展运算符(spread)是三个点(…),作用是将一个数组转化为用逗号分隔的参数序列。
e: …[1, 2, 3] // 1 2 3
该运算符主要用于函数调用。

应用

1. 复制数组
    不采用ES5的cancat()来合并数组,而是直接采用扩展运算符来做。
        const a1 = [1, 2 , 3];
        //第一种写法
        const a2 = [...a1];
        //第二种写法
        const [...a3] = a1;
2. 合并数组
    ES5中同样采用的concat()这个方法,但是在ES6中可采用如下写法:
const a1 = [1, 2, 3];
const a2 = [2, 2, 3];
const a3 = [...a1, ...a2];// [1,2,3,2,2,2,3]
3.与解构赋值结合
const [a1, ...a2] = [1, 2, 3];
//a1: 1, a2: [2, 3]
4.字符串转化为数组
[...'hello']; //['h','e','l','l','o']

数组API

Array.from()

可将类数组对象以及可遍历对象转化为数组
注:之前提的扩展运算符也可以转化数组,与此方法不同的是,此方法只要有对象length就可以进行转化;

Array.of()

将一组值转化为数组,主要是来替代Array()在传参不传参时不统一的问题,基本可以替代Array()以及new Array()。

copyWith()

数组实例的copyWithin方法,在当前数组内部,将指定位置的成员复制到其他位置(会覆盖原有成员),然后返回当前数组。也就是说,使用这个方法,会修改当前数组。

Array.prototype.copyWithin(target, start = 0, end = this.length)
它接受三个参数。

target(必需):从该位置开始替换数据。如果为负值,表示倒数。
start(可选):从该位置开始读取数据,默认为 0。如果为负值,表示倒数。
end(可选):到该位置前停止读取数据,默认等于数组长度。如果为负值,表示倒数。
这三个参数都应该是数值,如果不是,会自动转为数值。

find() findIndex()

数组实例的find方法,用于找出第一个符合条件的数组成员。它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该成员。如果没有符合条件的成员,则返回undefined。

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

注:可用于筛选出数组中的 个别元素。

 {
     id: 1, 
     title: 'Title 1'
},
{
    id: 2, 
    title: 'Title 2'
},//逗号也是ES6新语法,便于扩展,减少git更改记录
];
// find the title of post whose id is 1

const title = posts.find(p => p.id === 1).title;

数组实例的entries(), keys(), values()

ES6 提供三个新的方法——entries(),keys()和values()——用于遍历数组。它们都返回一个遍历器对象,可以用for…of循环进行遍历,唯一的区别是keys()是对键名的遍历、values()是对键值的遍历,entries()是对键值对的遍历。

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"

includes()

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

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

该方法的第二个参数表示搜索的起始位置,默认为0。如果第二个参数为负数,则表示倒数的位置,如果这时它大于数组长度(比如第二个参数为-4,但数组长度为3),则会重置为从0开始.

注意:
与indexOf()的区别:
indexOf方法有两个缺点,一是不够语义化,它的含义是找到参数值的第一个出现位置,所以要去比较是否不等于-1,表达起来不够直观。二是,它内部使用严格相等运算符(===)进行判断,这会导致对NaN的误判。

http://es6.ruanyifeng.com/#docs/array(学习笔记)

猜你喜欢

转载自blog.csdn.net/junjunaijiji/article/details/79311928
今日推荐