JavaScript常用的数组方法

数组的概念

数组是指一组数据的集合，其中的每个数据被称作元素，在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的优雅方式。

为什么要使用数组？
因为使用变量存储一组相关的数据的时候，一个变量只能保存一个值。而要保存多个值的时候就要声明很多变量，起很多个变量名。而使用数组只需要声明一个变量就可以放下一组相关的数据。

创建数组的方法

• 利用new 创建数组

var arr = new Array(); //创建了一个空的数组
var arr1 = new Array(2); // 这个 2 表示 数组长度为2 里面有2个空的数组元素
var arr2 = new Array(2,3); // 等价于 [2,3] 这样写表示 里面有2个数组元素 是 2 和 3

• 利用数组字面量创建数组
  字面量是一种值的固定表达方法，意思就是一看就知道是那种数据类型。比如说 [ ] 这个符号就一定是表示一个数组。

var arr = []; //创建一个空数组
var arr = [1,2,'pink',true]; //创建一个带初始值的数组，数组里面是可以放任意类型的，元素之间用逗号分隔

获取数组元素的方法

• 通过索引号获取，索引号从0开始
  arr[index]
  获取超出数组长度的元素返回的是undefined
• slice()方法截取数组
  数组截取 slice(开始截取的位置下标,结束截取的位置下标)；不影响原来的数组。
  返回被截取项目的新数组。结果是不包括 结束截取的位置下标的元素的。 不写结束位置默认截取都最后一个元素（包括最后一个元素）

var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"
console.log(arr.slice(2,4)); // 输出 ["Thomas","James"]

• 获取数组中元素个数的方法（从1开始计数的）
  arr.length

数组添加元素的方法

• 通过修改length长度新增数组元素
  数组的length属性是可读写的。新增出来的位置在数组中是empty，获取出来的类型是undefined

var arr = [1, 2, 3];
arr.length = 5;

• 通过修改数组索引新增数组元素
  追加数组元素

var arr = [1, 2, 3];
arr[3]= 4;

• push()在数组最后追加新元素
  push() 在数组的末尾，添加一个或者多个数组元素。原数组也会发生变化。push中文是推的意思
  这个方法的返回值是 新数组的长度

 var arr = [1, 2, 3];
     // arr.push(4, 'xinzeng'); // [1,2,3,4,'xinzeng']
     console.log(arr.push(4, 'xinzeng')); // 输出 5

• unshift()在数组前面添加元素
  unshift()在数组的开头，添加一个或者多个数组元素。原数组也会发生变化。
  这个方法的返回值是 新数组的长度

 var arr = [1, 2, 3];
     // arr.unshift('ryan', 'xinzeng');  // ['ryan','xinzeng',1,2,3]
     console.log(arr.push('ryan', 'xinzeng')); // 输出 5

• concat()方法连接数组
  连接两个或者多个数组，不影响原数组。
  返回一个新的数组。
  联想 --》下面ES6中用的数组展开式合并数组

var arr = ["George","John","Thomas"];
var arr2 = ["James","Adrew","Martin"];
var arr3 = ["William","Franklin"];

console.log(arr.concat(arr2,arr3)); // ["George","John","Thomas","James","Adrew","Martin","William","Franklin"]

/*例子2----*/
var a = [1,2,3];
console.log(a.concat(4,5)); // [1,2,3,4,5]   这里相当于连接了两个数组，一个是[4]，一个是[5]

数组删除元素的方法

• 修改length属性
  通过修改length的值可以删除数组后面的元素。
• pop()删除数组最后一个元素
  pop()删除数组最后一个元素，一次只可以删除一个。原数组也会发生变化。
  这个方法的返回值是 被删除的元素

 var arr = [1, 2, 3];
     // arr.pop();  // 执行完这句之后数组为 [1,2]
     console.log(arr.pop()); // 输出 3

• shift()删除数组第一个元素
  shift()删除数组第一个元素，一次只可以删除一个。原数组也会发生变化。
  这个方法的返回值是 被删除的元素

 var arr = [1, 2, 3];
     // arr.shift();  // 执行完这句之后数组为 [2，3]
     console.log(arr.shift()); // 输出 1

