Javascript常见数组方法详解

简介: Javascript常见数组方法详解

JavaScript数组方法是用于对数组进行操作的内置函数。以下是一些常见的JavaScript数组方法及其用法:


  1. push():将一个或多个元素添加到数组末尾。


let fruits = ["apple", "banana"];
fruits.push("orange");
// fruits 现在是 ["apple", "banana", "orange"]


  1. pop():从数组末尾删除最后一个元素,并返回该元素。


let fruits = ["apple", "banana", "orange"];
let lastFruit = fruits.pop();
// lastFruit 现在是 "orange",fruits 现在是 ["apple", "banana"]


  1. unshift():将一个或多个元素添加到数组开头。


let fruits = ["banana", "orange"];
fruits.unshift("apple");
// fruits 现在是 ["apple", "banana", "orange"]


  1. shift():从数组开头删除第一个元素,并返回该元素。


let fruits = ["apple", "banana", "orange"];
let firstFruit = fruits.shift();
// firstFruit 现在是 "apple",fruits 现在是 ["banana", "orange"]


  1. splice():从数组中删除或替换元素。


let fruits = ["apple", "banana", "orange"];
fruits.splice(1, 1, "pear", "kiwi");
// fruits 现在是 ["apple", "pear", "kiwi", "orange"]


  1. slice():创建一个从指定索引开始到结束(不包括结束)的新数组。


let fruits = ["apple", "banana", "orange"];
let citrus = fruits.slice(1, 3);
// citrus 现在是 ["banana", "orange"],fruits 仍然是 ["apple", "banana", "orange"]


  1. concat():将两个或更多数组合并为一个新数组。


let fruits = ["apple", "banana"];
let moreFruits = ["orange", "pear"];
let allFruits = fruits.concat(moreFruits);
// allFruits 现在是 ["apple", "banana", "orange", "pear"]


  1. indexOf():返回某个元素在数组中第一次出现的索引,如果不存在则返回-1。


let fruits = ["apple", "banana", "orange"];
let bananaIndex = fruits.indexOf("banana");
// bananaIndex 现在是 1


  1. forEach():对数组中的每个元素执行操作,不会改变原始数组。


let fruits = ["apple", "banana", "orange"];
fruits.forEach(function(fruit) {
  console.log(fruit);
});
// 输出 "apple"、"banana" 和 "orange"


  1. filter():创建一个新数组,其中包含满足指定条件的所有元素。


let fruits = ["apple", "banana", "orange"];
let filteredFruits = fruits.filter(function(fruit) {
  return fruit.length > 5;
});
// filteredFruits 现在是 ["banana", "orange"]


  1. map():创建一个新数组,其中包含对原始数组中的每个元素应用指定函数后的结果。


let numbers = [1, 2, 3];
let doubledNumbers = numbers.map(function(number) {
  return number * 2;
});
// doubledNumbers 现在是 [2, 4, 6]


  1. reduce():对数组中的所有元素应用指定的累加器函数,并返回单个值。


let numbers = [1, 2, 3];
let sum = numbers.reduce(function(total, number) {
  return total + number;
}, 0);
// sum 现在是 6


  1. find():返回数组中第一个符合条件的元素,如果不存在则返回undefined。


let numbers = [1, 2, 3, 4, 5];
let evenNumber = numbers.find(function(number) {
  return number % 2 === 0;
});
// evenNumber 现在是 2


  1. some():判断数组中是否有任何元素符合指定条件,如果至少有一个,则返回true。


let numbers = [1, 2, 3, 4, 5];
let hasEvenNumber = numbers.some(function(number) {
  return number % 2 === 0;
});
// hasEvenNumber 现在是 true


  1. every():判断数组中的所有元素是否符合指定条件,如果所有元素都符合,则返回true。


let numbers = [2, 4, 6, 8];
let allEven = numbers.every(function(number) {
  return number % 2 === 0;
});
// allEven 现在是 true


  1. includes():判断数组中是否包含指定的元素,如果存在则返回true。


let fruits = ["apple", "banana", "orange"];
let isBananaIncluded = fruits.includes("banana");
// isBananaIncluded 现在是 true


  1. reverse():颠倒数组中元素的顺序,改变原始数组。


let fruits = ["apple", "banana", "orange"];
fruits.reverse();
// fruits 现在是 ["orange", "banana", "apple"]


  1. sort():按升序或降序排序数组中的元素,改变原始数组。


let fruits = ["banana", "apple", "orange"];
fruits.sort();
// fruits 现在是 ["apple", "banana", "orange"]


  1. join():将数组中的所有元素转换为一个字符串,并使用指定的分隔符连接它们。


