JS对数组的操作

向数组中添加值(Add)

向数组尾部添加值 push
向数组头部添加值 unshift
在指定的索引位置添加 splice
array.splice(start, ?deleteCount, …items)

> var arr = [1,2,3]
> arr.push(4)
> console.log(arr)
< (4) [1, 2, 3, 4]
>
> arr.unshift(0)
> console.log(arr)
< (5) [0, 1, 2, 3, 4]
>
> arr.splice(2, 0 , 'a')
> console.log(arr)
< (6) [0, 1, "a", 2, 3, 4]

删除数组中的值(delete)

从数组尾部删除值 pop
从数组头部删除值 shift
从指定的索引位置删除 splice

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

> arr.shift()
> console.log(arr)
< (3) [2,3,4]

> arr.splice(2,1)
> console.log(arr)
< (2) [2,3]

修改数组中的值

修改指定索引位置的值 splice
遍历数组修改值,存在两种方式
1、改变原数组的值
arr.map(callbackFn, ?this.Arg)
2、不改变原数组的值
array.forEach(callbackFn, ?thisArg)

> var arr = [1,2,3,4,5]
> arr.splice(2,1,'a')
> console.log(arr)
< (5) [1,2,'a',4,5]

> var arr2 = arr.map((value, index) => {return index + 2} )
> console.log(arr)
< (5) [1, 2, "a", 4, 5]
> console.log(arr2)
< (5) [2, 3, 4, 5, 6]

> var arr3 = arr.forEach((value, index, arr) => {arr[index] = index + ':' + value})
> console.log(arr)
< (5) ["0:1", "1:2", "2:a", "3:4", "4:5"]
> console.log(arr3)
< undefined

与 forEach 相关的函数:

  • $.each 遍历数组和对象
  • for in 遍历对象

$.each(array, callbackFn)
for(var key in obj)

查询数组中的值

array.indexOf( item )
array.find( predicate, ?thisArg )
array.findIndex( predicate, ?thisArg )
遍历查找 forEach for


> var arr = [1,2,3,4,5]
> arr.indexOf(5)
< 4
> arr.find((value, index, arr)=>{if(value == 5) console.log(index)})
< 4
> arr.findIndex((value,index)=>{return value == 5})
< 4

找出数组中的最大最小值

原生方法
扩展原型方法(自己实现)

> Math.max(1,2,3,4,5)
< 5
> Math.min(1,2,3,4,5)
< 1
> var arr = [1,2,3,4,5]
> Math.max(...arr)
< 5

> Array.prototype.max = function() {
	 var max = this[0]
	 for (var i = 0; i < this.length; i++) {
	   	 if( this[i] > max ) {
			 max = this[i]
		 }
	 }
	 return max;
 }
> arr.max()
< 5

对数组进行排序

原生排序函数 sort() reverse()
(需要特别注意对数字的排序)
复杂数据使用常见算法实现排序

> var arr = [2,5,1,4,'a',3,11]
> arr.sort()
< (7) [1, 11, 2, 3, 4, 5,"a"]
//这时候需要用到sort的参数
> var compare = function(x,y) {
 	if(x>y) return 1
 	else if(x<y) return -1
 	else return 0
  }
> arr.sort(compare)
< (7) [1, 2, 3, 4, 5, 11, "a"]
> arr.reverse()
< (6) ["a",5, 4, 3, 2, 1]

更多的算法实现方式见:我还没开始写,所以参考一个写得很好的

数组去重

ES6常用去重方式:Set – 不能去掉重复的object
( ES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。)
ES5常用去重方式:双重 for 循环,使用 split 去掉重复的值
indexOf 去重 – 创建一个空的结果数组,for 循环旧数组,在新数组中加入没有的值

> var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
> var uniqueArr = new Set(arr)
> console.log(uniqueArr)
// {} 没有去重
< Set(13) {1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {}, {}}

> function uniqueArrFn(arr) {
 	for(let i = 0; 1 < arr.length; i++) {
        for(let j = i+1; j < arr.length; j++) {
      	    if(arr[i] == arr[j]) {
      	  	    arr.splice(j, 1)
      	  	    j--
      	    }
        }
    }
    return arr
  }
> console.log(uniqueArr(arr))
// NaN {} 没有去重,true null 0 直接消失啦
< (11) {1, "true", 15, false, undefined, NaN, NaN, "NaN", "a", {}, {}]

> var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
 > function uniqueArr(arr) {
  	  if(!Array.isArray(arr)) {
  	      return "type error"
  	  }
  	  var newArr = []
  	  for(let i = 0; i < arr.length; i++) {
  	  	  if(newArr.indexOf(arr[i]) === -1) {
  	  	      newArr.push(arr[i])
  	  	  }
  	  }
  	  return newArr
  }
> console.log(unique(arr))
// NaN {} 没有去重,true null 0 直接消失啦
< (11) {1, "true", 15, false, undefined, NaN, NaN, "NaN", "a", {}, {}]

参考很全面的JS去重方法

将数组拼接成字符串

join
array.join()

> var arr = ['hello','xiao','ban','deng']
> console.log(arr.join(" "))
< hello xiao ban deng

合并数组

concat 连接两个或多个数组
array.concat(…items)
for 循环将值一个个push到另一个数组

> var arrA = [1,2,3]
> var arrB = [4,5,6]
> var arrC = [7,8,9]
> console.log(arrA.concat(arrB))
< (6) [1, 2, 3, 4, 5, 6]
> console.log(arrA.concat(arrB, arrC))
< (9) [1, 2, 3, 4, 5, 6, 7, 8, 9]

拷贝数组

面试中最常考–深拷贝浅拷贝的差别与实现
深拷贝与浅拷贝都只针对引用类型
浅拷贝:浅拷贝是拷贝一层,深层次的对象级别的就拷贝引用
深拷贝:深拷贝是拷贝多层,每一级别的数据都会拷贝出来

详情参考:先参考一下别人写得很好的对象的拷贝博客

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值