Javascript数组系列二之你不了解的迭代1

我们在《Javascript数组系列一之栈与队列》中介绍了一些数组的用法。比如:数组如何表现的和「栈」一样,用什么方法表现的和「队列」一样等等一些方法,因为 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]

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

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

<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>
});

例如格式化需要的数据

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。

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

本文原创文章发布于微信公众号:Modeng。关注并回复 「前端书籍」百本经典技术书籍免费领取,你懂的!

系列文章列表:

  1. 《Javascript数组系列一之栈与队列》
  2. 《Javascript数组系列二之迭代方法1》https://cloud.tencent.com/developer/article/1339842)
  3. 《Javascript数组系列三之迭代方法2》
  4. 《Javascript数组系列四之数组的转换与排序sort》
  5. 《Javascript数组系列五之增删改和强大的 splice》

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏JAVA高级架构

java面试需要掌握知识点

重点知识 由于我面试的JAVA开发工程师,针对于JAVA,需要理解的重点内容有: JVM内存管理机制和垃圾回收机制(基本每次面试都会问,一定要搞得透彻) JVM...

38750
来自专栏互联网杂技

StackOverflow上关于JavsScript的热门问答

Q1:javascript的闭包是如何工作的? 正如爱因斯坦所说的: 如果你不能把它解释给一个六岁的小孩,说明你对它还不够了解。 我曾尝试向一个27岁的朋友解释...

33860
来自专栏大数据平台TBDS

Hive 时间转换函数使用心得

Hive sql 与传统的 oracle 或者mysql 的时间转换函数有一些不同,对于想将传统数据库迁移到hdfs 用 hive sql 进行处理的任务,如何...

5.2K120
来自专栏TungHsu

这或许是对小白最友好的python入门了吧——13,字典初识

前边我们学习了列表、元组等储存元素的方式,今天我们来看一个更为强大的:字典。 像列表用方括号[]、元组用圆括号()一样,字典用花括号{} 先编写一个简单的词典,...

35150
来自专栏搞前端的李蚊子

获取Object对象的length

所有JS程序猿(甚至不止JS)都知道,数组(Array)是有length的,通过length属性,可以很方便的获取数组的长度。可以说,只要使用到了数组,就必会使...

416110
来自专栏灯塔大数据

干货 | 数据科学入门必读:如何使用正则表达式?

有时候,这些数据中会包含大量文本语料。比如,假如我们需要搞清楚「xxx文件 」中谁给谁发送过邮件,那么我们就要筛查 1150 万份文档!我们可以采用人工方式,亲...

13520
来自专栏北京马哥教育

Python变量很难记?记住变量类型的三种方式

Python作为一门动态语言,其变量的类型可以自由变化。这个特性提高了代码的开发效率,却也增加了阅读代码和维护代码的难度。 假设有一个变量is_request_...

43590
来自专栏Java技术栈

一个正则表达式酿成的惨案…

导读:正则表达式是程序员经常使用的工具之一。本文作者通过一个正则表达式的陷阱,先深入剖析了出现问题的原因,后给出怎么处理这类问题的方法。最后还给出了一些检测常见...

10910
来自专栏游戏杂谈

全局变量的三种声明方法

显示true FWK未定义,说明隐式声明的全局变量可以被delete,与global对象的parseInt、escape、parseFloat等等类似,可直接被...

13510
来自专栏抠抠空间

JavaScript基础

一、JavaScript简介 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中),后将其改名Scr...

39090

扫码关注云+社区

领取腾讯云代金券