视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
ES5与ES6数组方法总结
2020-11-27 19:57:26 责编:小采
文档

ES5新增数组

  • 索引方法:indexOf(),lastIndexOf()

  • 迭代方法:forEach()、map()、filter()、some()、every()

  • 归并方法:reduce()、reduceRight()

  • 方法并不会修改原数组

    索引方法

    indexOf

    array.indexOf(searchElement[, fromIndex])
  • 返回整数索引值,如果没有匹配(严格匹配),返回-1。

  • fromIndex可选,表示从这个位置开始搜索,若缺省或格式不合要求,使用默认值0。

  • var data = [2, 5, 7, 3, 5];
    
    console.log(data.indexOf(5, "x")); // 1 ("x"被忽略)
    console.log(data.indexOf(5, "3")); // 4 (从3号位开始搜索)

    lastIndexOf

    array.lastIndexOf(searchElement[, fromIndex])
  • 从字符串的末尾开始查找,而不是从开头。

  • fromIndex的默认值是array.length - 1。

  • var data = [2, 5, 7, 3, 5];
    
    console.log(data.lastIndexOf(5)); // 4
    console.log(data.lastIndexOf(5, 3)); // 1 (从后往前,索引值小于3的开始搜索)
    
    console.log(data.lastIndexOf(4)); // -1 (未找到)
    两个方法在比较第一个参数与数组中的每一项时,会使用全等操作符, 要求必须完全相等,否则返回-1。

    迭代方法

    每个方法都接受两个参数,第一个参数callback(回调函数,必选),第二个参数是一个可选的上下文参数。

  • 其中第一个参数callback接受三个参数, 当前项的值、当前项在数组中的索引、数组对象本身。即 function(value,index,arr) {};需要注意的是与我们常用的jQuery中封装的方法区别在第一个参数和第二个参数,即index和value的顺序是相反的。

  • 第二个参数是一个可选的上下文参数,是执行第一个函数参数的作用域对象,也就是上面说的callback中this所指向的值。 如果这第2个可选参数不指定,则使用全局对象代替(在浏览器是为window),严格模式下甚至是undefined。

  • 需要注意的是除了forEach()方法,其余的迭代方法中callback需要有return值否则会返回undefined。

    forEach

    forEach()对数组进行遍历循环,对数组中的每一项运行给定的函数,这个方法没有返回值。

    [].forEach(function(value, index, array) {
     // ...
    }, [ thisObject]);
  • forEach除了接受一个必须的回调函数参数,还可以接受一个可选的上下文参数(改变回调函数里面的this指向)(第2个参数)。

  • 如果这第2个可选参数不指定,则使用全局对象代替(在浏览器是为window),严格模式下甚至是undefined.

  • [1, 2, 3, 4].forEach(function (item, index, array) {
     console.log(array[index] == item); // true
     sum += item;
    });
    
    alert(sum); // 10
    
    var database = {
     users: ["张含韵", "江一燕", "李小璐"],
     sendEmail: function (user) {
     if (this.isValidUser(user)) {
     console.log("你好," + user);
     } else {
     console.log("抱歉,"+ user +",你不是本家人"); 
     }
     },
     isValidUser: function (user) {
     return /^张/.test(user);
     }
    };
    
    // 给每个人法邮件
    database.users.forEach( // database.users中人遍历
     database.sendEmail, // 发送邮件
     database // 使用database代替上面标红的this
    );
    
    // 结果:
    // 你好,张含韵
    // 抱歉,江一燕,你不是本家人
    // 抱歉,李小璐,你不是本家

    map

    map()指“映射”,对数组中的每一项运行给定的函数,返回每次函数调用的结果组成的数组。

    [].map(function(value, index, array) {
     // ...
    }, [ thisObject]);
    var data = [1, 2, 3, 4];
    
    var arrayOfSquares = data.map(function (item) {
     return item * item;
    });
    
    alert(arrayOfSquares); // 1, 4, 9, 16

    filter

    filter(),“过滤”,对数组中的每一项运行给定函数,返回满足过滤条件组成的数组。

    array.filter(callback,[ thisObject]);
  • filter的callback函数需要返回布尔值true或false。

  • 返回值只要是弱等于== true/false就可以了,而非非得返回 === true/false。

  • var arr3 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    var flag = arr3.filter(function(value, index) {
     return value % 3 === 0;
    }); 
    console.log(flag); // [3, 6, 9]

    every

    every(),判断数组中每一项都是否满足所给条件,当所有项都满足条件,才会返回true。

    array.every(callback,[ thisObject]);
    var arr4 = [1, 2, 3, 4, 5];
    var flag = arr4.every(function(value, index) {
     return value % 2 === 0;
    }); 
    console.log(flag); // false

    some

    some(),判断数组中是否存在满足条件的项,只要有一项满足条件,就会返回true。

    array.some(callback,[ thisObject]);
    var arr5 = [1, 2, 3, 4, 5];
    var flag = arr5.some(function(value, index) {
     return value % 2 === 0;
    }); 
    console.log(flag); // true

    归并方法

    这两个方法相比前面可能稍微复杂一些,它们都会迭代数组中的所有项,然后生成一个最终返回值。这两个方法接收两个参数。

  • 第一个参数callback,函数接受4个参数分别是(初始值total必选,当前值currentValue必选,索引值currentIndex可选,当前数组arr可选),函数需要返回一个值,这个值会在下一次迭代中作为初始值。

  • 第二个参数是迭代初始值(initialValue),参数可选,如果缺省,初始值为数组第一项,从数组第一个项开始叠加,缺省参数要比正常传值少一次运算。

  • reduce

    reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。 reduce() 对于空数组是不会执行回调函数的。

    array. reduce(function(total, currentValue, currentIndex, array) {
     // ...
    });
    var arr9 = [1, 2, 3, 4];
    var sum9 =arr9.reduce(function (total, curr, index, array) {
     return total * curr;
    });
    console.log(sum9); // 24 
    var sum9_1 =arr9.reduce(function (total, curr, index, array) {
     return total * curr;
    }, 10);
    console.log(sum9_1); // 240

    reduceRight

    reduceRight()和reduce()相比,用法类似,差异在于reduceRight是从数组的末尾开始实现的。

    array.reduceRight(callback,[ thisObject]);
    var arr9 = [2, 45, 30, 80];
    var flag = arr9.reduceRight(function (total, curr, index) {
     return total - curr;
    });
    var flag_1 = arr9.reduceRight(function (total, curr, index) {
     return total - curr;
    },200);
    console.log(flag); // 3
    console.log(flag_1); // 43

    相关推荐:

    ES6系列之声明变量let与const

    Es6数组的扩展

    ES5实例详解javascript多种继承方式

    下载本文
    显示全文
    专题