es6中find()如何用

這篇文章主要介紹“es6中find()如何用”，在日常操作中，相信很多人在es6中find()如何用問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”es6中find()如何用”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

在es6中，find()用于通過回調函數查找數組中符合條件的第一個元素的值，語法“array.find(function(...),thisValue)”。find()會為數組中的每個元素都調用一次函數執行，當數組中的元素在測試條件時返回true時，find()返回符合條件的該元素，之后的值不會再調用執行函數；如果沒有符合條件的元素返回undefined。

es6 find()的介紹

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

find() 方法為數組中的每個元素都調用一次函數執行：

• 當數組中的元素在測試條件時返回 true 時, find() 返回符合條件的元素，之后的值不會再調用執行函數。

• 如果沒有符合條件的元素返回 undefined

語法：

array.find(function(currentValue, index, arr),thisValue)

返回值：返回符合測試條件的第一個數組元素值，如果沒有符合條件的則返回 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()如何用”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！