本文主要介绍js数组元素的一些基本操作，常用的一些方法
关键词：创建数组、新增数组元素、删除数组元素、将数组变成字符串、数组对象常用属性、合并数组、拷贝数组、数组排序，以及数组和Set之间的关系等
1. 创建数组
1.1 使用Array构造函数
var arr1 = new Array(); //创建一个空数组
var arr2 = new Array(20); // 创建一个包含20项的数组
var arr3 = new Array("lily", "lucy", "Tom"); // 创建一个包含3个字符串的数组
1.2 使用数组字面量表示
var arr4 = []; //创建一个空数组
var arr5 = [20]; // 创建一个包含1项的数组
var arr6 = ["lily", "lucy", "Tom"]; // 创建一个包含3个字符串的数组
1.3 类数组对象转换为数组
let obj = {
0: 1,
1: 2,
2: 6,
length: 3
};
let arr1 = Array.from(obj); // [1. 2, 6]
let arr2 = Array.prototype.slice.call(obj); // [1. 2, 6]
2. 数组常用方法
2.1 数组元素的添加
- push将一个或多个新元素添加到数组结尾，并返回数组新长度
- unshift将一个或多个新元素添加到数组开始，数组中的元素自动后移，返回数组新长度
- splice(2, 0, arr6)将一个或多个新元素插入到数组的指定位置，插入位置的元素自动后移，返回""
var arr7 = [1, 2];
arr7.push(8);
arr7.push(9, 10, 11);
arr7.unshift("00", "01");
arr7.splice(2, 0, arr6);
console.log(arr7); // ["00", "01", Array(3), 1, 2, 8, 9, 10, 11] 数组长度为9
2.2 数组元素的删除
- pop移除最后一个元素并返回该元素值
- shift移除最前一个元素并返回该元素值，数组中元素自动前移
- splice(2, 1)删除从指定位置(2,从0开始)开始的指定数量(1)的元素，数组形式返回所移除的元素
var arr8 = [1, 2, 5, 8, 10, "123lili", "9087tt", 20];
arr8.pop();
arr8.shift();
arr8.splice(2, 1);
console.log(arr8); // [2, 5, 10, "123lili", "9087tt"]
2.3 数组的截取和合并
- 截取：slice(start, [end])截取指定位置的数组元素，以数组的形式返回数组的一部分，不包括 end 对应的元素，如果省略 end 将复制 start 之后的所有元素
- 合并：concat([item1[, item2[, ... [,itemN]]]]);将多个数组（也可以是字符串，或者是数组和字符串的混合）连接为一个数组，返回连接好的新的数组
var arr9 = ["12yu", "i", "am", "ada", "~"];
console.log(arr9.slice(1, 4)); // ["i", "am", "ada"]
console.log(arr9.slice(1)); // ["i", "am", "ada", "~"]
console.log(arr9.concat("啦啦啦", 666)); // ["12yu", "i", "am", "ada", "~", "啦啦啦", 666]
console.log(arr9.concat("啦啦啦", ["啦啦啦", 999])); // ["12yu", "i", "am", "ada", "~", "啦啦啦", "啦啦啦", 999]
2.4 数组的拷贝（浅拷贝）
- 返回数组的拷贝数组，注意是一个新的数组，不是指向。可以用concat()、.slice()、splice()、数组的解构赋值来实现
var arr10 = arr9.slice(0); // ["12yu", "i", "am", "ada", "~"]
arr9[0] = "hello";
console.log(arr10); // ["12yu", "i", "am", "ada", "~"]
console.log(arr9.concat()); // ["hello", "i", "am", "ada", "~"]
console.log(arr9.splice(0, arr9.length)); // ["hello", "i", "am", "ada", "~"]
console.log([...arr9]); // ["hello", "i", "am", "ada", "~"]
2.5 数组元素的排序
- reverse()反转元素（最前的排到最后、最后的排到最前），返回数组地址
- sort()：按升序排列数组项——即最小的值位于最前面，最大的值排在最后面。返回数组地址。
- 在排序时，sort()方法会调用每个数组项的 toString()转型方法，然后比较得到的字符串，以确定如何排序。即使数组中的每一项都是数值， sort()方法比较的也是字符串，
- sort()方法可以接收一个比较函数作为参数，以便我们指定哪个值位于哪个值的前面。比较函数接收两个参数，如果第一个参数应该位于第二个之前则返回一个负数，如果两个参数相等则返回 0，如果第一个参数应该位于第二个之后则返回一个正数。
var arr11 = ["you", "and", "me"];
console.log(arr11.reverse()); // ["me", "and", "you"]
console.log(arr11.sort()); // ["and", "me", "you"]
arr11.sort(function (a, b) {
return a - b;
});
2.6 数组转为字符串
var arr12 = [1, 2, 3, 4];
// join(separator)返回字符串，这个字符串将数组的每一个元素值用separator连接在一起
console.log(arr12.join("--")); // 1--2--3--4
console.log(arr12.toLocaleString()); // 1,2,3,4
console.log(arr12.toString()); // 1,2,3,4
// 注：数组使用arr12.valueOf()方法依旧是数组
2.7 数组中是否存在指定元素
-
indexOf：接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。其中，从数组的开头（位置 0）开始向后查找，判断条件是强等于“===”。 -
lastIndexOf：接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。其中，从数组的末尾开始向前查找。
这两个方法都返回要查找的项在数组中的位置，或者在没找到的情况下返回1。在比较第一个参数与数组中的每一项时，会使用全等操作符。 -
some：至少有一个元素通过由提供的函数实现的测试。 -
includes：返回一个布尔值，表示某个数组是否包含给定的值，判断条件是强等于“===”（Same-value-zero equality），NaN是特殊情况。 -
find：返回数组中满足提供的测试函数中的第一个元素的值。否则，返回undefined。 -
findIndex：返回数组中满足提供的测试函数中的第一个元素的索引。否则，返回-1。
console.log(arr12.indexOf(2)); // 1
console.log(arr12.lastIndexOf(2)); // 1
console.log(arr12.indexOf(2, 2)); // -1
console.log(arr12.lastIndexOf(2, 2)); // 1
console.log([1, 2, 3, 'ada~'].some((element, index, arr) => element == 'ada~')); // true
// es6写法
let isExist = [1, 2, 3, 'ada~'].includes('1');
console.log(isExist); // false
let val = [1, 2, 3, 'ada~'].find((element, index, arr) => element == 'ada~');
console.log(val); // ada~
let index = [1, 2, 3, 'ada~'].findIndex((element, index, arr) => element == 'ada~');
console.log(index); // 3
注意： 在判断某数值在数组中是否存在时，用数组的includes方法更好
console.log(NaN == NaN); // false
console.log(NaN === NaN); // false
console.log([NaN].includes(NaN)); // true
console.log([NaN].indexOf(NaN)); // false
3. 数组的基本属性
3.1 length
length属性表示数组的长度，即其中元素的个数。数组的索引总是由0开始，所以一个数组的上下限分别是：0和length-1。javascript数组的length属性是可变的。当length属性被设置得更大时，整个数组的状态事实上不会发生变化，仅仅是length属性变大；当length属性被设置得比原来小时，则原先数组中索引大于或等于length的元素的值全部被丢失。
var arr13 = [1, 90, 22, "111"];
console.log(arr13.length); // 4;
arr13.length = 6;
console.log(arr13[5]); // [1, 90, 22, "111", undefined, undefined]
arr13.length = 3;
console.log(arr13); // [1, 90, 22]
3.1 Array.prototype
声明原型属性后所有数组对象共有
Array.prototype.max = function () {
this.sort(function (a, b) {
return a - b;
});
return this[this.length - 1];
};
var arr14 = [5, 78, 48, 19, 8];
console.log(arr14.max()); // 78
4. Set与数组的差异
4.1 Set
ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。
[...new Set([1, 2, 3, 4, 4])]; // [1, 2, 3, 4]
[...new Set('ababbc')].join(''); // "abc"
Set 实例的属性和方法：
-
Set.prototype.size：返回Set实例的成员总数。 -
add(value)：添加某个值，返回 Set 结构本身。 -
delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。 -
has(value)：返回一个布尔值，表示该值是否为Set的成员。 -
clear()：清除所有成员，没有返回值。 -
keys()：返回键名的遍历器。 -
values()：返回键值的遍历器。 -
entries()：返回键值对的遍历器。 -
forEach()：使用回调函数遍历每个成员。
4.2 Set与数组的互相转换
// 数组转换为set
let set = new Set([3, 4, 5, 4, 6, 7, 7]); // Set(4) [3, 4, 5, 6, 7 ]
// set转换为数组
let arr1 = [...set]; // [3, 4, 5, 6, 7 ]
let arr2 = Array.from(set); // [3, 4, 5, 6, 7 ]
