JS数组操作（看这一篇就够了）

join() 数组转换成字符串

join()，是把数组转换成字符串，里边可以传递一个参数，表示我们可以用这个字符把数组中的每一个元素进行拼接。默认使用的是逗号（ , ）。
split()，注意这是一个字符串的方法。 这个方法是把字符串转化成数组。这个方法也是传递一个字符,把字符串按照这个字符分割成数组。

var arr = ['red', 'green', 'blue'];
var tempStr = arr.join();
console.log(tempStr);    //结果：red,green,blue
console.log('tempStr的类型是' + '  ' + typeof tempStr);   //结果：tempStr的类型是 string
//我们也可以按照指定的字符进行拼接。例：' % '
console.log(arr.join('%'));  //结果：red%green%blue
///这里我们在说明一下把字符串转化为数组
let str = "jone,Danny,Janny,Peter";
// 我们使用split进行转换
console.log(str.split(','));  //结果：["jone", "Danny", "Janny", "Peter"]

push() 和 unshift() 数组添加元素

相同点： 都是向数组添加元素，并返回数组的长度
不同点： push() 将元素添加到数组末尾。
        unshift() 将元素添加到数组开头

var arr = ['red', 'green', 'blue'];
///向数组末尾添加元素
let arrLength = arr.push('yellow');  
console.log(arr);  //结果：["red", "green", "blue", "yellow"]
console.log(arrLength);  //结果： 4
///向数组开头添加元素
arrLength = arr.unshift('purple');
console.log(arr);  //结果：["purple", "red", "green", "blue", "yellow"]
console.log(arrLength);  //结果：5

pop() 和 shift() 删除数组元素

相同点：删除数组中的一个元素，并返回删除的元素。
不同点：pop 删除数组最后一个元素
        shift 删除数组第一个元素

var arr = ['red', 'green', 'blue'];
//删除数组的最后一个元素
var elment = arr.pop();
console.log("删除的元素是 " + elment);  //结果：删除的元素是 blue
console.log(arr);  //结果：["red", "green"]
//删除数组的第一个元素
elment = arr.shift();  
console.log("删除的元素是 " + elment);  //结果：删除的元素是 red
console.log(arr);  //结果：["green"]

sort() 数组排序

数组排序，可以按照升序或者降序排序，默认是升序的方式。

var strNum = ['b', 'aa', 'd', 'd', 'c', 'a', 'bc', 'ba'];
console.log(strNum.sort());  //结果：["a", "aa", "b", "ba", "bc", "c", "d", "d"]
var numArray = [5, 7, 9, 6, 8, 4, 2, 569, 28];
console.log(numArray.sort());  //结果：[2, 28, 4, 5, 569, 6, 7, 8, 9]

注意： 这里我们通过结果可以看到，sort排序是按照字符串进行的逐个比较排序，尽管是数字也会按照字符串逐个比较来排序。因此我们才能看到569排在了6前面。这是显然不正确的，那么我们如何比较数值呢？sort函数支持我们传递一个函数作为参数来进行排序。

numArray.sort(function(a, b) {
    //这是一个比较函数
    // 返回负值：表示 a 比 b 小  升序 a在前
    // 返回正值：表示 a 比 b 大  降序 b在前
    return a - b;
})
console.log(numArray); //结果[2, 4, 5, 6, 7, 8, 9, 28, 569]

此时我们就可以看到数值能正常排序了，当然我们也可以按照降序排序，只需把a-b换成b-a即可

reverse() 反转数组

反转数组，就是把数组倒过来，这个方法可以修改原数组

///反转数组
var arr = ['red', 'green', 'blue'];
console.log(arr);  //结果：["red", "green", "blue"]
console.log(arr.reverse()); //结果：["blue", "green", "red"]

concat() 拼接数组

向数组中添加新数组或者新元素，这个方法调用的时候回先拷贝一个当前数组的副本，然后把新添加的元素或者数组添加到副本的末尾，并返回一个新数组。注意：这个方法并没有改变原数组

// 追加数组
var arr = ['red', 'green', 'blue'];
console.log(arr.concat('purple', ['color', 'yellow']));   //结果：['red', 'green', 'blue', 'purple', 'color', 'yellow']

slice() 截取数组

截取数组，该方法可以传递两个或者一个参数，注意：返回一个新数组，原数组不变
第一个参数：表示截取的起始位置
第二个参数：表示截取的结束位置，不包含该位置。如果这个参数不传，代表从起始位置开始到数组末尾
注意：当参数为负数时，我们需要用这个数加上数组的长度得到的值替换这个负数

//截取数组
var arr = ['red', 'green', 'blue', 'purple', 'color', 'yellow'];
//从下标为1的元素截取到末尾
console.log(arr.slice(1));    //结果：["green", "blue", "purple", "color", "yellow"]
//从下标为1的元素截取到下标为4的元素(不包含4)
console.log(arr.slice(1, 4));    //结果：["green", "blue", "purple"]
//从下标为1的元素截取到下标为3的元素(不包含3)  和 slice(1, 3)一样
console.log(arr.slice(1, -3));    //结果：["green", "blue"]
//从下标为2的元素截取到下标为4的元素(不包含4) 和 slice(2, 4)一样
console.log(arr.slice(-4, -2));    //结果：["blue", "purple"]

splice() 数组替换，插入，删除

根据传入的参数不同，删除、插入、替换都可以实现。
注意：该方法返回的是一个被操作的元素数组，并且原数组也发生改变
删除： 传递两个参数
第一个参数：起始位置
第二个参数：要删除的元素个数
插入： 传递三个参数
第一个参数：起始位置
第二个参数：传0，表示删除0个元素
第三个参数：要插入的元素
替换： 传递三个参数
第一个参数：起始位置
第二个参数：删除元素个数
第三个参数：要替换的元素（删除个数不必与添加个数一致）

