数组常用的API有哪些

1. Array构造函数方法

 Array.isArray(arr) 

       Array.isArray(arr) 是 JavaScript 中用于检查一个值是否是数组的方法。它返回一个布尔值,如果给定的值是数组,则返回 true,否则返回 false

 语法:

Array.isArray(value);
  • value:要检查的值。

返回值: 

  • 如果 value 是数组,则返回 true;否则返回 false

示例: 

const numbers = [1, 2, 3];

// 检查是否是数组
console.log(Array.isArray(numbers)); // 输出: true

const notAnArray = 'Hello';

// 检查是否是数组
console.log(Array.isArray(notAnArray)); // 输出: false

        在上述示例中,Array.isArray(numbers) 返回 true,因为 numbers 是一个数组。而 Array.isArray(notAnArray) 返回 false,因为 notAnArray 不是数组。 


2.原地修改数组方法(不会返回新数组)

 arr.push() 

       arr.push() 是 JavaScript 中用于向数组末尾添加一个或多个元素的方法。该方法会修改原始数组,返回修改后的数组的长度。 注意:添加多个元素要用展开语法 arr.push(...[1,2,3])

 语法:

arr.push(element1, ..., elementN);
  • element1, ..., elementN:要添加到数组末尾的元素。

返回值: 

  • 如果 value 是数组,则返回 true;否则返回 false

示例: 

const fruits = ['apple', 'orange', 'banana'];

// 向数组末尾添加一个元素
const newLength = fruits.push('grape');
console.log(fruits); // 输出: ['apple', 'orange', 'banana', 'grape']
console.log(newLength); // 输出: 4

// 向数组末尾添加多个元素
fruits.push('pineapple', 'kiwi');
console.log(fruits); // 输出: ['apple', 'orange', 'banana', 'grape', 'pineapple', 'kiwi']

        在上述示例中,fruits.push('grape')fruits 数组末尾添加了一个元素 'grape',并返回新的数组长度。后续的 fruits.push('pineapple', 'kiwi') 添加了多个元素,同样修改了原始数组。   


 arr.pop()

       arr.pop() 是 JavaScript 中用于从数组末尾移除并返回一个元素的方法。该方法会修改原始数组,返回被移除的元素。(简单的说就是:弹出末尾元素,并返回它)

 语法:

const poppedElement = arr.pop();
  • poppedElement:被移除的元素。

示例: 

const fruits = ['apple', 'orange', 'banana'];

// 从数组末尾移除一个元素
const removedElement = fruits.pop();
console.log(fruits); // 输出: ['apple', 'orange']
console.log(removedElement); // 输出: 'banana'

        在上述示例中,fruits.pop()fruits 数组末尾移除了一个元素,并返回被移除的元素 'banana'。原始数组被修改,仅包含 'apple''orange' 两个元素。


 arr.reverse()

       arr.reverse() 是 JavaScript 中用于颠倒数组元素顺序的方法。该方法会修改原始数组,并返回颠倒后的数组。(简单的说就是:反转数组)

 语法:

arr.reverse();

示例: 

const fruits = ['apple', 'orange', 'banana'];

// 颠倒数组元素顺序
fruits.reverse();
console.log(fruits); // 输出: ['banana', 'orange', 'apple']

        在上述示例中,fruits.reverse()fruits 数组中的元素顺序颠倒,原始数组被修改成 ['banana', 'orange', 'apple']。请注意,该方法会直接修改原始数组,而不会创建一个新的数组。 


  arr.sort()

       arr.sort() 是 JavaScript 中用于对数组元素进行排序的方法。该方法会修改原始数组,并返回排序后的数组。

 语法:

arr.sort([compareFunction]);
  • compareFunction(可选):用于指定排序顺序的比较函数。如果不提供该参数,则元素按照转换为字符串的各个字符的 Unicode 位点进行排序。

示例: 

const numbers = [5, 2, 9, 1];

// 默认排序(按字符的 Unicode 位点)
numbers.sort();
console.log(numbers); // 输出: [1, 2, 5, 9]

