前端开发基础-数组处理

push用于向数组的末尾添加一个或多个元素，并返回新的长度

语法：
array.push(element1, …, elementN)
参数：
element1, …, elementN：要添加到数组末尾的一个或多个元素
示例：

let fruits = ['apple', 'banana'];
fruits.push('orange'); // 添加单个元素
console.log(fruits); // 输出： ["apple", "banana", "orange"]
fruits.push('grape', 'kiwi'); // 添加多个元素
console.log(fruits); // 输出： ["apple", "banana", "orange", "grape", "kiwi"]

pop用于删除并返回数组的最后一个元素。如果数组为空，则返回 undefined。

语法：
array.pop()会改变原数组

let fruits = ['apple', 'banana', 'orange'];
let lastFruit = fruits.pop(); // 移除并获取最后一个元素
console.log(lastFruit); // 输出： "orange"
console.log(fruits); // 输出： ["apple", "banana"]

let fruits = [];
let lastFruit = fruits.pop(); // 移除并获取最后一个元素
console.log(lastFruit); // 输出：undefined
console.log(fruits); // 输出： []

shift用于删除并返回数组的第一个元素。如果数组为空，则返回 undefined。

语法：
array.shift()会改变原数组

let fruits = ['apple', 'banana', 'orange'];
let firstFruit = fruits.shift(); // 移除并获取第一个元素
console.log(firstFruit); // 输出： "apple"
console.log(fruits); // 输出： ["banana", "orange"]

let fruits = [];
let lastFruit = fruits.shift(); // 移除并获取第一个元素
console.log(lastFruit); // 输出：undefined
console.log(fruits); // 输出： []

unshift用于在数组的开头添加一个或多个元素，并返回新的长度。

array.unshift(element1, …, elementN)会改变原数组
参数：
element1, …, elementN：要添加到数组开头的一个或多个元素。
示例：

let fruits = ['banana', 'orange'];
fruits.unshift('apple'); // 添加单个元素到数组开头
console.log(fruits); // 输出： ["apple", "banana", "orange"]

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

slice用于提取数组的一部分并返回一个新的数组

接受两个参数：起始索引和结束索引（不包括结束索引）。如果只提供一个参数，将从该索引开始提取到数组末尾。
语法：
array.slice([beginIndex[, endIndex]])
示例：

let fruits = ['apple', 'banana', 'orange', 'grape'];
let slicedFruits1 = fruits.slice(2); // 提取从索引2开始到数组末尾的部分
console.log(slicedFruits1); // 输出： ["orange", "grape"]

let slicedFruits2 = fruits.slice(1, 3); // 提取从索引1开始到索引3（不包括）的部分
console.log(slicedFruits2); // 输出： ["banana", "orange"]

splice用于在数组中添加、删除或替换元素。返回一个包含被删除元素的新数组。

语法：
array.splice(start, deleteCount[, item1[, item2[, …]]])
参数：
start：开始修改的位置（索引）。
deleteCount：要删除的元素数量。如果设置为0，则不删除任何元素。
item1, item2, …（可选）：要添加到数组中的新元素。如果不指定，则只删除元素。

let fruits = ['apple', 'banana', 'orange'];
// 从索引1开始删除1个元素，并添加'kiwi'和'grape'
fruits.splice(1, 1, 'kiwi', 'grape');
console.log(fruits); // 输出： ["apple", "kiwi", "grape", "orange"]

// 从索引2开始删除2个元素
fruits.splice(2, 2);
console.log(fruits); // 输出： ["apple", "kiwi"]

reverse用于颠倒数组中元素的顺序，会修改原数组并返回该数组。

语法：
array.reverse()
示例：

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

let fruits = [{test:1}, {value:2}, 'orange'];
fruits.reverse(); // 颠倒数组元素的顺序
console.log(fruits); // 输出： ["orange", {value: 2}, {test:1}]

concat用于合并两个或多个数组，不会更改现有数组，而是返回一个新数组。

