JavaScript数组使用总结

JavaScript数组的方法

join

join:接受一个参数作为分隔符，将数组合并成以指定分隔符连接的字符串并返回，参数缺省时，默认用’,'分隔；不改变原数组；

let arr=[1,2,3]
console.log(arr.join('-')); //1-2-3
console.log(arr) // [1,2,3]

push和pop

push和pop分别在数组尾部插入和删除一个元素；都会改变原数组；其中：

• push:返回新数组的长度；
• pop:返回数组删除的元素；

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

shift和unshiht

shift和unshiht分别在数组的开头删除和插入元素，改变原数组；

• shift:返回从数组删除的元素；
• unshiht:返回新数组的长度；

let arr=[1,2,3]
console.log(arr.shift())  // 1
console.log(arr) //[2,3]
console.log(arr.unshift("a"))  // 3
console.log(arr) //["a",2,3]

push和shift，pop和unshiht可以模拟实现线性表数据结构；

sort

sort对数组排序，默认按照升序排列；改变原数组，返回改变后的数组；

注意：sort默认情况下，按照数组每一项对应字符串的大小做升序排列；

let arr=[21,1,3]
arr.sort()     // [1,21,3]
arr ;          // [1,21,3]

sort函数可以传入一个函数作为参数，按指定的规则进行排序；

//升序排列
function compare(value1,value2){
    if(value1===value2) return 0
    if(value1>value2)  return 1
    if(value1<value2)  return -1
}
let arr=[21,1,3]
arr.sort(compare)     // [1,3,21]
arr ;          // [1,3,21]

reverse

实现数组的反转；改变原数组，返回改变后的数组；

let arr=[1,2,3] 
arr.reverse()  //[3,2,1]
arr            //[3,2,1]

concat

将参数逐项插入到目标数组最后，不改变原数组，返回新数组；

let arr=[1,2];
arr.concat(3,[4,5])  // [1,2,3,4,5]
arr                  // [1,2]

当不传参数时，相当于复制一个数组；

slice

该函数可以接受两个参数，分别为起始位置和结束位置，返回从起始位置开始到结束位置之间的项组成的数组。包含其实位置，但不包括结束位置。不改变原数组。

• 如果不穿参数，起始位置默认为数组第一项，结束位置为数组最后一项后边的位置；相当于复制一个数组；
• 如果只传入一个参数，那么结束位置默认为该数组最后一项后边的位置。

let arr=[1,2,3,4,5]
arr.slice(1,2)  //2
arr  //[1,2,3,4,5]
arr.slice()   //[1,2,3,4,5]
arr.slice(1)  //[2,3,4,5]

slice()的参数可以为负值，如果为负值，则加上数组的长度，作为当前的值。

let arr=[1,2,3,4,5]
arr.slice(-2)  //[4,5]
arr.slice(3)   //[4,5]

如果slice(index1,index2)中最终计算值 index1>index2. 此时会返回一个空数组；

splice

这是一个很强大的方法，可以接受以下参数splice(index,howmany,item1,.....,itemX)

• index:必填项；
• haomany:必填项；
• item1,…,itemX：选填

表示从数组index位置删除haomany项，同时插入item1,.....,itemX，返回被删除项组成的数组，如果没有删除会返回空数组；会改变原数组；

let arr=[1,2,3,4]
arr.splice(1,2,8,9)  //[2,3]
arr  //[1,8,9,4]

如果haomany为负数。则当做0处理

indexOf和lastIndexOf

• indexOf(item,strIndex):表示从strIndex位置开始向后查找item首次出现的位置索引。strIndex如果不传，则从头开始查找；
• lastIndexOf(item,strIndex):表示从strIndex位置开始向前查找item首次出现的位置索引。strIndex如果不传，则从数组最后一项开始向前查找；

Array.from ES6新增

该方法将类似数组的对象和可遍历(iterable)的对象（包括ES6的Map和Set）转化成真正的数组；

let arrLike={
    "0":"a",
    "1":"b",
    length:2
}
Array.from(arrLike)  //["a","b"]
Array.from("abc")   //["a","b","c"] 字符串有Iterator接口；
Array.from(new Set([1,2,3]))  //[1,2,3]

find和findIndex ES6新增

-find:找出数组中第一个满足条件的项，若没有，返回undefined.参数是一个回调函数；

• findIndex:找出数组中第一个满足条件的项的索引，若没有返回 -1，参数是一个回调函数；

[1,2,3,4].find((value,index,arr)=>(value>2))  //3
[1,2,3,4].findIndex((value,index,arr)=>(value>2))  //2

Array.of ES6新增

将一组值转化为数组

Array.of(1,2,3) //[1,2,3]

copyWithin ES6新增

将指定位置的成员复制到其他位置；返回当前数组，会改变原数组；Array.prototype.copyWithin(target, start = 0, end = this.length)接受三个参数

• target:必需，从该位置开始替换数据
• start:从该位置开始读取数据；
• end:到该位置停止读取；

[1,2,3,4,5].copyWithin(0,3) //[4,5,3,4,5]

fillES6新增

使用给定的值填充数组；改变原数组，返回改变后的数组

[1,2,3].fill(7)  //[7,7,7]
new Array(3).fill(9) //[9,9,9]

includes ES6新增

返回一个布尔值，表示是否包含给定的值。

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

该方法还可以接受第二个参数，表示开始搜索的起始位置，默认为0，若为负数，表示倒数的位置；

flat

将嵌套的数组“拉平”。返回一个新的数组，对原数据没有影响；接受一个参数，表示要拉平的层数。默认为1；

[1,2,3,[4,5]].flat()  //[1,2,3,4,5]
[1,2,[3,4,[5]]].flat()  //[1,2,3,4,[5]]

flatMap

先对数组的每个成员执行一个函数，相当于map函数，再调用一次flat函数。不改变原数组；

[2, 3, 4].flatMap((x) => [x, x * 2])
// [2,4,3,6,4,8]

JavaScript数组的遍历

for循环

这个没什么好说的，最常见的循环语句；

forEach

[1,2,3].forEach(item=>{
    console.log(item*2)
})
//2
//4
//6

for..in

for(let k in arr){
    
}
//这里的k表示数组的下标或者对象的key

map

数组每一项都调用一个函数，返回一个新数组，不改变原数组。

let arr=[1,2,3];
let arr1=arr.map(item=>(item*2))
arr  //[1,2,3]
arr1 //[2,4,6]

filter

过滤数字中满足条件的项；返回新数组，不改变原数组；

[1,2,3].filter(item=>(item%2===1))  //[1,3]

entries，keys 和 values ES6新增

该方法要配合for...of使用:

for (let index of ['a', 'b'].keys()) {
  console.log(index);
}
// 0
// 1

for (let elem of ['a', 'b'].values()) {
  console.log(elem);
}
// 'a'
// 'b'

for (let [index, elem] of ['a', 'b'].entries()) {
  console.log(index, elem);
}
// 0 "a"
// 1 "b"