var arr = ['red', 'green', 'blue', 'purple', 'color', 'yellow'];
///删除元素 返回删除的元素数组
console.log(arr.splice(1, 4));   //结果：["green", "blue", "purple", "color"]
console.log(arr);   //结果：["red", "yellow"]
///插入元素 操作元素个数为0 所以返回一个空数组
console.log(arr.splice(1, 0, "orange"));   //结果：[]
console.log(arr);  //结果：["red", "orange", "yellow"]
///替换元素
console.log(arr.splice(1, 2, "orange", "gray")); //结果：["orange", "yellow"]
console.log(arr);    //结果：["red", "orange", "gray"]

indexOf() 和 lastIndexOf() 数组查找元素的位置

相同点：
1. 查找元素在数组的的位置，如果查找到则返回该元素第一次出现的位置，如果找不到则返回-1。
2. 传递两个参数(可不传，默认从第一个或最后一个)。第一个参数要查找的元素； 第二个参数：查找的其实位置
不同点： indexOf() 从前向后查找，lastIndexOf() 从后向前查找

var arr = [3, 2, 6, 6, 6, 1, 4, 3, 2, 1];
///查找6第一次出现的位置 从前往后查询
console.log(arr.indexOf(6)); //结果：2
///查找6第一次出现的位置,从索引为4开始 从前往后查询
console.log(arr.indexOf(6, 4));  //结果：4
///查找1第一次出现的位置,从后往前查询
console.log(arr.lastIndexOf(1)); //结果：9
///查找1第一次出现的位置,从索引为7开始 从后往前查询
console.log(arr.lastIndexOf(1, 7));  //结果：5
///查找字符1出现的位置，没有找到 返回 -1
console.log(arr.indexOf("1"));  //结果：-1

forEach() 遍历数组

数组遍历，默认传递一个函数，参数分别对应：元素内容；元素索引；数组本身。

//数组遍历
var arr = ['red', 'green', 'blue'];
arr.forEach(function(value, index, a) {
	console.log('第' + index + '个元素的值是：' + value + '   a是arr本身吗： ' + (a === arr));
});
//结果：
//第0个元素的值是：red  a是arr本身吗： true
//第1个元素的值是：green  a是arr本身吗： true
//第2个元素的值是：blue  a是arr本身吗： true

map() 为数组元素绑定某种映射关系

对数组中的元素按照某种关系转换，并返回这个转化后的数组,原数组不变

var arr = ['red', 'green', 'blue'];
//为数组中的每个元素拼接一个Color字符串
var resultArray = arr.map(function(value) {
    return value + "Color";
})
//原数组
console.log(arr);    //结果：['red', 'green', 'blue']
//修改过后的数组
console.log(resultArray);    //结果：["redColor", "greenColor", "blueColor"]

filter() 过滤数组

过滤数组，可以按照某种条件筛选出符合条件的元素，并返回满足条件的元素数组

//filter过滤数组
var arr = ['red', 'green', 'blue', "orange"];
// 筛选出元素中带有n字符的元素 这里就用到了查询元素这个方法，该方法也可以用于字符串
var resultArr = arr.filter(function(value) {
    return value.indexOf('n') !== -1;
})
//原数组不变
console.log(arr);       //结果：['red', 'green', 'blue', "orange"]
//筛选后
console.log(resultArr);         //结果：['green', "orange"]

every() 和 some() 判断元素是否满足条件

相同点： 判断元素是否存在满足条件的项
不同点： **every()**会逐个判断，把数组中所有的元素判断完毕后，才返回。如果都满足条件返回true，如果有一个不满足返回false。some() 如果有一项满足条件就返回true，否则false。
every()方法

var arr = [1, 2, 3, 4, 5];
///every方法循环的次数
var everyCount = 0;
///比较结果
var result1 = arr.every(function(value) {
    everyCount++;
    return value < 4;
})
///数组中所有的元素都做判断，所以次数是5
console.log(everyCount); ///结果： 5
///数组中所有的元素都必须满足条件，所以结果为false
console.log(result1); ///结果： false

some()方法

var arr = [1, 2, 3, 4, 5];
///some方法循环的次数
var someCount = 0;
///比较结果
var result2 = arr.some(function(value) {
    someCount++;
    return value < 4;
})
///数组中只要有一个满足条件就返回true，所以次数是1
console.log(someCount); ///结果： 1
console.log(result2); ///结果： true

find() 和 findIndex()

这是ES6新增语法，
相同点： 查找满足条件的第一个元素。接收一个函数最为参数，函数返回一个Bool值
不同点： find() 返回满足条件的元素，如果没有找到返回 undefined
findIndex() 返回满足条件的数组成员的位置，如果没有找到返回-1

var arr = [1, 3, 4, 2, 5, 6, 8, 1, 2];
let num = arr.find(value => value == 5)
let num1 = arr.find(value => value == 10)
let index = arr.findIndex(value => value == 5)
let index2 = arr.findIndex(value => value > 10)
console.log(num); // 结果： 5  返回的是5这个元素
console.log(num1); // 结果： undefined  
console.log(index); // 结果： 4  返回的是5这个元素的索引值
console.log(index2); // 结果： -1

includes()

这是ES6新增语法，查看数组是否包含某个元素，有这个元素返回true 没有则返回 false 。

var arr = [1, 3, 4, 2, 5, 6, 8, 1, 2];
console.log(arr.includes(4)); //true
console.log(arr.includes(10)); //false