Javascript数组系列二之迭代方法1

tylin 发布于2019-08-23 11:53 / 610人阅读

摘要：我们在数组系列一之栈与队列中介绍了一些数组的用法。该方法接受两个参数，一个是元素每一项执行的回调函数，一个是可选参数，回调函数运行时的值。今天我们就说这么多，希望你有所收获，接下来还请继续关注，我们继续来说数组的其他一系列的方法。

我们在《avascript数组系列一之栈与队列》中介绍了一些数组的用法。比如：数组如何表现的和「栈」一样，用什么方法表现的和「队列」一样等等一些方法，因为 Javascript 中的数组方法众多，所以我们没有在一篇文章中介绍过多的东西，接下来我们就来了解数组的其他功能吧

正式开始！

数组的迭代方法

数组的迭代方法是我们在开发项目中使用频率非常高、非常重要、非常高效，不仅如此这些方法还能使我们的代码会非常简洁，可以这么说，如果你在开发中不经常使用这些方法的话，简直就是太可怕了。

比如我们如何批量的添加 DOM 节点

let containerUl = document.getElementById("container");
let li;
let peoples = [{name: "Liu", age: 14}, {name: "Li", age: 13}, {name: "Cao", age: 11}];

//for 循环
for (let i = 0; i < peoples.length; i++) {
    li = document.createElement("li");
    li.innerHTML = peoples[i].name + ":" + peoples[i].age;
    containerUl.appendChild(li);
};

//数组的迭代方法，更加简洁
peoples.forEach((people) => {
    li = document.createElement("li");
    li.innerHTML = people.name + ":" + people.age;
    containerUl.appendChild(li);
})

上面只是举了一个简单的例子，其实我们在日常的开发过程中远不止此，而且要比这个复杂的很多很多，所以如何高效的进行工作的开发是非常有必须要的。下面就从我们比较常用的一个一个的来说起。

forEach()

该方法对数组的每一个元素执行给定的函数，返回 undefined（或者说无返回值）。

该方法接受两个参数，一个是元素每一项执行的回调函数，一个是可选参数，回调函数运行时 this 的值。

传入的回调函数会接受三个参数分别是：数组中的元素（item），元素的索引（index，可选），数组本身（array，可选）。

//语法
array.forEach(callback[, this])
array.forEach(callback(item, index, array){
    //函数体，执行的操作
});

//看个例子，本质上与 for 循环一样
let items = ["a", "b", "c"];
items.forEach(function (item) {
    console.log(item);
});

for (let i = 0; i < items.length; i++) {
    console.log(items[i])
}

最后我们来看看 forEach() 方法的兼容性，直接上图。

Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
Yes	Yes	1.5	9	Yes	Yes

map()

该方法对数组的每一个元素执行给定的函数，返回一个新的数组，新数组的结果是原数组中元素执行方法后的结果。

该方法接受两个参数，一个是元素每一项执行的回调函数，一个是可选参数，回调函数运行时 this 的值。

传入的回调函数会接受三个参数分别是：数组中的元素（item），元素的索引（index，可选），数组本身（array，可选）。

//语法
var newArrs = array.map(callback[, this])
var newArrs = array.map(callback(item, index, array){
    //return 执行后的结果
});

//例子
let numbers = [1, 2, 3];
let newNumbers = numbers.map(x => x * x);
console.log(newNumbers); //[1, 4, 9]

在我们日常开发工作中，会遇到非常多的数据格式化的过程，利用这些方法可以大大方便我们的处理。

例如类数组转换为数组的过程

});

例如格式化需要的数据

let peoples = ["Liu", "Cao", "Pan"];
let peoplesInfo = peoples.map(people => {
    return {
        name: people,
        age: Math.floor(Math.random()*20)
    }
});
console.log(peoplesInfo);
// [{name: Liu, age: XX}, 
//  {name: Cao, age: XX}, 
//  {name: Pan, age: XX}]

当然我们在实际工作中的数据复杂度远不止此，但是我们可以明显感觉到这些方法处理数据的优势所在。

最后我们来看看 map() 方法的兼容性，直接上图。

Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
Yes	Yes	1.5	9	Yes	Yes

filter

该方法也是对数组的每一个元素执行给定的函数，返回一个新的数组，新数组是由每项返回 true 的项组成。简单来说就是筛选出来我们想要的。

该方法接受两个参数，一个是元素每一项执行的回调函数，一个是可选参数，回调函数运行时 this 的值。

传入的回调函数会接受三个参数分别是：数组中的元素（item），元素的索引（index，可选），数组本身（array，可选）。

//语法
var newArrs = array.filter(callback[, this])
var newArrs = array.filter(callback(item, index, array){
    //return 满足条件的项
});

//例子
let numbers = [1, 2, 3, 4, 5];
let newNumbers = numbers.filter(x => x > 2);
console.log(newNumbers); //[3, 4, 5]

「filter」方法在实际工作中也同样有着很多的作用，例如：我们找出一群人中哪些是小朋友。

