首页 > web前端 > js教程 > Javascript数组中迭代方法的详细分析

Javascript数组中迭代方法的详细分析

不言
发布: 2018-09-11 15:31:21
原创
1206 人浏览过

本篇文章给大家带来的内容是关于Javascript数组中迭代方法的详细分析,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

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

正式开始!

数组的迭代方法

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

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

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(&#39;li&#39;);

    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,可选)。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

//语法

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() 方法的兼容性,直接上图。

ChromeEdgeFirefoxInternet ExplorerOperaSafari
YesYes1.59YesYes

map()

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

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

传入的回调函数会接受三个参数分别是:数组中的元素(item),元素的索引(index,可选),数组本身(array,可选)。

1

2

3

4

5

6

7

8

9

10

//语法

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]

登录后复制

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

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

1

2

3

4

5

6

7

8

9

10

11

12

13

<ul>

    <li><input type="text" value="1"></li>

    <li><input type="text" value="2"></li>

    <li><input type="text" value="3"></li>

</ul>

<script>

    let list = document.getElementsByTagName('input');

    let newList = Array.prototype.map.call(list, item => {

        return item.value;

    });

    console.log(newList);//[1,2,3]

</script>

});

登录后复制

例如格式化需要的数据

1

2

3

4

5

6

7

8

9

10

11

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,可选)。

1

2

3

4

5

6

7

8

9

10

//语法

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」方法在实际工作中也同样有着很多的作用,例如:我们找出一群人中哪些是小朋友。

1

2

3

4

5

6

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() 方法的兼容性,直接上图。

ChromeEdgeFirefoxInternet ExplorerOperaSafari
YesYes1.59YesYes

every

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

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

传入的回调函数会接受三个参数分别是:数组中的元素(item),元素的索引(index,可选),数组本身(array,可选)。

1

2

3

4

5

6

7

8

9

10

11

12

//语法

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,可选)。

1

2

3

4

5

6

7

8

9

10

11

12

//语法

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。

相关推荐:

javascript中Array数组的迭代方法实例分析_javascript技巧

JavaScript数组的5种迭代方法实例详解

以上是Javascript数组中迭代方法的详细分析的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
怎么实现 JavaScript点与圆的位置关系
来自于 1970-01-01 08:00:00
0
0
0
JavaScript钩子函数是什么?
来自于 1970-01-01 08:00:00
0
0
0
c++ 调用javascript
来自于 1970-01-01 08:00:00
0
0
0
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板