【javascript】数组那些事儿

关于数组的深浅拷贝问题

数组浅拷贝

let arrA = [1,2,3,4,5]
let arrB = arrA
arrB[2] = 0
console.log(arrA) //[1, 2, 0, 4, 5]

数组与对象本质相同，也是存放于堆内存中，当执行了arrB = arrA，实际上是复制了arrA的指针，现在arrA与arrB指向内存中的同一个数组对象

数组深拷贝

若数组中不存在对象的话，可用以下方式进行深拷贝

1. Objec.assign()
2. slice()
3. concat()
   若数组中存在对象,则对象项依然会是指向相同的对象。类似Objec.assign()这样的拷贝只是比普通的浅拷贝多了一层拷贝，不会进行再深处的拷贝。

let arryA = [1,{a: 'abc'}]
let arryB = Object.assign([], arryA)
arryB[0] = 5
arryB[1].a = 'def'
arryB // [5,{a: 'def'}]
arryA // [1,{a: 'def'}]

数组中存在对象可使用以下方法进行深拷贝
方法一（仅对数组中的对象又多了一层拷贝）：

copyArr(arr) {
	return arr.map((e) => {
		if (typeof e === 'object') {
			return Object.assign({}, e)
		} else {
			return e
		}
	})
}

方法二：

NewArry = JSON.parse(JSON.stringify(arry))

关于数组的内置方法

1. Array.isArray()

判断某值是否为数组
若在不支持此方法的浏览器中可以自己写isArray方法来判断

function isArray(value){
	return Object.prototype.toString.call(value) == "[object Array]"
}

在任何值上调用Object原生的 toString()方法，都会返回一个[object NativeConstructorName]格式的字符串。每个类在内部都有一个[[Class]]属
性，这个属性中就指定了上述字符串中的构造函数名。原生数组构造函数名称与全局作用域无关。

2.toLocaleString()、toString()、valueOf() 和 join()

toLocaleString()、toString()默认均会返回以逗号分割的数组项字符串，valueOf()返回数组的值，join()可以定义字符串的分割字符。

• 若某一项为 null 或 undefined 以空字符串代替

	a = [1,2,{a: 'abc'}]
	
	a.toLocaleString() // 1,2,[object Object]
	a.toString() // 1,2,[object Object]
	a.valueOf() // [1,2,{a: 'abc'}]
	alert(a.valueOf()) // 1,2,[object Object] alert会在后台调用toString()方法
	a.join('|') // 1|2|[object Object]

3.栈和队列方法

• push() 向数组后添加项，返回数组长度
• pop() 移除数组最后一项，返回该项
• unshift() 向数组前添加项，返回数组长度
• shift() 移除数组第一项，返回该项
• reverse() 数组反转
• sort() 升序排列数组

sort()方法会调用每个数组项的 toString()转型方法，然后比较得到的字符串

oo = [1,22,5,4]
oo.sort() // [1,22,4,5]

所以在使用这个方法的时候 我们可以给它传入一个函数，以区分比较值的大小

function compare(value1, value2) {
    if (value1 < value2) {
        return -1;
    } else if (value1 > value2) {
        return 1;
    } else {
		return 0; 
	}
}
arry.sort(compare);

4.操作方法

• concat() 数组合并，返回新数组，对原数组没有影响
• slice(start, end) 基于当前数组创建新的数组
• splice() 操作原数组删除或增加项，以数组形式返回被删除项

slice

如果slice()方法的参数中有一个负数用数组长度加上该数来确定相应的位置。

splice()

color = ["green", "yellow", "blue"]
removed = colors.splice(1, 2, "red", "purple");
removed // ["yellow", "blue"]
color // ["green", "red", "purple"]

5.位置方法

• indexOf(x, i) 从第i项开始，顺序查找x值，返回值的位置，没有返回-1
• lastIndexOf(x, start) 从第i项开始，逆序查找x值，返回值的位置，没有返回-1

6. 迭代方法

• every():对数组中的每一项运行给定函数，如果该函数对每一项都返回 true，则返回 true。
• filter():对数组中的每一项运行给定函数，返回该函数会返回 true 的项组成的数组。
• forEach():对数组中的每一项运行给定函数。这个方法没有返回值。
• map():对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。
• some():对数组中的每一项运行给定函数，如果该函数对任一项返回 true，则返回 true。

7. 归并方法

• reduce()
• reduceRight()
  reduce()方法从数组的第一项开始，逐个遍历 到最后。而 reduceRight()则从数组的最后一项开始，向前遍历到第一项。

arry.reduce(function(prev, cur, index, array){
    do something
    function remove (arr, item) {
  if (!arr.length) return
  const index = arr.indexOf(item)
  if (index > -1) return arr.splice(index, 1)
}
});

接受两个值
1.归并函数，2.归并函数的初始值（若没有传，则数字第一个值作为归并初始值）
函数接收四个参数：
1.归并上一项，2.归并下一项，3.项的索引, 4.数组对象
上一次的归并值会作为这一次的prev传入

删除一个元素

function remove (arr, item) {
  if (!arr.length) return
  const index = arr.indexOf(item)
  if (index > -1) return arr.splice(index, 1)
}