阅读 39

Array数组常用方法

[这可能是全网最易懂的文章了吧]

push( ),unshift( ),pop( ),shift( ),concat( ),every( ),fill( ),filter( ),find( ),join( ),map( ),reduce( ),reverse( ),splice( ),some( ),sort( ),splice( )

1.push()

push():向数组的末尾添加一个或多个元素,并返回新的长度

arr.push(item1, item2, ..., itemX):向arr末尾添加元素item然后返回arr的最终长度

var arr = ["Qiuqiu", "Girl"]
var arr1=arr.push("Baby")
console.log(arr1)//3
复制代码

2.unshift()

unshift():向数组的开头添加一个或多个元素,并返回新的长度

arr.unshift(item1,item2, ..., itemX):向arr开头添加元素item然后返回arr的最终长度

var arr = ["Qiuqiu", "Girl"]
var arr1=arr.unshift("Baby")
console.log(arr1)//3 
复制代码

3.pop()

pop():删除数组的最后一个元素,并返回删除的元素

arr.pop()

var arr = ["Qiuqiu", "Girl"]
var arr1=arr.pop()
console.log(arr1)//["Girl"]
复制代码

4.shift()

shift():删除数组的第一个元素,并返回删除的元素

arr.shift()

var arr = ["Qiuqiu", "Girl"]
var arr1=arr.shift()
console.log(arr1)//["Qiuqiu"]
复制代码

5.concat()

concat():连接两个或更多的数组,并返回结果。

arr.concat(arr1,arr2,...,arrayX):将arr与arr1, arr2, ..., arrX连接成一个新数组

var str1=["I","am"]
var str2=["QiuQiu"]
var str=str1.concat(str2)
console.log(str)//(3) ["I", "am", "QiuQiu"]
复制代码

6.every()

every():检测数组所有元素是否都符合指定条件(通过函数提供).如果是,就返回true;如果数组中检测到有一个元素不满足,则整个表达式返回 false ,且剩余的元素不会再进行检测。

arr.every(function(currentValue,index,arr), thisValue)

注:every()不会改变原始数组

var arr = [1, 2, 3, 4, 5, 6]
var arr1 = arr.every(item => item > 2)
console.log(arr1) //false

var arr2 = arr.every(item => item < 2)
console.log(arr2) //false

var arr3 = arr.every(item => item < 7)
console.log(arr3) //true
复制代码

7.some()

some():检测数组中的元素是否满足指定条件(函数提供).如果其中一项符合条件就返回 true,剩余的元素不会再执行检测;如果没有满足条件的元素,则返回false.

arr.some(function(currentValue,index,arr),thisValue)

注:some()不会改变原始数组

var arr = [1, 2, 3, 4, 5, 6]
var arr1 = arr.some(item => item > 2)
console.log(arr1) //true

var arr = [1, 2, 3, 4, 5, 6]
var arr2 = arr.some(item => item > 7)
console.log(arr2) //false
复制代码

8.fill()

fill():将一个固定值替换数组的元素.也就是使用一个固定值来填充数组.

arr.fill(value, start, end):将value填充至数组的位置start(包括)到位置end(不包括)

注:some()不会改变原始数组

var arr=["I","am","Qiu","Qiu"]
var arr1=arr.fill("q",2,4)//将q填充到后两位
console.log(arr1)//(4) ["I", "am", "q", "q"]

var arr2=arr.fill("q")//填充整个数组
console.log(arr2)//(4) ["q", "q", "q", "q"]
复制代码

9.join()

join():把数组的所有元素放入一个字符串.元素通过指定的分隔符进行分隔.

arr.join(separator): 将arr的所有元素用separator分隔放入字符串,如果未指定separator,默认用逗号作为分隔符

var arr=["I","am","Qiu","Qiu"]
var arr1=arr.join()//未填写separator,默认用逗号,分隔
console.log(arr1)//I,am,Qiu,Qiu

var arr2=arr.join("!")//用!作为分隔符来分隔数组然后放入字符串
console.log(arr2)//I!am!Qiu!Qiu
复制代码

10.reverse()

reverse():反转数组的元素顺序.

arr.reverse()

var arr=["xiao","loves","qiu","qiu"]
var arr1=arr.reverse()
console.log(arr1)//(4) ["qiu", "qiu", "loves", "xiao"]
复制代码

11.sort()

sort():对数组的元素进行排序.排序顺序可以是字母或数字,并按升序或降序.默认排序顺序为按字母升序

arr.sort(sortfunction):按照sortfunction规定排序顺.必须是函数

var arr=["I","am","learning","Js"]
var arr1=arr.sort()//字母升序排列
console.log(arr1)//(4) ["I", "Js", "am", "learning"]区分大小写而且大写字母排在小写字母前面

var arr=["I","Am","Learning","Js"]
var arr2=arr.sort()//字母升序排列
console.log(arr2)//(4) ["Am", "I", "Js", "Learning"]

