JavaScript引用类型(一)数组类型常用方法总结

一、检测数组：

对于一个网页或者一个全局作用域而言，使用instanceof操作符就能检测数组，例如：

var arr = [1,2,3];
if(arr instanceof Array){
    // 对数组执行的操作
}

instanceof操作符的问题在于在于，它假定只有一个全局执行环境。如果网页中包含多个框架，实际上就存在两个以上的不同全局执行环境，从而存在两个以上不同版本的Array构造函数。如果从一个框架向另一个框架传递一个数组，那么传入的数组与第二个框架中原生创建的数组分别具有各自不同的构造函数。解决这个问题ES5中新增了Array.isArray()方法。用来检测确定这个值是不是数组，而不管他在那个全局执行环境中创建的，例如：

var arr = [1,2,3];
if(Array.isArray(arr)){
    // 对数组执行的操作
}

二、转换方法：

toLocaleString():返回以‘，’号构成的字符串
toString():返回以“，”号构成的字符串
valueOf():返回的还是数组
join():返回不同的分割符构成的字符串

 let arr = [1,2,3];
 console.log(arr.toLocaleString());   // 1,2,3
  console.log(arr.toString());   // 1,2,3
  console.log(arr.valueOf());  // [1,2,3]
  console.log(arr.join('|'));    // 1|2|3  不传参数默认是逗号

三、栈方法：push()和pop()方法

js数组可以表现的像栈一样，可以限制插入和删除项的数据结构。
栈是一种LIFO的数据结构，也就是最新添加的项最早被移除。而栈中项的插入和移除，只发生在一个位置-----栈的顶部。(后进先出)
js提供了push()和pop()方法，以实现类似栈的行为。

var arr = [1,2,3];
arr.push(4,5,6);     // 在数组后面追加4，5，6返回数组的新长度，length=6
console.log(arr);   // [1,2,3,4,5,6]

var arr1 = ['a','b','c'];
arr1.pop();       // 移除数组最后一项，返回数组的新长度 length= 2
console.log(arr1);    // ['a','b']

四、队列方法：shift和unshift

栈数据结构的访问规则是LIFO(后进先出)，而队列数据结构的访问规则是FIFO(先进先出)。
队列在列表的末端添加项，从列表的前端项移除，shift()方法能够移除出数组的第一项并返回该项，同时数组长度减1.。结合shift()和push()方法，可以像使用队列一样使用数组：

	let arr2 = [];    // 声明数组
	let arr3 = arr2.push("red","green");  // 向数组尾部添加两个元素，返回数组长度
	console.log(arr3);    // length = 2;
	console.log(arr2);    // ["red","green"]
	console.log(arr2.shift());   // red   删除数组第一项  length-1
	console.log(arr2);   // ["green"]   数组的剩余项

unshift()从数组前面添加任意个项，并返回新数组的长度。结合unshift()和pop()方法可以从相反的方法来模拟队列，从数组的前端添加项，从数组的后端移除项：

let arr = ["赵六"];  // 声明数组  length =1；
let arr1 = arr.unshift("张三","李四","王五");   // 在数组前端添加任意个项，返回数组新长度 length=4
console.log(arr1);   // length 4
console.log(arr);   // ["张三", "李四", "王五", "赵六"]
console.log(arr.pop());  // 删除数组最后一项,返回删除项  length-1  length 3
console.log(arr);   // ["张三", "李四", "王五"]

五、重排序方法：reverse()和sore()

数组中有两个可以直接用来重排序的方法：reverse()和sore()。

reverse():用法简单，但不够灵活

var values = [1,2,3,4,5];
values.reverse();
console.log(values);   // [5, 4, 3, 2, 1]

sore():按照升序排列（从小到大）
sore()方法会调用每个数组项的toString()转型方法，然后比较得到的字符串，以确定排序。即使数组中的每一项都是数值，sort()方法比较的也是字符串。

var values = [0,1,5,10,15];
values.sort();
 console.log(values);   // [0, 1, 10, 15, 5]

可见，即使例子中值的顺序没有问题，但 sort() 方法也会根据测试字符串的结果改变原来的顺序。
因为数值 5 虽然小于 10，但在进行字符串比较时， “10” 则位于 “5” 的前面，于是数组的顺序就被修改了。
不用说，这种排序方式在很多情况下都不是最佳方案。因此 sort() 方法可以接收一个比较函数作为参数，以便我们指定哪个值位于哪个值的前面。
比较函数接收两个参数，如果第一个参数应该位于第二个之前则返回一个负数，如果两个参数相等则返回 0，如果第一个参数应该位于第二个之后则返回一个正数。以下就是一个简单的比较函数：

var values = [0,1,5,10,15];
function compare(n1,n2) {
     return n1 - n2;    //  升序
     // return n2 - n1  // 降序
 }
 console.log(values.sort(compare))

