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数组去重的三种常用方法,及其性能比较
在进行数组操作时往往会遇到去掉重复项的问题,下面简单介绍下数组去重的方法,以及其执行效率 方法一 采用两次循环 原理:拿当前的和他后面的比,如果后面的有重复的就干掉 ...
随机推荐
- Java核心技术及面试指南 2.3.6 String相关的面试题答案
2.3.6.1 String是最基本的数据类型吗?能不能被继承? String不能被继承,它是一个对象 2.3.6.2 String s = new String("xyz");创 ...
- 从Java小白到收获BAT等offer,分享我这两年的经验和感悟
微信公众号[程序员江湖] 作者黄小斜,斜杠青年,某985硕士,阿里 Java 研发工程师,于 2018 年秋招拿到 BAT 头条.网易.滴滴等 8 个大厂 offer,目前致力于分享这几年的学习经验. ...
- [NewLife.XCode]高级查询(化繁为简、分页提升性能)
NewLife.XCode是一个有10多年历史的开源数据中间件,支持nfx/netcore,由新生命团队(2002~2019)开发完成并维护至今,以下简称XCode. 整个系列教程会大量结合示例代码和 ...
- 02 Tensorflow Hello World程序
打开python idle,输入: import tensorflow as tf # 创建常量 hello = tf.constant('Hello,world!') # 创建会话 sess = t ...
- (亲测成功)在centos7.5上安装kvm,通过VNC远程连接并创建多台ubuntu虚拟机(ubuntu server版本)
在centos7.5上安装kvm,通过VNC远程连接并创建多台ubuntu虚拟机 前提:服务器端安装桌面版的centos系统 CentOS Linux release 7.5.1804 (Core) ...
- 【Flask-RESTPlus系列】Part1:快速入门
0x00 内容概览 Flask-RESTPlus安装 快速入门 初始化 一个最简单的API示例 资源路由 端点 参数解析 数据格式化 顺序保留 完整例子 0x01 Flask-RESTPlus安装 1 ...
- spring-boot (四) springboot+mybatis多数据源最简解决方案
学习文章来自:http://www.ityouknow.com/spring-boot.html 配置文件 pom包就不贴了比较简单该依赖的就依赖,主要是数据库这边的配置: mybatis.confi ...
- javaScript之变量与数据类型
http://www.cnblogs.com/yuanchenqi/articles/5980312.html 在了解变量之前,我们首先学习JavaScript的引入方式 JavaScript的引入方 ...
- 微信分享JS-SDK
微信JS-SDK,提供给开发者的基于微信内的网页开发工具包 使用微信JS-SDK,网页开发者可借助微信高效地使用拍照.选图.语音.位置等手机系统的能力,同时可以直接使用微信分享.扫一扫.卡券.支付等微 ...
- SpringBoot(5) SpringBoot个性化启动
1.在类路径下增加一个banner.txt,里面是启动要输出的信息 自定义banner在线生成工具: http://www.bootschool.net/ascii _ _ _ _ __ | | __ ...