🪴 Obsidian Publish

JS Array Methods

7分钟阅读

Methods

添加或删除元素

  • push(): 在数组的末尾添加一个或多个元素，并返回新的长度。
  • pop(): 删除数组的最后一个元素，并返回那个元素。
  • shift(): 删除数组的第一个元素，并返回那个元素。
  • unshift(): 在数组的开头添加一个或多个元素，并返回新的长度。
  • splice(): 通过删除现有元素和/或添加新元素来更改一个数组的内容。
  • toSpliced()：as a safe way to splice an array without altering the original array.
  • slice(start, end): 类似于 字符串.substring.
  • delete: 删除某个位置元素。
cars.unshift("Lemon");
cars.push("Lemon");
cars[cars.length] = "Lemon";
 
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi"); // ["Banana", "Orange", "Lemon", "Kiwi", "Apple", "Mango"]
// The first parameter (2) defines the position where new elements should be added (spliced in).
// The second parameter (0) defines how many elements should be removed.
// The rest of the parameters ("Lemon" , "Kiwi") define the new elements to be added.
 
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let removed = fruits.splice(2, 2, "Lemon", "Kiwi");
// fruits ["Banana", "Orange", "Lemon", "Kiwi"]
// removed ["Apple", "Mango"]
 
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(0, 1); // remove 1 element from 0 index
 
const months = ["Jan", "Feb", "Mar", "Apr"];
const spliced = months.toSpliced(0, 1); // spliced ["Feb", "Mar", "Apr"]
 
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(1); // ["Orange", "Lemon", "Apple", "Mango"]
 
// Using delete() leaves undefined holes in the array.
const fruits = ["Banana", "Orange", "Apple", "Mango"];
delete fruits[0];

搜索

  • includes(): 判断数组是否包含一个特定的值，根据情况返回 true 或 false。
  • indexOf(item, start): 返回指定元素在数组中首次出现的索引，如果不存在则返回-1。
  • lastIndexOf(item, start): 返回指定元素在数组中最后出现的索引，如果不存在则返回-1。
  • find(callable): 返回-满足-测试函数-第一个元素的值，否则返回 undefined。
  • findIndex(callable): 返回-满足-测试函数-第一个元素的索引，否则返回-1。
  • findLast(callable): 返回-满足-测试函数-最后一个元素的值，否则返回 undefined。
  • findLastIndex(callable): 返回-满足-测试函数-最后一个元素的索引，否则返回-1。
// find
const numbers = [4, 9, 16, 25, 29];
let first = numbers.find(myFunction);
/* 3 params, item value, item index, array itself */
function myFunction(value, index, array) {
  return value > 18;
}
 
// findLast
const temp = [27, 28, 30, 40, 42, 35, 30];
let high = temp.findLast((x) => x > 40);

排序

  • sort(callable): 对数组的元素进行排序，默认情况下排序顺序是根据字符串 Unicode 码点。
  • reverse(): 颠倒数组中元素的位置。
  • toSorted(): return new array
  • toReversed(): return new array
  • Math.min.apply(null, arr): to find the lowest number in an array:
  • Math.max.apply(null, arr): to find the largest number in an array:
var numbers = [4, 2, 5, 1, 3];
numbers.sort(function (a, b) {
  return a - b;
});

转换方法

  • join(): 将数组的所有元素连接成一个字符串并返回这个字符串。
  • concat(): 用于合并两个或多个数组，并返回一个新数组。
  • slice(): 返回数组的一个片段或子数组。
  • toString(): 返回一个由数组中的每个元素转换为字符串组成并由逗号分隔的字符串。
// concat() can take any number of array arguments,
// can also take strings as arguments:
const myGirls = ["Cecilie", "Lone"];
const myBoys = ["Emil", "Tobias", "Linus"];
const myChildren = myGirls.concat(myBoys);
const myChildren = arr1.concat(arr2, arr3);
const myChildren = arr1.concat("Peter");

迭代方法

  • forEach(callable): 对数组的每个元素执行一次提供的函数。
  • map(): 创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。
  • filter(): 创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。
  • some(): 测试数组中是不是至少有一个元素通过了被提供的函数测试。
  • every(): 测试一个数组内的所有元素是不是都能通过某个指定函数的测试。
  • reduce(): 对数组中的每个元素按顺序执行一个由您提供的 reducer 函数(升序执行)，将其减少为单个值。
  • reduceRight(): 与  reduce()  类似，但从数组的末尾向前工作。
const numbers = [45, 4, 9, 16, 25];
 
// forEach
let txt = "";
numbers.forEach(myFunction);
function myFunction(value, index, array) {
  txt += value + "<br>";
}
 
// map
const numbers2 = numbers.map(myFunction);
function myFunction(value, index, array) {
  return value * 2;
}
 
// filter
const over18 = numbers.filter(myFunction);
function myFunction(value, index, array) {
  return value > 18;
}
 
// reduce
let sum = numbers.reduce(myFunction);
function myFunction(total, value, index, array) {
  /* total - The total (the initial value / previously returned value) */
  return total + value;
}
/* reduce can accept an initial value */
let sum = numbers.reduce(myFunction, 100);
function myFunction(total, value) {
  return total + value;
}

ES6 及更新的方法

  • entries(): 返回一个新的 Array Iterator 对象，该对象包含数组中每个索引的键/值对。
  • keys(): 返回一个新的 Array Iterator 对象，该对象包含数组中每个索引的键。0-1-2-3...
  • values(): 返回一个新的 Array Iterator 对象，该对象包含数组中每个索引的值。
  • flat(): 会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组的元素合并为一个新数组返回。
  • flatMap(callable): 首先使用 map 映射函数映射每个元素，然后将结果压缩成一个新数组。
const myArr = [
  [1, 2],
  [3, 4],
  [5, 6],
];
const newArr = myArr.flat(); // [1,2,3,4,5,6]

其他方法

  • copyWithin(): copies array elements to another position in an array.
  • with()：update elements & without inplace.
  • ...: spread array
// The `copyWithin()` method copies array elements to another position in an array
// will change existing array.
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.copyWithin(2, 0); // Banana,Orange,Banana,Orange
const fruits = ["Banana", "Orange", "Apple", "Mango", "Kiwi"];
fruits.copyWithin(2, 0, 2); // Banana,Orange,Banana,Orange,Kiwi,Papaya
 
// with() method as a safe way to update elements in an array without altering the original array.
const months = ["Januar", "Februar", "Mar", "April"];
const myMonths = months.with(2, "March");
 
// ... spread array
const q1 = ["Jan", "Feb", "Mar"];
const q2 = ["Apr", "May", "Jun"];
const q3 = ["Jul", "Aug", "Sep"];
const q4 = ["Oct", "Nov", "May"];
const year = [...q1, ...q2, ...q3, ...q4];

反向链接