JS数组常用方法和注意事项

• push
• push()  
• concat()
• pop()
• shift()、unshift()
• slice()
• splice()
• sort()
• map
• filter
• foreach
• some
• reserve
• indexOf

1）push() :向数组末尾追加数据，返回修改后的长度，改变原数组数据。

var arry = [1,2,3]
var arryInfo = arry.push(5)
console.log(arryInfo) // 4
console.log(arr) // [1,2,3,5]

2)concat(): 和push方法类似，向数组末尾追加数据，返回一个新的数组，不改变原数组的数据。

var arry = [1, 2, 3]
var arryInfo = arry.concat(5)
console.log(arryInfo) // [1, 2, 3，5]
console.log(arry) //[1, 2, 3]

3）pop(): 删除数组的最后一条数据，返回删除的数据，改变原来数组的数据。

var arry = [1, 2, 3]
var arryInfo = arry.pop()
console.log(arryInfo) // 3
console.log(arry) //[1,2] 

4)shift()：删除数组的第一个数据，返回删除的数据，改变原数组数据，数组为空时返回undefined。

unshift():  添加数据到数组首位，返回修改后的长度，修改原数组的数据。

var arry = [1, 2, 3]
var arryInfo = arry.shift()
console.log(arryInfo) // 1
console.log(arry) //[2，3] 

var arry = [1, 2, 3]
var arryInfo = arry.unshift(77)
console.log(arryInfo) // 4
console.log(arry) //[77,1,2，3] 

5) slice():  slice(startIdx, endIndx)截取数组数据，其中截取的数据包括startIdx的数据，不包括endIndx的数据，返回截取的数组，不改变原数组。

var arry = [1, 2, 3]
var arryInfo = arry.slice(0,1)
console.log(arryInfo) // [1]
console.log(arry) //[1,2，3] 

6）splice() : 和slice一样截取数组。和slice不同的是，splice直接修改了原数组（删除了截取的部分），返回的是截取的数组。

var arry = [1, 2, 3]
var arryInfo = arry.splice(1,2)
console.log(arryInfo) // [2，3]
console.log(arry) //[1] 

7）sort(): 对数组进行排序。ps: sort是对字符串排序（按照abcdef..这样的顺序排序），不对数字进行排序。

        如果数组是数字，排序没有效果。这时就需要一个排序函数协助。

var arry = [1,4, 2, 3]
var arryInfo = arry.sort()
console.log(arryInfo) // [1,4,2,3]
console.log(arry) //[1,4,2,3]

arryInfo = arry.sort(numberSort())
console.log(arryInfo) // [1,2,3,4]
console.log(arry) // [1,2,3,4]

// 排序函数
function numberSort(a,b){
    return a-b; // a-b:表示升序排序，b-a表示降序排序

}

        如果数组是字符串，可以直接排序。

var arry = ['f1a1','c12','b33','g3','f4']
var arryInfo = arry.sort()
console.log(arryInfo) // ["b33", "c12", "f1a1", "f4", "g3"]
console.log(arry) // ["b33", "c12", "f1a1", "f4", "g3"]

8）map: 遍历数组。返回一个新的数组，不改变原数组数据。

var arry = ['没有','嘿嘿','b33','g3','f4']
var arryInfo = arry.map(v=>{
    return v+'map'
}

        )
console.log(arryInfo) // ["没有map", "嘿嘿map", "b33map", "g3map", "f4map"
console.log(arry) // ["没有", "嘿嘿", "b33", "g3", "f4"]

9）filter: 筛选数组匹配的数据。返回匹配的数据数组，不改变原数组数据。

var arry = ['没有','嘿嘿','b33','g3','f4']
var arryInfo = arry.map(v=>{
    return v+'map'
}

        )
console.log(arryInfo) // ["嘿嘿"]
console.log(arry) // ["没有", "嘿嘿", "b33", "g3", "f4"]

10）foreach: 遍历数组。没有返回值，直接操作数组数据。

var arry = ['没有','嘿嘿','b33','g3','f4']
var arryInfo = arry.foreach(v=>{
    return v+'foreach'
}

        )
console.log(arryInfo) // undefined
console.log(arry) // ["没有", "嘿嘿", "b33", "g3", "f4"]

11）some: 查询数组中是否存在匹配的数据。有匹配的数据就返回true，不改变原数组。

var arry = ['没有','嘿嘿','b33','g3','f4']
var arryInfo = arry.some(v=>{
    return v.endWiths('3')
}

        )
console.log(arryInfo) // true
console.log(arry) // ["没有", "嘿嘿", "b33", "g3", "f4"]

12）reserve: 反转数组中的数据。直接操作的是原数组。

var arry = ['没有','嘿嘿','b33','g3','f4']
var arryInfo = arry.reserve()

        )
console.log(arryInfo) // ["f4", "g3", "b33", "嘿嘿", "没有"]
console.log(arry) // ["f4", "g3", "b33", "嘿嘿", "没有"]

13）indexOf：indexOf(必传参数，可选参数)，从数组的开头开始查找必传参数的下标，可选参数设置从哪个下标开始查找。

var arry = ['没有','嘿嘿','b33','g3','f4']
var arryInfo = arry.indexOf('嘿嘿')
console.log(arryInfo) // 1
console.log(arry) // ["没有", "嘿嘿", "b33", "g3", "f4"]
arry.indexOf('嘿嘿',2)
console.log(arryInfo) // -1 表示没有查找到

以上均为个人总结，有补充的地方或者不对的地方欢迎留言~