数组中一些常用的api

最新推荐文章于 2024-10-02 05:39:15 发布

李想同学-username

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量102

点赞数 1

分类专栏： JavaScript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_45269534/article/details/129868864

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

数组中一些常用的api

Indexof
map
filter
includes
join
push
pop
unshift
shift
slice
splice
sort
every
some
reduce
数组的常用api
promise

Indexof

indexOf() 是 JavaScript 中的一个数组方法，用于查找数组中指定元素的位置。

语法：

array.indexOf(searchElement[, fromIndex])

参数：

searchElement：要在数组中查找的元素。
fromIndex（可选）：查找的起始位置。如果不指定，则从索引 0 开始查找。

返回值：

如果找到指定元素，则返回其在数组中的位置索引。如果未找到指定元素，则返回 -1。

示例：

const fruits = ['apple', 'banana', 'orange', 'pear'];
const index = fruits.indexOf('banana');
console.log(index); // 输出：1

map

map() 是 JavaScript 中的一个数组方法，它可以对数组中的每个元素执行一个函数，并返回一个新的数组，新数组中的元素是函数返回值的集合。 map() 方法不会修改原始数组，而是返回一个新的数组。

语法：

array.map(callback(currentValue[, index[, array]])[, thisArg])

参数：

callback：对数组中的每个元素执行的回调函数。
currentValue：当前正在处理的数组元素。
index（可选）：当前正在处理的数组元素的索引。
array（可选）：调用 map() 方法的数组本身。
thisArg（可选）：执行回调函数时使用的 this 值。

返回值：

一个新的数组，其中包含 callback 函数的返回值。

示例：

const numbers = [1, 2, 3, 4, 5];
const squares = numbers.map(function(num) {
  return num * num;
});
console.log(squares); // 输出：[1, 4, 9, 16, 25]

上述代码中，我们定义了一个名为 numbers 的数组，其中包含一些数字。然后，我们使用 map() 方法将每个元素平方，并将结果存储在 squares 数组中。最后，我们输出 squares 数组的内容。

我们还可以使用箭头函数来简化代码：

const numbers = [1, 2, 3, 4, 5];
const squares = numbers.map(num => num * num);
console.log(squares); // 输出：[1, 4, 9, 16, 25]

filter

filter() 是 JavaScript 中的一个数组方法，它可以基于指定的条件过滤数组中的元素，返回一个新的数组，新数组中包含符合条件的元素。

语法：

array.filter(callback(currentValue[, index[, array]])[, thisArg])

参数：

callback：对数组中的每个元素执行的函数。
currentValue：当前正在处理的数组元素。
index（可选）：当前正在处理的数组元素的索引。
array（可选）：调用 filter() 方法的数组本身。
thisArg（可选）：执行回调函数时使用的 this 值。

返回值：

一个新的数组，其中包含所有符合条件的元素。

示例：

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(function(num) {
  return num % 2 === 0;
});
console.log(evenNumbers); // 输出：[2, 4]

上述代码中，我们定义了一个名为 numbers 的数组，其中包含一些数字。然后，我们使用 filter() 方法选择所有偶数，并将结果存储在 evenNumbers 数组中。最后，我们输出 evenNumbers 数组的内容。

我们还可以使用箭头函数来简化代码：

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // 输出：[2, 4]

上述代码中，我们使用箭头函数来定义回调函数，从而更简洁地实现了同样的功能。

includes

includes() 是 JavaScript 中的一个数组方法，它用于检查数组是否包含指定的元素，返回一个布尔值（true 或 false）。

语法：

array.includes(searchElement[, fromIndex])

参数：

searchElement：要查找的元素。
fromIndex（可选）：查找的起始位置。如果不指定，则从索引 0 开始查找。

返回值：

如果数组包含指定的元素，则返回 true，否则返回 false。

示例：

const array = [1, 2, 3, 4, 5];
const hasThree = array.includes(3);
console.log(hasThree); // 输出：true

const hasTen = array.includes(10);
console.log(hasTen); // 输出：false

上述代码中，我们定义了一个名为 array 的数组，其中包含一些数字。然后，我们使用 includes() 方法检查数组中是否包含数字 3 和数字 10，并将结果存储在变量 hasThree 和 hasTen 中。最后，我们输出这两个变量的值。

需要注意的是，includes() 方法在检查数组是否包含指定元素时，会使用严格相等运算符（===）进行比较。因此，如果数组中包含一个与指定元素相等但类型不同的元素，includes() 方法会返回 false。

join

数组join是一个数组方法，用于将数组中的元素连接成一个字符串。

语法：

array.join(separator)

参数：

separator：可选，指定连接元素之间的分隔符。如果省略该参数，则默认使用逗号作为分隔符。

返回值：

返回一个字符串，其中包含数组中的所有元素，用指定的分隔符连接。

示例：

