JavaScript学习笔记：数组(七)_html/css_WEB-ITnose

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了JavaScript学习笔记：数组(七)_html/css_WEB-ITnose，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含9012字，纯文字阅读大概需要13分钟。

内容图文

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为数组定义了五个迭代方法：

• forEach() ：没有返回值，只是针对每个数组项调用指定的函数( callbackfn )
• every() : 返回一个布尔值( true 或 false )，判断每个数组项是否符合指定函数的条件，符合为 true ，反之为 false
• some() : 返回一个布尔值( true 或false),判断每个数组项是否符合指定函数的条件，只要有任何一项返回为 true ，就会返回 true
• filter() : 每个数组项调用指定的函数，条件为 true 的将返到一个新数组中
• map() : 每个数组项调用指定的函数，返回每次函数调用的结果组成一个新数组

这五个数组迭代的方法中，其中 forEach() 、 every() 和 some() 方法不生成一个新数组，而 filter() 和 map() 方法将会生成一个新数组（符合条件）。并且这些方法都会调用指定的函数 callbackfn 。回调函数 callbackfn 语法如下：

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

可以使用三个参数来声明回调函数 callbackfn :

• value : 数组元素的值
• index : 数组元素在数组中的索引值
• array : 包含该元素的数组对象

今天主要一起了解这五个数组迭代方法是如何使用？在接下来的内容中都将以开头的数组为例。

forEach() 方法

forEach() 方法让数组的每一项都执行一次给定的函数。

语法

array.forEach(callbackfn[, thisArg])

参数

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 。

初学者学习笔记，如有不对，还希望高手指点。如有造成误解，还希望多多谅解。

大漠

常用昵称“大漠”，W3CPlus创始人，目前就职于手淘。中国Drupal社区核心成员之一。对HTML5、CSS3和Sass等前端脚本语言有非常深入的认识和丰富的实践经验，尤其专注对CSS3的研究，是国内最早研究和使用CSS3技术的一批人。CSS3、Sass和Drupal中国布道者。2014年出版《 图解CSS3：核心技术与案例实战 》。

内容总结

以上是互联网集市为您收集整理的JavaScript学习笔记：数组(七)_html/css_WEB-ITnose全部内容，希望文章能够帮你解决JavaScript学习笔记：数组(七)_html/css_WEB-ITnose所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端