• 【JavaScript】原生数组及高阶函数



    JavaScript原生数组及高阶函数

    一、map

    map() 方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果

    • callback 函数会被自动传入三个参数:数组元素,元素索引,原数组本身
    let list = [1, 2, 3, 4, 5];
    let other = list.map((d, i) => {
        return d * 2;
    });
    console.log(other);
    // print: [2, 4, 6, 8, 10]
    

    二、filter

    语法

    var new_array = arr.filter(callback[, thisArg])
    

    filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素

    参数

    • callback 返回true表示保留该元素(通过测试),false则不保留
      • 用来测试数组的每个元素的函数。调用时使用参数 (element, index, array)
      • 返回true表示保留该元素(通过测试),false则不保留
    function isBigEnough(value) {
      return value >= 10;
    }
    
    var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
    
    // filtered is [12, 130, 44]
    

    三、some

    返回一个boolean,判断是否有元素符合func条件,如果有一个元素符合func条件,则循环会终止

    • some()方法测试数组中的某些元素是否通过由提供的函数实现的测试
    const isBiggerThan10 = (element, index, array) => {
      return element > 10;
    }
    
    [2, 5, 8, 1, 4].some(isBiggerThan10);  
    // false
    
    [12, 5, 8, 1, 4].some(isBiggerThan10); 
    // true
    

    四、every

    返回一个boolean,判断每个元素是否符合func条件,有一个元素不满足func条件,则循环终止,返回false

    • every 方法为数组中的每个元素执行一次 callback 函数,直到它找到一个使 callback 返回 false(表示可转换为布尔值 false 的值)的元素。如果发现了一个这样的元素,every 方法将会立即返回 false。否则,callback 为每一个元素返回 trueevery 就会返回 true
    function isBigEnough(element, index, array) {
      return (element >= 10);
    }
    var passed = [12, 5, 8, 130, 44].every(isBigEnough);
    // passed is false
    passed = [12, 54, 18, 130, 44].every(isBigEnough);
    // passed is true
    

    五、reduce和reduceRight

    .reduce从左到右而.reduceRight从右到左循环遍历数组,每次调用接收目前为止的部分结果和当前遍历的值

    • reduce() 方法对累加器和数组中的每个元素(从左到右)应用一个函数,将其减少为单个值

    • 两种方法都有如下典型用法:.reduce(callback(previousValue, currentValue, index, array), initialValue)

    • previousValue是最后被调用的回调函数的返回值,initialValue是开始时previousValue被初始化的值。currentValue

    • 是当前被遍历的元素值,index是当前元素在数组中的索引值。array是对调用.reduce数组的简单引用

    Array.prototype.sum = function () {
        return this.reduce(function (partial, value) {
            return partial + value
        }, 0)
    };
    
    [3,4,5,6,10].sum()
    // <- 28
    

    可以使用.reduce作为对象的字符串生成器

    function concat (input) {
        return input.reduce(function (partial, value) {
            if (partial) {
                partial += ', '
            }
            return partial + value
        }, '')
    }
    
    concat([
        { name: 'George' },
        { name: 'Sam' },
        { name: 'Pear' }
    ])
    // <- 'George, Sam, Pear'
    

    六、sort

    Array.prototype.sort(fn(a,b))需要一个包含两个测试参数的回调函数,并且要产生一下三种返回值之一

    • 如果ab前,则返回值小于零
    • 如果a和`b是等价的,则返回值等于零
    • 如果ab后,则返回值大于零
    [9,80,3,10,5,6].sort()
    // <- [10, 3, 5, 6, 80, 9]
    
    [9,80,3,10,5,6].sort(function (a, b) {
        return a - b
    })
    // <- [3, 5, 6, 9, 10, 80]
    

    七、forEach

    • 没有返回值,只针对每个元素调用func
    • 优点:代码简介。
    • 缺点:无法使用breakreturn等终止循环
    • value 当前操作的数组元素
    • 当前操作元素的数组索引
    • array 当前数组的引用
    let list = [1, 2, 3, 4, 5];
    list.forEach((d, i) => {
        this.push(d * 2);
    });
    console.log(other);
    // print: [2, 4, 6, 8, 10]
    

    八、for in

    for-in循环实际是为循环”enumerable“对象而设计的,for in也可以循环数组,但是不推荐这样使用,for–in是用来循环带有字符串key的对象的方法

    var obj = {a:1, b:2, c:3};
    for (var prop in obj) {
      console.log("obj." + prop + " = " + obj[prop]);
    }
    // print:  "obj.a = 1" "obj.b = 2" "obj.c = 3"
    

    九、for of

    for ofES6提供,具有iterator接口,就可以用for of循环遍历它的成员

    • for of循环可以使用的范围包括数组、SetMap结构、某些类似数组的对象(比如arguments对象、DOM NodeList对象)、后文的Generator对象,以及字符串

    entries

    entries() 返回一个遍历器对象,用来遍历[键名, 键值]组成的数组。对于数组,键名就是索引值;对于Set,键名与键值相同。Map结构的iterator接口,默认就是调用entries方法

    keys

    • keys() 返回一个遍历器对象,用来遍历所有的键名。

    values

    • values()返回一个遍历器对象,用来遍历所有的键值。

    这三个方法调用后生成的遍历器对象,所遍历的都是计算生成的数据结构

    // 遍历数组
    let list = [1, 2, 3, 4, 5];
    for (let e of list) {
        console.log(e);
    }
    // print: 1 2 3 4 5
    
    // 遍历对象
    obj = {a:1, b:2, c:3};
    for (let key of Object.keys(obj)) {
      console.log(key, obj[key]);
    }
    // print:  a 1 b 2 c 3
    //说明:对于普通的对象,for...in循环可以遍历键名,for...of循环会报错。
    //一种解决方法是,使用Object.keys方法将对象的键名生成一个数组,然后遍历这个数组。
    
    // entries
    let arr = ['a', 'b', 'c'];
    for (let pair of arr.entries()) {
      console.log(pair);
    }
    // [0, 'a']
    // [1, 'b']
    // [2, 'c']
    
  • 相关阅读:
    每日一题 为了工作 2020 0412 第四十一题
    每日一题 为了工作 2020 04011 第四十题
    每日一题 为了工作 2020 0410 第三十九题
    每日一题 为了工作 2020 0409 第三十八题
    每日一题 为了工作 2020 0408 第三十七题
    每日一题 为了工作 2020 0407 第三十六题
    每日一题 为了工作 2020 0406 第三十五题
    每日一题 为了工作 2020 0405 第三十四题
    学习总结(二十四)
    学习总结(二十三)
  • 原文地址:https://www.cnblogs.com/SiriusZHT/p/14365036.html
Copyright © 2020-2023  润新知