JavaScript 数组操作深度解析-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_51664705/article/details/114680677

本文详细探讨了JavaScript中数组的各种操作，包括展开语法、解构赋值、出栈入栈（pop、push、unshift）、slice和splice的用法、数组的清空和拆分、复制以及排序。此外，还讲解了find、findIndex、循环操作引用类型、迭代、every、some、filter、map和reduce等方法的应用，展示了如何高效地操作和处理JavaScript数组。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

字符串转换为数组

let str = "asdasdas";
      console.log(str.split(""));
      console.log(Array.from(str));

在这里插入图片描述

在这里插入图片描述
Array.from

 <div>hdcms</div>
    <div>houdsd</div>
    <script>
      let div = document.querySelectorAll('div');
      console.log(Array.from(div,function(item){
          console.log(item.innerHTML);
          item.style.backgroundColor="red";
          return item;
      }))
    </script>

在这里插入图片描述
Array.from第二个参数的妙用
第二个参数会对第一个参数中每一个元素进行使用。

展开语法

用于连接两个数组真滴好用

<div>hdcms</div>
    <div>houdsd</div>
    <script>
      let arr = ['123','2323'];
      let hd = ['js','css'];
      arr = [...arr,...hd];
      console.log(arr);
    </script>

在这里插入图片描述

解构赋值

 const [...arr] = "sdasdasd";
      console.log(arr);

在这里插入图片描述

出栈入栈

let array  = ['hcd','2323'];
     array.pop();
     array.push("232");
     array.unshift('2323');
     console.log(array);

在这里插入图片描述

pop为出栈，弹出最后一个元素。
push是往数组最后加一个元素，而unshift是在最前面加一个元素。

填充。

console.log(Array(5));
     console.log(Array(5).fill("后盾人"));

在这里插入图片描述

console.log([1,2,3,4].fill("后盾人",1,2));

在这里插入图片描述

slice和splice

let arr = [1,2,3];
    let hd = arr.slice();
    console.log(hd);
    console.log(arr);

在这里插入图片描述
slice函数里面不加参数就是从头到尾。加一个参数就从哪个到末尾。加两个就是从哪到哪。
slice函数不会对原数组影响。

splice

let arr = [1,2,3];
    let hd = arr.splice(0,2);
    console.log(hd);
    console.log(arr);

在这里插入图片描述
splice函数是从第一个参数开，从原数组中截取第二个参数个元素，并且会对原数组影响。

splice添加元素：

let arr = [1,2,3];
    let hd = arr.splice(0,2,'新添1','新添2');
    console.log(hd);
    console.log(arr);

在这里插入图片描述
splice替换元素

let arr = [1,2,3];
    let hd = arr.splice(1,1,'232');
    console.log(hd);
    console.log(arr);

在这里插入图片描述
splice增加元素

et arr = [1,2,3];
    let hd = arr.splice(1,0,'232');
    console.log(hd);
    console.log(arr);

在这里插入图片描述
splice增加元素，只要把第二个截取个数参数设置成0即可。

清空数组

let hd = [1,2,3,4,5];
    let arr =hd;
    hd.length = 0;
    console.log(hd);
    console.log(arr);

使用length = 0 ；就会直接清空数组。
在这里插入图片描述

数组的拆分

 let arr =  "123.1,23";
    let hd = arr.split(".");
    console.log(hd);

在这里插入图片描述
split会从括号内的字符进行分割，并形成数组。

数组的复制

let hd = [1,2,3,4,5,6];
    console.log(hd);
    console.log(hd.copyWithin(3,1,3));

在这里插入图片描述
第一个3表示从 4 开始即[3] 替换，1表示从[1]开始复制，[3]表示复制结束。

Find和findindex

let a = [];
    let b = [];
    console.log(a===b);
    let lessons = [{name:"js"},{name:"css"},{name:"mysql"}];
    console.log(lessons.includes({name:"css"}));

在这里插入图片描述
看起来是一样的值，但是比较的是两个变量的地址。
这个时候就要用到find和findindex。

let lessons = [{name:"js"},{name:"css"},{name:"mysql"}];
    let index = lessons.findIndex(function(item){
        return item.name==="css";
    })
    console.log(index);

在这里插入图片描述
findindex返回这个元素的位置。

let lessons = [{name:"js"},{name:"css"},{name:"mysql"}];
    let index = lessons.find(function(item){
        return item.name==="css";
    })
    console.log(index);

find返回等于这个值的元素。
在这里插入图片描述

数组的排序

let arr = [1,5,3,5,6];
   arr = arr.sort(function(a,b){
       return a-b;
   })
   console.table(arr);

在这里插入图片描述
a-b = -1 < 0 所以从小到大排序
b - a = 1 > 0 所以从大到小排序。

循环操作引用类型