// 使用比较函数进行数字排序
numbers.sort((a, b) => a - b);
console.log(numbers); // 输出: [1, 2, 5, 9]

numbers.sort((a, b) => b - a);
console.log(numbers); // 输出: [9, 5, 2, 1]

//如果不提供比较函数,默认的 numbers.sort() 会将数组元素都转换为字符串,然后按照字符的 Unicode 位点进行排序,对于数字,这样的排序方式可能会导致不符合数字顺序的结果。
const numbersTwo = [3, 10, 2, 1];

// 默认排序(按字符的 Unicode 位点)
numbersTwo.sort();
console.log(numbersTwo); // 输出: [1, 10, 2, 3]

// 使用比较函数进行数字排序
numbersTwo.sort((a, b) => a - b);
console.log(numbersTwo); // 输出: [1, 2, 3, 10]

        在上述示例中,numbers.sort() 默认按字符的 Unicode 位点对数组元素进行排序,结果是 [1, 2, 5, 9]。为了实现数字排序,我们提供了一个比较函数 (a, b) => a - b,它按升序排列数字。numbersTwo.sort() 将数组元素 [3, 10, 2, 1] 转换为字符串后,按字符的 Unicode 位点进行排序,结果是 [1, 10, 2, 3]。这是因为字符 "1" 在 Unicode 中的位点小于字符 "2",所以 "10" 排在 "2" 前面。

注意事项: 

  • 如果省略 compareFunctionsort 方法会将数组元素都转换为字符串进行比较。这可能导致不符合数字顺序的结果。
  • 提供 compareFunction 函数时,它应该返回负值、零或正值,分别表示 a 应该在 b 前面、相等或在 b 后面。

  arr.shift()

       arr.shift() 是 JavaScript 中用于从数组的开头移除并返回一个元素的方法。该方法会修改原始数组,并返回被移除的元素。(简单的说就是:删除并返回第一个元素)

 语法:

const shiftedElement = arr.shift();
  • shiftedElement:被移除的元素。

示例: 

const fruits = ['apple', 'orange', 'banana'];

// 从数组开头移除一个元素
const removedElement = fruits.shift();
console.log(fruits); // 输出: ['orange', 'banana']
console.log(removedElement); // 输出: 'apple'

        在上述示例中,fruits.shift()fruits 数组开头移除了一个元素,并返回被移除的元素 'apple'。原始数组被修改,仅包含 'orange''banana' 两个元素。 


 arr.splice(index, howmany, item1, item2, item3)

       arr.splice(index, howmany, item1, item2, ..., itemN) 是 JavaScript 中用于修改数组的方法,它可以删除元素、添加元素或替换元素。起始位置由index决定,多少个由howmany决定,item是要增加或替换成的元素。

参数: 

  • index:必需,指定要开始修改的位置(索引)。
  • howmany:可选,表示要删除的元素数量。如果为 0,则不删除元素。
  • item1, item2, ..., itemN:可选,要添加到数组的新元素。

返回值: 

  • 该方法返回被删除的元素组成的数组。

示例: 

const fruits = ['apple', 'orange', 'banana', 'grape'];

// 删除元素
const removedElements = fruits.splice(1, 2);
console.log(fruits); // 输出: ['apple', 'grape']
console.log(removedElements); // 输出: ['orange', 'banana']

// 添加元素
fruits.splice(1, 0, 'kiwi', 'melon');
console.log(fruits); // 输出: ['apple', 'kiwi', 'melon', 'grape']

// 替换元素
fruits.splice(2, 1, 'cherry');
console.log(fruits); // 输出: ['apple', 'kiwi', 'cherry', 'grape']

        在上述示例中:

  • fruits.splice(1, 2) 从索引 1 开始删除 2 个元素,返回被删除的元素数组 ['orange', 'banana']
  • fruits.splice(1, 0, 'kiwi', 'melon') 从索引 1 开始不删除元素,但在该位置添加了 'kiwi''melon'
  • fruits.splice(2, 1, 'cherry') 从索引 2 开始删除 1 个元素('cherry' 用于替代),返回被删除的元素数组 ['melon'] 

 arr.unshift()

       arr.unshift() 是 JavaScript 中用于向数组的开头添加一个或多个元素的方法。该方法会修改原始数组,并返回修改后的数组的长度。(简单的说就是:在数组开头增加一个或多个元素,并返回新长度)

 语法:

