Cara menggunakan find() dalam es6-Soal Jawab bahagian hadapan-php.cn

Cara menggunakan find() dalam es6

青灯夜游

Lepaskan： 2022-10-28 19:20:50

asal

2594 orang telah melayarinya

Dalam es6, find() digunakan untuk mencari nilai elemen pertama dalam tatasusunan yang memenuhi syarat melalui fungsi panggil balik, sintaksnya ialah "array.find(function(...), thisValue )". find() akan memanggil pelaksanaan fungsi untuk setiap elemen dalam tatasusunan Apabila elemen dalam tatasusunan mengembalikan benar apabila menguji keadaan, find() mengembalikan elemen yang memenuhi syarat, dan fungsi pelaksanaan tidak akan dipanggil untuk nilai berikutnya. ; Jika tiada unsur yang sepadan, undefined dikembalikan.

Cara menggunakan find() dalam es6

Persekitaran pengendalian tutorial ini: sistem Windows 7, ECMAScript versi 6, komputer Dell G3.

Pengenalan kepada es6 find()

Kaedah find() mengembalikan nilai elemen pertama tatasusunan yang melepasi ujian (penghakiman dalam fungsi). Kaedah

find() memanggil pelaksanaan fungsi sekali untuk setiap elemen dalam tatasusunan:

Apabila elemen dalam tatasusunan kembali benar apabila menguji keadaan, find( ) mengembalikan elemen yang memenuhi syarat, dan nilai seterusnya tidak akan memanggil fungsi pelaksanaan.
Jika tiada unsur padanan, kembalikan tidak ditentukan

Sintaks:

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

Salin selepas log masuk

Parameter

Penerangan

fungsi (currentValue, index,arr)

Diperlukan. Fungsi yang perlu dilaksanakan untuk setiap elemen tatasusunan.

参数	描述
function(currentValue, index,arr)	必需。数组每个元素需要执行的函数。函数参数:参数描述currentValue必需。当前元素index可选。当前元素的索引值arr可选。当前元素所属的数组对象
thisValue	可选。传递给函数的值一般用 "this" 值。如果这个参数为空， "undefined" 会传递给 "this" 值

Parameter fungsi: Perihalan parameter nilai semasa diperlukan. Indeks elemen semasa adalah pilihan. Arr nilai indeks bagi elemen semasa adalah pilihan. Objek tatasusunan yang dimiliki oleh elemen semasa

thisValue

Pilihan. Nilai yang dihantar kepada fungsi biasanya menggunakan nilai "ini". <🎜>Jika parameter ini kosong, "undefined" akan dihantar ke nilai "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

Salin selepas log masuk

如果没有一个元素满足条件返回undefined

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

console.log(item); //undefined

Salin selepas log masuk

返回的元素和数组对应下标的元素是同一个引用

const arr = [
  {
    id: 1,
    name: &#39;张三&#39;,
  },
  {
    id: 2,
    name: &#39;李四&#39;,
  },
  {
    id: 3,
    name: &#39;王五&#39;,
  },
];

const item = arr.find((item) => item.name === &#39;李四&#39;);
console.log(item);

Salin selepas log masuk

Cara menggunakan find() dalam es6
回调函数的返回值是boolean 第一个返回true的对应数组元素作为find的返回值

const arr = [
  {
    id: 1,
    name: &#39;张三&#39;,
  },
  {
    id: 2,
    name: &#39;李四&#39;,
  },
  {
    id: 3,
    name: &#39;王五&#39;,
  },
];
const item = arr.find(function (item) {
  return item.id > 1;
});
console.log(item);

Salin selepas log masuk

Cara menggunakan find() dalam es6

回调的参数

当前遍历的元素当前遍历出的元素对应的下标当前的数组

const arr = [
  {
    id: 1,
    name: &#39;张三&#39;,
  },
  {
    id: 2,
    name: &#39;李四&#39;,
  },
  {
    id: 3,
    name: &#39;王五&#39;,
  },
];
const item = arr.find(function (item, index, arr) {
  console.log(item, index, arr);
});

Salin selepas log masuk

Cara menggunakan find() dalam es6

find的第二个参数

更改回调函数内部的this指向

const arr = [
  {
    id: 1,
    name: &#39;张三&#39;,
  },
  {
    id: 2,
    name: &#39;李四&#39;,
  },
  {
    id: 3,
    name: &#39;王五&#39;,
  },
];
const item = arr.find(
  function (item, index, arr) {
    console.log(item, index, arr);
    console.log(this);
  },
  { a: 1 }
);

Salin selepas log masuk

Cara menggunakan find() dalam es6
如果没有第二个参数
非严格模式下 this -> window

const arr = [
  {
    id: 1,
    name: &#39;张三&#39;,
  },
  {
    id: 2,
    name: &#39;李四&#39;,
  },
  {
    id: 3,
    name: &#39;王五&#39;,
  },
];
const item = arr.find(function (item, index, arr) {
  console.log(item, index, arr);
  console.log(this);
});

Salin selepas log masuk

Cara menggunakan find() dalam es6
在严格模式下
不传入第二个参数 this为undefined 与严格模式规定相同

'use strict';
const arr = [
  {
    id: 1,
    name: &#39;张三&#39;,
  },
  {
    id: 2,
    name: &#39;李四&#39;,
  },
  {
    id: 3,
    name: &#39;王五&#39;,
  },
];
const item = arr.find(function (item, index, arr) {
  console.log(item, index, arr);
  console.log(this);
});

Salin selepas log masuk

Cara menggunakan find() dalam es6

稀疏数组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;
});

Salin selepas log masuk

Cara menggunakan find() dalam es6
而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);

Salin selepas log masuk

Cara menggunakan find() dalam es6

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

Salin selepas log masuk

Cara menggunakan find() dalam es6
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);
});

Salin selepas log masuk

Cara menggunakan find() dalam es6
delete
删除该项的值并填入undefined

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

Salin selepas log masuk

Cara menggunakan find() dalam es6
pop
删除该项的值并填入undefined

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

Salin selepas log masuk

Cara menggunakan find() dalam es6

创建myFind

Array.prototype.myFind = function (cb) {
  if (this === null) {
    throw new TypeError(&#39;"this" is null&#39;);
  }
  if (typeof cb !== &#39;function&#39;) {
    throw new TypeError(&#39;Callback must be a function type&#39;);
  }
  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;
};

Salin selepas log masuk

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

Atas ialah kandungan terperinci Cara menggunakan find() dalam es6. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!