六、操作方法：concat()、slice()、splice()

concat()拼接数组:
concat() 方法可以基于当前数组中的所有项创建一个新数组。具体来说，这个方法会先创建当前数组一个副本，然后将接收到的参数添加到这个副本的末尾，最后返回新构建的数组。

var arr1 = [1,2,3];
var arr2 = [4,5,6];
var arr3 = arr1.concat(arr2)
console.log(arr3);   // [1, 2, 3, 4, 5, 6]

slice()截取数组:
slice()返回从数组中指定开始下标到结束下标之间的元素组成新的数组。
slice()方法可以接收两个参数，元素的起始位置和结束位置。

slice()方法接收一个参数时，返回从该参数指定位置开始到当前数组末尾的所有元素，如下代码：

var arr = [1,2,3,4,5,6,7,8,9,10];
arr1 = arr.slice(1);
console.log(arr1);   // [2,3,4,5,6,7,8,9,10]

slice()方法接受两个参数时，返回起始位置和结束位置之间的元素，但不包括结束位置的元素，如下代码：

var arr = [1,2,3,4,5,6,7,8,9,10];
arr1 = arr.slice(2,5)
console.log(arr1);  // [3,4,5]

splice()很强大的数组方法，有很多种用法，可以实现删除，插入和替换；

删除： 可以删除任意数量的数组元素，只需要指定两个参数：要删除的一个的位置和要删除的个数；

var arr = [1,2,3,4,5,6,7,8,9,10];
var arr1 = arr.splice(1,4);   // 要删除的起始位置和要删除的个数,
console.log(arr1);   // 2,3,4,5

插入： 可以向指定的位置插入任意数量的元素，只需要提供三个参数：插入位置、0、要插入的元素，返回是个空数组；

var arr = [1,2,3,4,5];
var arr1 = arr.splice(2,0,"HTML","CSS","JavaScript");   // 要插入的位置，要删除个数，要插入的元素
console.log(arr1);   // [];  返回的是空数组
console.log(arr);   // [1,2,"HTML","CSS","JavaScript"];

替换： 可以向指定职位插入任意数量的项，且同时删除任意数量的项，需要上参数：替换的位置、要替换的项目个数，要替换上去的内容（可以是多个）。替换上去的项数不必与删除的项数相等。

var arr = [1,2,3,4,5];
var arr1 = arr.splice(2,1,"前端"); // 替换的位置、要替换的项目个数，要替换上去的内容
console.log(arr1);   // 返回被替换的项
console.log(arr);   // [1, 2, "前端", 4, 5]

splice()方法始终都会返回一个数组，该数组中包含从原始数组中删除的项，如果没有删除任何项，则返回一个空数组。

七、位置方法：indexOf()和lasetIndexOf():查看元素的索引

indexOf()：接受两个参数，要查找的项和表示要查找的起点位置的索引（可选）。其中，从数组的开头（位置 0）开始向后查找。

var arr = [1,2,3,4,5];
var arr1 = arr.indexOf(3,1); // 查找数组中元素3，从索引1位置开始查找，  //2
console.log(arr1)   // 返回数组中元素3的索引位置是2

lastIndexOf():接受两个参数，要查找的项和表示查找起点位置的索引，其中， 从数组的末尾开始向前查找。

var arr = [1,2,3,4,5];
var arr1 = arr.lastIndexOf(5);  
console.log(arr1);  // 4

这两个方法都返回要查找的项在数组中的位置，或者在没找到的情况下返回-1。在比较第一个参数与数组中的每一项时，会使用全等操作符。

八、迭代方法forEach()、map()、filter()、every()、some()

forEach(): 对数组进行循环遍历，对数组每一项运行给定函数，forEach()没有返回值。默认三个参数：数组每一项，数组索引，数组本身

var numbers = [1,2,3,4,5];
var forEachRes = numbers.forEach(function(item,index,arr){  // forEach()对数组中每一项运行传入函数，没有返回值，本质上和for循环迭代数组一样
            //执行某些操作         
  })

map(): 指“映射”，对数组中的每一项运行给定函数，返回每次调用结果组成新数组，基本用法和forEach一样，区别就是map()有返回值，forEach()没有返回值。

var numbers = [1,2,3,4,5];
var mapRes = numbers.map(function(item,index,arr){   // map()数组的每一项都去执行给定函数，返回执行后的新数组
     return item * 2;
})
console.log(mapRes);  // [2,4,6,8,10]

filter(): 返回符合条件的数组项（过滤掉不符合的项）

var numbers = [1,2,3,4,5,6,7,8,9];
var filterRes = numbers.filter(function(item,index,arr){   // filter返回符合条件的数组项
    return item > 2
})
console.log(filterRes);   // [3,4,5,6,7,8,9]

every(): 传入的函数必须对每一项都返回 true ，这个方法才返回 true ，否则，它就返回false

