js常用数组方法整理

9 篇文章 1 订阅

这两天整理了下js常用的数组方法, 包括数组去重 冒泡排序等, 都是干货分享给大家:

push:向数组的末尾增加一项 返回值是数组的新长度
unshift:向数组开头增加一项 返回值是数组的新长度
pop:删除数组的末尾项 返回值是删除的数组项
shift:删除数组开头项 返回被删除的开头项目
splice:删除数组中的任意项 返回值是被删除的数组项
slice:复制数组 返回值是复制到的新数组 写上数值之后 不包含被复制的最后一项

concat:把一个数组和另一个数组拼接在一起 返回拼接好的数组
join:把数组中的每一项 按照指定的分隔符拼接成字符串

reverse:翻转数组顺序 返回值倒序数组 原有数组改变
sort:根据匿名函数进行冒泡排序 b-a倒序 a-b升序
filter() 方法返回数组中满足条件的元素组成的新数组,原数组不变

兼容性不好:
indexOf:返回获取项在数组中的索引,不会改变原数组,返回找到的index,否则返回-1
lastIndexOf:返回获取项在数组中出现的最后一次索引,返回找到的index,否则返回-1
forEach: 循环遍历数组 参数是一个匿名函数 默认返回为undefined
map:根据需求格式化原数组,返回格式化后的数组。原数组不变
every :对数组的每一项都运行给定的函数,若每一项都返回 ture,则返回 true
some :对数组的每一项都运行给定的函数,若存在一项或多项返回 ture,则返回 true
forEach:数组便历, 遍历整个数组,中途不能中断

ES6新增的方法:
find:找到数组中第一次满足条件的元素并返回,若找不到则返回undefined, 不改变原数组。
findIndex:作用同indexOf, 返回第一个满足条件的下标, 区别是findIndex的参数是一个回调函数, 一般用于对象数组
includes: 参数是否在数组内, 返回布尔值
Array.isArray:判断一个元素是否是数组

splice的拓展使用:
模拟push ary.splice(ary.length,0,x)
模拟pop ary.splice(ary.length-1,1)
模拟unshift ary.splice(0,0,x)
模拟shift ary.splice(0,1)
splice(0) 从0开始删除到末尾==>全部删除的操作 ==>返回所有数组项 ==> 克隆数组

各个方法具体的讲解如下:
1.push() 后增

push()方法可以向数组后添加一个新的元素,并返回新数组的长度。

末尾添加,返回长度,改变原数组

var a = [1,2,3]
var b = a.push(4)

console.log(a) // [1,2,3,4]
console.log(b) // 4
2.unshift() 前增

unshift()可以向数组前添加一个或多个元素,并返回新的长度

首部添加,返回长度,改变原数组

var a = [2,3,4]
var b = a.unshift(0,1)

console.log(a) // [0,1,2,3,4]
console.log(b) // 5
3.pop() 后删

pop() 用于删除并返回最后一个元素。

尾部删除,返回被删除的元素,改变原数组

var a = [1,2,3]
var b = a.pop()

console.log(a) // [1,2]
console.log(b) // 3
4.shift() 前删

shift() 用于删除并返回首个元素

删除首部元素,返回被删元素,改变原数组

var a = [1,2,3]
var b = a.shift()

console.log(a) // [2,3]
console.log(b) // 1
5. splice() 修该删除

splice(index,length,增加的元素1,增加的元素2…,增加的元素N) 表示从index开始删除length个元素,并从index开始新增元素1~N,放回被删除的元素组成的数组

对数组进行删除修改,返回被删除的元素组成的数组,改变原数组

var a = [1,2,3]
var b = a.splice(1,1,3,[2,3,4],5)

console.log(a) // [1,3,[2,3,4],5,3]
console.log(b) // [2]
6.concat() 拼接

concat() 方法用来合并两个或多个数组

合并两个或多个数组,返回新数组,不会改变原数组

var a = [1,2,3]
var b = [4,5]
var c = a.concat(b)

console.log(a) // [1,2,3]
console.log(b) // [4,5]
console.log© // [1,2,3,4,5]
7.slice() 剪切

slice(startIndex,endIndex) 返回从startIndex开始(包括),到endIndex(不包括)之间的原属组成的数组

返回新数组,不改变原数组

