• 设为首页
  • 收藏本站
  • 积分充值
  • VIP赞助
  • 手机版
  • 微博
  • 微信
    微信公众号 添加方式:
    1:搜索微信号(888888
    2:扫描左侧二维码
  • 快捷导航
    福建二哥 门户 查看主题

    前端JavaScript数组方法总结(非常详细!)

    发布者: 天下网吧 | 发布时间: 2025-6-16 07:34| 查看数: 92| 评论数: 0|帖子模式

    一、主要的数组方法:


      1. join()
      复制代码
      :用指定的分隔符将数组每一项拼接为字符串
      1. push()
      复制代码
      :向数组的末尾添加新元素
      1. pop()
      复制代码
      :删除数组的最后一项
      1. shift()
      复制代码
      :删除数组的第一项
      1. unshift()
      复制代码
      :向数组首位添加新元素
      1. slice()
      复制代码
      :按照条件查找出其中的部分元素
      1. splice()
      复制代码
      :对数组进行增删改
      1. fill()
      复制代码
      : 方法能使用特定值填充数组中的一个或多个元素
      1. filter()
      复制代码
      :“过滤”功能
      1. concat()
      复制代码
      :用于连接两个或多个数组
      1. indexOf()
      复制代码
      :检测当前值在数组中第一次出现的位置索引
      1. lastIndexOf()
      复制代码
      :检测当前值在数组中最后一次出现的位置索引
      1. every()
      复制代码
      :判断数组中每一项都是否满足条件
      1. some()
      复制代码
      :判断数组中是否存在满足条件的项
      1. includes()
      复制代码
      :判断一个数组是否包含一个指定的值
      1. sort()
      复制代码
      :对数组的元素进行排序
      1. reverse()
      复制代码
      :对数组进行倒序
      1. forEach()
      复制代码
      :ES5 及以下循环遍历数组每一项
      1. map()
      复制代码
      :ES6 循环遍历数组每一项
      1. copyWithin()
      复制代码
      :用于从数组的指定位置拷贝元素到数组的另一个指定位置中
      1. find()
      复制代码
      :返回匹配的值
      1. findIndex()
      复制代码
      :返回匹配位置的索引
      1. toLocaleString()、toString()
      复制代码
      :将数组转换为字符串
      1. flat()、flatMap()
      复制代码
      :扁平化数组
      1. entries() 、keys() 、values()
      复制代码
      :遍历数组

    二、各类方法的具体使用


    1.join()

    在 JavaScript 里,
    1. join()
    复制代码
    是数组对象的一个方法,其作用是把数组里的所有元素连接成一个字符串。你可以指定一个分隔符,该分隔符会被 插入到数组元素之间。若不指定分隔符,默认会使用逗号 ‘,’。
    语法:
    1. arr.join([separator])
    复制代码

      1. arr
      复制代码
      :需要连接元素的数组。
      1. separator
      复制代码
      (可选):用于分隔数组元素的字符串。若省略该参数,数组元素会用逗号分隔。
    示例:
    1. //示例 1:使用默认分隔符
    2. const fruits = ['Apple', 'Banana', 'Cherry'];
    3. const result = fruits.join();
    4. console.log(result);
    5. //Apple,Banana,Cherry

    6. //示例 2:指定分隔符
    7. const numbers = [1, 2, 3, 4, 5];
    8. const customResult = numbers.join('-');
    9. console.log(customResult);
    10. //1-2-3-4-5

    11. //示例 3:使用空字符串作为分隔符
    12. const letters = ['H', 'e', 'l', 'l', 'o'];
    13. const noSeparatorResult = letters.join('');
    14. console.log(noSeparatorResult);
    15. //Hello
    复制代码
    2.push()

    在 JavaScript 中,
    1. push()
    复制代码
    是数组对象的一个方法,其主要作用是在数组的末尾添加一个或多个元素,并返回新数组的长度。该方法会直接修改原数组。
    语法:
    1. arr.push(element1[, ...[, elementN]])
    复制代码

      1. arr
      复制代码
      :要操作的数组。
      1. element1, ..., elementN
      复制代码
      :要添加到数组末尾的一个或多个元素。
    示例:
    1. // 示例 1:添加单个元素
    2. const animals = ['dog', 'cat'];
    3. const newLength = animals.push('rabbit');
    4. console.log('新数组长度:', newLength);
    5. console.log('更新后的数组:', animals);
    6. //新数组长度: 3
    7. //更新后的数组: ['dog', 'cat', 'rabbit']

    8. // 示例 2:添加多个元素
    9. const numbers = [1, 2, 3];
    10. const updatedLength = numbers.push(4, 5);
    11. console.log('新数组长度:', updatedLength);
    12. console.log('更新后的数组:', numbers);
    13. //新数组长度: 5
    14. //更新后的数组: [1, 2, 3, 4, 5]
    复制代码
    3.pop()

    在 JavaScript 里,
    1. pop()
    复制代码
    是数组对象的一个方法。其作用是移除数组的最后一个元素,并且返回该被移除的元素。若数组为空,
    1. pop()
    复制代码
    方法不会报错,而是返回
    1. undefined
    复制代码
    ,同时此方法会直接对原数组进行修改。
    语法:
    1. arr.pop()
    复制代码

      1. arr
      复制代码
      :需要操作的数组。
    示例:
    1. // 示例 1:对非空数组使用 pop() 方法
    2. const fruits = ['apple', 'banana', 'cherry'];
    3. const removedFruit = fruits.pop();
    4. console.log('被移除的元素:', removedFruit);
    5. console.log('更新后的数组:', fruits);
    6. //被移除的元素: cherry
    7. //更新后的数组: ['apple', 'banana']

    8. // 示例 2:对空数组使用 pop() 方法
    9. const emptyArray = [];
    10. const result = emptyArray.pop();
    11. console.log('返回值:', result);
    12. console.log('数组状态:', emptyArray);
    13. //返回值: undefined
    14. //数组状态: []
    复制代码
    4.shift()

    在 JavaScript 中,
    1. shift()
    复制代码
    是数组对象的一个方法,其主要功能是移除数组的第一个元素,并返回该被移除的元素。如果数组为空,
    1. shift()
    复制代码
    方法会返回
    1. undefined
    复制代码
    ,同时该方法会直接修改原数组。
    语法:
    1. arr.shift()
    复制代码

      1. arr
      复制代码
      :要操作的数组。
    示例:
    1. // 示例 1:对非空数组使用 shift() 方法
    2. const colors = ['red', 'green', 'blue'];
    3. const removedColor = colors.shift();
    4. console.log('被移除的元素:', removedColor);
    5. console.log('更新后的数组:', colors);
    6. //被移除的元素: red
    7. //更新后的数组: ['green', 'blue']

    8. // 示例 2:对空数组使用 shift() 方法
    9. const emptyArr = [];
    10. const result = emptyArr.shift();
    11. console.log('返回值:', result);
    12. console.log('数组状态:', emptyArr);
    13. //返回值: undefined
    14. //数组状态: []
    复制代码
    5.unshift()

    在 JavaScript 中,
    1. unshift()
    复制代码
    是数组对象的一个方法,其作用是在数组的开头添加一个或多个元素,并返回新数组的长度。该方法会直接修改原数组。
    语法:
    1. arr.unshift(element1[, ...[, elementN]])
    复制代码

      1. arr
      复制代码
      :要操作的数组。
      1. element1, ..., elementN
      复制代码
      :要添加到数组开头的一个或多个元素。
    示例:
    1. // 示例 1:添加单个元素
    2. const numbers = [2, 3, 4];
    3. const newLength = numbers.unshift(1);
    4. console.log('新数组的长度:', newLength);
    5. console.log('更新后的数组:', numbers);
    6. //新数组的长度: 4
    7. //更新后的数组: [1, 2, 3, 4]

    8. // 示例 2:添加多个元素
    9. const fruits = ['banana', 'cherry'];
    10. const updatedLength = fruits.unshift('apple', 'grape');
    11. console.log('新数组的长度:', updatedLength);
    12. console.log('更新后的数组:', fruits);
    13. //新数组的长度: 4
    14. //更新后的数组: ['apple', 'grape', 'banana', 'cherry']
    复制代码
    6.slice()

    在 JavaScript 中,
    1. slice()
    复制代码
    是数组对象的一个方法,用于从原数组中提取出一部分元素,组成一个新的数组,而不会对原数组进行修改。
    语法:
    1. arr.slice([begin[, end]])
    复制代码

      1. arr
      复制代码
      :需要操作的数组。
      1. begin
      复制代码
      (可选):提取元素的起始索引位置。如果省略该参数,默认从索引 0 开始。若为负数,则表示从数组末尾开始倒数的位置,例如
      1. -1
      复制代码
      表示最后一个元素。
      1. end
      复制代码
      (可选):提取元素的结束索引位置(不包含该索引对应的元素)。如果省略该参数,会提取从
      1. begin
      复制代码
      到数组末尾的所有元素。若为负数,则表示从数组末尾开始倒数的位置。
    示例:
    1. // 示例 1:省略参数
    2. const fruits = ['apple', 'banana', 'cherry', 'date', 'elderberry'];
    3. const newFruits = fruits.slice();
    4. console.log('原数组:', fruits);
    5. console.log('新数组:', newFruits);
    6. //原数组: ['apple', 'banana', 'cherry', 'date', 'elderberry']
    7. //新数组: ['apple', 'banana', 'cherry', 'date', 'elderberry']

    8. // 示例 2:指定 begin 参数
    9. const numbers = [1, 2, 3, 4, 5];
    10. const newNumbers = numbers.slice(2);
    11. console.log('原数组:', numbers);
    12. console.log('新数组:', newNumbers);
    13. //原数组: [1, 2, 3, 4, 5]
    14. //新数组: [3, 4, 5]

    15. // 示例 3:指定 begin 和 end 参数
    16. const animals = ['cat', 'dog', 'elephant', 'fox', 'giraffe'];
    17. const newAnimals = animals.slice(1, 3);
    18. console.log('原数组:', animals);
    19. console.log('新数组:', newAnimals);
    20. //原数组: ['cat', 'dog', 'elephant', 'fox', 'giraffe']
    21. //新数组: ['dog', 'elephant']

    22. // 示例 4:使用负索引
    23. const colors = ['red', 'green', 'blue', 'yellow', 'purple'];
    24. const newColors = colors.slice(-3, -1);
    25. console.log('原数组:', colors);
    26. console.log('新数组:', newColors);
    27. //原数组: ['red', 'green', 'blue', 'yellow', 'purple']
    28. //新数组: ['blue', 'yellow']
    复制代码
    7.fill()

    在 JavaScript 中,
    1. fill()
    复制代码
    是数组对象的一个方法,它可以用一个固定值填充数组中的一个或多个元素。该方法会直接修改原数组,并返回修改后的数组。
    语法:
    1. arr.fill(value[, start[, end]])
    复制代码

      1. arr
      复制代码
      :要操作的数组。
      1. value
      复制代码
      :用来填充数组元素的值。
      1. start
      复制代码
      (可选):开始填充的索引位置,默认为 0。如果是负数,则表示从数组末尾开始倒数的位置。
      1. end
      复制代码
      (可选):结束填充的索引位置(不包含该索引对应的元素),默认为数组的长度。如果是负数,则表示从数组末尾开始倒数的位置。
    示例:
    1. // 示例 1:用一个值填充整个数组
    2. const numbers = [1, 2, 3, 4, 5];
    3. const filledNumbers = numbers.fill(0);
    4. console.log('原数组(已被修改):', numbers);
    5. console.log('填充后返回的数组:', filledNumbers);
    6. //原数组(已被修改): [0, 0, 0, 0, 0]
    7. //填充后返回的数组: [0, 0, 0, 0, 0]

    8. // 示例 2:指定开始和结束位置进行填充
    9. const letters = ['a', 'b', 'c', 'd', 'e'];
    10. const filledLetters = letters.fill('x', 1, 3);
    11. console.log('原数组(已被修改):', letters);
    12. console.log('填充后返回的数组:', filledLetters);
    13. //原数组(已被修改): ['a', 'x', 'x', 'd', 'e']
    14. //填充后返回的数组: ['a', 'x', 'x', 'd', 'e']

    15. // 示例 3:使用负索引进行填充
    16. const colors = ['red', 'green', 'blue', 'yellow', 'purple'];
    17. const filledColors = colors.fill('orange', -2);
    18. console.log('原数组(已被修改):', colors);
    19. console.log('填充后返回的数组:', filledColors);
    20. //原数组(已被修改): ['red', 'green', 'blue', 'orange', 'orange']
    21. //填充后返回的数组: ['red', 'green', 'blue', 'orange', 'orange']
    复制代码
    8.filter()

    在 JavaScript 中,
    1. filter()
    复制代码
    是数组对象的一个方法,其主要作用是创建一个新数组,新数组中的元素是原数组中满足指定条件的所有元素。
    1. filter()
    复制代码
    方法不会改变原数组,而是返回一个新数组。
    语法:
    1. arr.filter(callback(element[, index[, array]])[, thisArg])
    复制代码

      1. arr
      复制代码
      :要操作的数组。
      1. callback
      复制代码
      :用来测试数组每个元素的函数,它接收三个参数:

        1. element
        复制代码
        :当前正在处理的数组元素。
        1. index
        复制代码
        (可选):当前元素的索引。
        1. array
        复制代码
        (可选):调用
        1. filter()
        复制代码
        方法的数组。

      1. thisArg
      复制代码
      (可选):执行
      1. callback
      复制代码
      函数时使用的
      1. this
      复制代码

    示例:
    1. // 示例 1:筛选出数组中的偶数
    2. const numbers = [1, 2, 3, 4, 5, 6];
    3. const evenNumbers = numbers.filter(function (number) {
    4.     return number % 2 === 0;
    5. });
    6. console.log('原数组:', numbers);
    7. console.log('筛选出的偶数数组:', evenNumbers);
    8. //原数组: [1, 2, 3, 4, 5, 6]
    9. //筛选出的偶数数组: [2, 4, 6]


    10. // 示例 2:使用箭头函数和索引筛选元素
    11. const words = ['apple', 'banana', 'cherry', 'date'];
    12. const longWords = words.filter((word, index) => {
    13.     return word.length > 5 && index % 2 === 0;
    14. });
    15. console.log('原数组:', words);
    16. console.log('筛选出的长单词且索引为偶数的数组:', longWords);
    17. //原数组: ['apple', 'banana', 'cherry', 'date']
    18. //筛选出的长单词且索引为偶数的数组: ['cherry']


    19. // 示例 3:筛选出对象数组中满足条件的对象
    20. const users = [
    21.     { name: 'Alice', age: 25 },
    22.     { name: 'Bob', age: 30 },
    23.     { name: 'Charlie', age: 22 }
    24. ];
    25. const adults = users.filter(user => user.age >= 25);
    26. console.log('原数组:', users);
    27. console.log('筛选出的成年人数组:', adults);
    28. //原数组: [ { name: 'Alice', age: 25 }, { name: 'Bob', age: 30 }, { name: 'Charlie', age: 22 } ]
    29. //筛选出的成年人数组: [ { name: 'Alice', age: 25 }, { name: 'Bob', age: 30 } ]
    复制代码
    9.concat()

    在 JavaScript 里,
    1. concat()
    复制代码
    是数组对象的一个方法,其用途是把两个或多个数组连接起来,形成一个新的数组。此方法不会改变原数组,而是返回一个全新的数组,该数组包含了原数组以及被连接数组的所有元素。
    语法:
    1. const newArray = oldArray.concat(value1[, value2[, ...[, valueN]]])
    复制代码

      1. oldArray
      复制代码
      :调用
      1. concat()
      复制代码
      方法的原始数组。
      1. value1, value2, ..., valueN
      复制代码
      (可选):要连接到
      1. oldArray
      复制代码
      末尾的数组或值。如果这些参数是数组,它们的元素会被逐个添加到新数组中;如果是其他值,则直接添加到新数组末尾。
    示例:
    1. // 示例 1:连接两个数组
    2. const array1 = [1, 2, 3];
    3. const array2 = [4, 5, 6];
    4. const newArray = array1.concat(array2);
    5. console.log('原数组1:', array1);
    6. console.log('原数组2:', array2);
    7. console.log('连接后的新数组:', newArray);
    8. //原数组1: [1, 2, 3]
    9. //原数组2: [4, 5, 6]
    10. //连接后的新数组: [1, 2, 3, 4, 5, 6]

    11. // 示例 2:连接多个数组
    12. const firstArray = ['a', 'b'];
    13. const secondArray = ['c', 'd'];
    14. const thirdArray = ['e', 'f'];
    15. const combinedArray = firstArray.concat(secondArray, thirdArray);
    16. console.log('原数组1:', firstArray);
    17. console.log('原数组2:', secondArray);
    18. console.log('原数组3:', thirdArray);
    19. console.log('连接后的新数组:', combinedArray);
    20. //原数组1: ['a', 'b']
    21. //原数组2: ['c', 'd']
    22. //原数组3: ['e', 'f']
    23. //连接后的新数组: ['a', 'b', 'c', 'd', 'e', 'f']

    24. // 示例 3:连接数组和值
    25. const originalArray = [10, 20];
    26. const newArrayWithValue = originalArray.concat(30, [40, 50]);
    27. console.log('原数组:', originalArray);
    28. console.log('连接后的新数组:', newArrayWithValue);
    29. //原数组: [10, 20]
    30. //连接后的新数组: [10, 20, 30, 40, 50]

    31.    
    复制代码
    10.indexOf()

    在 JavaScript 中,
    1. indexOf()
    复制代码
    是数组对象的一个方法,用于查找某个指定的值在数组中首次出现的索引位置。如果该值存在于数组中,就返回它的索引;若不存在,则返回
    1. -1
    复制代码
    。此方法进行的是严格相等比较(即
    1. ===
    复制代码
    )。
    语法:
    1. arr.indexOf(searchElement[, fromIndex])
    复制代码

      1. arr
      复制代码
      :要进行查找操作的数组。
      1. searchElement
      复制代码
      :需要在数组中查找的元素。
      1. fromIndex
      复制代码
      (可选):开始查找的索引位置,默认值为
      1. 0
      复制代码
      。若该值为负数,则从数组末尾倒数相应位置开始查找,但查找顺序依然是从前往后。
    示例:
    1. // 示例 1:基本查找
    2. const fruits = ['apple', 'banana', 'cherry', 'banana'];
    3. const index = fruits.indexOf('banana');
    4. console.log('数组:', fruits);
    5. console.log('"banana" 首次出现的索引:', index);
    6. //数组: ['apple', 'banana', 'cherry', 'banana']
    7. //"banana" 首次出现的索引: 1

    8. // 示例 2:指定起始索引查找
    9. const numbers = [10, 20, 30, 20, 40];
    10. const newIndex = numbers.indexOf(20, 2);
    11. console.log('数组:', numbers);
    12. console.log('从索引 2 开始查找,"20" 首次出现的索引:', newIndex);
    13. //数组: [10, 20, 30, 20, 40]
    14. //从索引 2 开始查找,"20" 首次出现的索引: 3

    15. // 示例 3:查找不存在的元素
    16. const colors = ['red', 'green', 'blue'];
    17. const nonExistentIndex = colors.indexOf('yellow');
    18. console.log('数组:', colors);
    19. console.log('"yellow" 首次出现的索引:', nonExistentIndex);
    20. //数组: ['red', 'green', 'blue']
    21. //"yellow" 首次出现的索引: -1
    复制代码
    11.lastIndexOf()

    在 JavaScript 中,
    1. lastIndexOf()
    复制代码
    是数组对象的一个方法,其主要作用是查找指定元素在数组中最后一次出现的索引位置。如果数组中存在该元素,就返回其最后一次出现的索引;若不存在,则返回
    1. -1
    复制代码
    。该方法进行的是严格相等比较(即
    1. ===
    复制代码
    )。
    语法:
    1. arr.lastIndexOf(searchElement[, fromIndex])
    复制代码

      1. arr
      复制代码
      :要进行查找操作的数组。
      1. searchElement
      复制代码
      :需要在数组中查找的元素。
      1. fromIndex
      复制代码
      (可选):开始反向查找的索引位置。默认值为数组的长度减 1,也就是从数组的最后一个元素开始查找。若该值为负数,则从数组末尾倒数相应位置开始反向查找。
    示例:
    1. // 示例 1:基本查找
    2. const fruits = ['apple', 'banana', 'cherry', 'banana'];
    3. const lastIndex = fruits.lastIndexOf('banana');
    4. console.log('数组:', fruits);
    5. console.log('"banana" 最后一次出现的索引:', lastIndex);
    6. //数组: ['apple', 'banana', 'cherry', 'banana']
    7. //"banana" 最后一次出现的索引: 3

    8. // 示例 2:指定起始索引查找
    9. const numbers = [10, 20, 30, 20, 40];
    10. const newLastIndex = numbers.lastIndexOf(20, 2);
    11. console.log('数组:', numbers);
    12. console.log('从索引 2 开始反向查找,"20" 最后一次出现的索引:', newLastIndex);
    13. //数组: [10, 20, 30, 20, 40]
    14. //从索引 2 开始反向查找,"20" 最后一次出现的索引: 1

    15. // 示例 3:查找不存在的元素
    16. const colors = ['red', 'green', 'blue'];
    17. const nonExistentLastIndex = colors.lastIndexOf('yellow');
    18. console.log('数组:', colors);
    19. console.log('"yellow" 最后一次出现的索引:', nonExistentLastIndex);
    20. //数组: ['red', 'green', 'blue']
    21. //"yellow" 最后一次出现的索引: -1
    复制代码
    12.every()

    在 JavaScript 里,
    1. every()
    复制代码
    是数组对象的一个方法。它用于检测数组里的所有元素是否都满足指定的条件。该方法会对数组中的每个元素执行一次提供的测试函数,若所有元素都使测试函数返回
    1. true
    复制代码
    ,则
    1. every()
    复制代码
    方法返回
    1. true
    复制代码
    ;只要有一个元素使测试函数返回
    1. false
    复制代码
    ,就会立即停止遍历并返回
    1. false
    复制代码
    。此方法不会改变原数组。
    语法:
    1. arr.every(callback(element[, index[, array]])[, thisArg])
    复制代码

      1. arr
      复制代码
      :要进行检测的数组。
      1. callback
      复制代码
      :用来测试每个元素的函数,它接收三个参数:

        1. element
        复制代码
        :当前正在处理的数组元素。
        1. index
        复制代码
        (可选):当前元素的索引。
        1. array
        复制代码
        (可选):调用
        1. every()
        复制代码
        方法的数组。

      1. thisArg
      复制代码
      (可选):执行
      1. callback
      复制代码
      函数时使用的
      1. this
      复制代码
      值。
    示例:
    1. // 示例 1:检查数组中的所有元素是否都大于 0
    2. const numbers = [1, 2, 3, 4, 5];
    3. const allPositive = numbers.every(function (number) {
    4.     return number > 0;
    5. });
    6. console.log('数组:', numbers);
    7. console.log('数组中的所有元素是否都大于 0:', allPositive);
    8. //数组: [1, 2, 3, 4, 5]
    9. //数组中的所有元素是否都大于 0: true

    10. // 示例 2:使用箭头函数检查数组中的所有元素长度是否都大于 3
    11. const words = ['apple', 'banana', 'cherry'];
    12. const allLongWords = words.every(word => word.length > 3);
    13. console.log('数组:', words);
    14. console.log('数组中的所有元素长度是否都大于 3:', allLongWords);
    15. //数组: ['apple', 'banana', 'cherry']
    16. //数组中的所有元素长度是否都大于 3: true

    17. // 示例 3:检查数组中的所有元素是否都是偶数
    18. const mixedNumbers = [2, 4, 6, 7];
    19. const allEven = mixedNumbers.every(num => num % 2 === 0);
    20. console.log('数组:', mixedNumbers);
    21. console.log('数组中的所有元素是否都是偶数:', allEven);
    22. //数组: [2, 4, 6, 7]
    23. //数组中的所有元素是否都是偶数: false
    24.    
    复制代码
    13.some()

    在 JavaScript 中,
    1. some()
    复制代码
    是数组对象的一个方法,用于检测数组中是否至少有一个元素满足指定的条件。它会对数组中的每个元素依次执行你提供的测试函数,只要有一个元素使测试函数返回
    1. true
    复制代码
    1. some()
    复制代码
    方法就会立即返回
    1. true
    复制代码
    ;若所有元素都使测试函数返回
    1. false
    复制代码
    ,则
    1. some()
    复制代码
    方法返回
    1. false
    复制代码
    。此方法不会改变原数组。
    语法:
    1. arr.some(callback(element[, index[, array]])[, thisArg])
    复制代码

      1. arr
      复制代码
      :要进行检测的数组。
      1. callback
      复制代码
      :用于测试每个元素的函数,该函数接收三个参数:

        1. element
        复制代码
        :当前正在处理的数组元素。
        1. index
        复制代码
        (可选):当前元素的索引。
        1. array
        复制代码
        (可选):调用
        1. some()
        复制代码
        方法的数组。

      1. thisArg
      复制代码
      (可选):执行
      1. callback
      复制代码
      函数时使用的
      1. this
      复制代码
      值。
    示例:
    1. // 示例 1:检查数组中是否有元素大于 5
    2. const numbers = [1, 3, 7, 4];
    3. const hasGreaterThanFive = numbers.some(function (number) {
    4.     return number > 5;
    5. });
    6. console.log('数组:', numbers);
    7. console.log('数组中是否有元素大于 5:', hasGreaterThanFive);
    8. //数组: [1, 3, 7, 4]
    9. //数组中是否有元素大于 5: true

    10. // 示例 2:使用箭头函数检查数组中是否有元素长度小于 3
    11. const words = ['apple', 'cat', 'banana'];
    12. const hasShortWord = words.some(word => word.length < 3);
    13. console.log('数组:', words);
    14. console.log('数组中是否有元素长度小于 3:', hasShortWord);
    15. //数组: ['apple', 'cat', 'banana']
    16. //数组中是否有元素长度小于 3: false

    17. // 示例 3:检查数组中是否有偶数
    18. const mixedNumbers = [1, 3, 5, 8];
    19. const hasEvenNumber = mixedNumbers.some(num => num % 2 === 0);
    20. console.log('数组:', mixedNumbers);
    21. console.log('数组中是否有偶数:', hasEvenNumber);
    22. //数组: [1, 3, 5, 8]
    23. //数组中是否有偶数: true
    复制代码
    14.includes()

    在 JavaScript 里,
    1. includes()
    复制代码
    是数组对象的一个方法,它用于判断数组是否包含某个指定的值。若包含则返回
    1. true
    复制代码
    ,不包含则返回
    1. false
    复制代码
    。此方法进行的是严格相等比较(即
    1. ===
    复制代码
    ),并且可以指定从哪个索引位置开始查找。
    语法:
    1. arr.includes(valueToFind[, fromIndex])
    复制代码

      1. arr
      复制代码
      :要进行检查的数组。
      1. valueToFind
      复制代码
      :需要在数组中查找的值。
      1. fromIndex
      复制代码
      (可选):开始查找的索引位置,默认值为
      1. 0
      复制代码
      。若该值为负数,则从数组末尾倒数相应位置开始查找,但查找顺序依然是从前往后。若
      1. fromIndex
      复制代码
      的绝对值大于数组长度,会直接从索引
      1. 0
      复制代码
      开始查找。
    示例:
    1. // 示例 1:基本查找
    2. const fruits = ['apple', 'banana', 'cherry'];
    3. const hasBanana = fruits.includes('banana');
    4. console.log('数组:', fruits);
    5. console.log('数组中是否包含 "banana":', hasBanana);
    6. //数组: ['apple', 'banana', 'cherry']
    7. //数组中是否包含 "banana": true

    8. // 示例 2:指定起始索引查找
    9. const numbers = [10, 20, 30, 20];
    10. const hasTwentyFromIndexTwo = numbers.includes(20, 2);
    11. console.log('数组:', numbers);
    12. console.log('从索引 2 开始查找,数组中是否包含 "20":', hasTwentyFromIndexTwo);
    13. //数组: [10, 20, 30, 20]
    14. //从索引 2 开始查找,数组中是否包含 "20": true

    15. // 示例 3:查找不存在的元素
    16. const colors = ['red', 'green', 'blue'];
    17. const hasYellow = colors.includes('yellow');
    18. console.log('数组:', colors);
    19. console.log('数组中是否包含 "yellow":', hasYellow);
    20. //数组: ['red', 'green', 'blue']
    21. //数组中是否包含 "yellow": false

    22. // 示例 4:使用负索引查找
    23. const letters = ['a', 'b', 'c', 'd'];
    24. const hasBFromNegativeIndex = letters.includes('b', -3);
    25. console.log('数组:', letters);
    26. console.log('从倒数第 3 个位置开始查找,数组中是否包含 "b":', hasBFromNegativeIndex);
    27. //数组: ['a', 'b', 'c', 'd']
    28. //从倒数第 3 个位置开始查找,数组中是否包含 "b": true
    复制代码
    15.sort()

    在 JavaScript 中,
    1. sort()
    复制代码
    是数组对象的一个方法,用于对数组的元素进行排序。默认情况下,
    1. sort()
    复制代码
    方法会将数组元素转换为字符串,然后按照 Unicode 编码顺序进行排序。这意味着如果直接对数字数组使用
    1. sort()
    复制代码
    方法,可能无法得到预期的数字大小排序结果。不过,你可以通过传入一个比较函数来定义自定义的排序规则。
    1. sort()
    复制代码
    方法会直接修改原数组,并返回排序后的数组。
    语法:
    1. arr.sort([compareFunction])
    复制代码

      1. arr
      复制代码
      :要进行排序的数组。
      1. compareFunction
      复制代码
      (可选):用于定义排序规则的比较函数。该函数接收两个参数
      1. a
      复制代码
      1. b
      复制代码
      ,表示数组中的两个元素,根据返回值的正负来决定元素的排序顺序:

      • 如果返回值小于 0,则
        1. a
        复制代码
        会被排列到
        1. b
        复制代码
        之前。
      • 如果返回值等于 0,则
        1. a
        复制代码
        1. b
        复制代码
        的相对位置不变。
      • 如果返回值大于 0,则
        1. b
        复制代码
        会被排列到
        1. a
        复制代码
        之前。

    示例:
    1. // 示例 1:默认排序(按 Unicode 编码顺序)
    2. const fruits = ['banana', 'apple', 'cherry'];
    3. const sortedFruits = fruits.sort();
    4. console.log('原数组(已被修改):', fruits);
    5. console.log('排序后返回的数组:', sortedFruits);
    6. //原数组(已被修改): ['apple', 'banana', 'cherry']
    7. //排序后返回的数组: ['apple', 'banana', 'cherry']

    8. // 示例 2:对数字数组使用默认排序
    9. const numbers = [10, 5, 2, 20];
    10. const defaultSortedNumbers = numbers.sort();
    11. console.log('原数组(已被修改):', numbers);
    12. console.log('默认排序后返回的数组:', defaultSortedNumbers);
    13. //原数组(已被修改): [10, 2, 20, 5]
    14. //默认排序后返回的数组: [10, 2, 20, 5]

    15. // 示例 3:使用比较函数对数字数组进行升序排序
    16. const newNumbers = [10, 5, 2, 20];
    17. const ascendingSortedNumbers = newNumbers.sort((a, b) => a - b);
    18. console.log('原数组(已被修改):', newNumbers);
    19. console.log('升序排序后返回的数组:', ascendingSortedNumbers);
    20. //原数组(已被修改): [2, 5, 10, 20]
    21. //升序排序后返回的数组: [2, 5, 10, 20]

    22. // 示例 4:使用比较函数对数字数组进行降序排序
    23. const anotherNumbers = [10, 5, 2, 20];
    24. const descendingSortedNumbers = anotherNumbers.sort((a, b) => b - a);
    25. console.log('原数组(已被修改):', anotherNumbers);
    26. console.log('降序排序后返回的数组:', descendingSortedNumbers);
    27. //原数组(已被修改): [20, 10, 5, 2]
    28. //降序排序后返回的数组: [20, 10, 5, 2]
    复制代码
    16.reverse()

    在 JavaScript 中,
    1. reverse()
    复制代码
    是数组对象的一个方法,其主要功能是颠倒数组中元素的顺序。该方法会直接修改原数组,将数组元素的排列顺序反转,最后返回修改后的原数组
    语法:
    1. arr.reverse()
    复制代码

      1. arr
      复制代码
      :要进行元素顺序颠倒操作的数组。
    示例:
    1. // 示例 1:对普通数组使用 reverse() 方法
    2. const numbers = [1, 2, 3, 4, 5];
    3. const reversedNumbers = numbers.reverse();
    4. console.log('原数组(已被修改):', numbers);
    5. console.log('反转后返回的数组:', reversedNumbers);
    6. //原数组(已被修改): [5, 4, 3, 2, 1]
    7. //反转后返回的数组: [5, 4, 3, 2, 1]

    8. // 示例 2:对字符串数组使用 reverse() 方法
    9. const fruits = ['apple', 'banana', 'cherry'];
    10. const reversedFruits = fruits.reverse();
    11. console.log('原数组(已被修改):', fruits);
    12. console.log('反转后返回的数组:', reversedFruits);
    13. //原数组(已被修改): ['cherry', 'banana', 'apple']
    14. //反转后返回的数组: ['cherry', 'banana', 'apple']
    复制代码
    17.forEach()

    在 JavaScript 里,
    1. forEach()
    复制代码
    是数组对象的一个方法,它用于对数组的每个元素执行一次提供的函数。
    1. forEach()
    复制代码
    方法没有返回值,其主要目的是遍历数组元素并对每个元素执行特定操作。这个方法为数组中的每个元素依次调用一次你提供的回调函数,并且不会改变原数组。
    语法:
    1. arr.forEach(callback(currentValue[, index[, array]])[, thisArg])
    复制代码

      1. arr
      复制代码
      :要进行遍历的数组。
      1. callback
      复制代码
      :为数组中每个元素执行的函数,该函数接收三个参数:

        1. currentValue
        复制代码
        :当前正在处理的数组元素。
        1. index
        复制代码
        (可选):当前元素的索引。
        1. array
        复制代码
        (可选):调用
        1. forEach()
        复制代码
        方法的数组。

      1. thisArg
      复制代码
      (可选):执行
      1. callback
      复制代码
      函数时使用的
      1. this
      复制代码
      值。
    示例:
    1. // 示例 1:简单遍历数组并打印元素
    2. const numbers = [1, 2, 3, 4, 5];
    3. numbers.forEach(function (number) {
    4.     console.log(number);
    5. });
    6. //1
    7. //2
    8. //3
    9. //4
    10. //5

    11. // 示例 2:使用索引和数组参数
    12. const fruits = ['apple', 'banana', 'cherry'];
    13. fruits.forEach(function (fruit, index, array) {
    14.     console.log(`索引 ${index} 处的元素是 ${fruit},数组是 ${array}`);
    15. });
    16. //索引 0 处的元素是 apple,数组是 apple,banana,cherry
    17. //索引 1 处的元素是 banana,数组是 apple,banana,cherry
    18. //索引 2 处的元素是 cherry,数组是 apple,banana,cherry

    19. // 示例 3:使用箭头函数和累加操作
    20. let sum = 0;
    21. const newNumbers = [10, 20, 30];
    22. newNumbers.forEach((number) => {
    23.     sum += number;
    24. });
    25. console.log('数组元素的总和是:', sum);
    26. //数组元素的总和是: 60
    复制代码
    18.map()

    在 JavaScript 中,
    1. map()
    复制代码
    是数组对象的一个方法,它用于创建一个新数组,新数组中的元素是原数组中每个元素经过指定函数处理后的结果。也就是说,
    1. map()
    复制代码
    方法会对原数组的每个元素依次调用你提供的回调函数,并将回调函数的返回值作为新数组对应位置的元素。该方法不会改变原数组。
    语法:
    1. arr.map(callback(currentValue[, index[, array]])[, thisArg])
    复制代码

      1. arr
      复制代码
      :要进行操作的原数组。
      1. callback
      复制代码
      :为数组中每个元素执行的函数,该函数接收三个参数:

        1. currentValue
        复制代码
        :当前正在处理的数组元素。
        1. index
        复制代码
        (可选):当前元素的索引。
        1. array
        复制代码
        (可选):调用
        1. map()
        复制代码
        方法的数组。

      1. thisArg
      复制代码
      (可选):执行
      1. callback
      复制代码
      函数时使用的
      1. this
      复制代码
      值。
    示例:
    1. // 示例 1:将数组中的每个元素乘以 2
    2. const numbers = [1, 2, 3, 4, 5];
    3. const doubledNumbers = numbers.map(function (number) {
    4.     return number * 2;
    5. });
    6. console.log('原数组:', numbers);
    7. console.log('新数组(每个元素乘以 2):', doubledNumbers);
    8. //原数组: [1, 2, 3, 4, 5]
    9. //新数组(每个元素乘以 2): [2, 4, 6, 8, 10]

    10. // 示例 2:使用箭头函数和索引参数
    11. const names = ['Alice', 'Bob', 'Charlie'];
    12. const nameWithIndex = names.map((name, index) => `${index + 1}. ${name}`);
    13. console.log('原数组:', names);
    14. console.log('新数组(添加索引):', nameWithIndex);
    15. //原数组: ['Alice', 'Bob', 'Charlie']
    16. //新数组(添加索引): ['1. Alice', '2. Bob', '3. Charlie']

    17. // 示例 3:处理对象数组
    18. const users = [
    19.     { name: 'Alice', age: 25 },
    20.     { name: 'Bob', age: 30 },
    21.     { name: 'Charlie', age: 22 }
    22. ];
    23. const userAges = users.map(user => user.age);
    24. console.log('原数组:', users);
    25. console.log('新数组(只包含年龄):', userAges);
    26. //原数组: [ { name: 'Alice', age: 25 }, { name: 'Bob', age: 30 }, { name: 'Charlie', age: 22 } ]
    27. //新数组(只包含年龄): [25, 30, 22]
    复制代码
    19.copyWithin()

    在 JavaScript 中,
    1. copyWithin()
    复制代码
    是数组对象的一个方法,它用于在数组内部将指定位置的元素复制到其他位置(覆盖原有元素),并返回修改后的原数组。该方法会直接修改原数组,不会改变数组的长度。
    语法:
    1. arr.copyWithin(target[, start[, end]])
    复制代码

      1. arr
      复制代码
      :要进行操作的数组。
      1. target
      复制代码
      :复制序列到该位置。如果是负数,
      1. target
      复制代码
      将从数组末尾开始计算。
      1. start
      复制代码
      (可选):开始复制元素的起始位置。默认值为 0。如果是负数,
      1. start
      复制代码
      将从数组末尾开始计算。
      1. end
      复制代码
      (可选):停止复制元素的结束位置(不包含该位置的元素)。默认值为数组的长度。如果是负数,
      1. end
      复制代码
      将从数组末尾开始计算。
    示例:
    1. // 示例 1:简单复制
    2. const numbers = [1, 2, 3, 4, 5];
    3. // 从索引 0 开始复制元素,复制到索引 3 的位置
    4. const result = numbers.copyWithin(3);
    5. console.log('修改后的数组:', result);
    6. //修改后的数组: [1, 2, 3, 1, 2]

    7. // 示例 2:指定起始和结束位置复制
    8. const letters = ['a', 'b', 'c', 'd', 'e'];
    9. // 从索引 1 开始复制元素,到索引 3 停止复制,复制到索引 0 的位置
    10. const newResult = letters.copyWithin(0, 1, 3);
    11. console.log('修改后的数组:', newResult);
    12. //修改后的数组: ['b', 'c', 'c', 'd', 'e']

    13. // 示例 3:使用负索引复制
    14. const colors = ['red', 'green', 'blue', 'yellow', 'purple'];
    15. // 从倒数第 2 个元素开始复制,复制到倒数第 4 个元素的位置
    16. const finalResult = colors.copyWithin(-4, -2);
    17. console.log('修改后的数组:', finalResult);
    18. //修改后的数组: ['red', 'yellow', 'purple', 'yellow', 'purple']
    19.    
    复制代码
    20.find()

    在 JavaScript 中,
    1. find()
    复制代码
    是数组对象的一个方法,它用于查找数组中满足指定条件的第一个元素。该方法会对数组中的每个元素依次执行你提供的测试函数,一旦某个元素使测试函数返回
    1. true
    复制代码
    1. find()
    复制代码
    方法就会立即返回该元素;如果数组中没有元素能使测试函数返回
    1. true
    复制代码
    ,则返回
    1. undefined
    复制代码
    1. find()
    复制代码
    方法不会改变原数组。
    语法:
    1. arr.find(callback(element[, index[, array]])[, thisArg])
    复制代码

      1. arr
      复制代码
      :要进行查找操作的数组。
      1. callback
      复制代码
      :用于测试每个元素的函数,该函数接收三个参数:

        1. element
        复制代码
        :当前正在处理的数组元素。
        1. index
        复制代码
        (可选):当前元素的索引。
        1. array
        复制代码
        (可选):调用
        1. find()
        复制代码
        方法的数组。

      1. thisArg
      复制代码
      (可选):执行
      1. callback
      复制代码
      函数时使用的
      1. this
      复制代码
      值。
    示例:
    1. // 示例 1:查找数组中第一个大于 5 的元素
    2. const numbers = [1, 3, 7, 4, 9];
    3. const firstGreaterThanFive = numbers.find(function (number) {
    4.     return number > 5;
    5. });
    6. console.log('数组:', numbers);
    7. console.log('数组中第一个大于 5 的元素:', firstGreaterThanFive);
    8. //数组: [1, 3, 7, 4, 9]
    9. //数组中第一个大于 5 的元素: 7

    10. // 示例 2:使用箭头函数查找对象数组中年龄大于 25 的第一个用户
    11. const users = [
    12.     { name: 'Alice', age: 22 },
    13.     { name: 'Bob', age: 28 },
    14.     { name: 'Charlie', age: 20 }
    15. ];
    16. const firstUserOver25 = users.find(user => user.age > 25);
    17. console.log('数组:', users);
    18. console.log('数组中年龄大于 25 的第一个用户:', firstUserOver25);
    19. //数组: [ { name: 'Alice', age: 22 }, { name: 'Bob', age: 28 }, { name: 'Charlie', age: 20 } ]
    20. //数组中年龄大于 25 的第一个用户: { name: 'Bob', age: 28 }

    21. // 示例 3:查找不存在的元素
    22. const letters = ['a', 'b', 'c'];
    23. const nonExistentElement = letters.find(letter => letter === 'd');
    24. console.log('数组:', letters);
    25. console.log('查找结果:', nonExistentElement);
    26. //数组: ['a', 'b', 'c']
    27. //查找结果: undefined
    复制代码
    21.findIndex()

    在 JavaScript 中,
    1. findIndex()
    复制代码
    是数组对象的一个方法,其作用是查找数组中满足指定条件的第一个元素的索引。它会对数组中的每个元素依次执行你提供的测试函数,一旦某个元素使测试函数返回
    1. true
    复制代码
    1. findIndex()
    复制代码
    方法就会立即返回该元素的索引;若数组中没有元素能使测试函数返回
    1. true
    复制代码
    ,则返回
    1. -1
    复制代码
    。此方法不会改变原数组。
    语法:

      1. arr
      复制代码
      :要进行查找操作的数组。
      1. callback
      复制代码
      :用于测试每个元素的函数,该函数接收三个参数:

        1. element
        复制代码
        :当前正在处理的数组元素。
        1. index
        复制代码
        (可选):当前元素的索引。
        1. array
        复制代码
        (可选):调用
        1. findIndex()
        复制代码
        方法的数组。

      1. thisArg
      复制代码
      (可选):执行
      1. callback
      复制代码
      函数时使用的
      1. this
      复制代码
      值。
    示例:
    1. // 示例 1:查找数组中第一个大于 10 的元素的索引
    2. const numbers = [5, 8, 12, 3, 15];
    3. const index = numbers.findIndex(function (number) {
    4.     return number > 10;
    5. });
    6. console.log('数组:', numbers);
    7. console.log('数组中第一个大于 10 的元素的索引:', index);
    8. //数组: [5, 8, 12, 3, 15]
    9. //数组中第一个大于 10 的元素的索引: 2

    10. // 示例 2:使用箭头函数查找对象数组中年龄大于 25 的第一个用户的索引
    11. const users = [
    12.     { name: 'Alice', age: 22 },
    13.     { name: 'Bob', age: 28 },
    14.     { name: 'Charlie', age: 20 }
    15. ];
    16. const userIndex = users.findIndex(user => user.age > 25);
    17. console.log('数组:', users);
    18. console.log('数组中年龄大于 25 的第一个用户的索引:', userIndex);
    19. //数组: [ { name: 'Alice', age: 22 }, { name: 'Bob', age: 28 }, { name: 'Charlie', age: 20 } ]
    20. //数组中年龄大于 25 的第一个用户的索引: 1

    21. // 示例 3:查找不存在的元素的索引
    22. const letters = ['a', 'b', 'c'];
    23. const nonExistentIndex = letters.findIndex(letter => letter === 'd');
    24. console.log('数组:', letters);
    25. console.log('查找结果:', nonExistentIndex);
    26. //数组: ['a', 'b', 'c']
    27. //查找结果: -1
    复制代码
    总结

    到此这篇关于前端JavaScript数组方法的文章就介绍到这了,更多相关前端js数组方法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

    来源:https://www.jb51.net/javascript/3395314kg.htm
    免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!

    最新评论

    QQ Archiver 手机版 小黑屋 福建二哥 ( 闽ICP备2022004717号|闽公网安备35052402000345号 )

    Powered by Discuz! X3.5 © 2001-2023

    快速回复 返回顶部 返回列表