最新公告
  • 欢迎您光临码农资源网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!加入我们
  • 实例详解ECMAScript5中新增的Array方法

    ECMAScript5 给出了一系列新的API接口,这些接口在新的浏览器中大部分是被支持的,IE9,Chrome,FirFor都支持,也有少量API不是所有浏览器都支持,以下内容仅介绍大部分被支持的API。利用新的API我们可以设计出非常靠谱的类,而且还能保持原有的javaScript的风格。

    ECMAScript5标准发布于2009年12月3日,它带来了一些新的,改善现有的Array数组操作的方法。(注意兼容性)

    在ES5中,一共有9个Array方法:http://kangax.github.io/compat-table/es5/

    Array.prototype.indexOf
    Array.prototype.lastIndexOf
    Array.prototype.every
    Array.prototype.some
    Array.prototype.forEach
    Array.prototype.map
    Array.prototype.filter
    Array.prototype.reduce
    Array.prototype.reduceRight 

    下面列举了其中的7种方法,前5种方法很常见,很多开发者都会用到:

    1、indexOf()

    indexOf()方法返回在该数组中第一个找到的元素位置,如果它不存在则返回-1。

    var arr = ['apple', 'orange', 'pear'],
    found = false;
    // 未使用
    for (var i = 0, l = arr.length; i < l; i++) {
    if (arr[i] === 'orange') {
    found = true;
    }
    }
    console.log("found:", found); // ==> found: true
    // 使用后
    console.log("found:", arr.indexOf("orange") != -1); // ==> found: true 

    2、filter()

    该filter()方法创建一个新的匹配过滤条件的数组。

    不用 filter() 时:

    var arr=[{"name":"apple", "count": 2},{"name":"orange", "count": 5},{"name":"pear", "count": 3},{"name":"orange", "count": 16},]
    var newArr = [];
    for (var i = 0; i < arr.length; i++) {
    if (arr[i].name === "orange") {
    newArr.push(arr[i]);
    }
    }
    console.log("Filter results:", newArr); 

    用了 filter():

    var newArr = arr.filter(function(item) {
    return item.name === "orange";
    });
    console.log("Filter results:", newArr); 

    3、forEach()

    forEach为每个元素执行对应的方法,是用来替换for循环的。

    var arr = [1, 2, 3, 4, 5, 6, 7, 8];
    // 使用for循环
    for (var i = 0, l = arr.length; i < l; i++) {
    console.log(arr[i]);
    }
    // 使用forEach循环
    arr.forEach(function(item, index) {
    console.log(item);
    }); 

    4、map()

    map()对数组的每个元素进行一定操作(映射)后,会返回一个新的数组。

    var oldArr = [{first_name: "Colin",last_name: "Toh"}, {first_name: "Addy",last_name: "Osmani"}, {first_name: "Yehuda",last_name: "Katz"}];
    function getNewArr() {
    var newArr = [];
    for (var i = 0; i < oldArr.length; i++) {
    var item = oldArr[i];
    item.full_name = [item.first_name, item.last_name].join(" ");
    newArr[i] = item;
    }
    return newArr;
    }
    var personName = getNewArr();
    personName.forEach(function(item, index) {
    console.log(item);
    })
    /****输出结果:
    Object {first_name: "Colin", last_name: "Toh", full_name: "Colin Toh"}
    Object {first_name: "Addy", last_name: "Osmani", full_name: "Addy Osmani"}
    Object {first_name: "Yehuda", last_name: "Katz", full_name: "Yehuda Katz"}
    ****/ 

    使用map()方法:

    function getNewArr() {
    return oldArr.map(function(item, index) {
    item.full_name = [item.first_name, item.last_name].join(" ");
    return item;
    })
    }
    var personName = getNewArr();
    personName.forEach(function(item, index) {
    console.log(item);
    })
    /****输出结果:
    Object {first_name: "Colin", last_name: "Toh", full_name: "Colin Toh"}
    Object {first_name: "Addy", last_name: "Osmani", full_name: "Addy Osmani"}
    Object {first_name: "Yehuda", last_name: "Katz", full_name: "Yehuda Katz"}
    ****/ 

    5、reduce()

    reduce()可以实现一个累加器的功能,将数组的每个值(从左到右)将其降低到一个值。也可以理解为:让数组中的前项和后项做某种运算,并累积最终值;

    场景: 统计一个数组中有多少个不重复的单词;

    var arr = ["apple", "orange", "apple", "orange", "pear", "orange"];
    function getWordCnt() {
    var obj = {};
    for (var i = 0; i < arr.length; i++) {
    var item = arr[i];
    obj[item] = (obj[item] + 1) || 1;
    }
    return obj;
    }
    console.log(getWordCnt());
    // 输出结果:
    // Object {apple: 2, orange: 3, pear: 1} 

    使用reduce()后:

    var arr = ["apple", "orange", "apple", "orange", "pear", "orange"];
    function getWordCnt() {
    return arr.reduce(function(prev, next) {
    prev[next] = (prev[next] + 1) || 1;
    return prev;
    }, {});
    }
    console.log(getWordCnt());
    // 输出结果:
    // Object {apple: 2, orange: 3, pear: 1} 

    6 、array.some(callback[, thisObject]);callback : 函数用来测试某些元素。

    thisObject: 对象作为该执行回调时使用。

    检测数组中是否有某些项符合条件;

    var scores = [45, 60, 70, 65, 95, 85];
    var current = 60;
    function passed(score) {
    return score > current;
    }
    console.log(scores.some(passed)); // == > true 

    7、array.every(callback[, thisObject]);callback : 函数用来测试每个元素。thisObject: 对象作为该执行回调时使用。

    检测数组中每一项是否符合条件;

    var scores = [45, 60, 70, 65, 95, 85];
    var current = 60;
    function passed(score) {
    return score > current;
    }
    console.log(scores.every(passed)); // == > false

    通过以上实例给大家介绍了ECMAScript5中新增的Array方法,希望对大家有所帮助!

    想要了解更多内容,请持续关注码农资源网,一起探索发现编程世界的无限可能!
    本站部分资源来源于网络,仅限用于学习和研究目的,请勿用于其他用途。
    如有侵权请发送邮件至1943759704@qq.com删除

    码农资源网 » 实例详解ECMAScript5中新增的Array方法
    • 7会员总数(位)
    • 25846资源总数(个)
    • 0本周发布(个)
    • 0 今日发布(个)
    • 293稳定运行(天)

    提供最优质的资源集合

    立即查看 了解详情