JavaScript学習メモ：配列(7)_html/css_WEB-ITnose

配列を使用すると、常に配列のトラバーサル (反復) 操作が発生します。反復といえば、配列を反復する for ステートメントをすぐに思い浮かべるかもしれません。たとえば、次の配列 peoples で年齢 (年齢) が 30 を超える人の名前を反復処理する必要があります。

var peoples = [    {        name: 'Agraj',        gender:'M',        age: 29,        address:        {            city: 'Delhi',            pincode: '110064'        }    },    {        name: 'Mark',        gender:'M',        age: 35,        address:        {            city: 'West Bengal',            pincode: '220013'        }    },    {        name: 'Lance',        gender:'M',        age: 39,        address:        {            city: 'Chandigarh',            pincode: '201201'        }    },    {        name: 'Vikas',        gender:'M',        age: 21,        address:        {            city: 'Noida',            pincode: '201301'        }    },    {        name: 'Kanika',        gender:'F',        age: 21,        address:        {            city: 'Noida',            pincode: '201301'        }    }];for (var i = 0; i < peoples.length; i++ ) {    if (peoples[i].age > 30) {        console.log(peoples[i].name + ':' + peoples[i].age);    }}

Chrome ブラウザによって出力された結果:

Mark:35Lance:39

実際、ES5 では配列の 5 つの反復メソッドが定義されています:

• forEach() : 戻り値はなく、各配列項目に対して指定された関数 (callbackfn) を呼び出すだけです
• each() : 各配列項目が指定された関数の条件を満たすかどうかを判断するためのブール値 (true または false) を返します。条件を満たしている場合は true、そうでない場合は false です。 )
: ブール値 (true または false) を返し、各配列項目が指定された関数の条件を満たすかどうかを判断します。いずれかの項目が true を返す限り、true を返します。
• filter()
: 各配列項目を呼び出します。指定された関数、条件が true の場合、新しい配列に返されます
• map()
: 各配列項目は指定された関数を呼び出し、各関数呼び出しの結果を返して新しい配列を形成します
• これら 5 つの配列のうち反復メソッド、forEach ()、every()、および some() メソッドは新しい配列を生成しませんが、filter() メソッドと map() メソッドは新しい配列 (修飾された) を生成します。そして、これらのメソッドは、指定された関数 callbackfn を呼び出します。コールバック関数 callbackfn の構文は次のとおりです。

function callbackfn (value, index, array) {...}

コールバック関数 callbackfn を宣言するには、次の 3 つのパラメータを使用できます。

value

: 配列要素の値
• Index
: 配列要素のインデックス値配列内の配列要素
• array
: 要素を含む Array オブジェクト
• 今日は主にこれら 5 つの配列反復メソッドの使用方法を学習します。次のコンテンツでは、開始配列を例として使用します。

forEach() メソッド

forEach() メソッドは、配列内の各項目で指定された関数を 1 回実行します。

構文

array.forEach(callbackfn[, thisArg])

パラメータ

