JavaScript数组（Array对象）应用介绍
.一、Array数组基础
在JavaScript中，数组没有原始类型，可以使用Array对象，Array对象具有以下特征：
1）可调整大小的，并且可以包含不同的数据类型。
2）不是关联数组，因此，不能使用任意字符串作为索引访问数组元素，但必须使用非负整数（或它们各自的字符串形式）作为索引访问。
3）索引从 0 开始：数组的第一个元素在索引 0 处，第二个在索引 1 处，以此类推，最后一个元素是数组的 length 属性减去 1 的值。
4）复制操作创建浅拷贝。（所有 JavaScript 对象的标准内置复制操作都会创建浅拷贝，而不是深拷贝）。
二、Array方法或属性
(一）、创建新数组
1. new定义新数组
作用：创建空白或包含元素的具有可变长度的新数组
返回值：新数组
let ary = new Array(); //建议使用
let ary = []; //不建议使用
let ary = [1, 2, 3];
const ary = [1, 2, 3];//固定变量，不可修改
2. Array.from()按可迭代对象创建数组
作用：从类数组对象或可迭代对象创建新数组
返回值：新数组
改变原数组：不适用
let set = new Set([1, 2, 3]);
let arr = Array.from(set); // [1, 2, 3]
let str = 'hello';
let arr2 = Array.from(str); // ['h', 'e', 'l', 'l', 'o']
3. Array.of()按元素创建新数组
作用：创建一个具有可变数量参数的新数组
返回值：新数组
改变原数组：不适用
let arr = Array.of(1, 2, 3); // [1, 2, 3]
let single = Array.of(7); // [7] (与 new Array(7)不同)
4. concat()拼接数组与元素创建新数组
作用：合并两个或多个数组
返回值：新数组
改变原数组：否
let ary1 = [1, 2];
let ary2 = [3, 4];
let newAry = ary1.concat(ary2); // [1, 2, 3, 4]
添加元素
var ary3 = [1,2,3,4,5];
var ary4 = ary3.concat(6,7); //[1,2,3,4,5,6,7]
5. slice()数组按索引段创建新数组
作用：提取数组的一部分
语法：slice(start,end)
返回值：新数组
改变原数组：否
let ary1 = [1, 2, 3, 4, 5];
let ary2 = ary1.slice(1, 4); // [2, 3, 4] (包含开始索引，不包含结束索引)
6. filter()数组按条件创建新数组
作用：创建一个新数组，包含通过测试的所有元素
返回值：新数组
改变原数组：否
let arr = [1, 2, 3, 4, 5];
let evens = arr.filter(x => x % 2 === 0); // [2, 4]
7. flat()嵌套数组拉平创建新数组
作用：将嵌套数组"拉平"
返回值：新数组
改变原数组：否
let arr = [1, [2, [3, [4]]]];
let flat1 = arr.flat(); // [1, 2, [3, [4]]]
let flat2 = arr.flat(2); // [1, 2, 3, [4]]
let flatAll = arr.flat(Infinity); // [1, 2, 3, 4]
8 map()元素运算后创建新数组
作用：创建一个新数组，其结果是该数组中的每个元素调用函数后的返回值
返回值：新数组
改变原数组：否
let arr = [1, 2, 3];
let doubled = arr.map(x => x * 2); // [2, 4, 6]
9. flatMap()元素运算后组合创建新数组
作用：先映射每个元素，然后将结果拉平一层
返回值：新数组
改变原数组：否
let arr = [1, 2, 3];
let result = arr.flatMap(x => [x, x * 2]); // [1, 2, 2, 4, 3, 6]
(二）、数组元素变更
1. push()末尾添加元素
作用：在数组末尾添加一个或多个元素
返回值：新数组的长度
改变原数组：是
let ary = [1, 2];
let length = ary.push(3, 4); // ary = [1, 2, 3, 4], length = 4
2. unshift()开头添加元素
作用：在数组开头添加一个或多个元素
返回值：新数组的长度
改变原数组：是
let ary = [1, 2];
let length = ary.unshift(0); // ary = [0, 1, 2], length = 3
3. delete []删除指定索引位置的元素
作用：删除数组某索引位置的元素
返回值：无
改变原数组：是
let ary = [1, 2];
delete ary[1]; // ary= [1]
4. pop()删除最后的元素
作用：删除数组的最后一个元素
返回值：被删除的元素
改变原数组：是
let ary = [1, 2, 3];
let last = ary.pop(); // ary = [1, 2], last = 3
5 shift()删除开头的元素
作用：删除数组的第一个元素
返回值：被删除的元素
改变原数组：是
let ary = [1, 2, 3];
let first = ary.shift(); // ary = [2, 3], first = 1
6. splice()替换索引位置段为元素组
作用：添加/删除数组中的元素
返回值：包含被删除元素的数组
改变原数组：是
let ary1 = [1, 2, 3, 4];
// 从索引2开始删除1个元素
let ary2 = ary1.splice(2, 1); // ary1 = [1, 2, 4], ary2 = [3]
// 从索引1开始删除0个元素，添加'a', 'b'
ary1.splice(1, 0, 'a', 'b'); // ary1 = [1, 'a', 'b', 2, 4]
7. fill()替换索引位置段为某元素
作用：用固定值填充数组中的元素
返回值：修改后的数组
改变原数组：是
let arr = [1, 2, 3, 4];
arr.fill(0, 1, 3); // arr = [1, 0, 0, 4] (从索引1到3填充0)
8. reverse()数组顺序反转
作用：反转数组中元素的顺序
返回值：反转后的数组
改变原数组：是
let ary = [1, 2, 4, 3];
ary.reverse(); // ary = [3, 4, 2, 1]
9. sort()元素进行排序
作用：对数组元素进行排序
语法：sort([orderfunction])
返回值：排序后的数组
改变原数组：是
let ary = [3, 1, 4, 2];
ary.sort(); // ary = [1, 2, 3, 4]
// 自定义排序
arr.sort((a, b) => b - a); // 降序排列 arr = [4, 3, 2, 1]
10. copyWithin()元素复制向索引位置
作用：浅复制数组的一部分到同一数组中的另一个位置
返回值：修改后的数组
改变原数组：是
let arr = [1, 2, 3, 4, 5];
// 将索引3到4的元素复制到索引0的位置
arr.copyWithin(0, 3, 5); // arr = [4, 5, 3, 4, 5]
(三）、数组信息判断
1. Array.isArray()判断是否数组
作用：判断一个值是否为数组
返回值：布尔值
改变原数组：不适用
Array.isArray([1, 2, 3]); // true
Array.isArray({}); // false
Array.isArray('abc'); // false
2. includes()判断元素是否存在
作用：判断数组是否包含某个值
返回值：布尔值
改变原数组：否
let ary = [1, 2, 3];
let hasTwo = ary.includes(2); // true
let hasFour = ary.includes(4); // false
3. some()判断有符合条件的元素
作用：测试数组中是否至少有一个元素通过了测试函数
返回值：布尔值
改变原数组：否
let arr = [1, 2, 3, 4, 5];
let hasEven = arr.some(x => x % 2 === 0); // true
4. every()判断所有元素符合条件
作用：测试数组的所有元素是否都通过了测试函数
返回值：布尔值
改变原数组：否
let arr = [1, 30, 39, 29, 10, 13];
let allBelow40 = arr.every(x => x < 40); // true
(四）、数组信息获取
1. length获取数组长度
返回值：数组的长度
let ary = [1, 2];
let len=ary.length; // 2
2. []获取索引位置的元素
语法：uivos(index)
参数：uivos为数组变量，index为查询元素位置，首个元素位置为0
返回值：指定位置的元素
let ary=[1,2,3];
let value = ary[0]; //返回1
3. at()获取索引位置的元素
作用：返回指定索引处的元素（支持负索引）
返回值：元素或undefined
改变原数组：否
let arr = [1, 2, 3, 4, 5];
let item1 = arr.at(2); // 3
let item2 = arr.at(-1); // 5
4. find()获取满足条件的首个元素
作用：返回数组中满足测试函数的第一个元素
返回值：元素或undefined
改变原数组：否
let arr = [5, 12, 8, 130, 44];
let found = arr.find(x => x > 10); // 12
5. indexOf()向后获取元素的首个索引位置
作用：返回数组中指定元素的第一个索引
语法：array.indexOf(item,start)
参数：item：查找的元素。start：开始检索的位置，首个元素位置为0，省略时默认为0 。
返回值：索引或-1
改变原数组：否
let ary=["Banana","Orange","Apple","Mango","Banana","Orange","Apple"];
let a1 = ary.indexOf("Apple"); // 2
let notFound = ary.indexOf( "Abc"); // -1
let a2 = ary.indexOf("Apple",4); // 6
6 lastIndexOf()向前获取元素的首个索引位置
作用：返回数组中指定元素的最后一个索引
返回值：索引或-1
改变原数组：否
let ary = [1, 2, 3, 2];
let index = ary.lastIndexOf(2); // 3
7. findIndex()获取满足条件的首个索引位置
作用：返回数组中满足测试函数的第一个元素的索引
返回值：索引或-1
改变原数组：否
let arr = [5, 12, 8, 130, 44];
let index = arr.findIndex(x => x > 10); // 1
(五）、转换数组数据
1. join()加分隔符拼接为字符串
作用：将数组所有元素连接成一个字符串
语法：join(separator)
说明：separator为分隔符，省略时默认为逗号
返回值：字符串
改变原数组：否
let ary = ['a', 'b', 'c'];
let str = ary.join('-'); // "a-b-c"
2. toString()转换为字符串
作用：将数组转换为字符串
返回值：字符串
改变原数组：否
let ary = [1, 2, 3];
let str = ary.toString(); // "1,2,3"
3. toLocaleString()转换为本地化字符串
作用：返回本地化字符串表示
返回值：字符串
改变原数组：否
let ary = [1000, new Date()];
let str = ary.toLocaleString(); // "1,000,2023/5/15 12:00:00" (取决于地区设置)
4. reduce()元素合计或顺序拼接
作用：从左到右对数组元素执行累加器函数
返回值：累加结果
改变原数组：否
let arr = [1, 2, 3, 4];
let sum = arr.reduce((acc, curr) => acc + curr, 0); // 10
5. reduceRight()元素合计或反序拼接
作用：从右到左对数组元素执行累加器函数
返回值：累加结果
改变原数组：否
let arr = ['a', 'b', 'c'];
let str = arr.reduceRight((acc, curr) => acc + curr); // "cba"
6. entries()获取所有元素对象(迭代器)
作用：返回一个新的数组迭代器对象，包含键/值对
返回值：迭代器
改变原数组：否
let arr = ['a', 'b', 'c'];
let iterator = arr.entries();
for (let [index, value] of iterator) {
console.log(index, value);
}
// 输出:
// 0 'a'
// 1 'b'
// 2 'c'
(六）、数组信息遍历
1. for数组元素遍历
作用：遍历数组元素
返回值：undefined
改变原数组：否
for (let i=0 ; i < ary.length ; ++i ){
const item = ary[i];
……
};
或
for (const item of ary) {
……
};
2. forEach()遍历所有元素
作用：对数组的每个元素执行一次函数
返回值：undefined
改变原数组：取决于回调函数
let arr = [1, 2, 3];
arr.forEach((item, index) => {
console.log(index, item);
});
// 输出:
// 0 1
// 1 2
// 2 3
3. keys()获取所有索引位置(迭代器)
作用：返回一个新的数组迭代器对象，包含数组的键
返回值：迭代器
改变原数组：否
let arr = ['a', 'b', 'c'];
let iterator = arr.keys();
for (let key of iterator) {
console.log(key); // 0, 1, 2
}
4. values()获取所有元素(迭代器)
作用：返回一个新的数组迭代器对象，包含数组的值
返回值：迭代器
改变原数组：否
let arr = ['a', 'b', 'c'];
let iterator = arr.values();
for (let value of iterator) {
console.log(value); // 'a', 'b', 'c'
}
浙公网安备 33010602011771号