我们在《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的更多相关文章

  1. Javascript数组系列三之迭代方法2

    今天我们来继续 Javascript 数组系列的文章,上文 <Javascript数组系列二之迭代方法1> 我们说到一些数组的迭代方法,我们在开发项目实战的过程中熟练的使用可以大大提高我们 ...

  2. JavaScript数组的五个迭代方法的简单实例

    <script> //every() var nums = [1,2,3,4,5]; var result = nums.every(function eve(item,index,arr ...

  3. Javascript数组系列五之增删改和强大的 splice()

    今天是我们介绍数组系列文章的第五篇,也是我们数组系列的最后一篇文章,只是数据系列的结束,所以大家不用担心,我们会持续的更新干货文章. 生命不息,更新不止! 今天我们就不那么多废话了,直接干货开始. 我 ...

  4. Javascript数组系列四之数组的转换与排序Sort方法

    今天我们继续来介绍 Javascirpt 数组中的方法,也是数组系列的第四篇文章,因为数组的方法众多,每篇文章我们都对数组的每个方法都有比较细致的描述,只要你能够从中成长一点点,那我们的目的就达到了, ...

  5. JavaScript 数组 常用方法(二)

    写在前面:续接上篇 JavaScript 数组 常用方法 数组常用方法第二弹来了: some && every 描述: every()与some()方法都是JS中数组的迭代方法. so ...

  6. JavaScript 闭包系列二(匿名函数及函数的闭包)

    一. 匿名函数 1. 函数的定义,可分为三种 1) 函数声明方式 function double(x) {     return 2*x; } 2)Function构造函数,把参数列表和函数体都作为字 ...

  7. JavaScript数组(二)实例

    一.Js 数组示例常用操作. $(function () { Javascript数组学习 var nums = new Array([10], [5],[ 8], [2], [3]); 数组反转 n ...

  8. javascript数组的实例属性(方法)

    javascript的所有数组实例对象,除了可以给自己增删属性之外:都会从Array.prototype继承属性(方法).修改Array的原型会影响所有的数组实例. 数组实例的属性: Array.pr ...

  9. javascript数组去重的三种常用方法,及其性能比较

    在进行数组操作时往往会遇到去掉重复项的问题,下面简单介绍下数组去重的方法,以及其执行效率 方法一        采用两次循环        原理:拿当前的和他后面的比,如果后面的有重复的就干掉     ...

随机推荐

  1. 微信小程序跳转小程序

    <navigator target="miniProgram" open-type="navigate" app-id="{{BappId}}& ...

  2. Node.js 获取微信JS-SDK CONFIG

    背景 前端在调用微信提供的分享.拍照.扫一扫等功能时需要到后台获取配置,主要是签名(signature).Node 开发可以用朴灵大佬的SDK--co-wechat-api. 配置 到微信公众平台进入 ...

  3. iOS逆向开发(2):获取APP的类声明 | class-dump | dumpdecrypted

    之前介绍了怎么操作越狱的iOS设备(以下简称为手机),但简单操作手机并不是目标,小程的目标是手机上特定的APP,比如微信.淘宝.QQ音乐等等,因为小程可以从这些APP上拿到一些有用的信息或资源--比如 ...

  4. 【原创】单片系统SoC

    人们根据需要把一些功能模块(蓝牙.GPRS.TCP/IP通信模块等等)与MCU进行有机的结合,制造出集成度更高的系统级的芯片.     SoC是System on Chip的缩写,直译是“芯片级系统” ...

  5. ES6躬行记(9)——字符串

    在介绍字符串之前,有必要先了解一点Unicode的基础知识,有助于理解ES6提供的新功能和新特性. 一.Unicode Unicode是一种字符集(即多个字符的集合),它的目标是涵盖世界上的所有字符, ...

  6. vue-router 基本使用

    参考原文:http://www.cnblogs.com/SamWeb/p/6610733.html 此链接讲了大部分常用的路由配置及使用,下星期总结

  7. 痞子衡嵌入式:备受开源社区推崇的分布式版本控制工具(Git)

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是分布式版本控制工具Git. 1.为什么需要版本控制系统? 单人软件项目开发过程,往往很多功能都是逐步增加的,在代码开发过程中,有的时候功 ...

  8. Mysql加锁过程详解(6)-数据库隔离级别(2)-通过例子理解事务的4种隔离级别

    Mysql加锁过程详解(1)-基本知识 Mysql加锁过程详解(2)-关于mysql 幻读理解 Mysql加锁过程详解(3)-关于mysql 幻读理解 Mysql加锁过程详解(4)-select fo ...

  9. Linux 命令 —— iconv 转换编码

    iconv 是 Linux 系统自带的用于转换文件编码的命令行工具. 命令参数 使用 iconv --help 命令查看命令帮助信息: 用法: iconv [OPTION...] [-f ENCODI ...

  10. [PKUWC2018] Slay the spire

    Description 现在有 \(n\) 张强化牌和 \(n\) 张攻击牌: 攻击牌:打出后对对方造成等于牌上的数字的伤害. 强化牌:打出后,假设该强化牌上的数字为 \(x\),则其他剩下的攻击牌的 ...