【ES6系列】數組 Array

一、ES5 中數組遍歷有多少種方法？它們有什麼優勢和缺點？

1、for 循環 - 支持 break 和 continue

2、forEach - ES5 新增 不支持 break 和 continue

3、every - ES5 新增 是否繼續遍歷取決於函數返回值，默認返回 false，return true 會使循環繼續

4、for in - ES5 新增 爲 object 遍歷 支持 break 和 continue，for in 可以遍歷數組的兩個因素：1、數組是對象 2、數組是可遍歷的

5、for of - 遍歷 ES6 自定義數據（類型）對象

// 方法一：for 循環 - 支持 break 和 continue
const arr = [1, 2, 3, 4, 5]
for (let i = 0; i < arr.length; i++) {
    if (arr[i] === 2) {
        //break //退出當前循環
        continue //跳過當前項
    }
    // console.log(arr[i])
}

// 方法二：forEach - ES5 新增 不支持 break 和 continue
arr.forEach(function (item) {
    if (item === 2) {
        //continue
    }
    // console.log(item)
})
//for 循環 和 forEach 有什麼區別？for 循環支持 break 和 continue

// 方法三：every - ES5 新增 是否繼續遍歷取決於函數返回值，默認返回 false，return true 會使循環繼續
arr.every(function (item) {
    if (item === 2) {
        return false
    }
    // console.log(item)
    return true
})

// 方法四：for in - ES5 新增 爲 object 遍歷 支持 break 和 continue
// for in 可以遍歷數組的兩個因素：1、數組是對象 2、數組是可遍歷的
// arr.a = 8
for (let index in arr) { // index 的數據類型是字符串
    //if (index == 2) { //不判斷數據類型
    if (index * 1 === 2) { //第二種方式
        //continue
        break
    }
    // console.log(index, arr[index])
}

// 方法五：for of - 遍歷 ES6 自定義數據（類型）對象
//for (variable of iterator) { //for…of 遍歷的是一切可遍歷的元素（數組、對象、集合）等.

//}
for (let item of arr) {
    // console.log(item)
}

const Price = {
    A: [3, 6, 7],
    B: [5, 7, 9],
    C: [9, 1, 5]
}

二、ES5中如何將僞數組轉換成數組？什麼是僞數組（Array-Like）？

DOM 中的 nodeList 集合、不定參 arguments，具備數組的特性如：長度、按索引方式儲存數據（可遍歷），它們和數組很像但是不具有數組擁有的方法，如：

let arrLike = {
0: ‘a’,
1: ‘b’,
2: ‘c’,
length: 3
}

僞數組轉換成數組傳統的做法是這樣的：

let args = [].slice.call(arguments); 

let imgs = [].slice.call(document.querySelectorAll('img'));

基本原理是使用 call 將數組的 api 應用在新的對象上，換句話說是利用改變函數的上下文來間接使用數組的 api。在 ES6 中提供了新的 api 來解決這個問題，就是 Array.from

let args = Array.from(arguments);
let imgs = Array.from(document.querySelectorAll('img'));

 

Array.from語法：Array.from(arrayLike[, mapFn[, thisArg]])

參數	含義	必選
arrayLike	想要轉換成數組的僞數組對象或可迭代對象	Y
mapFn	如果指定了該參數，新數組中的每個元素會執行該回調函數	N
thisArg	可選參數，執行回調函數 mapFn 時 this 對象	N

ES5實現：初始化一個長度爲 5 的數組，每個數組元素默認爲 1

let arr = Array(6).join(' ').split('').map(item=>1)
// [1,1,1,1,1]

Array.form 實現會更簡潔、更易理解：

Array.from({ length: 5 }, function () { return 1 })

三、ES5中創建一個新數組如何實現？ES6如何實現？

ES5生成新數組的兩種方法：
// 方法一：生成一個長度爲5，每個元素爲空的數組
let array = Array(5); 

// 方法二：字面量對象，不能指定長度
let array = []; 

// ES6中生成新數組的方法：
// 方法一：Array.from
Array.from({ length: 5 }, function () { return 1 }) //上述方法

// 方法二：Array.prototype.of // ES6 允許快速將 n 個元素放到指定數組
// 業務場景：將多個元素放下數組，ES5 的實現方式是往事先聲明的數組裏依次 push 元素，ES6 可以用 Array.of 實現
let array = Array.of(1, 2, 3, 4, 5) 
console.log(array) // [1, 2, 3, 4, 5]

//方法三：Array.prototype.fill //填充數組
// 業務場景：聲明一個長度爲5的數組並將每一個元素都初始化爲 1
let array = Array(5).fill(1) // 比 Array.from 更簡潔
console.log(array) //[1, 1, 1, 1, 1]

Array.fill 語法：arr.fill(value[, start[, end]])

參數	含義	必選
value	用來填充數組元素的值	Y
start	起始索引，默認值爲0	N
end	終止索引，默認值爲 this.length	N

 

四、ES5 中如何查找一個元素？ES6 中如何實現？

// ES5 方法一：filter 找到與否都返回一個數組，通過判斷數組長度來確定是否有要查找的元素
// filter特性：會把所有滿足條件的元素都查找出來
// filter缺點：當業務需要驗證某元素是否存在時性能不夠高效(根據業務場景選擇使用哪種方式，缺點只是相對而言)
let array = [1, 2, 3, 4, 5]
// let find = array.filter(function (item) {
//     return item === 3
//     // return item === 6 //[]
// })
// console.log(find) //[3]

// ES5 其它查找元素方法待延伸

// ES6 方法一：Array.prototype.find
// find特性：找到滿足條件的第一個元素即返回，不再繼續查找
let find = array.find(function (item) {
    // return item === 2
    // return item === 6 // undefined
    return item % 2 == 0 // 2
})
console.log(find) // 2
// filter 和 find的區別：filter 關注的是滿足條件的所有值，而 find 關注的是滿足條件的第一個值，找到即返回。

// Array.prototype.findIndex 要查找的元素在數組中的索引值
let find = array.findIndex(function (item) {
    // return item === 2
})
console.log(find) // 1

ES5 filter 和 ES6 find的區別：filter 關注的是滿足條件的所有值，而 find 關注的是滿足條件的第一個值，找到即返回。此外，ES6 還提供了 Array.prototype.findIndex 此方法返回要查找的元素在數組中的索引值