JS篇六：数组数据类型

先语：数组这个数据类型很重要！在前后端交互的数据格式中，数组是极为常见的，所以想要将后端反馈的数据拿来使用，那么对数据的理解一定要高！各种方法的使用请牢记！

一、数组的介绍

1、介绍

• 数组是JS中一种特殊类型的对象，用于按顺序存储一系列的值。
• 数组中的每个值都称为元素，并且每个元素都有一个唯一的索引，表示其在数组中的位置。(索引：‘arr[0]’中的0就代表索引，指向该数组中的第一个元素)

2、构建方式

可以使用两种方式来构建——有参/无参。

//有参构建方法

// 使用数组字面量
let arr1 = [1, 2, 3, 'hello', true];

// 使用Array构造函数
let arr2 = new Array(4, 5, 6, 'world', false);

//无参构建方法

//不填充任何参数
let person = new Array(); 

//填充单个正整数数值，正整数代表该数组的长度
let person = new Array(5)

3、特殊属性

length属性：表示数组中元素的数量（最重要的属性，其他的使用度不高）

let arr = [1, 2, 3, 4, 5];
console.log(arr.length); // 输出 5

4、注意点

1. 数组索引是从0开始的。
2. 访问不存在的数组索引会返回undefined。
3. 数组的长度是动态的。

二、数组下的各式方法

1、特殊方法

①、Array.isArray()

作用：用于确定传递的值是否是一个 Array。如果传递的值是一个数组，那么它会返回 true；否则，它会返回 false。（使用度较高）

console.log(Array.isArray([]));        // true
console.log(Array.isArray({}));        // false
console.log(Array.isArray(new Array())); // true
console.log(Array.isArray(null));      // false
console.log(Array.isArray(undefined)); // false
console.log(Array.isArray(17));        // false
console.log(Array.isArray('Array'));   // false
console.log(Array.isArray(true));      // false
console.log(Array.isArray(false));     // false
console.log(Array.isArray({ __proto__: Array.prototype })); // false，这种对象虽然继承了Array的原型，但并不是数组实例

注意点：对于之前说的instanceof与typeof这两种判断方式，这个方法是判断数组的最佳选择！

②、Array.valueof()

作用：返回数组本身。（使用度较低，了解即可）

let arr = [1, 2, 3];
console.log(arr.valueOf()); // 输出: [1, 2, 3]

③、Array.toString()

作用：将数组中的每个元素转换成字符串（如果它们不是字符串的话），然后使用逗号 , 将它们连接成一个单一的字符串。（使用度一般，视场景而定）

let arr = [1, 2, 'hello', true];
console.log(arr.toString()); // 输出: "1,2,hello,true"

④、Array.toLocaleString()

作用：和③类似，将数组中的每个元素转换成字符串（如果它们不是字符串的话），但是它会根据本地环境对元素进行格式化，并使用逗号 , 将它们连接成一个单一的字符串。（使用度很低，了解即可）

let numbers = [1234.56, 7890.12];

// 假设环境是美式英语
console.log(numbers.toLocaleString()); // 输出可能类似于 "1,234.56,7,890.12"（具体输出取决于环境）

// 使用选项来指定本地化行为
console.log(numbers.toLocaleString('en-US', { style: 'currency', currency: 'USD' })); // 输出可能类似于 "$1,234.56,$7,890.12"

2、修改方法

（这些方法很常用，请牢记）

push()

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

let arr = [1, 2, 3];
arr.push(4);
console.log(arr); // 输出 [1, 2, 3, 4]

pop() 

作用：删除数组的最后一个元素，并返回被删除的元素。

let arr = [1, 2, 3, 4];
let lastElement = arr.pop();
console.log(arr); // 输出 [1, 2, 3]
console.log(lastElement); // 输出 4

 shift()

作用：删除数组的第一个元素，并返回被删除的元素。

let arr = [1, 2, 3, 4];
let firstElement = arr.shift();
console.log(arr); // 输出 [2, 3, 4]
console.log(firstElement); // 输出 1

unshift()

作用： 向数组的开头添加一个或多个元素，并返回新的长度。

let arr = [1, 2, 3];
arr.unshift(0);
console.log(arr); // 输出 [0, 1, 2, 3]

3、排序方法

（这两个也很常用，请牢记）

reverse()

作用：颠倒数组中元素的顺序。

注意点：这个方法会直接该便数组，如果不希望改变原数组，需要先创建一个数组的副本，然后在副本上调用 reverse() 方法。

let arr = [1, 2, 3, 4, 5];
arr.reverse();
console.log(arr); // 输出: [5, 4, 3, 2, 1]

sort()

作用：按照字符串的 Unicode 编码进行排序（简单点说，升序排序，按照字符串的 Unicode 编码从小到大）。

注意点：它同样会直接修改原数组，而不是返回一个新的数组。