var a = [1,2,3]
var b = a.slice(0,1)
// 不填参数则表示剪切整个数组
var c = a.slice()
console.log(a) // [1,2,3]
console.log(b) // [1]
console.log© // [1,2,3]
console.log(a=c ) // false // 注意 a ! c

// 负数表示从后往前数
var d = a.slice(-1,-2)
console.log(d) // [] 从左向右截取,所以说为[]

var e = a.slice(-1)
console.log(e) // [3]
8.join()

join() 方法用来将数组转换为字符串

不改变原数组,返回转换后的字符串


var a = [1,2,3,4,5]

console.log(a.join(’,’)) // 1,2,3,4,5
console.log(a) // [1,2,3,4,5]


9.sort() 排序

按ascii码排序

改变原数组,返回排序后的数组

var a = [‘a’,‘b’,‘d’,‘c’]

console.log(a.sort()) // [‘a’,‘b’,‘c’,‘d’]
console.log(a) // [‘a’,‘b’,‘c’,‘d’]

降序排序:
console.log(a.sort(function (a, b) ) {
return b-a;
}) //[‘d’, ‘c’, ‘b’, ‘a’ ]

10.reverse() 颠倒顺序

reverse() 方法用于颠倒数组中元素的顺序。

返回的是颠倒后的数组,会改变原数组。

var a = [1,3,2,7,6]

console.log(a.reverse()) // [6,7,2,3,1]
console.log(a) // [6,7,2,3,1]
11.indexOf()和lastIndexOf()

indexOf(某元素,startIndex) 从startIndex开始,查找某元素在数组中的位置,若存在,则返回第一个位置的下标,否则返回-1

lastIndexOf(某元素,startIndex) 和indexOf()相同,区别在于从尾部向首部查询

不会改变原数组,返回找到的index,否则返回-1

若不使用下标,则一般通过includes()方法代替indexOf()

var a = [1,2,4,3,4,5]

console.log(a.indexOf(4)) // 2
console.log(a.indexOf(4,3)) // 4
12.filter() 过滤

filter() 方法返回数组中满足条件的元素组成的新数组,原数组不变

filter()的参数是一个方法

var a = [1,2,3,4,11]
// 第一个参数为一个方法,有三个参数,current:当前值 index:当前值下标 array:这个数组对象
var b = a.filter(function(current,index,array){
return current < 10
})

console.log(b) // [1,2,3,4]
console.log(a) // [1,2,3,4,11]
13.map() 格式化数组

map() 方法来根据需求格式化原数组,返回格式化后的数组。原数组不变

var a = [1,2,3,4,5]
// 参数同filter方法
var b = a.map(function(current,index,array){
return current + 1
})

console.log(b) // [2,3,4,5,6]
console.log(a) // [1,2,3,4,5]
14.every()

对数组的每一项都运行给定的函数,若每一项都返回 ture,则返回 true

var a = [1,2,3,4,5]

var b = a.every(function(current,index,array){
return current < 6
})

var c = a.every(function(current,index,array){
return current < 3
})
console.log(b) // true
console.log© // false
15.some()

对数组的每一项都运行给定的函数,若存在一项或多项返回 ture,则返回 true

var a = [1,2,3,4,5]

var b = a.some(function(current,index,array){
return current > 4
})

var c = a.some(function(current,index,array){
return current > 5
})
console.log(b) // true
console.log© // false
16.forEach() 数组遍历

遍历整个数组,中途不能中断

var arr = [‘a’,‘b’,‘c’]
var copy = []
arr.forEach(function(item){
copy.push(item)
})
console.log(copy)
ES6新增的方法

  1. find()

找到数组中第一次满足条件的元素,并返回,若找不到则返回undefined。不改变原数组。

和filter()方法的区别在于:filter返回值是所有满足条件的元素组成的数组,

一般在需要使用找到的元素时,用find()方法

var a = [1,2,3,4]
// b在下面需要使用,则一般用find
var b = a.find(function(ele,index,array){
return ele == 1
})

var c = 3
var d = b + c
console.log(a) // [1,2,3,4]
console.log(b) // 1
console.log(d) // 4

// 若只需判断元素是否存在
// 若果是简单数组(非对象数组),则一般使用Array.includes(value)方法
// 如果为对象数组,则可以使用Array.some()方法

var a = [1,2,3]
console.log(a.includes(1)) // true

var a = [{“name”: “xiaoming” },{“name”: “xiaohong”}]

console.log(a.some(function(ele){
return ele.name == ‘xiaoming’
})) // true