const newLength = arr.unshift(element1, ..., elementN);
  • element1, ..., elementN:要添加到数组开头的元素。

返回值: 

  • 返回添加元素后数组的新长度。

示例: 

const fruits = ['orange', 'banana'];

// 向数组开头添加一个元素
const newLength = fruits.unshift('apple');
console.log(fruits); // 输出: ['apple', 'orange', 'banana']
console.log(newLength); // 输出: 3

// 向数组开头添加多个元素
fruits.unshift('kiwi', 'melon');
console.log(fruits); // 输出: ['kiwi', 'melon', 'apple', 'orange', 'banana']

        在上述示例中,fruits.unshift('apple')fruits 数组开头添加了一个元素 'apple',并返回新的数组长度 3。后续的 fruits.unshift('kiwi', 'melon') 向开头添加了多个元素,同样修改了原始数组。  


 arr.fill(value, start, end)

       arr.fill(value, start, end) 是 JavaScript 中用于填充数组元素的方法。该方法会修改原始数组,并返回修改后的数组。(简单的说就是:以value填充[start,end]区间)

参数: 

  • value:要用于填充数组的值。
  • start(可选):起始索引,默认为 0
  • end(可选):结束索引(不包含),默认为数组的长度

返回值: 

  • 修改后的原始数组。

示例: 

const numbers = [1, 2, 3, 4, 5];

// 用 0 填充整个数组
numbers.fill(0);
console.log(numbers); // 输出: [0, 0, 0, 0, 0]

// 用 9 填充索引 1 到索引 3(不包含)的元素
numbers.fill(9, 1, 3);
console.log(numbers); // 输出: [0, 9, 9, 0, 0]

        在上述示例中,numbers.fill(0) 将整个数组填充为 0,而 numbers.fill(9, 1, 3) 则用 9 填充了索引 1 到索引 3(不包含)的元素。最终得到的数组为 [0, 9, 9, 0, 0]。  


3.返回新数组的方法 

 arr.concat(otherArr)

       arr.concat(otherArr) 是 JavaScript 中用于合并数组的方法。它创建一个新数组,包含调用该方法的数组的元素,后跟一个或多个数组或值。(简单的说就是:合并其他数组)

参数: 

  • otherArr:要连接到调用数组之后的数组或值。

返回值: 

  • 一个新的数组,包含合并后的元素。

示例: 

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [7, 8, 9];

// 合并三个数组
const mergedArray = arr1.concat(arr2, arr3);
console.log(mergedArray); // 输出: [1, 2, 3, 4, 5, 6, 7, 8, 9]

        在上述示例中,arr1.concat(arr2, arr3)arr1 数组与 arr2arr3 数组合并成一个新数组 [1, 2, 3, 4, 5, 6, 7, 8, 9]。原始数组 arr1 并未被修改。 


 arr.join()

       arr.join() 是 JavaScript 中用于将数组的所有元素连接成一个字符串的方法,它使用默认的逗号 , 作为分隔符。(简单的说就是:以某种连接符拼接数组元素为字符串)

 语法:

const resultString = arr.join();

返回值: 

  • 一个包含数组所有元素的字符串。

示例: 

const fruits = ['apple', 'orange', 'banana'];

// 使用默认逗号连接数组元素
const resultString = fruits.join();
console.log(resultString); // 输出: 'apple,orange,banana'

// 使用空格连接数组元素
const resultString = fruits.join(' ');
console.log(resultString); // 输出: 'apple orange banana'

// 使用连字符 - 连接数组元素
const resultString = fruits.join('-');
console.log(resultString); // 输出: 'apple-orange-banana'

        在上述示例中,fruits.join('-')fruits 数组的元素用连字符 - 连接起来,生成字符串 'apple-orange-banana'。注意,原始数组 fruits 并未被修改。 


 arr.slice(start, end)

       arr.slice(start, end) 是 JavaScript 中用于提取数组的一部分,创建一个新数组的方法。(简单的说就是:截取数组区间)

