コミュニティ
学ぶ
ツールライブラリ
AIツール
レジャー
検索
日本語
ホームページ > ウェブフロントエンド > フロントエンドQ&A > ES6でfind()を使用する方法

ES6でfind()を使用する方法

青灯夜游
リリース： 2022-10-28 19:20:50
オリジナル
2627 人が閲覧しました

es6 では、find() を使用して、コールバック関数を通じて条件を満たす配列内の最初の要素の値を検索します。構文は「array.find(function(...), thisValue」です。 ）」。 find() は、配列内の各要素に対して関数の実行を呼び出します。条件のテスト時に配列内の要素が true を返すと、find() は条件を満たす要素を返し、後続の値に対して実行関数は呼び出されません。 ; 一致する要素がない場合は、unknown が返されます。

ES6でfind()を使用する方法

このチュートリアルの動作環境: Windows 7 システム、ECMAScript バージョン 6、Dell G3 コンピューター。

es6 find() の概要

find() メソッドは、テストに合格した (関数内で判定された) 配列の最初の要素の値を返します。

find() メソッドは、配列内の要素ごとに関数の実行を 1 回呼び出します。

  • 条件のテスト時に配列内の要素が true を返すと、find( ) は条件を満たす要素を返し、それ以降の値は実行関数を呼び出しません。

  • #一致する要素がない場合は、未定義を返します

    • #構文: 

array.find(function(currentValue, index, arr),thisValue)
ログイン後にコピー

パラメータfunction(currentValue,index,arr)関数パラメータ: パラメータの説明 currentValue は必須です。現在の要素のインデックスはオプションです。現在の要素のインデックス値 arr はオプションです。現在の要素が属する配列オブジェクト thisValueこのパラメータが空の場合、「未定義」が「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);
ログイン後にコピー

ES6でfind()を使用する方法
回调函数的返回值是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);
ログイン後にコピー

ES6でfind()を使用する方法

回调的参数

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

const arr = [
  {
    id: 1,
    name: '张三',
  },
  {
    id: 2,
    name: '李四',
  },
  {
    id: 3,
    name: '王五',
  },
];
const item = arr.find(function (item, index, arr) {
  console.log(item, index, arr);
});
ログイン後にコピー

ES6でfind()を使用する方法

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 }
);
ログイン後にコピー

ES6でfind()を使用する方法
如果没有第二个参数
非严格模式下 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);
});
ログイン後にコピー

ES6でfind()を使用する方法
在严格模式下
不传入第二个参数 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);
});
ログイン後にコピー

ES6でfind()を使用する方法

稀疏数组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;
});
ログイン後にコピー

ES6でfind()を使用する方法
而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);
ログイン後にコピー

ES6でfind()を使用する方法

const arr = [1, 2, 3, 4, 5];
const item = arr.find(function (item) {
  arr.splice(1, 1);
  console.log(item);
});
console.log(arr);
ログイン後にコピー

ES6でfind()を使用する方法
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);
});
ログイン後にコピー

ES6でfind()を使用する方法
delete
删除该项的值 并填入undefined

const arr = [1, 2, 3, , , , 7, 8, 9];
arr.find(function (item, index) {
  if (index === 0) {
    delete arr[2];
  }
  console.log(item);
});
ログイン後にコピー

ES6でfind()を使用する方法
pop
删除该项的值 并填入undefined

const arr = [1, 2, 3, , , , 7, 8, 9];
arr.find(function (item, index) {
  if (index === 0) {
    arr.pop();
  }
  console.log(item);
});
ログイン後にコピー

ES6でfind()を使用する方法

创建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视频教程、编程视频】

以上がES6でfind()を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
javascript es6
ソース：php.cn
前の記事：es6のクラスの本質とは何ですか 次の記事：JavaScript が es に更新されました
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
3
2392
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
11
2522
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
2141
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
2017
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
2093
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
説明
必須。配列の各要素に対して実行する必要がある関数。
はオプションです。関数に渡される値は通常、「this」値を使用します。