js数组(Array)常用方法详解(一)
原创
1. 创建数组的几种方式
1.1 使用 Array 构造函数
let arr = new Array()1.2 创建一个有初始length的数组
let arr = new Array(10);1.3 创建一个有元素的数组
let arr = new Array("red", "green");
// arr: ["red", "green"]1.4 最常用: 使用数组字面量
let arr = [];
let arr1 = [1, "red", true];2. 数组常用方法
2.1 *** length属性
获取数组长度:
let arr = [1, 2, 3];
arr.length; // 32.2 *** Array.from() （ES6）
from()用于将类数组结构转换为数组实例;
Array.from()的第一个参数是一个类数组对象，即任何可迭代的结构，或者有一个 length 属性和可索引元素的结构:
// 字符串
let str = "Hi";
Array.from(str); // ['H', 'i']
// Array.from()对现有数组执行浅复制
const arr1 = [1, 2];
const arr2 = Array.from(arr1);
// arr2: [1, 2]将Set结构数据转换为真正的数组：
let arr = [1, 2, 3, 2, 5, 5, 6];
let set = new Set(arr);
Array.from(set); // [1, 2, 3, 5, 6]数组去重: Array.from(new Set(array))
将类数组对象转换为真正数组:
const obj = {
0: 1,
1: 2,
2: 3,
3: 4,
length: 4
};
Array.from(obj);
// obj: [1, 2, 3, 4]
去掉length属性会怎么样呢:
const obj = {
0: 1,
1: 2,
2: 3,
3: 4
};
Array.from(obj);
// obj: []length存在，但是对象属性名不是数字呢：
const obj = {
"onw": 1,
"two": 2,
"three": 3,
"four": 4，
length: 4
};
Array.from(obj);
// obj: [undefined, undefined, undefined, undefined]要将一个类数组对象转换为一个真正的数组，必须具备以下条件：
类数组对象必须具有length属性，用于指定数组的长度；
类数组对象的属性名必须为数值型或字符串型的数字；
Array.from()还接收第二个可选的映射函数参数(相当于map())
const arr = [1, 2, 3];
Array.from(arr, (value) => value * 2);
// [2, 4, 6]2.3 Array.of() (ES6)
Array.of()可以把一组参数转换为数组:
Array.of(1, 2, 3); // [1, 2, 3]2.4 Array.isArray()
这个方法的目的就是确定一个值是否为数组:
let arr = [];
let num = 1;
Array.isArray(arr); // true
Array.isArray(num); // false2.5 keys()、values()、entries()
keys()返回数组索引的迭代器;
values()返回数组元素的迭代器;
entries()返回索引/值对的迭代器。
let arr = [1, 2, 3];
arr.keys(); // Array Iterator {}
Array.from(arr.keys()); //
arr.values(); // Array Iterator {}
Array.from(arr.values()); // [1, 2, 3]
arr.entries(); // Array Iterator {}
Array.from(arr.entries()); // [[0, 1], [1, 2], [2, 3]]2.6 fill()
fill()方法可以向一个已有的数组中插入全部或部分相同的值，改变原数组;
// 1个参数: 全部填充为该参数
let arr = [1, 2, 3, 4, 5];
arr.fill(0); // arr: [0, 0, 0, 0, 0]
// 2个参数: 第一个参数表示填充的值，第二个表示从哪里开始填充
let arr1 = [1, 2, 3, 4, 5];
arr1.fill(0, 3); // arr: [1, 2, 3, 0, 0]
// 3个参数: 第一个参数表示填充的值，第二个表示从哪里开始填充, 第三参数表示到哪里结束，不包含该值
let arr2 = [1, 2, 3, 4, 5];
arr2.fill(0, 2, 4); // arr: [1, 2, 0, 0, 5]2.7 toString()
toString()返回由数组中每个值的等效字符串拼接而成的一个逗号分隔的字符串:
let arr = [1, 2, true, "red"];
arr.toString(); // 1,2,true,red
// 不改变原数组arr: [1, 2, true, 'red']2.8 *** join()
join()方法接收一个参数，即字符串分隔符，经常拿来解决数组转换为字符串的问题(不改变原数组)：
let arr = ["red", "green", "blue"];
arr.join(","); // red,green,blue
arr.join("||"); // red||green||blue2.9 *** push()、pop()、unshift()、shift()
push()： 在数组末尾添加一个或多个元素，返回数组的长度；
pop(): 删除数组最后一个元素，返回被删除的元素;
unshift(): 在数组开头添加一个或多个元素，返回数组的长度；
shift(): 删除数组第一个元素，返回被删除的元素;
以上方法都会改变原数组。
// push()
let arr = [1, 2, 3];
arr.push(4); // 返回数组长度: 4 arr: [1, 2, 3, 4]
arr.push(5, 6); //返回数组长度: 6 arr: [1, 2, 3, 4, 5, 6]
// pop()
let arr1 = [1, 2, 3];
arr1.pop(); // 返回被删除的元素: 3 arr: [1, 2]
// unshift()
let arr2 = [1, 2, 3];
arr2.unshift(0); // 返回数组长度: 4 arr: [0, 1, 2, 3]
arr2.unshift(5, 6); // 返回数组长度: 6 arr: [5, 6, 0, 1, 2, 3]
// shift()
let arr3 = [1, 2, 3];
arr3.shift(); // 返回被删除的元素: 1 arr: [2, 3]2.10 *** reverse()
reverse()方法就是将数组元素反向排列(反转数组，改变原始数组)：
let arr = [1, 2, 3];
arr.reverse(); // [3, 2, 1]
// arr: [3, 2, 1]2.11 *** sort()
数组排序：默认情况下，sort()会按照升序重新排列数组元素，即最小的值在前面，最大的值在后面。sort()会在每一项上调用 String()转型函数，然后比较字符串来决定顺序。即使数组的元素都是数值，也会先把数组转换为字符串再比较、排序。（原始数组会被改变）
let arr= [0, 1, 4, 12, 5, 7];
arr.sort(); // [0, 1, 12, 4, 5, 7]
相信大家已经发现问题了，开始数组中数值的顺序是正确的，但调用 sort()会按照这些数值的字符串形式重新排序。因此，即使 4 小于 12，但字符串"12"在字符串"4"的前头，所以 12 还是会排到 4 前面；
解决方法：
let arr = [1, 4, 2, 6, 9, 3];
// 升序:
arr.sort((a, b) => a - b) // [1, 2, 3, 4, 6, 9]
// 降序:
arr.sort((a, b) => b - a); // [9, 6, 4, 3, 2, 1]这里暂时先介绍一部分数组常用方法，后续会补上数组剩下的一些常用方法，感谢观看。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