var peoples = [{name: "liu", age: 9}, 
            {name: "jiang", age: 18}, 
            {name: "cao", age: 20}, 
            {name: "pan", age: 3}];
var childrens = peoples.filter(people => people.age < 10);
console.log(childrens);

最后我们来看看 filter() 方法的兼容性，直接上图。

Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
Yes	Yes	1.5	9	Yes	Yes

every

该方法是对数组的每一个元素执行给定的函数，
如果数组中的每个元素都满足给定的条件则返回 true，否则返回 false。

该方法接受两个参数，一个是元素每一项执行的回调函数，一个是可选参数，回调函数运行时 this 的值。

传入的回调函数会接受三个参数分别是：数组中的元素（item），元素的索引（index，可选），数组本身（array，可选）。

//语法
var newArrs = array.every(callback[, this])
var newArrs = array.every(callback(item, index, array){
    //执行方法
});

//例子
var number = [2, 3, 4, 5, 6];
var result1 = number.every(item => item > 4);
console.log(result1); //false
var result2 = number.every(item => item > 1);
console.log(result2); //true

我们在来看看 every() 方法的兼容性，直接上图。

Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
Yes	Yes	1.5	9	Yes	Yes

some

该方法是对数组的每一个元素执行给定的函数，
如果数组中的有一个元素满足条件则返回 true，如果全部不满足条件则返回 false。

该方法接受两个参数，一个是元素每一项执行的回调函数，一个是可选参数，回调函数运行时 this 的值。

传入的回调函数会接受三个参数分别是：数组中的元素（item），元素的索引（index，可选），数组本身（array，可选）。

//语法
var newArrs = array.some(callback[, this])
var newArrs = array.some(callback(item, index, array){
    //执行方法
});

//例子
var number = [2, 3, 4, 5, 6];
var result1 = number.some(item => item < 1);
console.log(result1); //false
var result2 = number.some(item => item > 5);
console.log(result2); //true

我们在来看看 some() 方法的兼容性，直接上图。

Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
Yes	Yes	1.5	9	Yes	Yes

可以看出 every 方法是全部返回 true 时，整个函数才返回 true；some 方法则是全部返回 false 时，整个函数才返回 false。

今天我们就说这么多，希望你有所收获，接下来还请继续关注，我们继续来说数组的其他一系列的方法。

关注微信公众号：六小登登。领取全套学习资源

GPU云服务器云服务器 javascript迭代数组 javascript数组方法数组迭代器 js迭代数组

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97632.html

Javascript数组系列二之迭代方法2

摘要：该方法接受两个参数，一个是元素每一项执行的回调函数，一个是可选参数，回调函数运行时的值。今天我们来继续 Javascript 数组系列的文章，上文《Javascript数组系列二之迭代方法1》我们说到一些数组的迭代方法，我们在开发项目实战的过程中熟练的使用可以大大提高我们的开发效率以及数据的处理。接下来我们继续来讲解其他的一些迭代的方法。天也黑了，时间也不早了，话不多说，撸起袖...

fredshare 2019-08-23 11:56 评论0 收藏0
Javascript数组系列五之增删改和强大的 splice()

摘要：删除数组元素的开始索引需要删除元素的个数，插入数组的元素语法因为参数变化多样，我们主要从三个方面来展示的用法。今天是我们介绍数组系列文章的第五篇，也是我们数组系列的最后一篇文章，只是数据系列的结束，所以大家不用担心，我们会持续的更新干货文章。生命不息，更新不止！今天我们就不那么多废话了，直接干货开始。我们在《Javascript数组系列一之栈与队列》中描述我们是如何利用 pus...

chavesgu 2019-08-23 12:01 评论0 收藏0
python综合学习二之多进程

摘要：本节讲学习的多进程。和之前的的不同点是丢向的函数有返回值，而的没有返回值。所以接下来让我们来看下这两个进程是否会出现冲突。本节讲学习Python的多进程。一、多进程和多线程比较多进程 Multiprocessing 和多线程 threading 类似, 他们都是在 python 中用来并行运算的. 不过既然有了 threading, 为什么 Python 还要出一个 multip...

gityuan 2019-07-30 17:37 评论0 收藏0
Map学习二之LinkedHash,HashTable,计算一个给定字符串的每个字符出现的次数

package com.itheima.demo03.Map; import java.util.HashMap;import java.util.LinkedHashMap; /* java.util.LinkedHashMap entends HashMap Map 接口的哈希表和链接列表实现，具有可预知的迭代顺序。底层原理: 哈希表+链表(记录元素的顺序) */public cla...

Rocture 2019-08-16 18:33 评论0 收藏0
clay教程二之布局的使用

摘要：上图是布局的计算模型。删除方法删除的只是布局保存的数据，然后重绘画面，如果你需要画面平滑改变，修改绘图实现方法即可，这里不再赘述。作者：心叶时间：2018-11-06 14:47 clay项目Github地址：https://github.com/yelloxing/... 喜欢本项目的可以在github上给给star。在绘制一些常见图形的时候，比如关系图，单个结点或连线并不难，麻...

Forest10 2019-08-23 12:49 评论0 收藏0