• 原生Javascript（数组操作方法总结）-更新

    原生Javascript数组

    当在数组中查找时
如果需要判断有没有这个数值或者字符或者布尔值这种非引用地址的元素时 使用includes
如果需要获取这个数值或者字符或者布尔值这种非引用地址元素的下标时  使用indexOf
如果需要从后向前获取这个数值或者字符或者布尔值这种非引用地址元素的下标时  使用lastIndexOf
如果需要获取数组中某个引用元素是否满足某个条件的元素，使用find
如果需要获取数组中某个引用元素是否满足某个条件的元素下标，使用findIndex
如果需要从后向前获取数组中某个引用元素是否满足某个条件的元素，使用findLast
如果需要从后向前获取数组中某个引用元素是否满足某个条件的元素下标，使用findLastIndex
如果需要获取到数组中所有满足条件的元素时，使用筛选 filter

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    创建数组

    创建字面量数组

    var arr=[];

    • 1

    创建数组对象

    new Array();
new Array(size);
new Array(element0, element1, ..., elementn);

    • 1
    • 2
    • 3

    根据对象创建数组

    var arr=new Object([])

    • 1

    访问元素

    arr[0],arr[1]

    • 1

    数组的属性

    length 设置或返回数组中元素的数目。
    length也是可以设置的，如果设置为0，表示清空数组，如果设置为3，表示保留到第三位

    var arr=[];
console.log(arr);//[]
arr[4]=3;//当下标大于原长度时，自动扩展数组的长度为当前下标+1
console.log(arr.length);//数组的长度
console.log(arr.length-1)//数组最后一个下标
arr[arr.length]=3; //在数组的尾部添加一个新的数据

arr.length--;//删除数组尾部的最后一个元素
arr.length=0;

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    强引用将每个地址回收

    var arr=[
   {a:1},
   {a:2},
   {a:3},
]
for(var i=0;i<arr.length;i++){
   arr[i]=null;
}
arr.length=0;
//下标变量
arr[0]也代表数组的开始

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    再例如：

    // arr[0]
var o={a:1};
var o1={a:2};
var o2={a:3};
var arr=[o,o1,o2];

console.log(o===arr[0])//true
o=null;//虽然给o一个新的null，但是arr[0]地址指向不变
console.log(arr[0].a)   //null
console.log(arr[1]);    //1
console.log(arr);   //[{…}, {…}, {…}]

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    对象的下标如果可以隐式转换为数值时，自动作为下标数值
    如果隐式转换后是非数值时，则作为对象key插入属性

    var arr=[];
        arr["1"]=3;
        arr["a"]=2;
        console.log(arr) //[empty, 3, a: 2]


    • 1
    • 2
    • 3
    • 4
    • 5

    delete 数组的元素删除

    var arr=[1,2,3,4,5];
// 不改变数组的长度，将对应的值设置为空元素
delete arr[2];
console.log(arr);//[1, 2, empty, 4, 5]

    • 1
    • 2
    • 3
    • 4

    while操作

    var arr=[];
while(arr.push(1)<10);//[1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
console.log(arr)

    • 1
    • 2
    • 3

    数组的方法

    concat()

    // 具备有复制数组兼添加新元素的功能
var arr=[1,2,3];
var arr1=arr.concat(4);
var arr1=arr.concat();
arr[0]=10;
console.log(arr1,arr)

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    at()

    // 获取数组指定下标对应的元素，可以使用负数，负值代表倒数，也就是arr.length+(负数)
console.log(arr.at(-2));

    • 1
    • 2

    copyWithin()

    Array.copyWithin(), 用于在当前的数组内部，将指定的位置成员复制到其他位置，然后返回当前数组。特别注意: 会改变原数组

    array. copyWithin(x,y,z)
x（必填） ： =>表示要替换的位置，从该位置开始替换，负数的话就倒数。
y（可选） ： =>表示该位置开始读取元素，拿这个(段)位置的元素去换，负数的话就倒数。
z（可选） ： =>表示该位置结束读取元素，拿这个(段)位置的元素去换，负数的话就倒数。默认是数组的长度。含头不含尾 含y不含z

    • 1
    • 2
    • 3
    • 4
    var arr=[1,5,6,9,25];
arr.copyWithin(0,2,4); //[6, 9, 6, 9, 25]  

    • 1
    • 2

    every()

    arr.every(回调函数,回调函数中this的指向)

    var arr=[1,2,3];
       var bool=arr.every(function(item,index){
           console.log(this);//要是不写第二个参数，默认this指向window
           return  item>1;
          
       },{a:1});
       console.log(bool);//false

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    fill()

    arr.fill( 要填充在数组中的值,从什么位置开始填充,到什么位置结束 )

    var arr=Array(6);