2.findIndex()方法

findIndex()的作用同indexOf(),返回第一个满足条件的下标,并停止寻找。

区别是findIndex() 的参数为一个回调函数,且一般用于对象数组

var a = [1,2,3,4]

var b = a.findIndex(function(ele,index,array){
return ele === 2
})

var c = a.indexOf(2)

console.log(a) // [1,2,3,4]
console.log(b) // 1
console.log© // 1
3.includes()

includes()方法,返回一个布尔值。 参数是一个value,一般用于简单数组。

对于复杂数组,则可以使用some()方法替代includes()方法

var a = [1,2,3]
console.log(a.includes(1)) // true
4.Array.isArray()方法

用来判断一个元素是否为数组

Array.isArray([]) // true
Array.isArray({}) // false

数组去重的几种常见方法:
一 创建空数组利用indexOf方法检测就数组的项是否在新数组中。

  • IE8以下不支持数组的indexOf方法
 Array.prototype.unique = function(){
    var arr=[]
    for(var i = 0;i < this.length;i++){
      if(arr.indexOf(this[i])==-1){
        arr.push(this[i])
      }
    }
   return arr
}
var a=[1,3,2,2,4,6,5]
uniq(a) //[1, 3, 2, 4, 6, 5]

二、创建空数组和空对象,判断数组是否在对象中

   Array.prototype.unique = function(){
        var arr=[],tmp={}
        for(var i = 0;i < this.length;i++){
          if(!tmp[this[i]]){
            tmp[this[i]]=true
            arr.push(this[i])
          }
        }
        return arr
    }
    var aa =[1,3,2,2,4,6,5]
    console.log(uniq(aa));  //[1, 3, 2, 4, 6, 5]

三、排序后在去重

/*
* 给传入数组排序,排序后相同值相邻,
* 然后遍历时,新数组只加入不与前一值重复的值。
* 会打乱原来数组的顺序
* */
Array.prototype.unique = function(){
    var arr=[]
    this.sort()
    for(var i = 0;i < this.length;i++){
      if(this[i]!==arr[arr.length-1]){
          arr.push(this[i])
      }
    }
    return arr
  }
  var aa = [1,3,2,2,4,6,5]
  console.log(aa.unique())

四、下标判断法

 Array.prototype.unique = function(){
    var arr=[]
    for(var i = 0;i < this.length;i++){
      if(this.indexOf(this[i])===i){
        arr.push(this[i])
      }
    }
    return arr
  }
  var aa = [1,3,2,2,4,6,5]
  console.log(aa.unique())

五、优化遍历数组法

 Array.prototype.unique = function(){
    var arr=[]
    for(var i = 0; i < this.length; i++){
      for(var j = i+1; j < this.length; j++){
        if(this[i]===this[j]){
          i++
          j=i
        }
      }
      arr.push(this[i])
    }
    return arr
  }
  var aa = [1,3,2,2,4,6,5]
  console.log(aa.unique())

六、黑科技es6 new Set数组去重

Array.prototype.unique = function(){
    return Array.from(new Set(this))
  }
  var aa = [1,3,2,2,4,6,5,5,7]
  console.log(aa.unique())

冒泡排序:

function BullbleSort (arr) {
  for(var i =0;i<arr.length-1;i++){
    for(var j=0;j<arr.length-1-i;j++){
      if(arr[j]>arr[j+1]){
        let tmp = arr[j]
        arr[j] = arr[j+1]
        arr[j+1] = tmp
      }
    }
  }
  return arr
}    
var  a=[2,1,3,0,5,6]
BullbleSort(a)
console.log(a)  // [0, 1, 2, 3, 5, 6]

快速排序 二分法,找到中间的数,取出来(新数组),原数组没,每次和此数比较,小的放到左边,大的放到右面

function quickSort(arr) {
        if(arr.length<=1){return arr}
        var a = Math.floor(arr.length/2),
        b = arr.splice(a, 1)[0],
        left = [],
        right = []
        for(var i = 0; i<arr.length; i++){
          if(arr[i]< b){
             left.push(arr[i])
          } else {
            right.push(arr[i])
          }
        }
        return quickSort(left).concat(b, quickSort(right))
      };
       var a=[2,1,300,5,6,9,2,5,100]
       console.log(quickSort(a))  //[1, 2, 2, 5, 5, 6, 9, 100, 300]
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值