let fruits = ["apple", "banana", "orange"];
let fruitString = fruits.join(", ");
// fruitString 现在是 "apple, banana, orange"


  1. toString():将数组转换为一个字符串。


let fruits = ["apple", "banana", "orange"];
let fruitString = fruits.toString();
// fruitString 现在是 "apple,banana,orange"


  1. length:获取或设置数组的长度。


let fruits = ["apple", "banana", "orange"];
let length = fruits.length;
// length 现在是 3
fruits.length = 2;
// fruits 现在是 ["apple", "banana"]


  1. fill():用指定的值填充数组中的所有元素。


let numbers = [1, 2, 3];
numbers.fill(0);
// numbers 现在是 [0, 0, 0]


  1. flat():按指定深度展开嵌套的数组。


let nestedNumbers = [1, [2, 3], [[4], [5, 6]]];
let flattenedNumbers = nestedNumbers.flat(2);
// flattenedNumbers 现在是 [1, 2, 3, 4, 5, 6]


  1. from():通过类似数组的对象或可迭代对象创建一个新数组。


let arrayLikeObject = { 0: "apple", 1: "banana", 2: "orange", length: 3 };
let fruits = Array.from(arrayLikeObject);
// fruits 现在是 ["apple", "banana", "orange"]


  1. findIndex():返回数组中第一个符合条件的元素的索引,如果不存在则返回-1。


let numbers = [1, 2, 3, 4, 5];
let evenNumberIndex = numbers.findIndex(function(number) {
  return number % 2 === 0;
});
// evenNumberIndex 现在是 1


这些是常见的JavaScript数组方法,还有其他一些方法可以查看JavaScript文档。掌握这些方法可以让我们更加高效地处理数组数据。

目录
相关文章
|
7月前
|
JavaScript 前端开发
手写JavaScript中的数组方法(上)
手写JavaScript中的数组方法(上)
28 0
|
19小时前
|
JavaScript 前端开发
JavaScript 数组方法概览
JavaScript 数组方法概览:push() 添加元素至末尾;pop() 删除并返回最后一个元素;shift() 删除并返回第一个元素;unshift() 向开头添加元素;slice() 返回指定范围的浅拷贝;splice() 删除/替换/添加元素,改变原数组;concat() 合并数组;join() 转换为字符串;reverse() 颠倒顺序;sort() 排序;map() 应用函数并创建新数组;filter() 过滤元素;reduce() 累加元素为单一值。
6 1
|
19小时前
|
JavaScript 前端开发
JavaScript 的数组方法 map()、filter() 和 reduce() 提供了函数式编程处理元素的方式
【5月更文挑战第11天】JavaScript 的数组方法 map()、filter() 和 reduce() 提供了函数式编程处理元素的方式。map() 用于创建新数组,其中元素是原数组元素经过指定函数转换后的结果;filter() 则筛选出通过特定条件的元素生成新数组;reduce() 将数组元素累计为单一值。这三个方法使代码更简洁易读,例如:map() 可用于数组元素乘以 2,filter() 用于选取偶数,reduce() 计算数组元素之和。
7 1
|
4天前
|
存储 JavaScript 前端开发
JavaScript 数组方法详解
JavaScript 数组方法详解
11 2
|
2月前
|
JavaScript 前端开发
JavaScript 中的数组方法有哪些?
JavaScript 中的数组方法有哪些?
11 2
|
7月前
|
JavaScript 前端开发
手写JavaScript数组方法(下)
手写JavaScript数组方法(下)
19 0
手写JavaScript数组方法(下)
|
9月前
|
JavaScript 前端开发 索引
JavaScript 手写代码 第七期(重写数组方法三) 用于遍历的方法
JavaScript 手写代码 第七期(重写数组方法三) 用于遍历的方法
37 0
|
9月前
|
JavaScript 前端开发 索引
JavaScript 手写代码 第六期(重写数组方法二)不改变原数组的方法
JavaScript 手写代码 第六期(重写数组方法二)不改变原数组的方法
43 0
|
9月前
|
JavaScript 前端开发 索引
JavaScript 手写代码 第五期(重写数组方法一)-可以改变原数组的方法
JavaScript 手写代码 第五期(重写数组方法一)-可以改变原数组的方法
50 0
|
10月前
|
JSON JavaScript 前端开发
JavaScript js数组方法的介绍以及使用 以及JSON使用
JavaScript js数组方法的介绍以及使用 以及JSON使用