参数: 

  • start:起始索引,包含在提取的部分中。
  • end:可选,结束索引(不包含在提取的部分中)。如果省略,将提取从 start 到数组末尾的所有元素。

返回值: 

  • 一个包含提取元素的新数组。

示例: 

const numbers = [1, 2, 3, 4, 5];

// 提取索引 1 到索引 3(不包含)的元素
const slicedArray = numbers.slice(1, 3);
console.log(slicedArray); // 输出: [2, 3]

        在上述示例中,numbers.slice(1, 3) 提取了从索引 1 到索引 2(不包含)的元素,生成新数组 [2, 3]。原始数组 numbers 保持不变。如果省略 end 参数,将提取从 start 到数组末尾的所有元素。 


4. 遍历方法 

 arr.map()

       arr.map() 是 JavaScript 中用于创建一个新数组,其元素是原始数组中每个元素调用回调函数的结果。它不会修改原始数组,而是返回一个新的映射后的数组。

        注意:传入函数,可以对数组中的每个元素进行对应操作,最后返回操作好的新数组,要注意传入map的函数必须有return值,否则所有映射项都为undefined.

 语法:

const newArray = arr.map(callback(currentValue[, index[, array]])[, thisArg]);
  • callback:生成新数组元素的函数。
    • currentValue:当前处理的数组元素。
    • index:可选,当前处理元素的索引。
    • array:可选,调用 map 方法的数组。
  • thisArg:可选,执行回调函数时用作 this 的值。

返回值: 

  • 一个新的数组,包含对原始数组每个元素应用回调函数后的结果。

示例: 

const numbers = [1, 2, 3, 4, 5];

// 将数组中的每个元素平方
const squaredNumbers = numbers.map(number => number ** 2);
console.log(squaredNumbers); // 输出: [1, 4, 9, 16, 25]


const numbersTwo = [1, 2, 3, 4, 5];

// 回调函数没有明确的 return 语句
const newArray = numbersTwo.map(numberTwo => {
  // 没有 return 语句
  // 这里相当于 return undefined;
});

console.log(newArray); // 输出: [undefined, undefined, undefined, undefined, undefined]

        在上述示例中,numbers.map(number => number ** 2)numbers 数组中的每个元素都平方,生成新数组 [1, 4, 9, 16, 25]。原始数组 numbers 保持不变。 numbers.map 的回调函数并没有显式的 return 语句,因此它默认返回 undefined。新数组 newArray 中的每个位置都包含 undefined 值。


 arr.forEach()

       arr.forEach() 是 JavaScript 中用于对数组的每个元素执行一次提供的函数的方法。这个方法不会创建新的数组,而是在原始数组上进行操作。(简单的说就是:遍历元素值或索引值,有局限性,不能continue或break)

 语法:

arr.forEach(callback(currentValue[, index[, array]])[, thisArg]);
  • callback:在数组的每个元素上执行的函数。
    • currentValue:当前处理的数组元素。
    • index:可选,当前处理元素的索引。
    • array:可选,调用 forEach 方法的数组。
  • thisArg:可选,执行回调函数时用作 this 的值。

返回值: 

  • undefinedforEach 方法不返回新数组,它只是在每个元素上执行回调函数

示例: 

const numbers = [1, 2, 3, 4, 5];

// 打印数组的每个元素的平方
numbers.forEach((number, index) => {
  console.log(`Element at index ${index}: ${number ** 2}`);
});

//Element at index 0: 1
//Element at index 1: 4
//Element at index 2: 9
//Element at index 3: 16
//Element at index 4: 25

        在上述示例中,numbers.forEach 遍历数组 numbers 的每个元素,对每个元素执行回调函数,打印出元素的平方。请注意,forEach 方法不会创建新数组,而是在原始数组上进行操作。


    for(let index in arr)

       当使用 for...in 循环遍历数组时,index 表示数组元素的索引,但需要注意的是,index 是一个字符串,而不是数字。此外,for...in 也会遍历数组的原型链上的属性,因此通常更适用于遍历对象的属性。

