【JS】数组基本操作

目录

创建

增

删

查

遍历

排序

颠倒顺序

合并

数组转字符串

类数组转换为数组的方法

数组拷贝

filter()方法

map()方法

ES6的set数组去重方法

---

创建

var a = [1,2,3]
var a = Array()

增

push（）：在末尾增加一个元素
unshift（）：在首部增加一个元素

ES6: fill() 填充数组
参数:
第一个元素(必须): 要填充数组的值
第二个元素(可选): 填充的开始位置,默认值为0
第三个元素(可选)：填充的结束位置，默认是为this.length

（不包括起始位置，包括结束位置）

删

pop（）： 删除末尾的元素
shift（）：删除第一个元素
delete：删除指定元素，但是数组长度

原来数组的索引保持不变,此时要遍历数组元素可以跳过其中undefined的元素

splice（）

1）splice() 方法的参数是可选的。如果不给它传递参数，则该方法不执行任何操作。如果给它传递一个参数，则该方法仅执行删除操作，参数值指定删除元素的起始下标，（包含该下标元素 splice() 方法将删除后面所有元素。

• 如果指定两个参数，则第 2 个参数值表示要删除元素的个数。
• 如果指定三个或多个参数，则第 3 个以及后面所有参数都被视为插入的元素。
• 如果不执行删除操作，第 2 个参数值应该设置为 0，但是不能够空缺，否则该方法无效。

 2) splice() 方法的删除和插入操作是同时进行的，且是在原数组基础上执行操作。插入的元素将填充被删除元素的位置，并根据插入元素个数适当调整插入点位置。而不是在删除数组之后重新计算插入点的位置。
3) splice() 方法执行的返回值是被修改的子数组，如果要获取删除指定元素后的数组,直接调用原来的数组即可。

使用splice循环删除数组中的元素时，会出现删除不完全的问题，出现如下问题的原因是因为，每次删除之后数组的索引值都会发生变化，导致循环中的i和数值索引总会出现剩余项，所以删除所有会出现问题。

解决方法如下：反向遍历即可解决该问题

slice() 截取数组 

slice() 方法与 splice() 方法功能相近，但是它仅能够截取数组中指定区段的元素，并返回这个子数组。该方法包含两个参数，分别指定截取子数组的起始和结束位置的下标，原数组未改变。

let a = [1,2,3,4,5];  //定义数组
let b = a.slice(2,5);  //截取第三个元素到第六个元素前的所有元素
console.log(b);  //返回[3,4,5]

查

indexOf()： 查找数组是否存在某个元素，返回下标，返回 item 的第一次出现的位置。开始位置的索引为 0，如果在数组中没找到指定元素则返回 -1。
lastIndexOf() ：查找指定元素在数组中的最后一个位置
includes() ：包含两个参数，第二个参数表示判断的起始位置查找数组是否包含某个元素 返回布尔值。
find() ：用于找出第一个符合条件的数组成员

遍历

1.forEach（）：
array.forEach(function(currentValue, index, arr), thisValue)

currentValue(必须),数组当前元素的值
index(可选), 当前元素的索引值
arr(可选),数组对象本身

无法中途退出循环，只能用return退出本次回调，进行下一次回调。
它总是返回 undefined值,即使你return了一个值。

ES6 提供三个新的方法——entries()，keys()和values()——用于遍历数组。
keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历。

for (let index of ['a', 'b'].keys()) {
  console.log(index);
}
// 0
// 1

for (let elem of ['a', 'b'].values()) {
  console.log(elem);
}
// 'a'
// 'b'

for (let [index, elem] of ['a', 'b'].entries()) {
  console.log(index, elem);
}
// 0 "a"
// 1 "b"

for...in 方法

数组既可遍历对象，也可遍历数组。遍历数组时也会遍历数组所有的可枚举属性，包括原型。例如原型方法method和name属性，不推荐遍历数组。for in循环遍历的是数组的键值(索引)，而for of循环遍历的是数组的值。

 for...of 方法

• for..of适用遍历数/数组对象/字符串/map/set等拥有迭代器对象的集合。但是不能遍历对象,因为没有迭代器对象.与forEach()不同的是，它可以正确响应break、continue和return语句
• for-of循环不支持普通对象，但如果你想迭代一个对象的属性，你可以用for-in循环（这也是它的本职工作）或内建的Object.keys()方法

排序

sort（）
sort要正确排序必须配合一个排序函数

var numsArr = [100, 23, 13, 90, 34, 0, 2]
numsArr.sort(function(a, b){return a - b})   // [0, 2, 13, 23, 34, 90, 100]

var numsArr = [100, 23, 13, 90, 34, 0, 2]
numsArr.sort(function(a, b){return b - a})   // [100, 90, 34, 23, 13, 2, 0]

颠倒顺序

reserse（）

合并

1. […arr1, …arr2, …arr3]
2. concat（）
3. 通过Map()

var arr = arr1.concat(arr2);  // [1, 2, 3, "a", "b", "c", "d", "e", "f"]
//需要连接多个数组的时候，效率很低，会造成很大的内存浪费

arr = [...arr1,...arr2]
console.log(arr)   // [1, 2, 3, "a", "b", "c", "d", "e", "f"]

//这个方法不会改变原数组的内容，返回新数组。


 arr1.map(item=>{
    arr2.push(item) 
 });
  console.log(arr2)  // [1, 2, 3, "a", "b", "c", "d", "e", "f"]