• splice()方法
  数组删除splice(开始删除的位置下标，要删除的个数）。原数组会发生变化。
  返回被删除的元素组成的新数组。

var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"
arr.splice(2,3); // 从下标为 2的地方开始往后删除，删除 3个元素
console.log(arr); // 输出 ["George","John","Martin"]

检测是否为数组的方法

• instanceof 运算符
  instanceof 可以判断一个对象是否是某个构造函数的实例

var arr = [1, 23];
var obj = {};
console.log(arr instanceof Array); // true
console.log(obj instanceof Array); // false

• Array.isArray()
  Array.isArray()用于判断一个对象是否为数组，isArray() 是 HTML5 中提供的方法，ie9或以上才支持

var arr = [1, 23];
var obj = {};
console.log(Array.isArray(arr));   // true
console.log(Array.isArray(obj));   // false

遍历数组的方法

• for循环

数组排序的方法

• sort()数组排序
  数字是都是个位数的时候排序正常，升序排列，也就是从小到大。

var arr = [3,4,7,1];
arr.sort();
console.log(arr); // [1,3,4,7]

但是，sort()排序是有问题的，当数字有两位数的时候结果如下，（类似先根据第一个数字排序，然后再根据第二个数字排序这样子）

var arr = [13,4,77,1,7];
arr.sort();
console.log(arr); // [1,13,4,7,77]

解决方法：给sort参数，写法如下（这个写法是固定的，记住就好）

var arr = [13,4,77,1,7];
arr.sort(function(a,b){
	return a-b; // a-b 是升序排列； b-a 就是降序排列
});
console.log(arr); // [1,4,7,13,77]

• reverse()翻转数组

var arr = ['apple','orange','yellow'];
arr .reverse();
console.log(arr); // ['yellow','orange','apple']

获取数组特定索引方法

• indexOf()查找给定元素的第一个出现位置索引
  indexOf()查找给定元素的第一个出现位置索引，如果存在返回索引号，如果不存在返回 -1。（简单理解就是从前往后查找）

var arr = ['red','green','blue','pink','blue'];
console.log(arr.indexOf('blue')); // 输出 2

• lastIndexOf()查找给定元素在数组中出现的最后一个位置索引
  lastIndexOf()查找给定元素在数组中出现的最后一个位置索引，如果存在返回索引号，如果不存在返回 -1。（简单理解就是从后往前查找）

var arr = ['red','green','blue','pink','blue'];
console.log(arr.indexOf('blue')); // 输出 4

可以用来做数组去重，循环旧数组（有重复元素的数组）取出每个元素，然后在新数组中使用indexOf看看有没有这个元素，返回-1表示没有这个元素即不是重复元素。
联想 --》数组去重也可以使用set集合的方法。
这两个方法可以结合下面写的ES6中的 find、findIndex、includes方法看

将数组转换成字符串的方法

• for循环取出每个元素来拼接

var arr = ['red','green','blue','pink'];
var str = ''
for(var i=0; i<arr.length; i++){
	str += arr[i] + ',' //得到的字符串最后面会多出一个逗号
}

• toString()方法

var arr = [1,2,3];
console.log(arr.toString()); // 输出 1,2,3

• join()方法
  这种方法可以指定分隔符，分隔符作为join的参数。不指定默认为逗号

var arr = ['red','green','blue'];
console.log(arr.join('-')); // 输出 red-green-blue

ES5中新增的数组方法

数组迭代（遍历）方法：forEach( )、map( )、filter( )、some( )、every( )

1.forEach( )
作用：遍历数组
调用方式：array.forEach ( function ( currentValue,index,arr ) )
回调函数中三个参数代表的意义,参数的名称可以自定义，可以不写全
currentValue：数组当前项的值
index：数组当前项的索引
arr：数组对象本身

2.filter( )
作用：创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素，主要用于筛选数组，注意 它直接返回一个新数组。
调用方式：

var newArr = array.filter ( function ( currentValue,index,arr ){
	return currentValue>20; //这里写筛选的条件,return为true时表示当前元素符合条件，比如筛选array中所有大于20的元素并形成新数组返回给newArr
} )

3.some( )
作用：用于检测数组中的元素是否满足指定条件，通俗来说就是查找数组中是否有满足条件的元素。
注意：它的返回值是一个布尔值，如果查找到这个元素，就返回true，否则就返回false。如果找到第一个满足条件的元素，则会终止循环，不再继续查找。（在foreach和filter的回调函数里面写return是不会终止循环的，所以用some查找元素效率更高）
调用方式：

var flag = array.some(function(currentValue,index,arr){
	return currentValue>20; //这里写查找的条件，比如查找array中是否存在值大于20的元素
})

ES6中新增的数组方法

扩展运算符（展开语法）
扩展运算符可以将数组或者对象转为用逗号分隔的参数序列。

 let ary = [1, 2, 3]; 
 ...ary  // 1, 2, 3 
 console.log(...ary);    // 1 2 3  
 console.log(1, 2, 3)

应用：
1合并数组

// 方法一  
 let ary1 = [1, 2, 3]; 
 let ary2 = [3, 4, 5]; 
 let ary3 = [...ary1, ...ary2]; 
 // 方法二  
 ary1.push(...ary2); 

2将类(伪)数组或可遍历对象转换为真正的数组

let oDivs = document.getElementsByTagName('div');  //这里得到的是一个伪数组
oDivs = [...oDivs];

Array.from( )方法
数组的构造函数方法：Array.from()也可以将伪数组或可遍历对象转换为真正的数组

let arrayLike = { 
    '0': 'a', 
    '1': 'b', 
    '2': 'c', 
    length: 3 
};  
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

Array.from()方法还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，数组中有多少个元素就会被调用多少次，函数中有一个形参代表当前处理的那个元素，将处理后的值放入返回的数组。

 let arrayLike = {  
     "0": 1, 
     "1": 2, 
     "length": 2 
 }  
 let newAry = Array.from(aryLike, item => item *2); //将伪数组转换为真正的数组，并且每个元素都乘以2
 console.log(newAry); // [2,4]

find( )方法
用于找出第一个符合条件的数组成员，如果没有找到返回undefined。
find( )方法接收一个函数作为参数，这个函数的第一个参数是当前循环到的元素，第二个参数为当前下标。

 let ary = [{ 
     id: 1,      name: '张三'
 }, {  
     id: 2,      name: '李四' 
 }];   
 let target = ary.find((item, index) => item.id == 2);
 console.log(target); // {id: 2, name: '李四' }

findIndex()方法
用于找出第一个符合条件的数组成员的位置，如果没有找到返回-1

let ary = [1, 5, 10, 15]; 
let index = ary.findIndex((value, index) => value > 9);  
console.log(index); // 2 

includes()方法
表示某个数组是否包含给定的值，返回布尔值。

[1, 2, 3].includes(2) // true
[1, 2, 3].includes(4) // false 

在ES6之前查找是否包含某个值用到的是 indexof() 方法

伪数组

伪数组具有以下特点

• 具有 length 属性
• 按索引方式储存数据
• 不具有数组的 push , pop 等方法

伪数组出现的地方
1，函数中的内置对象arguments就是伪数组
2，getElementsByTagName返回的是一个存放着多个Element对象的伪数组
3，获取类名 element.classList 返回的也是一个伪数组
4，jQuery中用 $ 获取的元素也是一个伪数组