js中常见的Array方法总结

阳天98
188 阅读8分钟

1.concat()

合并数组，可以合并一个或多个数组，会返回合并数组之后的数据，不会改变原来的数组

 var str1= [12,2,"hello"]; var str2 = ["world"];
    var str3 = str1.concat(str2)
    console.log(str1)
    console.log(str2)
    console.log(str3)

2.join()

将数组转换为字符串并返回转化的字符串数据，不会改变原来的数组；

  var str1 = [12,3,4,5,"dscscc",124]
    console.log(str1.join('-'))

3.pop()

删除数组的最后一位，并返回删除的数据，会改变原来的数组

  var str1 = [12,2,"ewsdsd"]
    console.log(str1.pop())
    console.log(str1)

4.shift()

删除数组的第一位数据，并返回新数组的长度，会改变原来的数组

  var str1 = [12,33,3,2,5,65,"as"]
    console.log(str1.shift())
    console.log(str1)

5.unshift()

在数组的首位新增一个或多个数据，并返回新数组的长度，会改变原来的数组

 var str1 = ["1a",23,345,567,123,12,768]
    console.log(str1.unshift(2989))
    console.log(str1)

6.push()

在数组的最后一位新增一个或多个数据，并返回新数组的长度，会改变原来的数组 注意：push()方法返回的数据是新数组的长度，它增加的数据可以是一个也可以是多个

 var str1 = [12,2,"swef"]
    var str2 = [43,2,"test"]
    console.log(str1.push(str2)) // 结果为4，将str2当作子元素添加
    console.log(str1)

7.reverse()

将数组的数据进行反转，并且返回反转后的数组,会改变原数组

 var str1 = [12,"dds",123,567,68,56]
    console.log(str1.reverse())

