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