语法：
array1.concat(array2, array3, …, arrayN)
参数：
array2, array3, …, arrayN（可选）：要连接到原始数组的其他数组。
示例：

let fruits1 = ['apple', 'banana'];
let fruits2 = ['orange', 'grape'];
let combinedFruits = fruits1.concat(fruits2); // 合并两个数组
console.log(combinedFruits); // 输出： ["apple", "banana", "orange", "grape"]

join用于将数组的所有元素连接成一个字符串，可以指定一个分隔符来分隔数组元素。

语法：
array.join([separator])
参数：separator（可选）：指定用作分隔符的字符串。如果省略，则使用逗号作为默认分隔符。
示例：

let fruits = ['apple','banana','orange'];
let joinedFruits = fruits.join(); // 使用逗号和空格作为分隔符
console.log(joinedFruits); // 输出： "apple, banana, orange"

let joinedFruitsWithPipe = fruits.join('|'); // 使用竖线和空格作为分隔符
console.log(joinedFruitsWithPipe); // 输出： "apple | banana | orange"

indexOf用于查找数组中指定元素的索引，如果找到该元素，则返回其第一次出现的索引；如果没有找到，则返回-1

语法：
array.indexOf(element, start)
参数：
element：要查找的元素。
start（可选）：从该索引开始查找。如果省略，则默认为0。
示例：

let fruits = ['apple', 'banana', 'orange', 'banana'];
let indexApple = fruits.indexOf('apple'); // 查找'apple'的索引
console.log(indexApple); // 输出： 0

let indexBanana = fruits.indexOf('banana'); // 查找'banana'的索引
console.log(indexBanana); // 输出： 1

let indexGrape = fruits.indexOf('grape'); // 查找不存在的元素'grape'
console.log(indexGrape); // 输出： -1

lastIndexOf用于查找数组中指定元素的最后一个出现的索引。如果找到该元素，则返回其最后一次出现的索引；如果没有找到，则返回-1。

语法：
array.lastIndexOf(element, fromIndex)
参数：
element：要查找的元素。
fromIndex（可选）：从该索引开始向前查找。如果省略，则默认为数组的长度。
示例：

 let fruits = ['apple', 'banana', 'orange', 'banana'];
 let lastIndexBanana = fruits.lastIndexOf('banana'); // 查找'banana'的最后一个索引
 console.log(lastIndexBanana); // 输出： 3

 let lastIndexGrape = fruits.lastIndexOf('grape'); // 查找不存在的元素'grape'
 console.log(lastIndexGrape); // 输出： -1

every用于检查数组中的所有元素是否满足指定的条件。如果所有元素都满足条件，则返回 true；如果有任何一个元素不满足条件，则返回 false。

语法：
array.every(callback(element[, index[, array]])[, thisArg])
参数：
callback：一个函数，用于测试数组中的每个元素是否满足条件。它接受三个参数：element（当前元素的值），index（可选，当前元素的索引），array（可选，调用 every() 的数组）。
thisArg（可选）：当执行回调时用作 this 的值。
示例：

let numbers = [2, 4, 6, 8];
let allEven = numbers.every(function(number) {
     return number >= 2; // 检查每个数字是否大于等于2
});
console.log(allEven); // 输出： true

let numbers = [{value:"1"}, {value:"2"}, {value:"3"}, {value:"4"}];
let allEven = numbers.every(function(number) {
     return number.value >= 2;
});
console.log(allEven); // 输出：false

some用于检查数组中是否有至少一个元素满足指定的条件。如果找到至少一个满足条件的元素，则返回 true；如果没有找到任何满足条件的元素，则返回 false。

语法：
array.some(callback(element[, index[, array]])[, thisArg])
参数：
callback：一个函数，用于测试数组中的每个元素是否满足条件。它接受三个参数：element（当前元素的值），index（可选，当前元素的索引），array（可选，调用 some() 的数组）。
thisArg（可选）：当执行回调时用作 this 的值。
示例：

