ES6新增的陣列方法和物件方法

i涵涵發表於2019-02-21
陣列物件

（ES6新增的陣列方法和物件方法） 本節課，我們將會學習一些ES6新增的陣列方法。

find();查詢陣列某個元素
findIndex();查詢某個元素的索引值
some();陣列中是否有元素符合條件
every();陣列中是否所有的元素都符合條件
複製程式碼

以及物件方法

Object.assign(); 複製一個物件
Object.keys(); 得到一個物件的所有屬性；
Object.values(); 得到一個物件的所有可列舉屬性值；
Object.entries(); 得到一個物件的鍵值對陣列；
Object.fromEntries(); entries的逆操作；
複製程式碼

新增的陣列方法 find() 在開發當中，我們經常有一個需求就是去尋找陣列中的某個元素。那麼，使用我們之前學過的方法，無論使用哪一種。寫下的程式碼都不會很少。而且，為了避免效能的浪費，我們應該在找到符合的元素之後，就結束這個迴圈。那麼，就限制了我們只能使用for迴圈或者是for of去做這件事情。

var arr = [
    {
        name: "Tom",
        age: 18
    },
    {
        name: "Jerry",
        age: 19
    },
    {
        name: "Alex",
        age: 28
    }
]

let person;

for(let val of arr){
    if(val.name === "Jerry");
    person = val;
    break;
}
複製程式碼

那麼在ES6當中，查詢一個符合要求的元素將變得特別簡單。 我們可以使用find()函式來查詢陣列中符合要求的元素。該方法接收一個函式，函式的引數分別對應著 item,index,array

arr.find((item, index, arr) => {
    if(item == "Jerry"){
        return true;
    }
    else {
        return false;
    }
    
})
複製程式碼

當然，我們可以寫得更加優美的程式碼如下：

arr.find(item => item == "Jerry") findIndex 同樣的，有些時候，我們在迴圈外，想要獲得某個陣列元素的索引值，ES6同樣給我們提供了語義更清晰，更好用的findIndex。

我現在想要拿到名字是Alex的人在陣列中的index。那麼，使用findIndex可以這麼寫。

const index = arr.findIndex(item => name == "Alex");
複製程式碼

some some方法見名知意，就是為了檢視陣列中，是否有特定的元素滿足條件的。我現在的需求是想知道，陣列元素中，是否有一個人的年齡是大於20歲的。使用some方法可以快速的做到這件事。

arr.some(item => item.age > 20) //true
複製程式碼

該方法只要查詢到元素中有任何一個元素滿足條件，就會返回true

every every方法是針對於some方法的，該方法必須查詢到陣列中全部元素都滿足條件才回返回true，如果有一個不滿足條件，就返回false，並終止迴圈。

現在我想檢視是否所有人都大於17歲

arr.every(item => item.age>17); //true
複製程式碼

新增的物件方法 Object.assign() 該方法主要用於拷貝一個物件的屬性值到另一個物件。可以接受多個引數。該方法會直接修改第一個物件的屬性。並返回拷貝後的物件，需要注意的是，該方法實現的是淺拷貝。

var obj1 = {
        name: 'first',
        desc: 'second'
    }

var obj2 = {
        color: 'red',
        hop: 'go'
    }

var obj3 = {
        background: 'skyblue'
    }

var obj4 = Object.assign(obj1, obj2, obj3);
console.log(obj4)   
/*
background: "skyblue"
color: "red"
desc: "second"
hop: "go"
name: "first"*/
console.log(obj1)
/*
background: "skyblue"
color: "red"
desc: "second"
hop: "go"
name: "first"*/
複製程式碼

Object.keys(); 返回該物件的所有屬性名陣列；

var obj1 = {
        name: 'first',
        desc: 'second'
    }

console.log(Object.keys(obj1))

/*
0: "name"
1: "desc"
*/
複製程式碼

Object.values(); 返回該物件所有屬性值的陣列；

var obj1 = { name: 'first', desc: 'second' }

console.log(Object.values(obj1))

/*
0: "first"
1: "second"
*/
複製程式碼

Object.entries() 返回該物件的鍵值對陣列；

 var obj1 = {
            name: 'first',
            desc: 'second'
        }
    
console.log(Object.entries(obj1))

/*
["name", "first"],
["desc", "second"]
*/
複製程式碼

由於陣列也屬於物件，只是屬於比較特殊的物件，所以，陣列自身繼承了entries方法。所以該方法可以結合for of 以及陣列解構使for of迴圈迴圈陣列時，也能得到index值；

var arr = ["雞肉", "牛肉", "烤魚"];

for([index, value] of arr.entries()) {
    console.log("索引值", index);
    console.log("陣列項", value);
}
複製程式碼

image

Object.fromEntries(); 該方法是entries方法的逆運算，需要注意的是，支援該方法的瀏覽器並不多。

var obj = Object.fromEntries([
        ["property1", "value1"],
        ["property2", "value2"],
    ])

console.log(obj);
複製程式碼

image 可以通過增加Object原型物件方法實現polyfill.

Object.defineProperty(Object.prototype, "fromEntries", {
        enumerable: false,
        value(arr) {
            var obj = {};
            for(var i = 0; i < arr.length; i++) {
                obj[arr[i][0]] = arr[i][1]
            }
            return obj;
        },
        configurable: true,
        writable: true
    })複製程式碼

相關文章