Array对象
- 在Javascript中,Array对象用于构造数组,数组是类列表的高阶对象,可以在单个的变量中存储多个值;
Array常用方法
1.Array.from()
- 可以把一个类数组对象或者可迭代对象转化数组
Array.from('hello');//['h','e','l','l','o'];
Array.from('hello',i=>i.toUpperCase());//['H','E','L','L','O']
Array.from([1,2,3,4],i=>i*2) // [2,4,6,8]
2.Array.of()
- 创建一个具有可变数量参数的新数组实例,而不考虑参数的数量或者类型
Array.of(111); // [111]
Array.of(1,2,3); // [1,2,3]
3.Array.isArray()
- 检测所传的值是否是数组
Array.isArray([1,2,3]); // true
Array.isArray({name:'lisi'}); // false
Array.isArray('123');//false
Array.isArray(undefined);// false
Array.isArray(NaN);// false
Array.prototype常用的方法
1.concat()
- 用于合并两个或者多个数组,此方法不会更改现有数组,会返回一个新的数组
let arr1 = [1,2,3];
let arr2 = ['a','b','c'];
let arr3 = [[12],[bb],[{a:10}]];
let newArr = arr1.concat(arr2,arr3);
console.log(newArr); // [1,2,3,'a','b','c',[12],[bb],[{a:10}]]
2.join()
- 将一个数组(或者类数组对象)的所有元素连接成一个字符串并返回这个字符串,如果数组只有一个项目,那么将返回该项目而且不使用分隔符
const list = ['1','2','3'];
console.log(list.join());// '1,2,3'
console.log(list.join('-'));// 1-2-3
console.log(list.join(''));'123'
3.push()
- 向数组的末尾添加一个或者多个元素,返回新的数组长度,会改变原数组
let list = [1,2,3];
let len = list.push('a','b','c');
console.log(arr);// [1,2,3,'a','b','c']
console.log(len); // 6
// 合并多个数组
let arr1 = [1,2,3];
let arr2 = ['a','b','c'];
let arr3 = ['1','2','3'];
console.log(arr.push(...arr2,...arr3)); // [1,2,3,'a','b','c','1','2','3']
4.pop()
- 从数组中删除最后一个元素,并返回该元素的值,改变原来数组长度
let arr = [1,2,3];
console.log(arr,arr.pop());//[1,2] , 3
5.shift()
- 从数组中删除第一个元素,并返回该元素的值,改变原来数组长度
let arr = [1,2,3];
console.log(arr,arr.shift());// [2,3], 1
6.unshift()
- 将一个数组或多个元素添加到数组的前面,并且返回该数组的新长度,改变原数组
let arr = [1,2,3];
arr.unshift('a');
arr.unshift('b','c');
arr.unshift('d')
console.log(arr);// ['d','b','c','a',1,2,3]
7.reverse()
- 将数组中的元素的位置颠倒,并且返回该数组,改变原数组
let arr = [1,2,3,4];
let reArr = arr.reverse();
console.log(reArr,arr); //[4,3,2,1]
8.sort()
- 用原地算法对数组的元素进行排序,并且返回数组,默认排序顺序是将元素转换为字符串,然后比较他们UTF-16单元值序列时构建的
let arr = [3,2,4,5,1];
arr.sort((a,b) => a-b);
console.log(arr);// [1,2,3,4,5]
9.slice();
- 数组截取,返回一个新的数组对象,这一对象是用begin和end决定的原数组 浅拷贝;
let list = [1,2,3,4,5,6,7];
console.log(list.slice()); // [1,2,3,4,5,6,7]
console.log(list.slice(2)); // [3,4,5,6,7]
console.log(list.slice(-2,4)); // []
console.log(list.slice(2,-4)); //[3]
10.splcie()
- 通过删除或替换现有元素或原地添加新的元素来修改数组,并且以数组形式返回被修改的内容,此方法会改变原数组;
let arr = [1,2,3,4,5];
// 从第三位开始,删除 0个元素,插入'a','b','c'元素
let arr1 = arr.splice(3,0,'a','b','c');
console.log(arr1); //[1,2,3,'a','b','c',4,5]
//从第二位开始,删除后面所有的元素
let arr2 =arr.splice(2);
console.log(arr2);// [1,2]
//从第二位开始,删除后面所有元素,并且插入‘a’,‘b’
let arr3 = arr.splice(2,arr.length, 'a','b');
console.log(arr3);// [1,2,'a','b']
//从倒数最后一位开始,删除所有元素,插入‘a’,‘c’
let arr4 = arr.splice(-arr.length, arr.length, 'a','b');
console.log(arr4); // ['a','c']
11.indexOf();
- 该方法返回在数组中可以找到一个给定元素的第一个索引,如果不存在返回-1;
var array = [1, '哈哈',3,'haha', 5];
array.indexOf('哈哈'); // 1 从第一个开始找'哈哈'，找到后，返回'哈哈'索引为1
array.indexOf(7); // -1 从第一个开始找 7，没找到，返回 -1
array.indexOf(1, 1); // -1 从第二个开始找 1，没找到，返回 -1
array.indexOf(1, 0) // 0 从第一个开始找 1，找到后，返回 1 的索引为 0
array.indexOf(5, 2); // 4 从第三个开始找 5，找到后，返回 5 的索引为 4
array.indexOf('haha', -3); // 3 从倒数第三个开始找'haha'，找到后，返回'haha'索引为 3
array.indexOf(1, -3); // -1 从倒数第三个开始找 1，没找到，返回 -1
12.lastIndexOf()
- 返回数组中指定元素在数组中的最后一个索引,如果不存在返回-1;
var array = [1,'哈哈',3,'haha',5];
array.lastIndexOf('哈哈'); // 1
array.lastIndexOf(7); // -1
array.lastIndexOf(3, 4); // 2
array.lastIndexOf(3, 3); // 3
array.lastIndexOf('haha', -2); // 3
array.lastIndexOf(3, -4); // -1
array.lastIndexOf(3, -1); // 2
// 查找所有元素
var indices = [];
var arr = ['a', 'b', 'a', 'c', 'a', 'd'];
var element = 'a';
var idx = arr.lastIndexOf(element);
while (idx != -1) {
indices.push(idx);
idx = (idx > 0 ? arr.lastIndexOf(element, idx - 1) : -1);
}
console.log(indices); // [4, 2, 0]
13.map()、reduce()、reduceRight()、filter()、some()、every()、forEach()、find()、findIndex()
请查看上一章ES6基础之解构、数组与对象遍历汇总
14.fill()
- 用一个固定的值填充一个数组中从起始索引到终止索引到全部元素,不包括终止索引
[1, 2, 3].fill(4); // [4, 4, 4]
[1, 2, 3].fill(4, 1); // [1, 4, 4]
[1, 2, 3].fill(4, 1, 2); // [1, 4, 3]
[1, 2, 3].fill(4, 1, 1); // [1, 2, 3]
[1, 2, 3].fill(4, 3, 3); // [1, 2, 3]
[1, 2, 3].fill(4, -3, -2); // [4, 2, 3]
[1, 2, 3].fill(4, NaN, NaN); // [1, 2, 3]
[1, 2, 3].fill(4, 3, 5); // [1, 2, 3]
Array(3).fill(4); // [4, 4, 4]
[].fill.call({ length: 3 }, 4); // {0: 4, 1: 4, 2: 4, length: 3}
// Objects by reference.
var arr = Array(3).fill({}) // [{}, {}, {}];
// 需要注意如果fill的参数为引用类型，会导致都执行都一个引用类型
// 如 arr[0] === arr[1] 为true
arr[0].hi = "hi"; // [{ hi: "hi" }, { hi: "hi" }, { hi: "hi" }]
15.flat()
- 按照一个可以指定的深度递归遍历数组,并将所有元素与遍历到子数组中的元素河边位一个新数组返回
// 数组扁平化
var arr1 = [1, 2, [3, 4]];
arr1.flat(); // [1, 2, 3, 4]
var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();// [1, 2, 3, 4, [5, 6]]
var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);// [1, 2, 3, 4, 5, 6]
//使用 Infinity，可展开任意深度的嵌套数组
var arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr4.flat(Infinity);// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
var arr5 = [1, 2, , 4, 5];
arr5.flat();// [1, 2, 4, 5]
16.flatMap()
- 使用映射函数映射每个元素,然后将结果压缩成一个新数组,他与map连着深度值为1的flat相同,
// 和map基本一样
var arr1 = [1, 2, 3, 4];
arr1.map(x => [x * 2]); // [[2], [4], [6], [8]]
arr1.flatMap(x => [x * 2]);// [2, 4, 6, 8]
arr1.flatMap(x => [[x * 2]]);// [[2], [4], [6], [8]]
17.toLocaleString()
- 返回一个字符串表示数组中的元素,数组中那的元素将使用各自的toLocaleString方法转化成字符串
const array1 = [1, 'a', new Date('21 Dec 1997 14:12:00 UTC')];
const localeString = array1.toLocaleString('en', { timeZone: 'UTC' });
console.log(localeString);//"1,a,12/21/1997, 2:12:00 PM"
18.includes()
- 用来判断一个数组是否包含一个指定的值,根据情况:如果包含返回true,否则返回false
1, 2, 3].includes(4); // false
[1, 2, 3].includes(3, 3); // false
[1, 2, 3].includes(3, -1); // true
[1, 2, NaN].includes(NaN); // true
// fromIndex 大于等于数组长度
var arr = ['a', 'b', 'c'];
arr.includes('c', 3); // false
arr.includes('c', 100); // false
19.copyWith()
- 浅复制数组的一部分到同一数组中的另一个位置,并返回它,不会改变原数组的长度
[1, 2, 3, 4, 5].copyWithin(-2);// [1, 2, 3, 1, 2]
[1, 2, 3, 4, 5].copyWithin(0, 3);// [4, 5, 3, 4, 5]
[1, 2, 3, 4, 5].copyWithin(0, 3, 4);// [4, 2, 3, 4, 5]
[1, 2, 3, 4, 5].copyWithin(-2, -3, -1);// [1, 2, 3, 3, 4]
[].copyWithin.call({length: 5, 3: 1}, 0, 3);// {0: 1, 3: 1, length: 5}
20.toString()
- 返回一个字符串，表示指定的数组及其元素。
const array1 = [1, 2, 'a', '1a'];
console.log(array1.toString());// "1,2,a,1a"