let arr = [1,2];
    for(let value of arr){
        value+=10;
    }
    console.table(arr);

在这里插入图片描述

arr的元素都是number类型的，value相当于是创建一个新的对象，将元素值赋给value，并不会对原数组有影响。

 let arr = [{n:1},{n:2}];
    for(let value of arr){
        value.n+=10;
    }
    console.table(arr);

在这里插入图片描述
而当元素是对象时，就是传址行为，可以修改原数组的值。

迭代

let arr = [1,2,3];
    let key = arr.keys();
    console.log(key.next());
     console.log(key.next());
      console.log(key.next());

在这里插入图片描述

keys()可以获取数组索引，value就是下标值，done表示后续是否还是元素。

可以使用结构法，取出值。

let arr = [1,2,3];
    let entries = arr.entries();
    let {done,value} = entries.next();
    console.log(done,value);

在这里插入图片描述

使用for of 查看值

let arr = [1,2,3];
    for(const value of arr.values()){
        console.log(value);
    }
    for(const keys of arr.keys()){
        console.log(keys);
    }

在这里插入图片描述

every与some

const user = [
        {name:'李四',js:89},
        {name:'张三',js:99},
        {name:'马六',js:55}
    ]
    const res = user.every(function(item){
        return item.js>=60;
    })
    console.log(res);
    console.log(res?"所有人都及格了":"有人没及格");

在这里插入图片描述

<input type="text" name="title">
    <span></span>
    <script>
        let keywords = ['php','js'];
        let title = document.querySelector('[name="title"]');
        title.addEventListener('keyup',function(){
            const res = keywords.some(keywords=>{//这种写法等于function（keywords）
                return this.value.indexOf(keywords)!=-1;
            });
            if(res ==false){
                document.getElementsByTagName('span')[0].innerHTML="必须输入"+keywords.join(",")+"关键词";
            }else{
                document.getElementsByTagName('span')[0].innerHTML="";
            }
        })

在这里插入图片描述

先是利用querySelector过去input，给其添加键盘抬起的函数，利用indexOf未找到函数就返回-1的特性，查看input里面的值。
some函数同样会遍历整个数组，直至找到不符合的元素。

filter过滤

let lessons = [
            {title:"媒体查询响应式布局",category:"css"},
            {title:"felx弹性盒模型",category:"css"},
            {title:"MySql多表查询随意链接",category:"mysql"}
        ];
        const cssLessons = lessons.filter(function(lesson){
            return lesson["category"] =="css";
        });
        console.table(cssLessons);

在这里插入图片描述
自定义filter函数

let hd = [1,2,3,4];
        function filter(array,except){
            let newArray = [];
            for(const value of array){
                if(except.includes(value)==false){
                    newArray.push(value);
                }
            }
            return newArray;
        }
        console.log(filter(hd,[2,3]));

在这里插入图片描述
定义空数组，然后利用includes函数，把不等于except数组元素的hd元素push进新数组。

map数组映射

值类型

let hd = [1,2,3,4];
            let demo = hd.map(function(value,index,arr){//分别为值，下标，数组。
                value = `hdr-${value}`;
                return value;
            })              
            console.table(hd);    
            console.table(demo);

在这里插入图片描述
map函数并不会改变原数组。

引用类型

 let lessons = [
               {title:"第一个",category:"css"},
               {title:"第一个",category:"css"},
               {title:"第一个",category:"css"},
               {title:"第一个",category:"css"}
           ];
            lessons.map(function(value){
               value.click=100;
           });
           console.table(lessons);
           console.table(hd);

在这里插入图片描述
可以直接利用map修改数组。

let lessons = [
               {title:"第一个",category:"css"},
               {title:"第一个",category:"css"},
               {title:"第一个",category:"css"},
               {title:"第一个",category:"css"}
           ];
            let hd = lessons.map(function(value){
               value.click=100;
               return value;
           });
           console.table(hd);
           console.table(lessons);

在这里插入图片描述
使用引用类型的map，会修改原来的值。

reduce

let arr= [1,2,3,4,5]
           arr.reduce(function(pre,value,index,array){//pre为上一次函数的返回值。
                console.log(pre,value);
                return value;
           })

在这里插入图片描述
找数组极值

let arr= [1,2323,3,4,5]
           function maxPrice(goods){
               return arr.reduce(function(pre,cur){
                   return pre>cur?pre:cur
               })
           }
           console.log(maxPrice(arr));

在这里插入图片描述
给文字添加样式。

const div = document.querySelector("div");
            [...div.textContent].reduce(function(pre,cur,index){
                pre == index && (div.innerHTML="");
                let span = document.createElement('span');
                span.innerHTML =cur;
                div.appendChild(span);
                span.addEventListener("mouseover",function(){
                    this.classList.add("color");//classList.add  添加新的类名
                })
            },0)