深入解析JavaScript数组的创建与常用方法

### 一、数组的创建

1. **数组字面量表示法**
这是最简单的创建数组的方式。
```Javascript
let arr1 = []; // 创建一个空数组
let arr2 = [20]; // 创建一个包含一个元素为20的数组
let arr3 = ['lily', 'lucy', 'Tom']; // 创建一个包含三个字符串的数组
```

2. **使用Array构造函数**
可以不带参数或带参数来创建数组。
- **无参构造**：`let arr4 = new Array();` // 创建一个空数组
- **带参构造**：如果只传入一个数值参数，则创建一个指定长度的空数组；若传入非数值或多个参数，则创建包含这些参数的数组。
```Javascript
let arr5 = new Array(20); // 创建一个包含20个未定义元素的数组
let arr6 = new Array('lily', 'lucy', 'Tom'); // 创建一个包含三个字符串的数组
let arr7 = new Array('23'); // 创建一个包含单个字符串'23'的数组
```

3. **使用Array.of方法**
ES6引入的新特性，旨在解决Array构造器的一个特殊行为问题。
```Javascript
let arr8 = Array.of(1, 2); // 创建一个包含两个元素的数组
console.log(arr8.length); // 输出2
console.log(arr8[0]); // 输出1
```

4. **使用Array.from方法**
此方法用于将类数组对象或可迭代对象转换成真正的数组。
```Javascript
function arga(...args) {
let arg = Array.from(args);
console.log(arg); // 输出传递给函数的实际参数组成的数组
}
arga('arr1', 26, 'from'); // 输出: ['arr1', 26, 'from']
```

### 二、数组的常用方法

#### 1. join()
将数组的所有元素连接成一个字符串，默认以逗号分隔。
```Javascript
let arr = [1, 2, 3];
console.log(arr.join()); // 输出: '1,2,3'
console.log(arr.join('-')); // 输出: '1-2-3'
```

#### 2. push() 和 pop()
- `push()`：向数组末尾添加一个或多个元素，并返回新的长度。
- `pop()`：移除并返回数组的最后一个元素。
```Javascript
let names = ['Lily', 'lucy', 'Tom'];
names.push('Jack', 'Sean');
console.log(names); // 输出: ['Lily', 'lucy', 'Tom', 'Jack', 'Sean']
console.log(names.pop()); // 输出: 'Sean'
```

#### 3. shift() 和 unshift()
- `shift()`：移除并返回数组的第一个元素。
- `unshift()`：向数组开头添加一个或多个元素，并返回新长度。
```Javascript
names.unshift('Jack', 'Sean');
console.log(names.shift()); // 输出: 'Jack'
```

#### 4. sort()
对数组元素进行排序，默认按字符串升序排列。
```Javascript
let arr1 = ['a', 'd', 'c', 'b'];
console.log(arr1.sort()); // 输出: ['a', 'b', 'c', 'd']
let arr2 = [13, 24, 51, 3];
console.log(arr2.sort((a, b) => a - b)); // 使用比较函数实现数字排序
```

#### 5. reverse()
颠倒数组中元素的顺序。
```Javascript
let arr = [13, 24, 51, 3];
console.log(arr.reverse()); // 输出: [3, 51, 24, 13]
```

#### 6. concat()
连接两个或多个数组，返回一个新数组而不改变原数组。
```Javascript
let arr = [1, 3, 5, 7];
let arrCopy = arr.concat(9, [11, 13]);
console.log(arrCopy); // 输出: [1, 3, 5, 7, 9, 11, 13]
```

#### 7. slice()
提取从起始索引到结束索引（不包括）之间的元素，返回一个新数组。
```Javascript
let arr = [1, 3, 5, 7, 9, 11];
console.log(arr.slice(1, 4)); // 输出: [3, 5, 7]
```