var arr=[1,2,3,4,5,6];
arr.fill(0);//[0, 0, 0, 0, 0, 0]
arr.fill(1,3,-1)//[0, 0, 0, 1, 1, 0]
console.log(arr);//[0, 0, 0, 1, 1, 0]

    • 1
    • 2
    • 3
    • 4
    • 5

    filter()

    var arr=[1,2,3,4];
var arr1=arr.filter(function(item){
    return item >2;
});
console.log(arr1)//[3, 4]
console.log(arr);// [1, 2, 3, 4]


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    桥接模式（回调概念）

    function filter(array,fn){
    var arr=[];
    for(var i=0;i<array.length;i++){
        if(i in array && fn(array[i],i,array)) arr.push(array[i]);
    }//我觉得浅层次应用的话就是函数的嵌套
    return arr;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    find()

    找见并返回这一项，多用与引用类型元素配合查找

     var arr=[1,0,3];
 var item=arr.find(function(item,index){
     return item==0;
 });
 console.log(item)//0

    • 1
    • 2
    • 3
    • 4
    • 5

    findIndex()

    查找数组中元素是引用类型的下标

    var arr=[
    {id:1001,name:"商品1",price:3000},
    {id:1002,name:"商品2",price:4000},
    {id:1003,name:"商品3",price:5000},
    {id:1004,name:"商品4",price:6000},
    {id:1005,name:"商品5",price:7000}
 ]

 var item=arr.find(function(item){
     return item.id===1003;
 })
 console.log(item);// {id:1003,name:"商品3",price:5000}
 //arr.indexOf() 查找数组中元素是非引用元素的下标

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    var arr=[
      [1,2,3],
      [11,22,33],
      [111,222,333]
  ]

 var arr1=arr.find(function(item){
      return ~item.indexOf(22);
  });
  console.log(arr1)//[11, 22, 33]

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
     var arr=[
   {id:1001,name:"商品1",price:3000},
   {id:1002,name:"商品2",price:4000},
   {id:1003,name:"商品3",price:5000},
   {id:1004,name:"商品4",price:6000},
   {id:1002,name:"商品6",price:8000},
   {id:1005,name:"商品5",price:7000}
]
var item=arr.findLast(function(item){
    return item.id===1002
})
console.log(item);//{id: 1002, name: '商品6', price: 8000}
var index=arr.findLastIndex(function(item){
    return item.id===1002
})
console.log(index)//4

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    flat()

    flat()方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。也就是我们所说的数组降维。

    function arrayFlat(array,maxLv,currentLv,result){
      if(!array || array.constructor!==Array) throw new TypeError(array+"not is Array!");
      if (maxLv === undefined) maxLv = 1;
      if (currentLv === undefined) currentLv = 0;
      if(result===undefined) result=[];
      
      for(var i=0;i<array.length;i++){
          if(maxLv>currentLv && Array.isArray(array[i])) arrayFlat(array[i],maxLv,currentLv+1,result);
          else result.push(array[i]);
      }
      return result;
  }
  console.log(arr1)

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    map（）

    改变原数组中所有元素结果，并且返回一个新数组

    var arr1=arr.map(function(item){
    return item+10;
})
console.log(arr1)

    • 1
    • 2
    • 3
    • 4

    includes()

    var arr=[1,2,3,4];
   var bool= arr.includes(1);
   console.log(bool) 
判断引用类型数组中某元素是否存在
if(arr.find(function(item){return item.id===1002})){

}

var a="a";
if(a==="a" || a==="b" || a==="c" || a==="d"){

}

if(["a","b","c","d"].includes(a)){

}


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    indexOf()

    arr.indexOf(要查找的元素,从哪个下标开始查找);

    //arr.indexOf(要查找的元素,从哪个下标开始查找);
var  arr=[1,2,3,1,2,3,4,1,2,3,4];
var index= arr.indexOf(2,3);
console.log(index)

var index=-1;
while(~(index=arr.indexOf(2,index+1))){
	console.log(index);
}


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    lastIndexOf(2)

    console.log(arr.lastIndexOf(2))

    reduce()

    var sum=arr.reduce(function(v,t){
   return v+t;
})
console.log(sum)

    • 1
    • 2
    • 3
    • 4
    var arr=[1,2,3,4,5];
var arr1=arr.reduce(function(v,t){
    v.push(t+10);
    return v;
},[]);
console.log(arr1)//[11, 12, 13, 14, 15]

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    遍历数组

    函数中的call和apply

    function fn(){
    // 将非数组的列表转换为数组
	   var arr=[].concat.apply([],arguments);
	   console.log(arr)
}

fn(1,2,3,4);//[1, 2, 3, 4]

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    // 将3号位复制到0号位
[].copyWithin.call({length: 5, 3: 1}, 0, 3)
// {0: 1, 3: 1, length: 5}
//特别注意  对象强借数组方法  此时私下转数组{length: 5, 3: 1}  => [,,,1,]  相当于[x,x,x,1,x]
//此时将key值为3位置复制到下标0号位置成为对象即成为现在的样子

    • 1
    • 2
    • 3
    • 4
    • 5
    var arr=[1,2,3,4,5];
var arr1=arr.reduce(function(v,t){
    if(t>3) v.push(t);
    return v;
},[]);
console.log(arr1);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    var bool=arr.reduce(function(v,t){
    if(t>3) v=true;
    return v;
},false);
console.log(bool)

    • 1
    • 2
    • 3
    • 4
    • 5
    var arr=[
    {id:1001,name:"商品1",price:3000},
    {id:1002,name:"商品2",price:4000},
    {id:1003,name:"商品3",price:5000},
    {id:1004,name:"商品4",price:6000},
    {id:1005,name:"商品5",price:7000}
 ]
 var item=arr.reduce(function(v,t){
     if(t.id===1004) v=t;
     return v;
 },null);
 console.log(item);//{id: 1004, name: '商品4', price: 6000}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    reduce拍平数组；

    var arr = [0, -1, [1, 2, 3],
     [4, 5, [6, 7, [8, 9]]]
 ];

 var arr1 = arr.reduce(function (v, t) {
     function f(list,arr2) {
         if(arr2===undefined) arr2=[];
         if (!Array.isArray(list)) arr2.push(list);
         else
         for(var i=0;i<list.length;i++){
             if(Array.isArray(list[i])) return f(list[i],arr2);
             else arr2.push(list[i]);
         }
         return arr2;
     }
     return v.concat(f(t))
 }, []);
 console.log(arr1)//[0, -1, 1, 2, 3, 4, 5, 6, 7, 8, 9]

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    var obj={
   user:"xietian",
   password:"xie123",
   sex:"男",
   age:30
}

// "user=xietian&password=xie123&sex=男&age=30"
var str=Object.keys(obj).reduce(function(v,t){
    return v+t+"="+obj[t]+"&"
},"").slice(0,-1);
console.log(str)//user=xietian&password=xie123&sex=男&age=30


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
     var arr=[
       {site:"网易",url:"http://www.163.com"},
       {site:"京东",url:"http://www.jd.com"},
       {site:"淘宝",url:"http://www.taobao.com"},
       {site:"腾讯",url:"http://www.qq.com"},
       {site:"百度",url:"http://www.baidu.com"},
       {site:"美团",url:"http://www.meituan.com"}
   ]

   var ul=document.getElementById("ul");
   ul.innerHTML=arr.reduce(function(v,t){
       return v+"
  • "+t.site+"
    • "    
   },"");

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    在这里插入图片描述

    reduceRight()

     var arr=[
     {id:1001,name:"商品1",price:3000},
     {id:1002,name:"商品2",price:4000},
     {id:1003,name:"商品3",price:5000},
     {id:1004,name:"商品4",price:6000},
     {id:1002,name:"商品2",price:8000},
     {id:1005,name:"商品5",price:7000}
  ]

  var item=arr.reduceRight(function(v,t){
      if(!v && t.id===1002) v=t;
      return v;
  },null)
  console.log(item);//{id: 1002, name: '商品2', price: 8000}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    抛出异常

    function fn(){
       throw new Error("aaa");
       throw new TypeError("类型化错误");
       throw new RangeError("范围型错误")
   }

    • 1
    • 2
    • 3
    • 4
    • 5
    var arr=Array(100).fill(1).map(function(t,i){return i+1});
console.log(arr);//生成1-100

    • 1
    • 2
    var a=1;
try{
    a++;
    b++;//没有b
    a++;
    console.log("zzz")
}catch(error){
    // console.error(error)
    console.log("aaa")
    a++;
}finally{
    // 都会执行这个
    console.log("bbb")
    a++;
}
console.log(a);
//aaa
//bbb
//4

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    // 中断循环
var arr=[1,2,3,4,5,6,7];
try{
    arr.forEach(function(item){
        console.log(item)
        if(item===4) throw new Error("aaa");
    })
}catch(err){
    console.error('aaa')
};

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    函数的绑定

    arguements对象

    二维数组

    对象数组

  • 相关阅读:
    【多线程】Timer任务定时器实现与盲等原子性问题的解决
    java计算机毕业设计企业公开招聘系统源码+数据库+系统+lw文档+mybatis+运行部署
    OKR 锦囊妙计
    linux安装aerospike免安装版
    四、Transforms
    Mand Mobile - 滴滴出品的适用于金融项目的 Vue 移动端 UI 组件库，免费开源、灵活快速、丰富实用
    广西柳州机械异形零部件三维扫描3D抄数全尺寸测绘建模-CASAIM中科广电
    Android自定义组合控件
    C# 支付宝小程序 ---小程序支付
    linux rpm 安装mysql
  • 原文地址：https://blog.csdn.net/m0_46672781/article/details/125876306