var arr=[7,5,6,1]
var arr3=arr.sort((a, b) => a - b)//数字升序排列
console.log(arr3)//(4) [1, 5, 6, 7]

var arr=[7,5,6,1]
var arr4=arr.sort((a, b) => b - a)//数字降序排列
console.log(arr4)//(4) [7, 6, 5, 1]
复制代码

12.splice()

splice():返回被添加或删除的数组元素。(此方法改变原数组)

arr.splice(index,howmany,item1,.....,itemX):从index处添加/删除item1,item2...itemX共howmany个元素

注:howmany指的是删除元素的数量,如果howmany为0,则不删除.

// 不删除插入
var arr=["I","am","Qiu","Qiu","baby"]
var arr1=arr.splice(2,0,"cute")//在位置2处(删除0个元素也就是不删除)插入1个新元素
console.log(arr1)//[]
console.log(arr)//(6) ["I", "am", "cute", "Qiu", "Qiu", "baby"]

// 删除加插入
var arr2=["I","am","Qiu","Qiu","baby"]
var arr3=arr2.splice(2,2,"qiqi")//在位置2处删除2个元素并且插入1个新元素
console.log(arr3)//(2) ["Qiu", "Qiu"]
console.log(arr2)//(4) ["I", "am", "qiqi", "baby"]

//删除
var arr4=["I","am","Qiu","Qiu","baby"]
var arr5=arr4.splice(2,2)//在位置2处删除2个元素
console.log(arr5)//(2) ["Qiu", "Qiu"]
console.log(arr4)//(3) ["I", "am", "baby"]
复制代码

13.slice()

splice():返回被截取的数组元素.(此方法不改变原数组)

arr.slice(start, end):从位置start处(包含此处)截取到位置end处(不包含此处);如果是负数,那么位置从数组结尾开始算;如果只有一位数字,那么说明end为0.那么就截取从start到最后的所有元素.

例如slice(-2,-1) 表示抽取了原数组中的倒数第二个元素到最后一个元素(不包含最后一个元素)

例如slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素(包含最后一个元素)

var arr=["I","am","Qiu","Qiu","baby"]
var arr1=arr.slice(2)
console.log(arr1)//(3) ["Qiu", "Qiu", "baby"]

var arr2=arr.slice(2,5)
console.log(arr2)//(3) ["Qiu", "Qiu", "baby"]

var arr3=arr.slice(2,4)
console.log(arr3)//(2) ["Qiu", "Qiu"]

var arr4=arr.slice(-4,-1)//截取倒数第四个 到 倒数第二个元素
console.log(arr4)//(3) ["am", "Qiu","Qiu"]

var arr5=arr.slice(-4)//截取倒数第四个 到 最后的元素
console.log(arr5)//(4) ["am", "Qiu", "Qiu", "baby"]

var arr6=arr.slice(0)//截取数组的全部元素
console.log(arr6)//(5) ["I", "am", "Qiu", "Qiu", "baby"]
复制代码

14.map()

map():返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值

arr.map(function(currentValue,index,arr), thisValue)

注:map() 不会改变原始数组

var arr = [1, 2, 3, 4, 5, 6]
//   var arr1 = arr.map(function (item) {
//     return item * 2
//   })
var arr1 = arr.map((item) => item * 2)
console.log(arr1)//(6) [2, 4, 6, 8, 10, 12]
复制代码

15.filter()

filter:返回一个新的符合条件的数组

arr.filter(function(currentValue,index,arr), thisValue)

注: filter() 不会改变原始数组

var arr = [1, 2, 3, 4, 5, 6]
var arr1 = arr.filter(item => item > 2)//截取大于2的数组并返回
console.log(arr1)//(4) [3, 4, 5, 6]
复制代码

16.find()

find():返回符合条件的第一个下标的索引,起始值0 .

arr.find(function(currentValue, index, arr),thisValue)

注: filter() 不会改变原始数组

var arr = [1, 2, 3, 4, 5, 6]
var arr1 = arr.find(item => item > 5)
console.log(arr1) //6
复制代码

17.reduce()

reduce():相当于一个函数累加器,接受一个回调函数的结果,然后将前一次的函数结果再和下一次的数据再次执行此回调函数.

arr.reduce(function(total, currentValue, currentIndex, arr), initialValue)

arr.reduce(function(上一次的值,当前值,currentIndex,arr){所进行的计算})

[1,2,3,4,5].reduce(function(a,b){return a+b;});

var arr = [1, 2, 3, 4, 5, 6];
var arr1 = arr.reduce((a, b) => a + b);
console.log(arr1); //21

var arr2 = [
  {
     age: 18,
  },
  {
     age: 21,
  },
  {
     age: 32,
  },
];
var arr3 = arr2.map((item) => item.age).reduce((a, b) => a + b);
console.log(arr3); //71 
复制代码
文章分类
前端
文章标签