#### 8. splice()
可用于删除、插入或替换数组中的元素。
```Javascript
let arr = [1, 3, 5, 7, 9, 11];
let removed = arr.splice(0, 2); // 删除前两项
console.log(arr); // 输出: [5, 7, 9, 11]
console.log(removed); // 输出: [1, 3]
```

#### 9. indexOf() 和 lastIndexOf()
分别从前往后和从后往前查找指定元素的位置。
```Javascript
let arr = [1, 3, 5, 7, 7, 5, 3, 1];
console.log(arr.indexOf(5)); // 输出: 2
console.log(arr.lastIndexOf(5)); // 输出: 5
```

#### 10. forEach()
遍历数组中的每个元素，执行指定的回调函数。
```Javascript
let arr = [11, 22, 33, 44, 55];
arr.forEach((x, index, a) => console.log(`${x}|${index}|${a === arr}`));
```

#### 11. map()
创建一个新数组，其结果是对原数组每个元素调用提供的函数后的值。
```Javascript
let arr = [1, 2, 3, 4, 5];
let squared = arr.map(item => item * item);
console.log(squared); // 输出: [1, 4, 9, 16, 25]
```

#### 12. filter()
创建一个新数组，其中包含所有通过测试的元素。
```Javascript
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let filtered = arr.filter(x => x >= 8 || x % 3 === 0);
console.log(filtered); // 输出: [3, 6, 8, 9, 10]
```

#### 13. fill()
用指定的值填充数组中的部分或全部元素。
```Javascript
let arr = [1, 2, 3, 'cc', 5];
arr.fill(1, 2, 4); // 从索引2开始到索引4（不包括），用1填充
console.log(arr); // 输出: [1, 2, 1, 1, 5]
```

#### 14. every() 和 some()
- `every()`：检查数组中的所有元素是否都满足条件。
- `some()`：检查数组中是否存在至少一个元素满足条件。
```Javascript
let arr = [1, 2, 3, 4, 5];
console.log(arr.every(x => x <10)); // 输出: true
console.log(arr.some(x => x > 3)); // 输出: true
```

#### 15. includes()
判断数组是否包含某个特定的值。
```Javascript
let arr = [22, 3, 31, 12, 'arr'];
console.log(arr.includes(31)); // 输出: true
console.log(arr.includes(31, 3)); // 从索引3开始查找，输出: false
```

#### 16. reduce() 和 reduceRight()
通过一个累加器累积数组中的值，最终返回一个单一的结果。
```Javascript
let values = [1, 2, 3, 4, 5];
let sum = values.reduce((prev, cur) => prev + cur, 10);
console.log(sum); // 输出: 25
```

#### 17. find() 和 findIndex()
- `find()`：返回第一个满足条件的元素。
- `findIndex()`：返回第一个满足条件的元素的索引。
```Javascript
let arr = [1, 2, 3, 'arr', 5, 1, 9];
console.log(arr.find(value => value > 2)); // 输出: 3
console.log(arr.findIndex(value => value > 2)); // 输出: 2
```

#### 18. copyWithin()
将数组的一部分复制到另一部分。
```Javascript
let arr = [1, 2, 3, 'arr', 5];
arr.copyWithin(3, 0, 2);
console.log(arr); // 输出: [1, 2, 3, 1, 2]
```

#### 19. flat() 和 flatMap()
- `flat()`：将多维数组展平为一维数组。
- `flatMap()`：先映射再展平。
```Javascript
let arr = [0, 1, 2, [3, 4]];
console.log(arr.flat()); // 输出: [0, 1, 2, 3, 4]
let arr2 = [1, 2, [3, 4], [5, 6]];
console.log(arr2.flatMap(x => [x])); // 输出: [1, 2, 3, 4, 5, 6]
```

#### 20. entries(), keys(), 和 values()
提供对数组键名、键值或键值对的遍历。
```Javascript
for (let [index, elem] of ['a', 'b'].entries()) {
console.log(index, elem);
} // 输出: 0 'a', 1 'b'
```