数组相关知识
数组原型方法：
join()
push()和pop()
shift() 和 unshift()
sort()
reverse()
concat()
slice()
splice()
indexOf()和 lastIndexOf() （ES5新增）
forEach() （ES5新增）
map() （ES5新增）
filter() （ES5新增）
every() （ES5新增）
some() （ES5新增）
reduce()和 reduceRight() （ES5新增）
一、数组常规方法
1、join()
join(separator): 将数组的元素组起一个字符串，以separator为分隔符，省略的话则用默认用逗号为分隔符，该方法只接收一个参数：即分隔符。
var a = [1,2,3]
console.log(a.join())
// [1,2,3]
console.log(a.join("-"))
// [1-2-3]
- 通过
join()方法可以实现重复字符串，只需传入字符串以及重复的次数，就能返回重复后的字符串，函数如下：
function a(str, n) {
return new Array(n + 1).join(str)
}
console.log(a('abc', 3));
// abcabcabc
console.log(a('abc', 3).length)
// 9
2、push()和pop()
push(): 可以接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度pop()：数组末尾移除最后一项，减少数组的 length 值，然后返回移除的项
var a = [1, 2, 3]
var b = a.push('a', 'b')
console.log(a); //(5)?[1, 2, 3, 'a', 'b']
console.log(b); //5
var item = a.pop()
console.log(item); //b
console.log(a); //(4)?[1, 2, 3, 'a']
var item1 = a.pop(3,'a')
console.log(item1); //a
console.log(a); //(3)?[1, 2, 3]
注意：pop（）里面没有参数，即使有参数，也是删除最后一项
3、shift() 和 unshift()
shift()：删除原数组第一项，并返回删除元素的值；如果数组为空则返回undefinedunshift():将参数添加到原数组开头，并返回数组的长度
这组方法和上面的push()和pop()方法正好对应，一个是操作数组的开头，一个是操作数组的结尾
var a = [1, 2, 3]
var b = a.unshift('a', 'b')
console.log(a); //(5)?['a', 'b', 1, 2, 3]
console.log(b); //5
var item = a.shift()
console.log(item); //a
console.log(a); //(4)?['b', 1, 2, 3]
4、sort()
sort()：按升序排列数组项,即最小的值位于最前面，最大的值排在最后面。
—在排序时，sort()方法会调用每个数组项的 toString()转型方法，然后比较得到的字符串，以确定如何排序。即使数组中的每一项都是数值， sort()方法比较的也是字符串，因此会出现以下的这种情况
var a = ['a', 'c', 'b', 'd']
console.log(a.sort()); //(4)?['a', 'b', 'c', 'd']
var b = [2, 41, 10, 0, 21]
console.log(b.sort()); //(5)?[0, 10, 2, 21, 41]
console.log(b); //(5)?[0, 10, 2, 21, 41](原本数组被改变)
—为了解决上述问题，sort()方法可以接收一个比较函数作为参数，以便我们指定哪个值位于哪个值的前面。比较函数接收两个参数，如果第一个参数应该位于第二个之前则返回一个负数，如果两个参数相等则返回 0，如果第一个参数应该位于第二个之后则返回一个正数。以下就是一个简单的比较函数：
var b = [2, 41, 10, 0, 21]
function compare(value1, value2){
//顺序排列
return value1 - value2
//倒序排列
//return value2 - value1
}
console.log(b.sort(compare));
//(5)?[0, 2, 10, 21, 41]
5、reverse()
var b = [2, 41, 10, 0, 21]
console.log(b.reverse()); //(5)?[21, 0, 10, 41, 2]
console.log(b); //(5)?[21, 0, 10, 41, 2](原数组被改变)
6、concat()
var a = [2, 41, 10]
var b = a.concat(9,[1,3])
console.log(b); //(6)?[2, 41, 10, 9, 1, 3]
console.log(a); //(3)?[2, 41, 10](原数组没被改变)
从上面测试结果可以发现：传入的不是数组，则直接把参数添加到数组后面，如果传入的是数组，则将数组中的各个项添加到数组中
二维数组情况:
var a = [1, 2, 3]
var b = a.concat([9,[4,3]])
console.log(b); //(5)?[1, 2, 3, 9, Array(2)]
console.log(b[4]); //(2)?[4, 3]
上述代码中，b数组的第四项是一个包含两项的数组，也就是说concat()方法只能将传入数组中的每一项添加到数组中，如果传入数组中有些项是数组，那么也会把这一数组项当作一项添加到b中
7、slice()
-
slice()：返回从原数组中指定开始下标到结束下标之间的项组成的新数组。
-
截取范围：如：slice(1,4)，截取范围为[1,4) slice()方法可以接受一或两个参数，即要返回项的起始和结束位置。在只有一个参数的情况下， slice()方法返回从该参数指定位置开始到当前数组末尾的所有项。如果有两个参数，该方法返回起始和结束位置之间的项，但不包括结束位置的项
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
var arrCopy = arr.slice(1)
var arrCopy1 = arr.slice(1, 4)
var arrCopy2 = arr.slice(1, -2)
var arrCopy3 = arr.slice(-4, -1)
console.log(arr); //(10)?[1, 2, 3, 4, 5, 6, 7, 8, 9, 10](原数组不变)
console.log(arrCopy); //(9)?[2, 3, 4, 5, 6, 7, 8, 9, 10]
console.log(arrCopy1); //(3)?[2, 3, 4]
console.log(arrCopy2); //(7)?[2, 3, 4, 5, 6, 7, 8]
console.log(arrCopy3); //(3)?[7, 8, 9]
arrCopy只设置了一个参数，也就是起始下标为1，所以返回的数组为下标1（包括下标1）开始到数组最后。
arrCopy1设置了两个参数，返回起始下标（包括1）开始到终止下标（不包括4）的子数组。
arrCopy2设置了两个参数，终止下标为负数，当出现负数时，将负数加上数组长度的值（10）来替换该位置的数，因此就是从1开始到8（不包括）的子数组。
arrCopy3中两个参数都是负数，所以都加上数组长度10转换成正数，因此相当于slice(6,9)
8、splice()
var arr = [1, 2, 3, 4, 5, 6]
var arrRemoved1 = arr.splice(0, 2)
console.log(arr); //(4)?[3, 4, 5, 6]
console.log(arrRemoved1); //(2)?[1, 2]
var arrRemoved2 = arr.splice(2, 0, 4, 6)
console.log(arr); //(6)?[3, 4, 4, 6, 5, 6]
console.log(arrRemoved2); //[]
var arrRemoved3 = arr.splice(1, 1, 2, 4)
console.log(arr); //(7)?[3, 2, 4, 4, 6, 5, 6]
console.log(arrRemoved3); //[4]
9、indexOf()和 lastIndexOf()
indexOf()：接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。其中， 从数组的开头开始向后查找lastIndexOf：接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。其中， 从数组的末尾开始向前查找
这两个方法都返回要查找的项在数组中的位置，或者在没找到的情况下返回-1。在比较第一个参数与数组中的每一项时，会使用全等操作符
var a = [1, 3, 5, 7, 7, 5, 3, 1]
console.log(a.indexOf(5)); //2
console.log(a.lastIndexOf(5)); //5
console.log(a.indexOf(5, 2)); //2
console.log(a.lastIndexOf(5, 4)); //2
console.log(a.indexOf('5')) //-1(未找到'5')
二、数组循环遍历
1、普通for循环和优化for循环
var arr = [1,2,3,4,5];
for ( var i = 0; i <arr.length; i++){
console.log(arr[i]);
}
var arr = [1,2,3,4,5];
for(var j = 0,len = arr.length; j < len; j++){
console.log(arr[j]);
}
2、for-of遍历(ES6新增)
var arr = [1,2,3,4,5];
for( let i of arr){
console.log(i);
}
与forEach()不同的是，它可以正确响应break、continue和return语句
for-of循环不仅支持数组，还支持大多数类数组对象
3、for-in遍历
var arr = [1,2,3,4,5];
for (var index in arr){
console.log(index+"-->"+arr[index]);
}
在众多的循环遍历方式中,它的效率是最低的
三、数组的迭代方法
ECMAScript为数组定义了五个迭代方法，每个方法都接收两个参数：要在每一项上面运行的函数和运行该函数的作用域，即影响this的值。传入这些方法的函数会接收三个参数（数组项的值，索引，数组本身）
1、forEach()
var arr = [1, 2, 3, 4, 5]
arr.forEach((item, index, array)=> {
console.log(index + '-' + item + '来自：' + array);
});
console.log(arr);
//0-1来自：1,2,3,4,5
1-2来自：1,2,3,4,5
2-3来自：1,2,3,4,5
3-4来自：1,2,3,4,5
4-5来自：1,2,3,4,5
//(5)?[1, 2, 3, 4, 5]
2、some()
- 对数组中的每一项运行给定函数，如果该函数对任一项返回
true，则返回true
var arr = [1, 2, 3, 4, 5]
var b = arr.some((value)=>{
return value > 3
})
console.log(b); //true
var c = arr.some((value, index, array)=>{
return value < 2
})
console.log(c); //true
console.log(arr); //(5)?[1, 2, 3, 4, 5]
3、every()
- 对数组中的每一项运行都给定函数，如果该函数对每一项都返回true，则返回true
var arr = [1, 2, 3, 4, 5]
var b = arr.every((value)=>{
return value > 3
})
console.log(b); //false
console.log(arr); //(5)?[1, 2, 3, 4, 5]
4、filter()
- 对数组的每一项运行给定函数，返回该函数会返回
true的项组成的数组
var arr = [1, 2, 3, 4, 5]
var b = arr.filter((value)=>{
return value > 3
})
console.log(b); //(2)?[4, 5]
console.log(arr); //(5)?[1, 2, 3, 4, 5]
新数组变化不会影响原数组
var arr = [1, 2, 3, 4, 5]
var b = arr.filter((value)=>{
return value > 3
})
console.log(b); //(2)?[4, 5]
b[1] = 100 //改变数组b中索引值为1的值
console.log(b); //(2)?[4, 100]
console.log(arr); //(5)?[1, 2, 3, 4, 5]
5、map()
- 对数组的每一项运行给定函数，返回每次函数调用结果所组成的数组
var arr = [1, 2, 3, 4, 5]
var b = arr.map((value)=>{
return value * 3
})
console.log(b); //(5)?[3, 6, 9, 12, 15]
b[1] = 100 //改变数组b中索引值为1的值
console.log(b); //(5)?[3, 100, 9, 12, 15]
console.log(arr); //(5)?[1, 2, 3, 4, 5]
之后修改生成的数组不会影响原数组
6、reduce()和reduceRight()
- 这两个方法都会迭代数组所有的项，然后构建一个最终的值返回
- 这两个方法都接收两个参数：一个在每一项上面调用的函数和作为归并基础的初始值（可选）
- 给
reduce和reduceRight这两个方法的函数都接收四个参数值：前一个值，当前值，索引，数组对象。这个函数返回的任何值都会作为第一个参数自动传给下一项。第一次迭代发生在数组的第二项上，因此第一个参数是数组的第一项，第二个参数是数组的第二项
var arr = [1, 2, 3, 4, 5]
var sum = arr.reduce((pre, cur, index, array)=>{
return pre + cur
})
console.log(sum); //15
第一次执行回调函数的时候，pre为1，cur为2，第二次，pre为3（1加2的结果），cur为3（数组的第三项），依次类推，直到将数组的每一项都访问一遍，最后返回结果
reduceRight()与reduce()使用一样，只不过是从后往前遍历
四、数组变异和非变异
1、数组变异
- 数组变异是指：在使用某些方法后会使原数组发生改变
- 变异方法：
push()，pop()，shift()，unshift()，sort()，splice()
2、数组非变异
- 数组非变异是指：在使用某些方法后并不会使原数组发生改变
- 非变异方法：
join()，concat()，slice()，indexOf()，lastIndexOf()，forEach()，some(),fliter()，map()，every()，reduce()，reduceRight()
|