es6中find()怎麼用 - tw511教學網

在es6中，find()用於通過回撥函數查詢陣列中符合條件的第一個元素的值，語法「array.find(function(...),thisValue)」。find()會為陣列中的每個元素都呼叫一次函數執行，當陣列中的元素在測試條件時返回true時，find()返回符合條件的該元素，之後的值不會再呼叫執行函數；如果沒有符合條件的元素返回undefined。

前端（vue）入門到精通課程：進入學習
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API偵錯工具：

本教學操作環境：windows7系統、ECMAScript 6版、Dell G3電腦。

es6 find()的介紹

find() 方法返回通過測試（函數內判斷）的陣列的第一個元素的值。

find() 方法為陣列中的每個元素都呼叫一次函數執行：

當陣列中的元素在測試條件時返回 true 時, find() 返回符合條件的元素，之後的值不會再呼叫執行函數。
如果沒有符合條件的元素返回 undefined

語法：

array.find(function(currentValue, index, arr),thisValue)
登入後複製

引數	描述
function(currentValue, index,arr)	必需。陣列每個元素需要執行的函數。函數引數:引數描述currentValue必需。當前元素index可選。當前元素的索引值arr可選。當前元素所屬的陣列物件
thisValue	可選。傳遞給函數的值一般用 "this" 值。如果這個引數為空， "undefined" 會傳遞給 "this" 值

返回值：返回符合測試條件的第一個陣列元素值，如果沒有符合條件的則返回 undefined。

注意:

find() 對於空陣列，函數是不會執行的。
find() 並沒有改變陣列的原始值。

基本使用

Array.prototype.find
返回第一個滿足條件的陣列元素

const arr = [1, 2, 3, 4, 5];
const item = arr.find(function (item) {
  return item > 3;
});

console.log(item);//4
登入後複製

如果沒有一個元素滿足條件返回undefined

const arr = [1, 2, 3, 4, 5];
const item = arr.find(function (item) {
  return item > 5;
});

console.log(item); //undefined
登入後複製

返回的元素和陣列對應下標的元素是同一個參照

const arr = [
  {
    id: 1,
    name: '張三',
  },
  {
    id: 2,
    name: '李四',
  },
  {
    id: 3,
    name: '王五',
  },
];

const item = arr.find((item) => item.name === '李四');
console.log(item);
登入後複製

在這裡插入圖片描述
回撥函數的返回值是boolean 第一個返回true的對應陣列元素作為find的返回值

const arr = [
  {
    id: 1,
    name: '張三',
  },
  {
    id: 2,
    name: '李四',
  },
  {
    id: 3,
    name: '王五',
  },
];
const item = arr.find(function (item) {
  return item.id > 1;
});
console.log(item);
登入後複製

在這裡插入圖片描述

回撥的引數

當前遍歷的元素當前遍歷出的元素對應的下標當前的陣列

const arr = [
  {
    id: 1,
    name: '張三',
  },
  {
    id: 2,
    name: '李四',
  },
  {
    id: 3,
    name: '王五',
  },
];
const item = arr.find(function (item, index, arr) {
  console.log(item, index, arr);
});
登入後複製

在這裡插入圖片描述

find的第二個引數

更改回撥函數內部的this指向

const arr = [
  {
    id: 1,
    name: '張三',
  },
  {
    id: 2,
    name: '李四',
  },
  {
    id: 3,
    name: '王五',
  },
];
const item = arr.find(
  function (item, index, arr) {
    console.log(item, index, arr);
    console.log(this);
  },
  { a: 1 }
);
登入後複製

在這裡插入圖片描述
如果沒有第二個引數
非嚴格模式下 this -> window

const arr = [
  {
    id: 1,
    name: '張三',
  },
  {
    id: 2,
    name: '李四',
  },
  {
    id: 3,
    name: '王五',
  },
];
const item = arr.find(function (item, index, arr) {
  console.log(item, index, arr);
  console.log(this);
});
登入後複製

在這裡插入圖片描述
在嚴格模式下
不傳入第二個引數 this為undefined 與嚴格模式規定相同

'use strict';
const arr = [
  {
    id: 1,
    name: '張三',
  },
  {
    id: 2,
    name: '李四',
  },
  {
    id: 3,
    name: '王五',
  },
];
const item = arr.find(function (item, index, arr) {
  console.log(item, index, arr);
  console.log(this);
});
登入後複製

在這裡插入圖片描述

稀疏陣列find

find會遍歷稀疏陣列的空隙 empty
具體遍歷出的值由undefined佔位

const arr = Array(5);
arr[0] = 1;
arr[2] = 3;
arr[4] = 5;
const item = arr.find(function (item) {
  console.log(item);
  return false;
});
登入後複製

在這裡插入圖片描述
而ES5陣列擴充套件方法forEach,map,filter,reduce,reduceRight,every,some 只會遍歷有值的陣列
find的遍歷效率是低於ES5陣列擴充套件方法的

find不會更改陣列

雖然新增了元素但是find會在第一次執行回撥函數的時候拿到這個陣列最初的索引範圍

const arr = [1, 2, 3, 4, 5];
const item = arr.find(function (item) {
  arr.push(6);
  console.log(item);
});
console.log(arr);
登入後複製

在這裡插入圖片描述

const arr = [1, 2, 3, 4, 5];
const item = arr.find(function (item) {
  arr.splice(1, 1);
  console.log(item);
});
console.log(arr);
登入後複製

在這裡插入圖片描述
splice 刪除對應項該項位置不保留在資料最後補上undefined

const arr = [1, 2, 3, , , , 7, 8, 9];
arr.find(function (item, index) {
  if (index === 0) {
    arr.splice(1, 1);
  }
  console.log(item);
});
登入後複製

在這裡插入圖片描述
delete
刪除該項的值並填入undefined

const arr = [1, 2, 3, , , , 7, 8, 9];
arr.find(function (item, index) {
  if (index === 0) {
    delete arr[2];
  }
  console.log(item);
});
登入後複製

在這裡插入圖片描述
pop
刪除該項的值並填入undefined

const arr = [1, 2, 3, , , , 7, 8, 9];
arr.find(function (item, index) {
  if (index === 0) {
    arr.pop();
  }
  console.log(item);
});
登入後複製

在這裡插入圖片描述

建立myFind

Array.prototype.myFind = function (cb) {
  if (this === null) {
    throw new TypeError('"this" is null');
  }
  if (typeof cb !== 'function') {
    throw new TypeError('Callback must be a function type');
  }
  var obj = Object(this),
    len = obj.length >>> 0,
    arg2 = arguments[1],
    step = 0;
  while (step < len) {
    var value = obj[step];
    if (cb.apply(arg2, [value, step, obj])) {
      return value;
    }
  }
  step++;
  return undefined;
};
登入後複製

【相關推薦：、】

以上就是es6中find()怎麼用的詳細內容，更多請關注TW511.COM其它相關文章！