(精华)2020年7月3日 JavaScript高级篇 ES6(数组的扩展方法)

展开运算符 … 拆包

函数调用的体现

function f(a,b,c){} var args = [1,2,3] // f.apply(null,args) // 拆包 f(...args)

后面可以放表达式

let a = 1; const arr = [ ...(a>0? ['a']: []) ]

替代函数的apply方法

// 思考连接两个数组的方法 let arr1 = [1,2,3] let arr2 = [4,5,6] console.log(arr1.concat(arr2)); console.log(arr1); // es5 解决办法 Array.prototype.push.apply(arr1,arr2); // es6 // (...arr1) += (...arr2) // 扩展运算符只有函数调用的时候才可以放在圆括号当中 // (...[1,2]) // console.log((...[1,2])); arr1.push(...arr2);

复制数组

const a1 = [1,2] const a2 = a1;// 复制 console.log(a1 === a2);// 指向同一个房间 // 浅克隆是长得一样 但是地址不一样 const a3 = a1.concat()// 浅拷贝 console.log(a3); console.log(a1 === a3);// 没有指向同一个房间 const a4 = [...a1] console.log(a4); console.log(a4 === a1);// 浅拷贝 // 展开运算符是浅拷贝 而不是 深拷贝 let arr = [{a:1},2,3] // let arr1 = [...arr] // 是深拷贝嘛？ // arr1[0].a = 2 // // 如果此时arr[0].a = 2 说明是浅拷贝 不等于2 说明是深拷贝 // console.log(arr); // 深拷贝 除了递归能实现 let arr2 = JSON.parse(JSON.stringify(arr)) arr2[0].a = 2; // 如果此时arr[0].a = 2 说明是浅拷贝 不等于2 说明是深拷贝 console.log(arr);

…打包

// const [first,...arr] = [1,2,3,4,5] // console.log(arr); // const [o,...s] = []; // console.log(o) // undefined // console.log(s) // [] // 只能放在参数的最后一位 // const [...arr,first] = [1,2,3,4,5]

Array.from()

// Array.from() 用于把类数组对象转化成真正的数组 // 部署了 iterator 接口 都可以用Array.from()转化成真正的数组 // 有 length属性 没有数组操作的一些方法 push function get(a,b,c){ console.log(arguments); console.log(Array.from(arguments)); } get(1,2,3) const copyArr = { '0':'a', '1':'b', length:2 } console.log(Array.from(copyArr));

Array.of()

// 可以将一组值转化成数组 console.log(Array.of(2,3,4,5)); // ？ 弥补数组构造函数的一些不足 console.log(Array(3).length); // 当参数不少于2个时候 console.log(Array(1,2,3)); console.log(Array.of(3));

copyWithin()

// copyWithin() // 1 必须要传的 从该位置开始替换数据 // 2 start 从该位置读取数据 默认是0 // 3 end console.log([1,2,3,4,5].copyWithin(0,3)); // [4,5,3,4,5]

find() ，findIndex()

let arr = [1,2,3,-1,-2,45] let res = arr.find(function(i){ return i<0 }) console.log(res); let resIndex = arr.findIndex(function(i){ return i<0 }) console.log(resIndex)