Rumah > Artikel > hujung hadapan web > Cara menggunakan find() dalam es6
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.
Persekitaran pengendalian tutorial ini: sistem Windows 7, ECMAScript versi 6, komputer Dell G3.
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)
Parameter | Penerangan | ||||||
---|---|---|---|---|---|---|---|
fungsi (currentValue, index,arr) | Diperlukan. Fungsi yang perlu dilaksanakan untuk setiap elemen tatasusunan.
|
||||||
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
如果没有一个元素满足条件 返回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); });
更改回调函数内部的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会遍历稀疏数组的空隙 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会在第一次执行回调函数的时候 拿到这个数组最初的索引范围
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); });
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 <p>【相关推荐:<a href="https://www.php.cn/course/list/17.html" target="_blank" textvalue="javascript视频教程">javascript视频教程</a>、<a href="https://www.php.cn/course.html" target="_blank" textvalue="编程视频">编程视频</a>】</p>
Atas ialah kandungan terperinci Cara menggunakan find() dalam es6. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!