let numbers = [{value:"1"}, {value:"2"}, {value:"3"}, {value:"4"}];
let allEven = numbers.some(function(number) {
     return number.value >= 2;
});
console.log(allEven); // true

let numbers = [{value:"1"}, {value:"2"}, {value:"3"}, {value:"4"}];
let allEven = numbers.some(function(number) {
     return number.value >= 5;
});
console.log(allEven); // false

filter用于创建一个新数组，其中包含通过提供的函数实现的测试的所有元素。它不会改变原始数组。

语法：
array.filter(callback(element[, index[, array]])[, thisArg])
参数：
callback：一个函数，用于测试数组中的每个元素是否满足条件。它接受三个参数：element（当前元素的值），index（可选，当前元素的索引），array（可选，调用 filter() 的数组）。
thisArg（可选）：当执行回调时用作 this 的值。
示例：

let numbers = [1, 2, 3, 4, 5];
let evenNumbers = numbers.filter(function(number) {
    return number > 2
});
console.log(evenNumbers); // 输出： [3,4,5]

map用于创建一个新数组，其中的元素是将原始数组中的每个元素传递给指定的函数后返回的结果。它不会改变原始数组（通过指定函数处理数组的每个元素，并返回处理后的数组）

语法：
array.map(callback(element[, index[, array]])[, thisArg])
参数：
callback：一个函数，用于处理数组中的每个元素并返回结果。它接受三个参数：element（当前元素的值），index（可选，当前元素的索引），array（可选，调用 map() 的数组）。
thisArg（可选）：当执行回调时用作 this 的值。
示例：

let names = ['Alice', 'Bob', 'Charlie'];
let greetings = names.map(function(name) {
     return 'Hello, ' + name + '!'; // 为每个名字添加问候语
});
console.log(greetings); // 输出： ['Hello, Alice!', 'Hello, Bob!', 'Hello, Charlie!']

forEach用于遍历数组中的每个元素并对其执行指定的操作。它不会返回任何值，也不会创建新的数组。

语法：
array.forEach(callback(element[, index[, array]])[, thisArg])
参数：
callback：一个函数，用于处理数组中的每个元素。它接受三个参数：element（当前元素的值），index（可选，当前元素的索引），array（可选，调用 forEach() 的数组）。
thisArg（可选）：当执行回调时用作 this 的值。
示例：

let fruits = ['apple', 'banana', 'orange'];
fruits.forEach(function(fruit) {
    console.log('I like ' + fruit);
});
// 输出：
// I like apple
// I like banana
// I like orange

let numbers = [1, 2, 3, 4, 5];
numbers.forEach(function(number, index) {
    console.log('Element at index ' + index + ' is ' + number);
});
// 输出：
// Element at index 0 is 1
// Element at index 1 is 2
// Element at index 2 is 3
// Element at index 3 is 4
// Element at index 4 is 5

reduce将数组中的所有元素通过一个函数合并成一个单一的值。它接受一个回调函数作为参数，该回调函数会遍历数组中的每个元素，并将结果累积到一个累加器对象中。

语法：
array.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])
参数：
callback：一个函数，用于处理数组中的每个元素并返回结果。它接受四个参数：accumulator（累加器，累积回调的返回值），currentValue（当前元素的值），index（可选，当前元素的索引），array（可选，调用 reduce() 的数组）。
initialValue（可选）：作为第一次调用回调函数时的累加器的初始值。如果没有提供初始值，则使用数组的第一个元素作为初始值，并从第二个元素开始遍历。
示例：

let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce(function(accumulator, currentValue) {
    return accumulator + currentValue; // 计算所有数字的总和
}, 0);
console.log(sum); // 输出：15

let products = ['apple', 'banana', 'orange'];
let result = products.reduce(function(accumulator, currentValue) {
      return accumulator + ', ' + currentValue; // 将所有水果名称连接成一个字符串
}, 'Fruits:');
console.log(result); // 输出：Fruits: apple, banana, orange