8.sort() 对数组内的数据进行排序(默认升序)，并且返回排序过的新数组，会改变原来的数组

   var arr=[2,12,4,4,3,67,7]
    //普通写法
    function fn(a,b){
      return a-b
    }
    console.log(arr.sort(fn))
   // 箭头函数写法
   // 注意：使用箭头函数方法时，要有返回值，否则会报错
    console.log(arr.sort((a,b) => return a-b

9.slice()

截取指定位置的数组，并且返回截取的数组，不会改变原数组 参数：slice(start,end),参数均可为负，含头不含尾

  var arr = ["T1","ds","ws","cc"]
    console.log(arr.slice(1,3))

10.splice

向数组中添加，或从数组中删除，或替换数组中的元素，然后返回被删除/替换的元素, 并且在删除元素的位置添加上被替换的元素 语法：splice(start,num,data1,data2...);所有参数全部可选 该方法会改变原数组

var arr = ["dsc","dcsd","sdd","sazx","asa"]
console.log(arr.splice(2,1,6,7,'a','b'));
console.log(arr)

11.toString()

将数组转化为字符串,不会改变原数组

 var arr = [1,2,4,6,7]
console.log(arr.toString())

12.valueOf()

返回数组的原始值，即数组自身

var str = [1,2,3,4]
console.log(str.valueOf())
console.log(str.valueOf() === str)

13.IndexOf()

根据指定的数据，从左向右，返回该数据在数组中首次出现的位置， 如果不存在指定的数据，返回-1，找到了指定的数据返回该数据的索引 参数:indexOf(value,start); value 为要查询的数据,start 为可选值，表示开始查询的位置 当 start 为负数时，从数组的尾部向前数，如果查询不到 value，则返回-1

var str = ["d","e","a","w","g","q"]
console.log(str.indexOf("a"))

14.lastIndexOf()

lastIndexOf() 方法可返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。

15.forEach();

1.用来遍历数组，不会修改原数组；但是可以通过数组的索引来修改原来的数组；

var arr = [1,2,5,6]
arr.forEach((num, index) => {
 return arr[index] = num * 2;
});
//[2,4,10,12]

2.forEach()方法用于调用数组中的每个元素，并将元素传递给回调函数； 3.forEach()对空数组是不会执行回调函数的；遍历空数组不会报错

语法：arr.forEach(function(value,index,self){}) value:遍历到的数组的数据 index:对应的索引 self:数组自身

var arr = ["tom","dss","df","aw","as"];
var a = arr.forEach(function(value,index,self){
console.log(value + "--" + index + "--" + (arr ===self))
})
console.log(a)

forEach 可以使用 return,但是不支持 continue 和 break 语句

 var arr = []
  arr.forEach(item => {
    if(item ===3) {
      return
      // break
    }
    console.log(item)
  })

16.map()

同 forEach 功能相同， 1.将所有的执行结果组成新的数组返回, 2.map 方法需要 return 才有返回值 语法 arr.map(function(value,index,self){}) callback 默认有三个参数，分别为

var arr = ["Tom","Jack","dcds","sds","wds"];
var a = arr.map(function(value,index,self){
console.log(value+"---"+index+"---"+self)
return(value+"---"+index+"---"+self)
})
console.log(a)

17.filter()

语法：array.filter(function(currentValue,index,arr), thisValue) 参数含义同上

  • 1.filter()方法会返回一个新数组，原数组的每个元素传入回调函数中，
  • 2.回调函数中有 return 返回值，若返回值为 true，这个元素保存到新数组中；
  • 3.若返回值为 false，则该元素不保存到新数组中；原数组不发生改变。 eg:
  • 1.利用 filter 遍历出所有的偶数
let arr = [55,65,23,56,53,1,32,343]
let newArr = arr.filter((value,index,arr) => value % 2 === 0)
console.log(newArr)
  • 2.利用 filter 进行数组去重：
function unique(arr) {
return arr.filter((value,index,arr) => arr.indexOf(value,0) === index)
}
var arr = [1,1,"ds","ds",3,5,5,5,5,5]
console.log(unique(arr))
// 题解思路，不懂了就再看几遍
 // indexOf(value,start)
 // indexOf返回的是该数据在数组中首次出现的位置
 // value表示要查询的值，start表示开始的位置
 // 从第0个元素开始检查
 // filter方法若返回值为true，这个元素保存到新数组中；
 // 当该元素出现过时
 // console.log(index)
 // 返回数据之后就不会对后边的数据进行比较了
  // 1   在indexOf的检索中 1的索引是0,等于当前元素的索引，判断为true，返回该值
  // 1   在indexOf的检索中 1的索引依然是0, 不等于第二个元素的index，因此不符合条件，判断为false,不返回该值
  // 'ds' 在indexOf的检索中,'ds'1的索引是2,
  • 3.筛选数组对象
let arr = [
{a:'苹果',b:'桃子',c:'吃'},
{a:'香蕉',b:'面包',c:'不吃'},
{a:'香蕉',b:'苹果',c:'吃'},
{a:'苹果',b:'菠萝',c:'不吃'},
]
console.log(arr.filter(item => item.a ==='苹果'))
  • 4.去掉数组中不符合项
// 返回数组中大于 40 的项
var arr = [1,2,3,4,5,34,546,565]
var newArr = arr.filter(item => item>40)
console.log(newArr)

18.every()

判断数组中每一项是否都满足指定条件(该条件为一个函数)；

every()方法会遍历数组中的每一项，如果有一项不满足条件，则表达式返回 false 剩余的项将不会再执行检测，

如果遍历完数组后，每一项都符合条件，则返回 true;

  • 语法：array.every(function(currentValue,index,arr),thisValue)
  1. 第一个参数为一个回调函数，必传，数组中的每一项都会遍历执行该函数。
  • currentValue：必传，当前项的值

  • index：选传，当前项的索引值

  • arr：选传，当前项所属的数组对象
  1. 第二个参数 thisValue 为可选参数，回调函数中的 this 会指向该参数对象。
  2. 注意：若收到一个空数组，则在任何情况下都会返回 true every()不会改变原始数组 eg:
var arr = [100,200,300,400]
var flag = arr.every((a,b,c) => a>10)
console.log(flag) // true

19.some()

与 every 语法相似，不同的是，有一项为 true，则返回 true

var arr = [100,200,300,400]
var flag = arr.some((a,b,c) => a>10)
console.log(flag)

区别： some 一直在找符合条件的值，一旦找到，则不会继续迭代下去。 every 从迭代开始，一旦有一个不符合条件，则不会继续迭代下去。

console.log([1,3,4,5,6].some(a => a > 5)) // true

20.reduce()

  • 语法:

    arr.reduce(function(prev,cur,index,arr){...}, init);

  • arr 表示原数组；

  • prev 表示上一次调用回调时的返回值，或者初始值 init;

  • cur 表示当前正在处理的数组元素；

  • index 表示当前正在处理的数组元素的索引，若提供 init 值，则索引为 0，否则索引为 1；

  • init 表示初始值；(如果没有提供初始值，则将使用数组中的第一个元素)

常用的参数是 perv 和 cur

  • eg1:求数组项之和
var arr = [3,4,6,2,56,6]
var sum = arr.reduce((prev,curr)=>prev+curr,0)
console.log(sum)
  • eg2:求数组项最大值
var arr = [3,4,6,2,56,6]
var max = arr.reduce(function(prev,curr){
return Math.max(prev,curr)
},[] )
console.log(max)
  • eg3:数组去重
var arr=[1,1,1,2,3,3,4,4,4,4,]
var newArr = arr.reduce(function(prev,curr){
// prev 代表初始值，初始值传入了一个数组
// 当数组中不存在当前正在遍历的值时，将这个值添加到数组中，并且将这个值添加到数组中
prev.indexOf(curr) === -1 && prev.push(curr)
// 注意:回调函数得有返回值
return prev
},[])
console.log(newArr)

21.entries()

entries() 方法返回一个新的 Array Iterator 对象，包含数组中每个索引的键/值对。 该对象的原型上有个 next()方法，可用用于遍历迭代器取得原数组的[key,value] eg:

let arr = [1, 2, 3, 4, 5, 6, 7]
let arr1 = arr.entries() // 返回一个新的迭代器对象
console.log(arr1.next().value)  // [0,1]   调用它的next()方法，获取value,调用一次获取一个值

使用 for...of 循环数组

var arr = ['a','b','c','d']
var iterator = arr.entries();
for(let e of iterator){
  console.log(e)
}

22.fill()

用一个固定的值填充数组中的元素 语法： arr.fill(value,start,end) value:用来填充数组的元素 (必填) start:起始索引，默认从 0 开始 (可选） end:终止索引，默认值为 arr.length,即数组的最后一个元素(可选) 注意：填充元素包含 start，不包含 end

console.log([1,2,3,4,5].fill(1,2,3)) // [1, 2, 1, 4, 5]
consoe.log([2,3,6,7,3,1].fill(1,2)) // [2, 3, 1, 1, 1, 1]
console.log([3,1,,3,4].fill(6)) // [6, 6, 6, 6, 6]

23.flat()

按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回 语法:var newArray = arr.flat([depth]) depth:指定要提取嵌套数组的结构深度，默认值为1

var arr = [1,3,[4],[5,[6,[7,[8,[9,[10]]]]]]]
console.logarr.flat(4) // [1, 3, 4, 5, 6, 7, 8, [9,[10]]]

flat()方法会移除数组中的空项

var arr = [1,,2,3,4,[5]]
console.log(arr.flat())

24.includes()

判断一个数组中是否包含一个指定的值，如果包含则返回true,否则返回false 语法： arr.includes(value,fromIndex) 参数： value:要查找的值 fromIndex:从第几个索引开始找起

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

总结：

  • js 中会改变原数组的方法有： push() pop() shift() unshift() splice() sort() reverse() fill()
avatar
文章
阅读
粉丝