ES6基础之数组和对象的拓展实例详解

本文实例讲述了ES6基础之数组和对象的拓展。分享给大家供大家参考，具体如下：

数组的扩展

1.拓展运算符（'...'），它相当于rest参数的逆运算，用于将一个数组转换为用逗号分隔的参数序列；

console.log(...[1, 2, 3])// 1 2 3console.log(1, ...[2, 3, 4], 5)// 1 2 3 4 5

2.如果扩展运算符后面是一个空数组，则不产生任何效果；

[...[], 1]// [1]

3.常见的拓展运算符的应用：

//合并数组let arr1 = [1,2];let arr2 = [3,4];let arr3 = [5,6];let newArr = [...arr1 , ...arr2 , ...arr3]; //等同于ES5 [].concat( arr1 , arr2 , arr3 )// [1,2,3,4,5,6]//与解构赋值结合（用于生成数组）const [ val , ...rest] = [1, 2, 3, 4, 5];val // 1rest // [2, 3, 4, 5]//将字符串转为真正的数组let str = 'mine';[...str] // ["m","i","n","e"]//可以将类数组转化成正真的数组 let arrayLike = {  0 : 'div.class1' ,  1 : 'div.class2' ,  2 : 'div.class3' ,  length : 3}console.log([...arrayLike]) // ["div.class1","div.class2","div.class3"]

4.新增 Array.from 方法，可以将类似数组的对象（array-like object）和可遍历（iterable）的对象转化成真正的数组；该方法还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组；

let arr = [ 1 , 2 , 3];arr.map( x => x * x);// [ 1 , 4 , 9 ]Array.from(arr, (x) => x * x)// [ 1 , 4 , 9 ]

5.新增 Array.of 方法 ，用于将一组值，转换为数组（该方法基本上可以用来替代Array()或new Array()，避免出现参数不同而导致的重载）；

//传统ArrayArray() // []Array(3) // [, , ,]Array(1, 2, 3) // [1, 2, 3]//Array.ofArray.of() // []Array.of(undefined) // [undefined]Array.of(1) // [1]Array.of(1, 2) // [1, 2]

6.数组实例方法 find() 用于找出第一个符合条件的数组成员，该方法的参数是一个回调函数，该回调函数可以接收三个参数，依次是当前元素，当前元素索引，数组本身；如果查找成功，返回符合条件的第一个成员，如果没有符合条件的成员，则返回undefined；

var arr = [1, 2, 4, 5];var r = arr.find(function( element , index , self ){  return element % 2 == 0;})r // 2

7.数组实例方法 findIndex() , 该方法的参数与 find() 一样 ， 不同的是该方法 返回的是第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1;

var arr = [1, 2, 4, 5];var r = arr.find(function( element , index , self ){  return element % 2 == 0;})r // 1

ps：find() 和 findIndex() 这两个方法都可以发现NaN，弥补了数组的IndexOf方法的不足。