javascriptconst fruits = ['apple', 'banana', 'orange'];
const joined = fruits.join(', ');
console.log(joined); // "apple, banana, orange"

在上面的示例中，我们使用逗号和空格作为分隔符将数组中的元素连接成一个字符串。

push

数组push是一个数组方法，用于向数组的末尾添加一个或多个元素，并返回修改后的数组的新长度。

语法：

array.push(element1, element2, ..., elementN)

参数：

element1, element2, …, elementN：要添加到数组末尾的一个或多个元素。

返回值：

返回一个整数，表示修改后的数组的新长度。

示例：

javascriptconst fruits = ['apple', 'banana'];
const newLength = fruits.push('orange', 'pear');
console.log(fruits); // ["apple", "banana", "orange", "pear"]
console.log(newLength); // 4

在上面的示例中，我们向fruits数组的末尾添加了两个新元素，即’orange’和’pear’，并打印出了修改后的数组和新长度。

slice

数组slice是一个数组方法，用于从数组中提取指定的元素，并将其作为一个新的数组返回。

语法：

array.slice(start, end)

参数：

start：可选，指定从哪个索引处开始提取元素。如果省略该参数，则默认从索引0开始提取。
end：可选，指定在哪个索引处结束提取元素（不包括该索引处的元素）。如果省略该参数，则默认一直提取到数组末尾。

返回值：

返回一个新的数组，其中包含从原始数组中提取的元素。

示例：

javascriptconst fruits = ['apple', 'banana', 'orange', 'pear'];
const citrus = fruits.slice(1, 3);
console.log(citrus); // ["banana", "orange"]

在上面的示例中，我们从fruits数组中提取了索引1和2处的元素（不包括索引3处的元素），并将其作为一个新的数组返回。结果是一个包含’banana’和’orange’的新数组。原始数组fruits并没有被修改。

splice

数组splice是一个数组方法，用于向数组中添加或删除元素，并返回被删除的元素。

语法：

array.splice(start, deleteCount, item1, item2, ..., itemN)

参数：

start：必需，指定从哪个索引处开始添加或删除元素。
deleteCount：可选，指定要删除的元素个数。如果省略该参数或者它的值大于从start开始的元素个数，则删除从start开始的所有元素。
item1, item2, …, itemN：可选，要添加到数组中的一个或多个元素。

返回值：

返回一个包含被删除元素的数组。如果没有删除任何元素，则返回空数组。

示例：

javascriptconst fruits = ['apple', 'banana', 'orange', 'pear'];
const removed = fruits.splice(1, 2, 'grape', 'peach');
console.log(fruits); // ["apple", "grape", "peach", "pear"]
console.log(removed); // ["banana", "orange"]

在上面的示例中，我们从fruits数组中删除了从索引1开始的2个元素（即’banana’和’orange’），并将’grape’和’peach’添加到了数组中。函数返回一个包含被删除元素的数组，即[“banana”, “orange”]。最终的fruits数组为[“apple”, “grape”, “peach”, “pear”]。

sort

数组sort是一个数组方法，用于对数组中的元素进行排序。

语法：

array.sort(compareFunction)

参数：

compareFunction：可选，用于指定排序顺序的比较函数。如果省略该参数，则默认按照Unicode码点进行排序。

返回值：

返回排序后的数组。原始数组会被修改。

示例：

javascriptconst fruits = ['apple', 'banana', 'orange', 'pear'];
fruits.sort();
console.log(fruits); // ["apple", "banana", "orange", "pear"]

在上面的示例中，我们对fruits数组进行了排序，由于没有指定比较函数，所以默认按照Unicode码点进行排序。结果是一个与原数组相同的数组，因为它已经按照默认的排序顺序排好了序。

下面是一个使用比较函数的示例：

javascriptconst numbers = [6, 4, 15, 10];
numbers.sort((a, b) => a - b);
console.log(numbers); // [4, 6, 10, 15]

在上面的示例中，我们使用了一个比较函数，按照从小到大的顺序对数组进行排序。函数返回一个负数表示a应该排在b的前面，返回0表示a和b相等，返回一个正数表示a应该排在b的后面。

pop

数组pop是一个数组方法，用于从数组中删除最后一个元素，并返回被删除的元素。

语法：

array.pop()

参数：

返回值：

返回被删除的元素。如果数组为空，则返回undefined。

示例：

javascriptconst fruits = ['apple', 'banana', 'orange'];
const lastFruit = fruits.pop();
console.log(fruits); // ["apple", "banana"]
console.log(lastFruit); // "orange"

在上面的示例中，我们从fruits数组中删除了最后一个元素（即’orange’），并将其赋值给了lastFruit变量。函数返回被删除的元素，即’orange’。最终的fruits数组为[“apple”, “banana”]。

unshift

数组的unshift()方法用于在数组的开头添加一个或多个元素，并将数组的长度相应地增加。该方法返回新的数组长度。

语法：

array.unshift(element1, ..., elementN)