示例: 

const numbers = [1, 2, 3, 4, 5];

for (let index in numbers) {
  console.log(`Element at index ${index}: ${numbers[index]}`);
}


//Element at index 0: 1
//Element at index 1: 2
//Element at index 2: 3
//Element at index 3: 4
//Element at index 4: 5

        在这个示例中,for...in 循环遍历数组 numbers 的索引,并打印出每个索引对应的元素。然而,需要注意的是,index 是一个字符串,不是数字。虽然 for...in 在某些情况下可以用于遍历数组,但更常见的是使用 for...offorEach,因为它们提供更直观且不会受到原型链影响的数组遍历方式。


   for(let value of arr)

       使用 for...of 循环遍历数组时,value 表示数组的元素值,而不是索引。这是一种更直观的数组遍历方式,相较于 for...in 更适用于遍历数组。

示例: 

const numbers = [1, 2, 3, 4, 5];

for (let value of numbers) {
  console.log(`Element value: ${value}`);
}


//Element value: 1
//Element value: 2
//Element value: 3
//Element value: 4
//Element value: 5

        在这个示例中,for...of 循环遍历数组 numbers 的元素值,并打印出每个元素的值。相对于 for...infor...of 更易读且不会受到原型链影响,因此通常更适用于遍历数组。


5. 获得索引方法

 arr.indexOf()

       arr.indexOf() 是 JavaScript 中用于查找数组中指定元素第一次出现的索引的方法。如果数组中不存在该元素,则返回 -1

 语法:

const index = arr.indexOf(searchElement[, fromIndex]);
  • searchElement:要查找的元素。
  • fromIndex:可选,指定开始查找的索引位置。如果省略,将从数组的开头开始查找。

返回值: 

  • 如果找到了指定元素,返回该元素在数组中第一次出现的索引;否则返回 -1

示例: 

const numbers = [1, 2, 3, 4, 5, 2];

// 查找元素 2 第一次出现的索引
const index = numbers.indexOf(2);
console.log(index); // 输出: 1

        在上述示例中,numbers.indexOf(2) 查找数组 numbers 中元素 2 第一次出现的索引,结果是 1。如果元素不在数组中,返回值将是 -1。 


  arr.lastIndexOf()

       arr.lastIndexOf() 是 JavaScript 中用于查找数组中指定元素最后一次出现的索引的方法。如果数组中不存在该元素,则返回 -1

 语法:

const lastIndex = arr.lastIndexOf(searchElement[, fromIndex]);
  • searchElement:要查找的元素。
  • fromIndex:可选,指定开始查找的索引位置。如果省略,将从数组的末尾开始向前查找。

返回值: 

  • 如果找到了指定元素,返回该元素在数组中最后一次出现的索引;否则返回 -1

示例: 

const numbers = [1, 2, 3, 4, 5, 2];

// 查找元素 2 最后一次出现的索引
const lastIndex = numbers.lastIndexOf(2);
console.log(lastIndex); // 输出: 5

        在上述示例中,numbers.lastIndexOf(2) 查找数组 numbers 中元素 2 最后一次出现的索引,结果是 5。如果元素不在数组中,返回值将是 -1


  arr.includes(val)

       arr.includes(val) 是 JavaScript 中用于检查数组是否包含特定元素的方法。它返回一个布尔值,如果数组包含指定的元素,则返回 true,否则返回 false

 语法:

const isIncludes = arr.includes(value);

  • value:要检查是否存在于数组中的元素。

返回值: 

  • 如果数组包含指定元素,返回 true;否则返回 false

示例: 

const numbers = [1, 2, 3, 4, 5];

// 检查数组是否包含元素 3
const includesThree = numbers.includes(3);
console.log(includesThree); // 输出: true

// 检查数组是否包含元素 6
const includesSix = numbers.includes(6);
console.log(includesSix); // 输出: false

        在上述示例中,numbers.includes(3) 返回 true,因为数组 numbers 包含元素 3。而 numbers.includes(6) 返回 false,因为数组不包含元素 6

  • 12
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值