reduceRight与 reduce() 类似，但它是从数组的末尾开始遍历元素。它接受一个回调函数作为参数，该回调函数会从右到左遍历数组中的每个元素，并将结果累积到一个累加器对象中。

语法：
array.reduceRight(callback(accumulator, currentValue[, index[, array]])[, initialValue])
参数：
callback：一个函数，用于处理数组中的每个元素并返回结果。它接受四个参数：accumulator（累加器，累积回调的返回值），currentValue（当前元素的值），index（可选，当前元素的索引），array（可选，调用 reduceRight() 的数组）。
initialValue（可选）：作为第一次调用回调函数时的累加器的初始值。如果没有提供初始值，则使用数组的最后一个元素作为初始值，并从倒数第二个元素开始遍历。
示例：

let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduceRight(function(accumulator, currentValue) {
      return accumulator + currentValue; // 计算所有数字的总和
}, 0);
console.log(sum); // 输出：15

let products = ['apple', 'banana', 'orange'];
let result = products.reduceRight(function(accumulator, currentValue) {
      return accumulator + ', ' + currentValue; // 将所有水果名称连接成一个字符串
}, 'Fruits:');
console.log(result); // 输出：Fruits: orange, banana, apple

sort用于对数组中的元素进行排序。它可以接受一个可选的比较函数作为参数，该函数用于定义排序的规则。

语法：
array.sort([compareFunction])
参数：
compareFunction（可选）：一个函数，用于定义排序规则。如果省略此参数，则按照字母顺序对元素进行排序。比较函数接受两个参数，通常称为 a 和 b，并根据它们的大小关系返回一个负数、零或正数。
示例：

let numbers = [34, 12, 5, 78, 1];
numbers.sort();
console.log(numbers); // 输出：[1, 5, 12, 34, 78]

let fruits = ['banana', 'apple', 'orange', 'kiwi'];
fruits.sort();
console.log(fruits); // 输出：['apple', 'banana', 'kiwi', 'orange']

// 使用比较函数进行排序
let numbers_ = [34, 12, 5, 78, 1];
numbers_.sort(function(a, b) {
    return a - b; // 升序排序
});
console.log(numbers_); // 输出：[1, 5, 12, 34, 78]

// 使用比较函数进行排序
let numbers__ = [34, 12, 5, 78, 1];
numbers__.sort(function(a, b) {
    return b - a; // 降序排序
});
console.log(numbers__); // 输出：[78, 34, 12, 5, 1]

let fruits_ = ['banana', 'apple', 'orange', 'kiwi'];
fruits_.sort(function(a, b) {
    if (a < b) return -1;
    if (a > b) return 1;
    return 0; // 升序排序
});
console.log(fruits_); // 输出：['apple', 'banana', 'kiwi', 'orange']

includes用于检查数组中是否包含指定的元素。它返回一个布尔值，表示数组中是否存在该元素。

语法：
array.includes(element, [fromIndex])
参数：
element：要查找的元素。
fromIndex（可选）：从该索引位置开始搜索，默认为0。
示例：

let fruits = ['apple', 'banana', 'orange'];
console.log(fruits.includes('banana')); // 输出：true
console.log(fruits.includes('grape')); // 输出：false

let numbers = [1, 2, 3, 4, 5];
console.log(numbers.includes(3)); // 输出：true
console.log(numbers.includes(6)); // 输出：false

flat用于将嵌套的数组“扁平化”，即将多层嵌套的数组转换为单层数组。它可以接受一个可选参数 depth，用于指定要扁平化的层级深度。

语法：
array.flat([depth])
参数：
depth（可选）：要扁平化的层级深度，默认为1。如果设置为 Infinity，则完全扁平化所有层级。
示例：

let nestedArray = [1, [2, [3, [4]], 5]];
console.log(nestedArray.flat(4)); // 输出：[1, 2, 3, 4, 5]

let deeperNestedArray = [[1, 2], [3, [4, [5, [6]]]]];
console.log(deeperNestedArray.flat(5)); // 输出：[1, 2, 3, 4, 5, 6]

