(精华)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)