• 15个必须知道的JavaScript数组方法


    1.some()

    此方法为参数传递的函数测试数组。如果有一个元素与测试元素匹配,则返回true,否则返回false。

    译者注: some() 不会对空数组进行检测;some() 不会改变原始数组。

    const myAwesomeArray = ["a", "b", "c", "d", "e"]
    myAwesomeArray.some(test => test === "d")
    //-------> Output : true

    2.reduce()

    此方法接收一个函数作为累加器。它为数组中的每个元素依次执行回调函数,不包括数组中被删除或者从未被赋值的元素。函数应用于累加器,数组中的每个值最后只返回一个值。

    译者注:reduce() 方法接受四个参数:初始值(上一次回调的返回值),当前元素值,当前索引,原数组。

    const myAwesomeArray = [1, 2, 3, 4, 5]
    myAwesomeArray.reduce((total, value) => total * value)
    // 1 * 2 * 3 * 4 * 5
    //-------> Output = 120

    3.Every()

    此方法是对数组中每项运行给定函数,如果数组的每个元素都与测试匹配,则返回true,反之则返回false。

    const myAwesomeArray = ["a", "b", "c", "d", "e"]
    myAwesomeArray.every(test => test === "d")
    // -------> Output : falseconst myAwesomeArray2 = ["a", "a", "a", "a", "a"]
    myAwesomeArray2.every(test => test === "a")
    //-------> Output : true

    4.map()

    该方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。它按照原始数组元素顺序依次处理元素。

    译者注:map() 不会对空数组进行检测;map() 不会改变原始数组。

    const myAwesomeArray = [5, 4, 3, 2, 1]myAwesomeArray.map(x => x * x)
    //-------> Output : 25
    //                  16
    //                  9
    //                  4
    //                  1

    5.flat()

    此方法创建一个新数组,其中包含子数组上的holden元素,并将其平整到新数组中。请注意,此方法只能进行一个级别的深度。

    const myAwesomeArray = [[1, 2], [3, 4], 5]
    myAwesomeArray.flat()
    //-------> Output : [1, 2, 3, 4, 5]

    6.filter()

    该方法接收一个函数作为参数。并返回一个新数组,该数组包含该数组的所有元素,作为参数传递的过滤函数对其返回true。

    译者注:filter()方法是对数据中的元素进行过滤,也就是说是不能修改原数组中的数据,只能读取原数组中的数据,callback需要返回布尔值;为true的时候,对应的元素留下来;为false的时候,对应的元素过滤掉。

    const myAwesomeArray = [  { id: 1, name: "john" },  
    { id: 2, name: "Ali" },  { id: 3, name: "Mass" },  
    { id: 4, name: "Mass" },]
    myAwesomeArray.filter(element => element.name === "Mass")
    //-------> Output : 0:{id: 3, name: "Mass"},
    //                  1:{id: 4, name: "Mass"}

    7.forEach()

    此方法用于调用数组的每个元素。并将元素传递给回调函数。

    译者注: forEach() 对于空数组是不会执行回调函数的。

    const myAwesomeArray = [  { id: 1, name: "john" },  
    { id: 2, name: "Ali" },  { id: 3, name: "Mass" },]
    myAwesomeArray.forEach(element => console.log(element.name))
    //-------> Output : john
    //                  Ali
    //                  Mass

    8.findIndex()

    此方法返回传入一个测试条件(函数)符合条件的数组第一个元素位置。它为数组中的每个元素都调用一次函数执行,当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置,之后的值不会再调用执行函数。如果没有符合条件的元素返回 -1

    译者注:findIndex() 对于空数组,函数是不会执行的, findIndex() 并没有改变数组的原始值。

    const myAwesomeArray = [  
    { id: 1, name: "john" }, { id: 2, name: "Ali" },
    { id: 3, name: "Mass" },
    ]
    myAwesomeArray.findIndex(element => element.id === 3)
    // -------> Output : 2myAwesomeArray.findIndex(element => element.id === 7)
    //-------> Output : -1

    9.find()

    此方法返回通过测试(函数内判断)的数组的第一个元素的值。find() 方法为数组中的每个元素都调用一次函数执行:当数组中的元素在测试条件时回 true 时, find() 返回符合条件的元素,之后的值不会再调用执行函数。如果没有符合条件的元素返回 undefined。

    译者注: find() 对于空数组,函数是不会执行的;find() 并没有改变数组的原始值。

    const myAwesomeArray = [  { id: 1, name: "john" }, 
     { id: 2, name: "Ali" },  { id: 3, name: "Mass" },]
     myAwesomeArray.find(element => element.id === 3)
     // -------> Output : {id: 3, name: "Mass"}
     myAwesomeArray.find(element => element.id === 7)
     //-------> Output : undefined

    10.sort()

    此方法接收一个函数作为参数。它对数组的元素进行排序并返回它。也可以使用含有参数的sort()方法进行排序。

    const myAwesomeArray = [5, 4, 3, 2, 1]
    // Sort from smallest to largestmyAwesomeArray.sort((a, b) => a - b)
    //  -------> Output : [1, 2, 3, 4, 5]
    // Sort from largest to smallestmyAwesomeArray.sort((a, b) => b - a)
    //-------> Output : [5, 4, 3, 2, 1]

    11.concat()

    此方法用于连接两个或多个数组/值,它不会改变现有的数组。而仅仅返回被连接数组的一个新数组。

    const myAwesomeArray = [1, 2, 3, 4, 5]const 
    myAwesomeArray2 = [10, 20, 30, 40, 50]
    myAwesomeArray.concat(myAwesomeArray2)
    //-------> Output : [1, 2, 3, 4, 5, 10, 20, 30, 40, 50]

    12.fill()

    此方法的作用是使用一个固定值来替换数组中的元素。该固定值可以是字母、数字、字符串、数组等等。它还有两个可选参数,表示填充起来的开始位置(默认为0)与结束位置(默认为array.length)。

    译者注:fill() 方法用于将一个固定值替换数组的元素。

    const myAwesomeArray = [1, 2, 3, 4, 5]
    // The first argument (0) is the value
    // The second argument (1) is the starting index
    // The third argument (3) is the ending indexmyAwesomeArray.fill(0, 1, 3)
    //-------> Output : [1, 0, 0, 4, 5]

    13.includes()

    此方法用于判断字符串是否包含指定的子字符串。如果找到匹配的字符串则返回 true,否则返回 false。
    译者注:includes() 方法区分大小写。

    const myAwesomeArray = [1, 2, 3, 4, 5]
    myAwesomeArray.includes(3)
    // -------> Output : truemyAwesomeArray.includes(8)
    // -------> Output : false

    14.reverse()

    此方法用于颠倒数组中元素的顺序。第一个元素成为最后一个,最后一个元素将成为第一个。

    const myAwesomeArray = ["e", "d", "c", "b", "a"]
    myAwesomeArray.reverse()
    // -------> Output : ['a', 'b', 'c', 'd', 'e']

    15.flatMap()

    该方法将函数应用于数组的每个元素,然后将结果压缩为一个新数组。它在一个函数中结合了flat()和map()。

    const myAwesomeArray = [[1], [2], [3], [4], [5]]
    myAwesomeArray.flatMap(arr => arr * 10)
    //-------> Output : [10, 20, 30, 40, 50]
    // With .flat() and .map()myAwesomeArray.flat().map(arr => arr * 10)
    //-------> Output : [10, 20, 30, 40, 50]

    转载,VUE中文社区

    小凤凰newObject
  • 相关阅读:
    php环境配置中各个模块在网站建设中的功能
    PHP+Apache+MySQL+phpMyAdmin在win7系统下的环境配置
    August 17th 2017 Week 33rd Thursday
    August 16th 2017 Week 33rd Wednesday
    August 15th 2017 Week 33rd Tuesday
    August 14th 2017 Week 33rd Monday
    August 13th 2017 Week 33rd Sunday
    August 12th 2017 Week 32nd Saturday
    August 11th 2017 Week 32nd Friday
    August 10th 2017 Week 32nd Thursday
  • 原文地址:https://www.cnblogs.com/xiaofenghuang/p/13730305.html
Copyright © 2020-2023  润新知