最完整的Array 对象属性与方法使用大全

2021年06月03日 00:52 · 阅读 264

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"
复制代码

最完整的Array 对象属性与方法使用大全

Array对象

Array常用方法

1.Array.from()

2.Array.of()

3.Array.isArray()

Array.prototype常用的方法

1.concat()

2.join()

3.push()

4.pop()

5.shift()

6.unshift()

7.reverse()

8.sort()

9.slice();

10.splcie()

11.indexOf();

12.lastIndexOf()

13.map()、reduce()、reduceRight()、filter()、some()、every()、forEach()、find()、findIndex()

14.fill()

15.flat()

16.flatMap()

17.toLocaleString()

18.includes()

19.copyWith()

20.toString()

最完整的Array 对象属性与方法使用大全