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。
今天我们就说这么多,希望你有所收获,接下来还请继续关注,我们继续来说数组的其他一系列的方法。
Javascript数组系列二之迭代方法1的更多相关文章
- Javascript数组系列三之迭代方法2
今天我们来继续 Javascript 数组系列的文章,上文 <Javascript数组系列二之迭代方法1> 我们说到一些数组的迭代方法,我们在开发项目实战的过程中熟练的使用可以大大提高我们 ...
- JavaScript数组的五个迭代方法的简单实例
<script> //every() var nums = [1,2,3,4,5]; var result = nums.every(function eve(item,index,arr ...
- Javascript数组系列五之增删改和强大的 splice()
今天是我们介绍数组系列文章的第五篇,也是我们数组系列的最后一篇文章,只是数据系列的结束,所以大家不用担心,我们会持续的更新干货文章. 生命不息,更新不止! 今天我们就不那么多废话了,直接干货开始. 我 ...
- Javascript数组系列四之数组的转换与排序Sort方法
今天我们继续来介绍 Javascirpt 数组中的方法,也是数组系列的第四篇文章,因为数组的方法众多,每篇文章我们都对数组的每个方法都有比较细致的描述,只要你能够从中成长一点点,那我们的目的就达到了, ...
- JavaScript 数组 常用方法(二)
写在前面:续接上篇 JavaScript 数组 常用方法 数组常用方法第二弹来了: some && every 描述: every()与some()方法都是JS中数组的迭代方法. so ...
- JavaScript 闭包系列二(匿名函数及函数的闭包)
一. 匿名函数 1. 函数的定义,可分为三种 1) 函数声明方式 function double(x) { return 2*x; } 2)Function构造函数,把参数列表和函数体都作为字 ...
- JavaScript数组(二)实例
一.Js 数组示例常用操作. $(function () { Javascript数组学习 var nums = new Array([10], [5],[ 8], [2], [3]); 数组反转 n ...
- javascript数组的实例属性(方法)
javascript的所有数组实例对象,除了可以给自己增删属性之外:都会从Array.prototype继承属性(方法).修改Array的原型会影响所有的数组实例. 数组实例的属性: Array.pr ...
- javascript数组去重的三种常用方法,及其性能比较
在进行数组操作时往往会遇到去掉重复项的问题,下面简单介绍下数组去重的方法,以及其执行效率 方法一 采用两次循环 原理:拿当前的和他后面的比,如果后面的有重复的就干掉 ...
随机推荐
- css笔记详解(1)
css讲解 版权声明 本文原创作者:雨点的名字 作者博客地址:https://home.cnblogs.com/u/qdhxhz/ 首先在我们学习css之前先来思考一个问题,为什么html标签上不直接 ...
- 转:centos7搭建jenkins小记
转自:https://segmentfault.com/a/1190000007086764 安装java环境 1.查看服务器版本 centos7,继续. cat /etc/redhat-releas ...
- 深入理解SpringBoot之启动探究
SpringApplication是SpringBoot的启动程序,我们通过它的run方法可以快速启动一个SpringBoot应用.可是这里面到底发生了什么?它是处于什么样的机制简化我们程序启动的?接 ...
- 了解Java内存模型,看完这一篇就够了
前言(此文草稿是年前写的,但由于杂事甚多一直未完善好.清明假无事,便收收尾发布了) 年关将近,个人工作学习怠惰了不少.两年前刚做开发的时候,信心满满想看看一个人通过自己的努力,最终能达到一个什么样的高 ...
- iOS逆向开发(0):修改二进制代码与重签名 | hopper | codesigh
小白:小程,你知道有些iOS程序是没人性的吗?老是不按我的意愿来运行! 小程:我怎么知道你的意愿就是有人性的? 本文解决一个问题:修改别人的二进制程序并运行起来. 让别人的程序按你的意愿来运行,文明一 ...
- How Tomcat works — 三、tomcat启动(2)
在了解了tomcat 的一些基本组件之后,学习启动过程就更容易理解了,因为启动过程就是启动各个组件. 目录 启动顺序 Bootstrap类 Catalina类 StandardServer类和Stan ...
- Kubernetes理论基础
Kubernetes理论基础 Kubernetes定义 kubernetes是Google开源的容器集群管理系统,2014年6月开源.在Docker技术之上,为容器应用提供资源调度.部署运行.服务 ...
- 里氏替换原则(LSP)
替换原则由MIT计算机科学实验室的Liskov女士在1987年的OOPSLA大会上的一篇文章中提出,主要阐述有关继承的一些原则,故称里氏替换原则. 2002年,Robert C.Martin出版了一本 ...
- vue的路由映射问题
遇到的问题 今天在项目中遇到了一个问题,明明在Router文件夹下的路由js映射文件中,配置好了,如下: // 生日贺卡 { path: 'birthdayRemind', component: lo ...
- 从a文件判断是否删除b文件中的行(sed示例)
bash&shell系列文章:http://www.cnblogs.com/f-ck-need-u/p/7048359.html test.xml文件很大,内容结构如下: <?xml v ...