Javascript原生方法

注意:js数组每一项可以保存任何类型的数据，比如第一个元素是字符串，第二个元素是数字，第三个元素是对象

创建数组

tips: 建议使用数组字面量方式【简单】

var colors = new Array()
var colors = new Array('red','blue')

var colors = [];
var colors = ['red','blue'];

检测数组

对于一个网页或一个全局作用域，可以通过如下方法

if(arr instanceof Array){
    //对数组执行某些操作
}

网页中包含多个框架，通过如下ES5方法检测

if(Array.isArray(arr)){
    //对数组执行某些操作
}

转换方法

arr.valueOf()

var colors = ['red','blue','green']
colors.valueOf() //['red','blue','green']

arr.toString()

var colors = ['red','blue','green']
colors.toString() //"red,blue,green"

tips: arr.toString() 与 arr.join()输出相同，不过join里可以输入其它链接符

push、pop、unshift、shift

arr.push(item)方法
接受任意数量的参数，添加到数组末尾，返回新数组的长度

let arr = [1，2，3]
arr.push('4')
console.log(arr) // [1,2,3,4]

arr.pop()
删除数组最后一项，返回删除的项

var colors = ['blue','green']
colors.pop() //green

arr.unshift()
接受任意数量的参数，添加到数组头部，返回新数组的长度

var colors = ['red']
colors.unshift('green') //2

arr.shift()
删除数组第一项，返回删除的项

var colors = ['blue','green']
colors.shift() //blue

reverse、sort、concat、slice

arr.reverse()
反转数组的顺序，并返回重新排序之后的数组， 原数组会被改变

var arr1 = [1,2,3,'red','blue']
arr1.reverse() //["blue", "red", 3, 2, 1]

arr.sort()
如果不传参数，默认情况下数组内的元素会被转换为字符串进行比较，因此一般不推荐直接使用默认的arr.sort()进行排序。
返回值为排序后的新数组。原数组会被改变
注意：sort里接收一个比较参数

var b = [1,2,3]
//升序
b.sort((a,b)=>a-b) //[1, 2, 3]
//降序
b.sort((a,b)=>b-a) //[3, 2, 1]

arr.concat()
没有传递参数，那么只是复制当前数组并返回副本，原数组不变；
传递一个元素（数组）或多个元素（数组）,会将其合并到arr中，返回新数组，原数组不变

var colors = ['red','blue','green']
colors.concat('gray',['a','green'])  //["red", "blue", "green", "gray", "a", "green"]
console.log(colors) // ["red", "blue", "green"]

tips: js数组复制

arr.concat()    //原生
[...arr]   //ES6
Array.from(arr) //ES6
$.extend(arr) //JQ

arr.slice
剪切数组，返回剪切之后的数组，元素不会改变
1、传入一个参数，表示起始位置，结束位置为最末尾

var colors = ['red','blue','green']
colors.slice(2) //['green']

2、传入2个参数，表示起始位置与结束位置，但不包括结束位置所在的元素

var colors = ['red','blue','green']
colors.slice(1,2) //['blue']

splice()

删除：arr.splice(index, num)
传入两个参数，第一个为位置（ 数组下标），第二个为删除的项数，可以删除任意项，返回删除元素组成的数组，原数组变了

var colors = ['red','blue','green']
colors.splice(1,1) //['blue']

插入：arr.splice(index,0,item)
传入3个参数， [起始位置（ 数组下标） | 要删除的项数 为0 | 要插入的元素]， 最终返回删除掉的元素组成的数组，因为这里删除项数为0，因此会返回空数组

var colors = ['red','blue','green']
colors.splice(1,0,'gray') //[]
console.log(colors) // ['red','gray','blue','green']

替换：arr.splice(index, num, item)
传入3个参数，[起始位置 | 要删除的项数 | 要插入的任意项数]， 最终返回删除掉的元素组成的数组

var colors = ["red", "gray", "blue", "green"]
colors.splice(2,2,'yellow') // ["blue", "green"]
console.log(colors); //["red", "gray", "yellow"]

tips:这个方法会因为参数的不同而实现不同的功能

查找元素

arr.indexOf()
验证数组中是否含有某个元素，返回第一个匹配到的元素在数组中所在的位置，如果没有，则返回 -1

var colors =  ["red", "gray", "yellow"]
colors.indexOf('gray') // 1
colors.indexOf('mm') //-1

arr.lastIndexOf()
验证数组中是否含有某个元素，不过是从数组尾部开始查找，返回第一个匹配到的元素所在的位置，如果没有，则返回-1

var colors =  ["red", "gray", "yellow","gray"]
colors.indexOf('gray') 
console.log(colors.indexOf('gray')) // 1
colors.lastIndexOf('mm') 
onsole.log(colors.lastIndexOf('mm')) // -1

迭代方法

ES5定义了5个迭代方法，每个方法接收2个参数----》[要在每一项上运行的函数 | 运行该函数的作用域对象（可选）]
运行的函数包括3个参数 ---》 [数组项的值 | 该项在数组中的位置 | 数组对象本身]

arr.every()
检查数组中的项是否满足某个条件，传入的函数对每一项都返回true,则返回true

var nums = [1,2,3,4,5,4,3,2,1]
nums.every((item, index, arr)=> item >2 ) //false

arr.some()
检查数组中的项是否满足某个条件，只要传入的函数对数组中某一项返回true,则返回true

var nums = [1,2,3,4,5,4,3,2,1]
nums.some((item, index, arr)=> item >2 ) //true

arr.filter()
对数组中的每一项运行给定函数，返回该函数会返回true的项组成的新数组

//返回nums中所有值大于2的数组
var nums = [1,2,3,4,5,4,3,2,1]
nums.filter((item, index, arr)=> item >2 ) //[3, 4, 5, 4, 3]

arr.map()
对数组中的每一项运行给定函数，返回每次函数调用的结果组成的新数组

//返回nums中每一项乘以2的数组
var nums = [1,2,3,4,5,4,3,2,1]
nums.map((item, index, arr)=> item * 2 ) // [2, 4, 6, 8, 10, 8, 6, 4, 2]

arr.forEach()
对数组中的每一项运行给定函数，这个方法没有返回值

//返回nums中每一项乘以2的数组
var nums = [1,2,3,4,5,4,3,2,1]
nums.forEach((item, index, arr)=> item * 2 ) // undefined

tips： map、forEach里不可以使用continue、break ,每一项都会执行，如果遍历中要用到continue或break提升效率，则可以使用for()循环 或 for...of..循环