JS数组及数组中常用方法（更新至es15）

小妖现世
282 阅读6分钟

JS数组常用方法

Object.fromEntries()

  • 将有效键值对列表转换为一个对象
const objArr = [['name', 'xiaomei'], ['age', 18]];  
const obj = Object.fromEntries(entries);  
console.log(obj); // { name: 'xiaomei', age: 18 }

at

  • 获取数组的某一元素
const arr = [1,2,3]
console.log(arr.at(1)) // 2

toSorted

  • 返回一个新数组，其元素按升序排列
const arr = [9, 8, 5, 1]
console.log(arr.toSorted()) // [1, 5, 8, 9]

toReversed

  • 返回一个元素顺序相反的新数组。
const arr = [1, 5, 8, 9]
console.log(arr.toReversed()) // [9, 8, 5, 1]

toSpliced

  • splice的复制版，返回一个新数组，并在给定的索引处删除和/或替换了一些元素。
const arr = [1, 5, 8, 9]
console.log(arr.toSpliced(1, 2, 'x')) // [1, 'x', 9]

with

  • 不改变原数组更改数组中某个元素。
const arr = [1, 5, 8, 9]
console.log(arr.with(2, 5)) // [1, 5, 5, 9]

push：

  • 作用：向数组的末尾追加元素
  • 参数（@params）：追加的项，多个任意类型
  • 返回值（@return）：新数组的长度
  • 是否改变原数组：改变
var ary=[1,2,3];
var res=ary.push(4,'aa',{name:'name'});
console.log(ary,res);   //[1,2,3,4,"aa",{name:"name"}] 6

unshift:

  • 作用：向数组的开头追加内容
  • @params：追加的项，多个任意类型
  • @return：新数组的长度
  • 是否改变原数组：改变
var ary=[1,2,3];
var res = ary.unshift(4);
console.log(ary,res);  //[4,1,2,3] 4

shift:

  • 作用：删除数组第一项
  • @params：无
  • @return：删除的项
  • 是否改变原数组：改变
var ary=[1,2,3];
ary.shift();  //1
console.log(ary);  //[2，3]

pop:

  • 作用：删除数组的最后一项
  • @params：无
  • @return：删除的项
  • 是否改变原数组：改变
var ary=[1,2,3];
ary.pop();
console.log(ary);  //[1,2]

splice(n,m,x):

  • 作用：选中从索引n开始（包含n），删除m项，用x的内容进行替换(基于splice实现删除性能不好，当前项被删后，后面每一项的索引都要向前提一位，如果后面内容过多，影响性能)
  • @params：

n,m都是数字从索引n开始删除m个元素（m不写，是删除到末尾）;
n,m,x 从索引n开始删除m个元素，用x占用删除的部分;
n,0,x 从索引n开始，一个都不删，把x放到索引n的前面

  • @return：把删除的部分用新数组存储起来返回
  • 是否改变原数组：改变

删除

var ary=[1,2,3,4,5];
ary.splice(0,1);
console.log(ary); //[2,3,4,5]；

新增

var ary=[1,2,4,3];
//基于这种方法可以清空一个数组，把原始数组中的内容以新数组存储起来（有点类似数组克隆）
var res=ary.splice(0);//数组清空
console.log(ary,res);//[] [1, 2, 3]
ary.splice(n,0,x);在索引n的前面添加了x项
ary.splice(0,0,99);  
console.log(ary);  // [99,1,2,4,3]
//向数组末尾追加
ary.splice(ary.length,0,'AA');

slice（n,m）：实现数组查询

  • 作用：选中从索引n开始（包含n）到m项（不包含m）,slice(0)或者slice() 相当于复制了原数组（浅克隆） 如果n和m为负值，倒着索引之后，正着取值
  • @params：n，m
  • @return：把找到的内容以一个新数组形式返回
  • 是否改变原数组：不改变
var ary=[1,2,3,4];
var res=ary.slice(1,3);
console.log(res);//[2,3]

concat:

  • concat
  • 作用：拼接数组
  • @params：多个任意类型值
  • @return：拼接后的新数组
  • 改变原数组：不改变
