js 数组详细操作方法

在开发中,经常会遇到数组相关的操作,今天在这里整理一下,以便后面用到。
第一类:会改变原数组的方法集合
包括
ES5:
a.pop()/ a.shift()/ a.push()/ a.unshift()/ a.reverse()/ a.splice()/ a.sort()
ES6:
a.copyWithin() / a.fill
在循环中避免使用这些方法

  • a.pop() 作用是删除数组中的最后的一个元素,并且返回这个元素。
      var fruits=['apple','banana','orange','111'];
      console.log(fruits.pop());//111
      console.log(fruits);//'apple','banana','orange'
  • a.shift() 作用是删除数组的第一个元素,并返回这个元素。
      var fruits=['apple','banana','orange','111'];
      console.log(fruits.shift());//apple
      console.log(fruits);//'banana','orange','111'
  • push() 向数组的末尾添加元素
    push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。

参数: item1, item2, …, itemX ,要添加到数组末尾的元素

      var fruits=['apple','banana','orange','111'];
      console.log(fruits.push('12','34','56'));
      console.log(fruits);

在这里插入图片描述

  • unshift() 作用是向数组的开头添加一个或更多元素,并返回新的长度。
      var fruits=['apple','banana','orange','111'];
      arr=['12','34','56']
      console.log(fruits.unshift(...arr));
      console.log(fruits);

在这里插入图片描述

  • a.reserve() 颠倒数组中元素的顺序
let a = [1,2,3];
a.reverse(); 
console.log(a); // [3,2,1]
  • 比较splice()和slice()
    splice() 向或者从数组中添加或者删除项目,返回被删除的项目
    slice() 从已有数组中返回选定的元素,返回一个新数组(不改变原数组,不能做添加操作。)
array.splice(index,howmany,item1,.....,itemX)
index:必需。整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置。
howmany:必需。要删除的项目数量。如果设置为 0,则不会删除项目。
item1, …, itemX: 可选。向数组添加的新项目。

只删除

var fruits=['apple','banana','orange','111','liujie'];
console.log(fruits.splice(0,2));//从下标为0开始,删除2项
//["apple", "banana"]
console.log(fruits);//["orange", "111", "liujie"]

删除并添加

     var fruits=['apple','banana','orange','111'];
    fruits.splice(0,2,'添加了');//从下标为0开始,删除2项
    console.log(fruits);
var fruits=['apple','banana','orange','111','liujie'];
console.log(fruits.splice(4,0,'你好'));//从下标为4添加一项
console.log(fruits);
//["apple", "banana", "orange", "111", "你好", "liujie"]
  • sort()方法对数组元素进行排序,并返回这个数组
    默认情况下sort()方法对字符串数组,默认按字母升序。
    对纯数字的数组,会调用toString()方法将元素转化为字符串的Unicode(万国码)位点,然后再比较字符。但是这不是我们想要的。
    arr=[12,32,11,2,45,123,78,9,56];
    console.log(arr.sort());
    console.log(arr);

在这里插入图片描述
sort怎么对纯数字的数组排序?,我们可以自己指定排序规则,见下:
sort方法中添加一个回调函数,来指定排序规则,通常该回调函数中需要定义两个形参,浏览器会分别使用数组中的元素作为实参去调用回调函数,根据回调函数的返回值来决定元素的交换顺序。
如果返回正数 则不调换位置
如果返回负数 则调换位置,见下面例子。
如果返回0 则忽略

    arr=[4,67];
    arr.sort(function(a,b){
      console.log("a="+a);//第二个值
      console.log("b="+b);//第一个值
      return -1
    }) 
    console.log(arr);//67 4

可做如下修改:

arr2.sort(function (a,b) {
        // console.log(a,b);
        // a是第二个值,b是第一个值
        // 也就是说 sort接受一个返回值  如果返回的是正数,不调换,升序
        return a-b//是升序    
        return b-a;  //降序
    })
  • copyWithin() 指定位置的成员复制到其他位置

array.copyWithin(target, start = 0, end = this.length)

三个参数都是数值,如果不是,会自动转为数值.

target(必需):该位置开始替换数据。如果为负值,表示倒数。
start(可选):从该位置开始读取数据,默认为 0。如果为负值,表示倒数。
end(可选):到该位置前停止读取数据,默认等于数组长度。使用负数可从数组结尾处规定位置。

var fruits=['apple','banana','orange','111','liujie'];
console.log(fruits.copyWithin(2,1));//将target(下标为2的orange)替换为下标为1(banana)
  • fill() 填充数组
    第一个元素(必须): 要填充数组的值;
    第二个元素(可选): 填充的开始位置,默认值为0
    第三个元素(可选):填充的结束位置,默认是为this.length
arr=['11','liu','hhh','123','aa'];
console.log(arr.fill('你好'));

在这里插入图片描述

第二类 :不改变原数组的方法(8个):

ES5:
join、toLocateString、toStrigin、slice、cancat、indexOf、lastIndexOf、
ES7:
includes

  • join() 方法用于把数组中的所有元素通过指定的分隔符进行分隔放入一个字符串,返回生成的字符串
let a= ['hello','world'];
let str=a.join(); // 'hello,world'
let str2=a.join('+'); // 'hello+world'
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值