So verwenden Sie find() in es6

In es6 wird find() verwendet, um den Wert des ersten Elements im Array zu finden, das die Bedingungen über die Rückruffunktion erfüllt. Die Syntax lautet „array.find(function(...),thisValue)“. find() ruft eine Funktionsausführung für jedes Element im Array auf. Wenn ein Element im Array beim Testen der Bedingung „true“ zurückgibt, gibt find() das Element zurück, das die Bedingung erfüllt, und die Ausführungsfunktion wird für nachfolgende Werte nicht aufgerufen ; Wenn keine passenden Elemente vorhanden sind, wird undefiniert zurückgegeben.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, ECMAScript Version 6, Dell G3-Computer.

es6 Einführung in find()

Die Methode find() gibt den Wert des ersten Elements des Arrays zurück, das den Test besteht (beurteilt innerhalb der Funktion). Die Methode

find() ruft für jedes Element im Array einmal eine Funktionsausführung auf:

• Wenn die Elemente im Array beim Testen der Bedingung „true“ zurückgeben, gibt find() das Element zurück, das die Bedingung erfüllt, und nachfolgende Werte ​​wird nicht Rufen Sie dann die Ausführungsfunktion auf.

• Wenn kein passendes Element vorhanden ist, geben Sie undefiniert zurück

Syntax:

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

Parameter	Beschreibung
Funktion (aktueller Wert, Index, arr)	Erforderlich. Die Funktion, die für jedes Element des Arrays ausgeführt werden muss. Funktionsparameter: Parameterbeschreibung currentValue ist erforderlich. Der aktuelle Elementindex ist optional. Der Indexwert arr des aktuellen Elements ist optional. Das Array-Objekt
thisValue	optional, zu dem das aktuelle Element gehört. Der an die Funktion übergebene Wert verwendet normalerweise den Wert „this“. Wenn dieser Parameter leer ist, wird „undefiniert“ an den „this“-Wert übergeben

返回值：返回符合测试条件的第一个数组元素值，如果没有符合条件的则返回 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;
};

【相关推荐：javascript视频教程、编程视频】

Das obige ist der detaillierte Inhalt vonSo verwenden Sie find() in es6. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!