var ary1=[1,2,3,4];
var ary2=[4,5,6,7];
var ary3=ary1.concat(ary2);
console.log(c);  //[1, 2, 3, 4, 4, 5, 6, 7]

toString:

  • 作用：把数组转换为字符串
  • @params：无
  • @return：转换后的字符串
  • 是否改变原数组：不改变
var ary=[2,34,56];
var res=ary.toString(); //"2,34,56"

join:

  • 作用：把数组转换为字符串，按照指定的分隔符把数组中的每一项连接起来变成字符串
  • @params：连接符
  • @return：拼接后的字符串
  • 是否改变原数组：不变
var ary=[1,2,3,4];
var res=ary.join("-");  //“1-2-3-4”

Tips:eval()可以把运算符拼接的字符串变为JS表达式执行

indexOf/lastIndexOf:

  • 作用：检测当前项在数组中第一次或最后一次出现的位置 获取某项在数组中首次出现/最后出现的索引（也可以用来查看是否包含某项）
  • @params：(n,m) n:检测的项 m:如果是indexOf的话，就是从索引m开始检索，是lastIndexOf的话，就是从索引m停止检索
  • @return：对应的索引，如果此项中没有，返回值就是-1
  • 是否改变原数组：不改变
var ary=[1,1,1,3,3,3,4,5,6,6]
ary.indexOf(1);//0
ary.lastIndexOf(9);//-1

includes:

  • 作用：看是否包含某项
  • @params：某项
  • @return：布尔
  • 改变原数组；不改变
var ary=[1,2,4];
ary.includes(100);  //false
[1,2,3,4].includes(1); //true
ary.includes(4);//存在返回true，不存在false

reverse:

  • 作用：把数组中元素的倒序排列
  • @params：无
  • @return：倒序的数组
  • 是否改变原数组：改变
var arr = [9,3,6,77];
console.log(arr.reverse());//[77, 6, 3, 9]

sort:

  • 作用：排序
  • @params：无/函数
  • @return:排好序的数组
  • 是否改变原数组：改变
var ary=[4,5,1,2,9]
ary.sort();  //[1,2, 4, 5, 9]，不写参数，只能排10以内的
console.log(ary);  //[1,2, 4, 5, 9]
//想要实现多位数正常排序，需要给sort传递一个函数，函数中返回a-b实现升序，返回b-a实现降序
升序：（含有10以上的）
var ary=[11,34,55,2,6];
ary.sort(function(a,b){
    return a-b;
 });
ary.sort((a,b)=>a-b);//改写箭头函数
//降序：
var ary=[11,34,55,2,6];
ary.sort(function(a,b){
    return b-a;
});
ary.sort((a,b)=>b-a);//改写箭头函数

filter

  • 作用：方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素
  • @params:
    • currentValue:必须，当前元素的值
    • index：可选，当前元素索引
    • arr：可选，当前元素属于的数组对像
  • #return：返回新数组

filter()：不会对空数组进行检测，不会改变原始数组，把回调函数return值复制一份放到新数组中

let arr=[1,2,3,4];
let res=arr.filter((item)=>{
    return item>2;
})
console.log(res);//[3,4]
//filter重写
Array.prototype.myfilter=function myfilter(callback){
    if(!Array.isArray(this) || !this.length || typeof callback!=='function'){
        return [];
    }else{
        let res=[];
        for(let index=0;index<this.length;index++){
            let item=this[index];
            if(callback(item,index,this)){
                res.push(item);
            }
        }
        return res;
    }
}

reduce

  • 作用：方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素
  • @params:
    • total:必须，初始值或者计算结束后的返回值
    • currentValue：必须，当前元素
    • currentIndex：可选，当前元素索引
    • arr：可选，当前元素所属数组对象
  • #return：返回新数组
  • 方法对数组中的每个元素执行一个由您提供的reducer函数（升序执行），将其结果汇总为单个返回值

reduce() 对于空数组是不会执行回调函数的。

let arr=[1,2,3];
let res=arr.reduce(function fn(total, num){
    return total + num;
});
console.log(res); //
avatar
文章
阅读
粉丝