//这样写性能相对来说要高一点，但是也会改变数组本身的值

数组转字符串

1.join（）：用指定分隔符分割连接 

let a= ['hello','world'];
let str=a.join(); // 'hello,world'
let str2=a.join('+'); // 'hello+world'

 2.toString() 和join相同但是不能指定分隔符

字符串转数组

split（）方法与join（）方法正好相反
它有两个参数：

separator 必需。字符串或正则表达式，从该参数指定的地方分割 stringObject。
howmany 可选。该参数可指定返回的数组的最大长度。如果设置了该参数，返回的子串不会多于这个参数指定的数组。如果没有设置该参数，整个字符串都会被分割，不考虑它的长度。
如果用 “” 中间没有分号，作为分隔符，每个字符都会被分割开

类数组转换为数组的方法

1、Array.prototype.slice.call()

这种方法是借用了数组原型中的slice方法，返回一个数组。slice方法的内部实现：

Array.prototype.slice = function(start,end){  
      var result = new Array();  
      start = start || 0;  
      end = end || this.length; //使用call之后this指向了类数组对象
      for(var i = start; i < end; i++){  
           result.push(this[i]);  
      }  
      return result;  
 } 

2、扩展运算符（…）
同样是ES6中新增的内容，扩展运算符（…）也可以将某些数据结构转为数组

//arguments对象的转换
function foo(){
    var args = [...arguments];
}
//NodeList对象的转换
[...document.querySelectorAll('p')]

 3、Array.from()
Array.from()是ES6中新增的方法，可以将两类对象转为真正的数组：类数组对象和可遍历（iterable）对象（包括ES6新增的数据结构Set和Map）

数组拷贝

1.const a2 = […a1];

2.深拷贝

• 利用concat

let arr = [1,2,3];
let arr2 = [].concat(arr);

• 利用JSON深拷贝

let obj = {
a:1,
b:2,
c:undefind,
fun:function () {
console.log("function")
}
};
let obj2 = JSON.parse(JOSN.Stringify(obj));
console.log(obj2);
//object:[a:1,b:2]
//用JSON拷贝会忽略undefined和function

关于JSON.parse(JSON.stringify(obj))实现深拷贝应该注意的坑

JSON.parse(JSON.stringify(obj)我们一般用来深拷贝，其过程说白了 就是利用JSON.stringify 将js对象序列化（JSON字符串），再使用JSON.parse来反序列化(还原)js对象；序列化的作用是存储(对象本身存储的只是一个地址映射，如果断电，对象将不复存在，因此需将对象的内容转换成字符串的形式再保存在磁盘上 )和传输（例如 如果请求的Content-Type是 application/x-www-form-urlencoded，则前端这边需要使用qs.stringify(data)来序列化参数再传给后端，否则后端接受不到； ps: Content-Type为 application/json;charset=UTF-8或者 multipart/form-data则可以不需要 ）

我们在使用 JSON.parse(JSON.stringify(xxx))时应该注意一下几点：
1、如果obj里面有时间对象，则JSON.stringify后再JSON.parse的结果，时间将只是字符串的形式。而不是时间对象；

2、如果obj里有RegExp、Error对象，则序列化的结果将只得到空对象；

3、如果obj里有函数，undefined，则序列化的结果会把函数或 undefined丢失；

4、如果obj里有NaN、Infinity和-Infinity，则序列化的结果会变成null；

5、JSON.stringify()只能序列化对象的可枚举的自有属性，例如 如果obj中的对象是有构造函数生成的， 则使用JSON.parse(JSON.stringify(obj))深拷贝后，会丢弃对象的constructor；

6、如果对象中存在循环引用的情况也无法正确实现深拷贝；

filter()方法

filter方法可以实现数组的筛选

filter有三个参数：

1. element：数组中的元素
2. index：索引
3. array：数组本身

var a = [1,2,2, ,3,4,4,5];
// 只写一个参数则是element
var b = a.filter(function (num) {
	return num && num.trim();	//trim()会去除字符串两端的空格
})
//最后会得到去除空格的字符串

var c = a.filter(function (num,index,array){
	return array.indexOf(num) === index;
})
//	这样就可以巧妙的去除重复元素，原理是indexOf会返回元素第一次出现的位置，
//  和index进行比较就可以得出是不是重复的

map()方法

定义在JavaScript的Array中，它返回一个新的数组，数组中的元素为原始数组调用函数处理后的值。

语法：

array.map(function(currentValue, index, arr), thisIndex)

参数说明：

• function(currentValue, index, arr)：必须。为一个函数，数组中的每个元素都会执行这个函数。其中函数参数：

1. currentValue：必须。当前元素的的值。
2. index：可选。当前元素的索引。
3. arr：可选。当前元素属于的数组对象。

• thisValue：可选。对象作为该执行回调时使用，传递给函数，用作"this"的值。

实例：

//返回由原数组中每个元素的平方组成的新数组：
let array = [1, 2, 3, 4, 5];

let newArray = array.map((item) => {
    return item * item;
})

console.log(newArray)  // [1, 4, 9, 16, 25]

ES6的set数组去重方法

结果是返回一个新数组:

 let array = [1, 1, 1, 1, 2, 3, 4, 4, 5, 3];
 let set = new Set(array);
 console.log(set);
 // => Set {1, 2, 3, 4, 5}