flatMap用于对数组中的每个元素执行一个函数，并将结果扁平化为一个新数组。它相当于先使用 map() 方法处理数组中的每个元素，然后使用 flat() 方法将结果扁平化。

语法：
array.flatMap(callback(currentValue[, index[, array]])[, thisArg])
参数：
callback：一个函数，接受三个参数：currentValue（当前元素的值），index（可选，当前元素的索引），array（可选，调用 flatMap() 的数组）。
thisArg（可选）：在执行回调时用作 this 的值。
示例：

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

let words = ['hello', 'world'];
let chars = words.flatMap(word => word.split(''));
console.log(chars); // 输出：['h', 'e', 'l', 'l', 'o', 'w', 'o', 'r', 'l', 'd']

let words_ = ['hello', 'world'];
let chars_ = words_.flatMap(word => word);
console.log(chars_); // 输出： ['hello', 'world']

toLocaleString用于将数组中的元素转换为本地化的字符串表示形式。它可以接受一个可选的参数 locales 和一个可选的参数 options，用于指定本地化的语言环境和格式化选项。

语法：
array.toLocaleString([locales[, options]])
参数：
locales（可选）：一个字符串或字符串数组，表示要使用的语言环境。默认为当前计算机的区域设置。
options（可选）：一个对象，包含一些格式化选项，如日期和时间的格式、货币符号等。

let numbers = [123456.789, 987654.321];
console.log(numbers.toLocaleString()); // 输出：根据当前区域设置的不同，可能是 "123,456.789" 或 "123 456.789"

let date = new Date();
console.log(date.toLocaleString('en-US')); // 输出：例如 "1/1/2022, 12:00:00 AM"

toString,join用于将数组转换为字符串表示形式。它可以接受一个可选的参数 separator，用于指定元素之间的分隔符。

语法：
array.toString([separator])
参数：
separator（可选）：一个字符串，用作元素之间的分隔符。默认为逗号 (,)。

let fruits = ['apple','banana','orange'];
console.log(fruits.toString()); // 输出："apple,banana,orange"
console.log(fruits.join('|')); // 输出："apple|banana|orange"

valueOf用于返回数组对象的原始值。对于数组对象，valueOf() 方法通常返回数组本身，因为数组对象没有特定的原始值。

语法：
array.valueOf()
示例：

let fruits = ['apple', 'banana', 'orange'];
console.log(fruits.valueOf()); // 输出：['apple', 'banana', 'orange']

JSON.stringify，JSON.parse字符串数组转换

var arrayString_ = ["apple", "banana", " cherry"];
var arrayObject_ = JSON.stringify(arrayString_);
console.log(arrayObject_); // 输出：'["apple", "banana", " cherry"]'

var arrayString = '["apple", "banana", " cherry"]';
var arrayObject = JSON.parse(arrayString);
console.log(arrayObject); // 输出：["apple", "banana", " cherry"]

for in用于遍历数组。会遍历数组的所有可枚举属性，包括原型链上的属性

let arr = [1, 2, 3, 4, 5];
for (let value of arr) {
     console.log(value);
}

Array.isArray()判断一个变量是否是数组

let arr = [1, 2, 3];
let arr_1 = [];
let notArr = "hello";

console.log(Array.isArray(arr)); // 输出 true
console.log(Array.isArray(arr_1)); // 输出 true
console.log(Array.isArray(notArr)); // 输出 false

instanceof判断对象是否为Array的实例，不能判断其他类似的对象

let arr = [1, 2, 3];
console.log(arr instanceof Array); // 输出 true

Object.prototype.toString.call()可以判断任何类型的对象。

let arr = [1, 2, 3];
console.log(Object.prototype.toString.call(arr) === '[object Array]'); // 输出 true

constructor判断一个变量是否是数组，不能判断其他类似的对象

let arr = [1, 2, 3];
console.log(arr.constructor === Array); // 输出 true