使用場景

假如我們給vue元件綁定了一個班級的學生列表資料。其資料結構可能如下格式，如果你想從以下資料中查找出姓名為李四的學生的資訊。

var stu = [
    {
        name: '張三',
        gender: '男',
        age: 20
    },
    {
        name: '王小毛',
        gender: '男',
        age: 20
    },
    {
        name: '李四',
        gender: '男',
        age: 20
    }
]

這個時候肯定有些人想到了使用迴圈來查詢，當然這是一種辦法，也可以解決實際需求但是我們需要一種更為高效的方法。其實js的陣列操作方法真的非常非常多，多的你一時間感覺不知如何是好。那麼我們就這個場景來看看常用的方法吧。

關於find()的使用

find()是用來幹什麼的呢？

關於find()是幹什麼的我們來看看來自mozilla的 MDN Web docs的原文吧

The find() method returns the value of the first element in the array that satisfies the provided testing function. Otherwise undefined is returned.
find()方法返回陣列中符合測試函式條件的第一個元素。否則返回undefined
在這兒需要注意的幾個點：
①、第一個元素
②、測試函式

如何使用find()方法

既然需要測試函式

function getStu(element){
   return element.name == '李四'
}

stu.find(getStu)
//返回結果為
//{name: "李四", gender: "男", age: 20}

結合es6的改進

stu.find((element) => (element.name == '李四'))

在這兒主要是使用了es6的箭頭函式。使用起來非常非常方便。es6為js創造了很多可能喜歡的可以去看看es6的新特性。而且很多瀏覽器對es6的支援程度已經非常好了。