Js中数组的特点：
- 有序表
- 可以存储任意类型数据
- 数组长度是动态的（可以随数据的添加自动增长内容）
1、创建数组
创建数组的两种基本方式：构造函数Array()和数组字面量[]
/ * 构造函数 */
var arr1 = new Array() // 创建一个空数组
var arr2= new Array(3) // 创建一个length为3的空数组
var arr2= new Array('ok') // ['ok']
var arr2= new Array(3,5) // [3,5]
var arr3= Array('ok') // ['ok'] 数组的创建省略new，效果也是相同的，区别于对象
/* 数组字面量 */
var arr4=[] //空数组
var arr5=[3] // [3]
var arr5=[3,'array',{'name':'Leo'}] // [3,'array',{'name':'Leo'}]
/* 不要像下面这样！！ */
var arrNotRecommend1=[1,2,] //会创建一个2项或者3项的数组
var arrNotRecommend2=[, , , , ] //会创建一个4项或者5项的数组
对于Array()创建数组有些缺陷（坑），因为给的参数个数(0,1,2+)不同都会导致Array()有不同的行为，所以一般建议用数组字面量，或者Array.of()
2、访问和设置数组的成员
2.1、使用 arr[idx] 方括号访问
索引是以 0 开始的，以之前的 arr5 为例：
arr5[0] // 3 访问第一项
arr5[2] // {'name':'Leo'}
arr5[2]='edit' // 修改第三项数据为 ’edit‘
arr5[3]='add' // 新增第四项为 'add'
2.2、length属性 ：数据项个数
Js数组的 length 属性是可读可写的，所以可以通过数组的 length 属性对其进行加长和移除项的操作
var tryArrLen=['data1',2,'data3']
tryArrLen.length // 3
tryArrLen.length=4 //数组新增一项，该项默认会为'undefined'
tryArrLen[5]='add' //数组新增一项，值为'add'
tryArrLen[tryArrLen.length]='data' //利用'length'属性向数组末尾添加元素
tryArrLen.length=2 //数组项减少到2，会删除第三项'data3'
tryArrLen[2] //此时再次访问第三项，也会为undefined，不过原因是第三项已经被删除了
2.3、length属性骚操作
var tryArrLen2=[1,2,3]
tryArrLen2[99]=100 //在第一百项添加一个数据 '100'
此时 tryArrLen2.length=?,答案是 100,并且从第四项到第九十九项的数据都是空位，简单的理解为 undifined。
具体来说ES6的数组方法都把空位作为undefined,而ES5数组方法中对空位的处理不太统一，参考数组的空位
var tryArrLen3=[1,2,3]
tryArrLen3.length=4294967296 // RangeError: Invalid array length
Js数组最多可以包含 4294967295 项，超出了，报 RangeError。
3、数组检测
一个经典问题：如何检测某个对象是不是数组？
3.1常规操作
| 方法 | 不足 |
|---|---|
| arr isInstanceOf Array | arr必须和Array在同一个全局作用域。多个全局环境时候(比如frame)就是妖怪。 |
| Array.isArray(arr) | 对老版本浏览器兼容性不好 |
3.2、骚操作
Object.prototype.toString.call(arr) == "[Object Array]"
任何一个对象上调用 Object 原生的 toString() 方法，都会返回一个 [Object NativeConstructorName] 的字符串。
注意！！前提是Object.prototype.toString()本身也没有被修改过，因为其也有可能被修改.
4、转换方法
4.1、对象方法
- valueOf()：返回数组本身
- toString()：返回数组的字符串表示。每个值以字符串表示，并以逗号,拼接
- toLocaleString()：和toString()基本相同，区别在于输出的是本地化的、特定语言环境的字符串
/* 将下列代码修改 'zh-cn'为其他语言，运行一下，你就明白了 */
var array1 = [1, 'a', new Date('21 Dec 1997 14:12:00 UTC')];
var localeString = array1.toLocaleString('zh-cn', {timeZone: "UTC"});
console.log(localeString);
// expected output: "1,a,12/21/1997, 2:12:00 PM",
// This assumes "en" locale and UTC timezone - your results may vary
4.2、join()（数组转字符串）
和toString()基本相同，区别在于可以指定以什么字符串进行拼接
let arr=[1,2,3]
arr.join('+') // "1+2+3"
5、栈和队列方法
- push()：接收任意个数的参数，按顺序添加到数组末尾
- pop()：移除数组的最后一项(不接收参数)，并返回该项，数组length-1
- shift()：移除数组的第一项(不接收参数)，并返回该项，数组length-1
- unshift()：接收任意个数的参数，按顺序添加到数组前端 将这四个方法进行组合就可以实现栈和队列的基本操作
/* 栈 */
push()+pop()
unshift()+shift()
/* 队列 */
push()+shift()
unshift()+pop()
6、重排序方法
6.1、reverse()（反转数组）
反转数组的顺序
var arr = [1,5,8,7,4];
arr.reverse();
console.log(arr);//[4, 7, 8, 5, 1]
6.2、sort()(排序)
默认调用每个数组项的toString方法，在进行排序。可以接收一个比较函数作为排序的参数 比较函数接收两个形参,表示数组中相邻的两个数,比如val1,val2。 返回值可以为
- 负数，即'val1'排在val2之前
- 0，不改变排序
- 正数，'val1'排在val2之后
所以在比较函数内可以写排序逻辑，比较常用的：
function compare(val1,val2){
return val2-val1;
}
...
arr.sort(compare) //降序排列
7、操作方法
7.1、concat()（连接两个或多个数组）
创建当前数组的副本，并将接收的参数添加到副本的末尾，并返回一个新数组（没有参数即返回副本本身）
- 数组浅拷贝
var arr = [1,5,8,7,4];
var arr2 = arr.concat();//[1,5,8,7,4]
- 合并数组
var arr = [1,5,8,7,4],
arr2 = [2,3,4];
var arr3 = arr.concat(arr2);//[1, 5, 8, 7, 4, 2, 3, 4]
- 若concat()的参数是数组，则会将参数数组的每一项（考虑当数组中的项是数组或对象的情况）添加到结果数组末尾。 若参数不是数组类型，则是简单添加到结果数组的末尾。
- 如果传入的参数是一个二维数组呢？
var arr=[1,2,3,4];
var arr2=[11,[12,13]]
var arrCopy = arr.concat(arr2);
console.log(arrCopy); // [1, 2, 3, 4, 11, Array(2)]
console.log(arr); // [1, 2, 3, 4] (原数组未改变)
从上面代码中可以看出concat方法只能将传入数组中的每一项添加到数组中，如果传入数组中有些项是数组，那么也会把这一数组项当作一项添加到arrCopy中。
7.2、slice()（数组截取）
-
对数组进行切片操作，不改变原数组，返回一个截取的新数组。
-
接收一个或两个数字参数：
- 1个参数：返回从该位置到数组末尾的切片，即 [ 参数 , arr.length)
- 2个参数：返回参数1位置到参数2位置-1的切片，即 [ 参数1 , 参数2 ) 当参数为负数时，则可以将length加上该参数来确定其正数位置。即负数从数组末尾算起（最后一位为 -1 ，依次类推）
var arr = [1,5,8,7,4];
var arr2 = arr.slice(0,3);
var arr3 = arr.slice(1,2);
var arr4 = arr.slice(1);
console.log(arr);//[1, 5, 8, 7, 4]
console.log(arr2);//[1, 5, 8]
console.log(arr3);//[5]
console.log(arr4);//[5]
7.3、splice()（数组更新）
splice() 接收 2 个或者 2+n 个参数，返回值永远为一个数组，包含从原数组中删除的项(没有删除返回空数组)。splice() 操作会改变原数组。
splice( startPos, delCount , el1,el2,..eln )
-
startPos: 起始位置
-
delCount:（从起始位置起）删除的项数
-
el:（可选参数）插入或者替换的项主要可以实现数组的删除、插入和替换操作。
- 删除 只需指定两个参数 startPos、delCount
- 插入 指定 startPos ,且 delCount=0 ，后面跟需要插入的若干个元素
- 替换 指定 startPos，delCount 为（从 startPos 开始）要替换的元素个数，后面给需要替换的若干个元素。（注：delCount 可以和参数中元素个数不一样，多余的就变为删除或者插入操作）。
8、位置方法
- indexOf()：array.indexOf(item,start) （从数组的开头（位置 0）开始向后查找）从前往后找
- item： 必须。查找的元素。
- start：可选的整数参数。规定在数组中开始检索的位置。如省略该参数，则将从array[0]开始检索。
- lastIndexOf()：array.lastIndexOf(item,start) （从数组的末尾开始向前查找）从后往前找
- item： 必须。查找的元素。
- start：可选的整数参数。规定在数组中开始检索的位置。如省略该参数，则将从 array[array.length-1]开始检索。
共同点
- 都接收两个参数：待查找的项和（可选）查找的起始位置。
- 返回值为待查找的项在数组中的位置，没有找到则返回-1
注：查找时候使用的是 === 进行判断
var arr = [1,4,7,10,7,18,7,26];
console.log(arr.indexOf(7)); // 2
console.log(arr.lastIndexOf(7)); // 6
console.log(arr.indexOf(7,4)); // 4
console.log(arr.lastIndexOf(7,2)); // 2
console.log(arr.indexOf(5)); // -1
9.五个迭代方法
这几个方法语法都一样，都不会改变原数组。
9.1 forEach()：对数组进行遍历循环，这个方法没有返回值。jquery()也提供了相应的方法each()方法。
语法：array.forEach(function(currentValue , index , arr){//do something}, thisValue)
-
currentValue : 必需。当前元素
-
index： 可选。当前元素的索引值。
-
arr : 可选。当前元素所属的数组对象。
-
thisValue： 可选。传递给函数的值一般用 "this" 值。如果这个参数为空， "undefined" 会传递给 "this" 值
var Arr = [1,4,7,10];
Arr.forEach(function(currentValue, index, arr){
console.log(index+"--"+currentValue+"--"+(arr === Arr));
})
// 输出：
// 0--1--true
// 1--4--true
// 2--7--true
// 3--10--true
9.2 map()：指“映射”，方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
语法：array.map(function(currentValue , index , arr){//do something}, thisValue)
map方法实现数组中每个数求平方：
var arr = [1,4,8,10];
var arr2 = arr.map(function(currentValue){
return currentValue*currentValue;
});
console.log(arr2); // [1, 16, 64, 100]
9.3 filter()： “过滤”功能，方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。和filter() 方法类似，jquery中有个 grep()方法也用于数组元素过滤筛选。
语法： array.filter(function(currentValue , index , arr){//do something}, thisValue)
filter方法实现筛选排除掉所有小于5的元素：
var arr = [1,4,6,8,10];
var result1 = arr.filter(function(currentValue){
return currentValue>5;
});
console.log(result1); // [6, 8, 10]
var result2 = arr.filter(function(currentValue){
return currentValue>"5";
});
console.log(result2); // [6, 8, 10]
当我们分别设置item > 5和item > "5"时, 返回的结果是一样的，由此我们可以看出函数支持弱等于（==），不是必须全（===）。
9.4 every()：判断数组中每一项都是否满足条件，只有所有项都满足条件，才会返回true。
语法： array.every(function(currentValue , index , arr){//do something}, thisValue)
var arr = [1,4,6,8,10];
var result1 = arr.every(function(currentValue){
return currentValue< 12;
});
console.log(result1); // true
var result2 = arr.every(function(currentValue){
return currentValue> 1;
});
console.log(result2); // false
9.5 some()：判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回true。
语法： array.some(function(currentValue , index , arr){//do something}, thisValue)
var arr = [1,4,6,8,10];
var result1 = arr.some(function(currentValue){
return currentValue> 10;
});
console.log(result1); // false
var result2 = arr.some(function(currentValue){
return currentValue> 5;
});
console.log(result2); // true
10、两个归并方法：reduce()、reduceRight()
这两个方法都会迭代数组中的所有项，然后生成一个最终返回值。他们都接收两个参数，第一个参数是每一项调用的函数，函数接受四个参数分别是初始值，当前值，索引值，和当前数组，函数需要返回一个值，这个值会在下一次迭代中作为初始值。第二个参数是迭代初始值，参数可选，如果缺省，初始值为数组第一项，从数组第一个项开始叠加，缺省参数要比正常传值少一次运算。
- reduce()方法从数组的第一项开始，逐个遍历到最后。
- reduceRight()则从数组的最后一项开始，向前遍历到第一项。
reduce()语法：arr.reduce(function(total , cur , index , arr){//do something}, initialValue)
reduceRight()语法：arr.reduceRight(function(total , cur , index , arr){//do something}, initialValue)
-
total ：必需。初始值, 或者计算结束后的返回值。
-
cur ：必需。当前元素。
-
index ：可选。当前元素的索引。
-
arr：可选。当前元素所属的数组对象。
-
initialValue：可选。传递给函数的初始值。
下面代码实现数组求和：
var arr = [1,2,3,4,5];
var result1 = arr.reduce(function(total,cur,index,arr){
console.log("total:"+total+",cur:"+cur+",index:"+index);
return total+cur;
});
console.log("结果："+result1);
// 输出
// total:1,cur:2,index:1
// total:3,cur:3,index:2
// total:6,cur:4,index:3
// total:10,cur:5,index:4
// 结果：15
var result2 = arr.reduce(function(total,cur,index,arr){
console.log("total:"+total+",cur:"+cur+",index:"+index);
return total+cur;
},10);
console.log("结果："+result2);
// 输出
// total:10,cur:1,index:0
// total:11,cur:2,index:1
// total:13,cur:3,index:2
// total:16,cur:4,index:3
// total:20,cur:5,index:4
// 结果：25
从上面代码我们可以看出:
-
当我们不给函数传递迭代初始值时初始值,total为数组第一项，函数从数组第二项开始迭代；
-
若我们给函数传递迭代初始值，则函数从数组第一项开始迭代。
11、ES6数组新增方法（注意浏览器兼容）
11.1 Array.from()
方法是用于类似数组的对象（即有length属性的对象）和可遍历对象转为真正的数组。
let json ={
'0':'卢',
'1':'本',
'2':'伟',
length:3
}
let arr = Array.from(json);
console.log(arr); // ["卢", "本", "伟"]
11.2 Array.of()
方法是将一组值转变为数组，参数不分类型，只分数量，数量为0返回空数组。
let arr1 = Array.of(1,2,3);
let arr2 = Array.of([1,2,3]);
let arr3 = Array.of(undefined);
let arr4 = Array.of();
console.log(arr1); // [1, 2, 3]
console.log(arr2); // [[1, 2, 3]]
console.log(arr3); // [undefined]
console.log(arr4); // []
11.3 find()
方法返回通过测试（函数内判断）的数组的第一个元素的值。方法为数组中的每个元素都调用一次函数执行。当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。如果没有符合条件的元素返回 undefined。
回调函数可以接收3个参数，依次为当前的值（currentValue）、当前的位置（index）、原数组（arr）
注意：find() 对于空数组，函数是不会执行的。find() 并没有改变数组的原始值。
let Arr = [1,2,5,7,5,9];
let result1 = Arr.find(function(currentValue,index,arr){
return currentValue>5;
});
let result2 = Arr.find(function(currentValue,index,arr){
return currentValue>9;
});
console.log(result1); // 7
console.log(result2); // undefined
//find()实现根据id取出数组中的对象
let Arr2 = [
{
id:1,
name:"张三"
},
{
id:2,
name:"李四"
}
];
let obj = Arr2.find(function(currentValue,index,arr){
return currentValue.id===1;
});
console.log(obj.name); // 张三
11.4 findIndex()
findIndex和find差不多，不过默认返回的是索引，如果没有符合条件的元素返回 -1
let Arr = [1,2,5,7,5,9];
let result1 = Arr.findIndex(function(currentValue,index,arr){
return currentValue>5;
});
let result2 = Arr.findIndex(function(currentValue,index,arr){
return currentValue>9;
});
console.log(result1); // 3
console.log(result2); // -1
11.5 fill()
fill()方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。
语法：array.fill(value, start, end)
-
value：必需。填充的值。
-
start：可选。开始填充位置。如果这个参数是负数，那么它规定的是从数组尾部开始算起。
-
end：可选。停止填充位置 (默认为array.length)。如果这个参数是负数，那么它规定的是从数组尾部开始算起。
let arr = [1,2,3,4,5,6];
arr.fill(0); // [0, 0, 0, 0, 0, 0]
arr.fill(0,1); // [1, 0, 0, 0, 0, 0]
arr.fill(0,1,2); // [1, 0, 3, 4, 5, 6]
arr.fill(0,-1); // [1, 2, 3, 4, 5, 0]
arr.fill(0,1,-1); // [1, 0, 0, 0, 0, 6]
11.6 遍历数组方法 keys()、values()、entries()
这三个方法都是返回一个遍历器对象，可用for...of循环遍历，唯一区别：keys()是对键名的遍历、values()对键值的遍历、entries()是对键值对的遍历。
keys()
let arr = ["a","b","c","d"];
for(let i of arr.keys()){
console.log(i);
}
//打印：
// 0
// 1
// 2
// 3
values()
let arr = ["a","b","c","d"];
for(let i of arr.values()){
console.log(i);
}
//打印：
// a
// b
// c
// d
entries()
let arr = ["a","b","c","d"];
for(let i of arr.entries()){
console.log(i);
}
//打印：
// [0, "a"]
// [1, "b"]
// [2, "c"]
// [3, "d"]
for(let [idx,item] of arr.entries()){
console.log(idx+":"+item);
}
//打印：
// 0:a
// 1:b
// 2:c
// 3:d
11.7 includes()
方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false。
语法：arr.includes(searchElement , fromIndex)
-
searchElement ： 必须。需要查找的元素值。
-
fromIndex：可选。从该索引处开始查找 searchElement。如果为负值，则按升序从 array.length + fromIndex 的索引开始搜索。默认为 0。
let arr = ["a","b","c","d"];
let result1 = arr.includes("b");
let result2 = arr.includes("b",2);
let result3 = arr.includes("b",-1);
let result4 = arr.includes("b",-3);
console.log(result1); // true
console.log(result2); // false
console.log(result3); // flase
console.log(result4); // true
11.8.copyWithin()
方法用于从数组的指定位置拷贝元素到数组的另一个指定位置中，会覆盖原有成员
语法：array.copyWithin(target , start , end)
-
target ：必需。从该位置开始替换数据。
-
start ：可选。从该位置开始读取数据，默认为 0 。如果为负值，表示倒数。
-
end： 可选。到该位置前停止读取数据，默认等于数组长度。如果为负值，表示倒数。
let arr = [1,2,3,4,5,6];
let result1 = [1,2,3,4,5,6].copyWithin(0);
let result2 = [1,2,3,4,5,6].copyWithin(0,1);
let result3 = [1,2,3,4,5,6].copyWithin(1,3,5);
let result4 = [1,2,3,4,5,6].copyWithin(1,2,-1);
let result5 = [1,2,3,4,5,6].copyWithin(1,-4,6);
console.log(result1); // [1, 2, 3, 4, 5, 6]
console.log(result2); // [2, 3, 4, 5, 6, 6]
console.log(result3); // [1, 4, 5, 4, 5, 6]
console.log(result4); // [1, 3, 4, 5, 5, 6]
console.log(result5); // [1, 3, 4, 5, 6, 6]