let arr = [3, 1, 4, 1, 5, 9, 2, 6];
arr.sort();
console.log(arr); // 输出: [1, 1, 2, 3, 4, 5, 6, 9]

 （这个方法并不绝对，如果只是为了大小排序建议还是书写一个比较函数）

let arr = [3, 1, 4, 1, 5, 9, 2, 6];
arr.sort(function(a, b) {
  return a - b;
});
console.log(arr); // 输出: [1, 1, 2, 3, 4, 5, 6, 9]

4、迭代方法

（这些方法很常用，请牢记）

forEach()

作用：方法按升序为数组中的每个元素执行一次提供的函数。（它不会改变原数组）

let arr = [1, 2, 3, 4, 5];
arr.forEach(function(element) {
  console.log(element);
});
// 输出: 1, 2, 3, 4, 5

map()

作用：创建一个新数组，其结果是该数组中的每个元素调用一个提供的函数后的返回值。 

let arr = [1, 2, 3, 4, 5];
let mappedArr = arr.map(function(element) {
  return element * 2;
});
console.log(mappedArr); // 输出: [2, 4, 6, 8, 10]

filter()

作用：创建一个新数组，包含通过所提供函数实现的测试的所有元素。

let arr = [1, 2, 3, 4, 5];
let filteredArr = arr.filter(function(element) {
  return element > 3;
});
console.log(filteredArr); // 输出: [4, 5]

reduce()

作用：对数组中的每个元素执行一个由您提供的reducer函数（升序执行），将其结果汇总为单个返回值。

let arr = [1, 2, 3, 4, 5];
let sum = arr.reduce(function(total, current) {
  return total + current;
}, 0);
console.log(sum); // 输出: 15

find()

作用：返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。

let arr = [1, 2, 3, 4, 5];
let found = arr.find(function(element) {
  return element > 3;
});
console.log(found); // 输出: 4

findIndex()

作用：返回数组中满足提供的测试函数的第一个元素的索引。否则返回 -1。

let arr = [1, 2, 3, 4, 5];
let index = arr.findIndex(function(element) {
  return element > 3;
});
console.log(index); // 输出: 3

 some()

作用：测试数组中是不是至少有1个元素通过了被提供的函数测试。（它返回的是一个布尔值）

let arr = [1, 2, 3, 4, 5];
let hasLargeNumbers = arr.some(function(element) {
  return element > 3;
});
console.log(hasLargeNumbers); // 输出: true

every()

作用：测试一个数组内的所有元素是否都能通过某个指定函数的测试。（它返回的是一个布尔值）

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

5、归并方法

（这两个使用度一般，尽量要会用）

reduce()

作用：将数组中的元素归纳（或“减少”）为单个值。

解释：对数组中的每个元素执行一个由你提供的 reducer 函数，将其结果汇总为单个返回值。

特点：

①第一次迭代发生在数组的第二项上；

②该方法永远会将当前迭代返回的值，当作下一次迭代第一个参数的

（代码的意思：1+2=3,3+3=6……）

let arr = [1, 2, 3, 4, 5];
let sum = arr.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue;
}, 0); // 0 是初始值

console.log(sum); // 输出: 15

reduceRight()

 作用：和reduce()相同，唯一区别就是这个方法是从右向左迭代。

（代码的意思：5+4=9,9+3=12……）

let arr = [1, 2, 3, 4, 5];
let sum = arr.reduceRight(function(accumulator, currentValue) {
  return accumulator + currentValue;
}, 0); // 0 是初始值

console.log(sum); // 输出: 15

6、其他方法

（这些方法使用度都很高，牢记！）

indexOf()

作用：返回在数组中可以找到给定元素的第一个索引，如果不存在，则返回-1。

let arr = [1, 2, 3, 4, 5];
console.log(arr.indexOf(3)); // 输出 2
console.log(arr.indexOf(6)); // 输出 -1

lastIndexOf()

作用：返回在数组中可以找到给定元素的最后一个索引，如果不存在，则返回-1。

let arr = [1, 2, 3, 4, 3, 2, 1];
console.log(arr.lastIndexOf(3)); // 输出 4
console.log(arr.lastIndexOf(6)); // 输出 -1

slice()

作用：返回数组的一个片段或子数组，不会修改原数组。

let arr = [1, 2, 3, 4, 5];
let subArr = arr.slice(1, 4);
console.log(subArr); // 输出 [2, 3, 4]
console.log(arr); // 输出 [1, 2, 3, 4, 5]

concat()

作用：用于合并两个或多个数组。这个方法不会改变现有的数组，而是返回一个新数组，其中包含被合并数组的元素。

let array1 = ['a', 'b', 'c'];
let array2 = ['d', 'e', 'f'];
let array3 = array1.concat(array2);

console.log(array3); // 输出: ['a', 'b', 'c', 'd', 'e', 'f']