参数：

element1, …, elementN：要添加到数组开头的元素。可以是任意类型的值。

示例：

var arr = [2, 3, 4];
arr.unshift(1); // 返回 4，数组变为 [1, 2, 3, 4]
arr.unshift(-2, -1, 0); // 返回 7，数组变为 [-2, -1, 0, 1, 2, 3, 4]

shift

数组的shift()方法用于删除数组的第一个元素，并返回该元素的值。同时也会改变数组的长度。

语法：

array.shift()

返回值：

返回被删除的元素的值。

示例：

var arr = [1, 2, 3];
var firstElement = arr.shift(); // 返回 1，数组变为 [2, 3]
console.log(firstElement); // 输出 1

every

数组的every()方法用于检测数组中的所有元素是否都满足指定条件。如果所有元素都满足条件，则返回true；否则返回false。

语法：

array.every(callback(element[, index[, array]])[, thisArg])

参数：

callback：用于测试每个元素的回调函数。它可以接受三个参数：
- element：当前被测试的元素。
- index（可选）：当前被测试的元素的索引。
- array（可选）：被测试的数组。
thisArg（可选）：执行callback函数时使用的this值。

返回值：

如果所有元素都满足条件，则返回true；否则返回false。

示例：

var arr = [1, 2, 3, 4, 5];
var result = arr.every(function(element, index, array) {
  return element > 0;
});
console.log(result); // 输出 true

var result2 = arr.every(function(element, index, array) {
  return element > 2;
});
console.log(result2); // 输出 false

some

数组的some()方法用于检测数组中的元素是否存在满足指定条件的元素。如果存在满足条件的元素，则返回true；否则返回false。

语法：

array.some(callback(element[, index[, array]])[, thisArg])

参数：

callback：用于测试每个元素的函数。它可以接受三个参数：
- element：当前被测试的元素。
- index（可选）：当前被测试的元素的索引。
- array（可选）：被测试的数组。
thisArg（可选）：执行callback函数时使用的this值。

返回值：

如果存在满足条件的元素，则返回true；否则返回false。

示例：

var arr = [1, 2, 3, 4, 5];
var result = arr.some(function(element, index, array) {
  return element > 3;
});
console.log(result); // 输出 true

var result2 = arr.some(function(element, index, array) {
  return element < 0;
});
console.log(result2); // 输出 false

reduce

数组的reduce()方法用于从左到右依次对数组中的每个元素执行指定的回调函数，并返回一个累加的结果。该方法接受两个参数：回调函数和初始值。

语法：

array.reduce(callback[, initialValue])

参数：

callback：用于处理数组中每个元素的回调函数，它可以接受四个参数：
- accumulator：累加器，它的值是上一次回调函数的返回值或者是初始值（如果有的话）。
- currentValue：当前被处理的元素。
- index（可选）：当前元素在数组中的索引。
- array（可选）：被处理的数组。
initialValue（可选）：作为第一次调用回调函数时的第一个参数的值。如果没有提供初始值，则第一次调用回调函数时，accumulator的值为数组的第一个元素，currentValue的值为数组的第二个元素。

返回值：

返回最终的累加结果。

示例：

var arr = [1, 2, 3, 4, 5];
var sum = arr.reduce(function(accumulator, currentValue, index, array) {
  return accumulator + currentValue;
}, 0);
console.log(sum); // 输出 15

promise

Promise是JavaScript中用于处理异步操作的一种机制。它可以将异步操作封装成一个对象，并提供一些方法来处理异步操作的结果。Promise对象有三个状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。一旦Promise对象的状态发生改变，就会触发相应的回调函数。

Promise对象的特点：

Promise对象是一种异步编程模式，可以更好地处理异步操作。
Promise对象可以将异步操作封装成一个对象，使代码更加清晰和易于维护。
Promise对象可以处理多个异步操作，并且可以通过链式调用来处��异步操作的结果。

Promise对象的基本用法：

创建Promise对象

var promise = new Promise(function(resolve, reject) {
  // 异步操作
  if(/*异步操作成功*/) {
    resolve(result); // 将异步操作的结果传递给回调函数
  } else {
    reject(error); // 将异步操作的错误信息传递给回调函数
  }
});

处理Promise对象的结果

promise.then(function(result) {
  // 处理异步操作成功的结果
}, function(error) {
  // 处理异步操作失败的结果
});

Promise对象的链式调用

promise.then(function(result) {
  // 处理异步操作成功的结果
  return anotherPromise; // 返回另一个Promise对象
}).then(function(result) {
  // 处理另一个异步操作成功的结果
}).catch(function(error) {
  // 处理异步操作失败的结果
});

在Promise对象的链式调用中，每次调用then()方法都会返回一个新的Promise对象，因此可以通过链式调用来处理多个异步操作的结果。如果任何一个异步操作失败，就会自动跳转到catch()方法中处理异常。