パラメータ説明 配列 必須。配列オブジェクト。たとえば、例の peoples 配列 callbackfn は必須です。最大 3 つのパラメータを受け入れることができる関数。 ForEach は、配列内の要素ごとに callbackfn 関数を 1 回呼び出します。 thisArg オプション。 callbackfn 関数の this キーワードで参照できるオブジェクト。 thisArg を省略した場合、this の値として unknown が使用されます。

	forEach() 方法按升序为数组中含有效值的每一项执行一次 callbackfn 函数，那些已删除或者从未赋值的项将被跳过（但不包括哪些值为 undefined 的项）。 示例 开头使用 for 语句遍历出年龄大于 30 岁的名称，并且输出 people 的 name 和 age 。其实使用 forEach() 方法也可以实现： peoples.forEach(function (people) { if (people.age > 30) { console.log(people.name + ':' + people.age); }}); Chrome浏览器输出的结果： Mark:35Lance:39 在此基础上，你可以做很多事情，比如说，将数组 peoples 中的 name 遍历出来，然后重新创建一个新数组 names ，可以这样做： var names = [];var peoplesDb = peoples.forEach(function (people, index) { names.push(people.name);});console.log(names); // ["Agraj", "Mark", "Lance", "Vikas", "Kanika"] 内部实现 看看 forEach() 方法内部实现的方法： Array.prototype.forEach = function(fun /*, thisp*/) { var len = this.length; if (typeof fun != "function") throw new TypeError(); var thisp = arguments[1]; for (var i = 0; i < len; i++) { if (i in this) fun.call(thisp, this[i], i, this); }}; every() 方法 every() 方法测试数组的所有元素是否都符合指定函数的条件，只要有有一个元素不符合，返回的都会是 false 。 语法 array.every(callbackfn[, thisArg]) every() 方法为数组中的每个元素执行一次 callbackfn 函数，直到它找到一个使 callbackfn 返回 false （表示可转换为布尔值 false 的值）的元素。如果发现了一个这样的元素， every() 方法将会立即返回 false 。否则， callbackfn 为每一个元素返回 true ， every() 就会返回 true 。 callbackfn 只会为那些已经被赋值的索引调用。不会为那些被删除或从来没被赋值的索引调用。 示例 还是上面开头的数组，如果每一位的年龄都大于或等于 30 ,就会返回“都大于或等于30岁了”,反之返回“不是所有人都大于30岁了”。 function bigAge(ele,index,arr){ return (ele.age >= 30);}var isBigPeople = peoples.every(bigAge);if (isBigPeople) { console.log('都大于或等于30岁了');} else { console.log('不是所有人都大于30岁了');} Chrome浏览器输出的结果： // 不是所有人都大于30岁了 内部实现 Array.prototype.every = function(fun /*, thisp*/) { var len = this.length; if (typeof fun != "function") throw new TypeError(); var thisp = arguments[1]; for (var i = 0; i < len; i++) { if (i in this && !fun.call(thisp, this[i], i, this)) return false; } return true;}; some() 方法 some() 方法和 every() 方法类似，不同的是， some() 方法在调用指定的函数 callbackfn 指定的条件符合就会返回 true ，不符合则返回 false 。 语法 array.some(callbackfn[, thisArg]) 示例 只要数组中年龄 age 有一个大于或等于 30 ，就会返回“有部分人还是年纪大了”，反之返回“你们都还很年轻”: function OldAge(ele,index,array){ return (ele.age >= 30);}var isOldPeople = peoples.some(OldAge);if (isOldPeople) { console.log('有部分人还是年纪大了');} else { console.log('你们都还年轻');} 内部实现 Array.prototype.some = function(fun /*, thisp*/) { var len = this.length; if (typeof fun != "function") throw new TypeError(); var thisp = arguments[1]; for (var i = 0; i < len; i++) { if (i in this && fun.call(thisp, this[i], i, this)) return true; } return false;}; map() 方法 map() 方法返回一个由原数组中的每个元素调用一个指定函数 callbackfn 后的返回值组成的新数组。如果符合 callbackfn 会返回符合条件的一个值，将所有返回的值再创建一个新数组。 语法 array.map(callbackfn[, thisArg]) map() 方法会给原数组中的每个元素都按顺序调用一次 callbackfn 函数。 callbackfn 每次执行后的返回值组合起来形成一个新数组。 callbackfn 函数只会在有值的索引上被调用；那些从来没被赋过值或者使用 delete 删除的索引则不会被调用。 示例 使用 map() 方法遍历数组 peoples ，并且让 index 在以前的 index 增加 1 : var usersDb = peoples.map(function (user, index) {user.id = index + 1; return user; }); console.table(usersDb); Chrome浏览器输出的结果： 内部实现 Array.prototype.map = function(fun /*, thisp*/) { var len = this.length; if (typeof fun != "function") throw new TypeError(); var res = new Array(len); var thisp = arguments[1]; for (var i = 0; i < len; i++) { if (i in this) res[i] = fun.call(thisp, this[i], i, this); } return res;}; filter() 方法 filter() 方法使用指定的函数 callbackfn 测试所有元素，并创建一个包含所有通过测试的元素的新数组。 语法 array.filter(callbackfn[, thisArg]) filter() 为数组中的每个元素调用一次 callbackfn 函数，并利用所有使得 callbackfn 返回 true 或 等价于 true 的值 的元素创建一个新数组。 callbackfn 只会在已经赋值的索引上被调用，对于那些已经被删除或者从未被赋值的索引不会被调用。那些没有通过 callbackfn 测试的元素会被跳过，不会被包含在新数组中。 示例 遍历出数组中 gender 为 M 的相关数组项： var guys = peoples.filter(function (user) { return user.gender === 'M';});console.table(guys); Chrome浏览器输出的结果： 内部实现 Array.prototype.filter = function(fun /*, thisp*/) { var len = this.length; if (typeof fun != "function") throw new TypeError(); var res = new Array(); var thisp = arguments[1]; for (var i = 0; i < len; i++) { if (i in this) { var val = this[i]; // in case fun mutates this if (fun.call(thisp, val, i, this)) res.push(val); } } return res;}; 总结 今天主要学习了数组的五个遍历方法： forEach() 、 every() 、 some() 、 map() 和 filter() 。其中 forEach() 、 every() 和 some() 方法不会改变原数组，而 map() 和 filter() 方法会根据指定的函数 callbackfn 创建一个新数组。其中 filter() 方法将符合 callbackfn 函数条件创建一个新数组，而 some() 将数组的每一项都是在原数组中的对应项上运行传入的函数 callbackfn 。另外， every() 和 some() 方法根据指定的函数 callbackfn 返回 true 或 false 值，其中 every() 方法，只要有一项不符合 callbackfn 指定的条件就会返回 false ， some() 方法，将根据 callbackfn 函数指定的条件，只要符合就返回 true ，不符合则返回则返回 false 。 初心者向けの勉強メモです。間違いがあれば専門家にご指導いただければ幸いです。誤解を招いてしまい申し訳ございません。 Da Mo 通称「Da Mo」、W3CPlus の創設者、現在は淘宝網で働いています。中国の Drupal コミュニティの中心メンバーの 1 人。彼は HTML5、CSS3、Sass などのフロントエンド スクリプト言語について非常に深い理解と豊富な実践経験を持っており、特に CSS3 の研究に注力しており、中国で最初に研究と使用を行った人物の 1 人です。 CSS3テクノロジー。 CSS3、Sass、Drupalの中国人エバンジェリスト。 2014 年に『図解 CSS3: コア技術と事例実践』を出版しました。