var numbers = [1,2,3,4,5];
var everyRrs = numbers.every(function(item,index,array) {    // every();必须数组的每一项都符合执行的函数才能返回true
    return item > 0;
})
console.log(everyRrs);   // true

some(): 传入的函数对数组中的任意一项返回 true ，就会返回 true ，否则它就返回false

var numbers = [1,2,3,4,5];
var everyRrs = numbers.some(function(item,index,arr){   // some();只要数组中有一个条件满足条件就返回true
    return item > 4
})
console.log(everyRrs);   // true

九、归并方法：reduce()和reduceRight()

ECMAScript 5 还新增了两个归并数组的方法： reduce() 和 reduceRight() 。这两个方法都会迭代数组的所有项，然后构建一个最终返回的值。
其中， reduce() 方法从数组的第一项开始，逐个遍历到最后。
而 reduceRight() 则从数组的最后一项开始，向前遍历到第一项。

这两个方法都接收两个参数：一个在每一项上调用的函数和（可选的）作为归并基础的初始值。

传给 reduce() 和 reduceRight() 的函数接收 4 个参数：前一个值、当前值、项的索引和数组对象。

reduce(): 这个函数返回的任何值都会作为第一个参数自动传给下一项。第一次迭代发生在数组的第二项上，因此第一个参数是数组的第一项，第二个参数就是数组的第二项。

var values = [1,2,3,4,5];
var sum = values.reduce(function(prev,cur,index,arr){   // 参数：前一个值、当前值、数组索引、数组；
     return prev + cur
})       
console.log(sum)

使用reduceRight() 函数和 reduce() 方法一样 ，主要取决于要从哪头开始遍历数组。除此之外，它们完全相同。

以上是数组的一些基本用法

ES6的数组方法：

1、Array.of():返回由所有参数值组成的数组，如果没有参数返回一个空数组；

var arr = Array(3); // [undefined,undefined,undefined]  length = 3
var arr = Array.of(3);  // [3] length = 1; 
Array.of()解决上述构造器因参数个数不同，导致的行为有差异的问题

2、Array.from():将两类对象转换为真正的数组（不改变原对象，返回新数组）
第一个参数(必需):要转化为真正数组的对象。
第二个参数(可选): 类似数组的map方法，对每个元素进行处理，将处理后的值放入返回的数组。
第三个参数(可选): 用来绑定this。

let obj = {0:'a',1:'b',2:'c',3:'d',4:'e',length:5} // 1. 对象拥有length属性
let arr = Array.from(obj);
console.log(arr);   // ['a','b','c','d','e'];
// 2. 部署了 Iterator接口的数据结构 比如:字符串、Set、NodeList对象
let arr = Array.from('hellow');
console.log(arr);  // ['h','e','l','l','o','w']

3、copyWithin()：指定位置的成员复制到其他位置；
三个参数都是数值，如果不是，会自动转为数值.
target（必需）：从该位置开始替换数据。如果为负值，表示倒数。
start（可选）：从该位置开始读取数据，默认为 0。如果为负值，表示倒数。
end（可选）：到该位置前停止读取数据，默认等于数组长度。使用负数可从数组结尾处规定位置。
浏览器兼容(MDN): chrome 45,Edge 12,Firefox32,Opera 32,Safari 9, IE 不支例如：复制数组的前面两个元素到第三和第四个位置上：

var fruits = ["Banana", "Orange", "Apple", "Mango", "Kiwi", "Papaya"];
fruits.copyWithin(2, 0, 2);   //输出结果:Banana,Orange,Banana,Orange,Kiwi,Papaya

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

5、ES6扩展运算符…合并数组：
因为ES6的语法更简洁易懂，所以现在合并数组我大部分采用…来处理，…运算符可以实现cancat的每个栗子，且更简洁和具有高度自定义数组元素位置的效果。

 let a = [2, 3, 4, 5]
 let b = [ 4,...a, 4, 4]
 console.log(a,b); // [2, 3, 4, 5] [4,2,3,4,5,4,4]	

js中遍历数组并不会改变原始数组的方法总共有12个:

ES5：
forEach、every 、some、 fliter、map、reduce、reduceRight、
ES6：
find、findIndex、keys、values、entries

ES6：find()& findIndex() 根据条件找到数组成员
find()定义：用于找出第一个符合条件的数组成员，并返回该成员，如果没有符合条件的成员，则返回undefined。
findIndex()定义：返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。

这两个方法：

let new_array = arr.find(function(currentValue, index, arr), thisArg)
 let new_array = arr.findIndex(function(currentValue, index, arr), thisArg)

ES6 keys()&values()&entries() 遍历键名、遍历键值、遍历键名+键值
定义：三个方法都返回一个新的 Array Iterator 对象，对象根据方法不同包含不同的值。
语法：参数：无。

array.keys()
array.values()
array.entries()