1. 增加

  1. push();
  2. unshift();
  3. concat();
  4. splice(index,0,...value) //从某个下标的前面增加

1-1 从后增加

  1. <script>
  2.         // 从后增加
  3.         var arr = [1,2,3];
  4.         arr.push(4);
  5.         arr.push(5,6);
  6.         arr.push([7,8,9]);
  7.         console.log(arr)
  8.     </script>

1-2 从前增加

  1.     <script>
  2.         var arr = [1,2,3];
  3.         arr.unshift(0);
  4.         console.log(arr);
  5.     </script>

1-3 concat

  1. 特点：1.支持添加多个值
  2.             2.支持数组
  5. <script>
  7.         var arr = [1,2,3];
  8.         var b = arr.concat([4,5]);
  9.         console.log(b);
  10.         console.log(arr);
  11.         var test = [6,7,8]
  12.         test.push([4,5]);
  13.         console.log(test)
  14.     </script>

1-4 splice

  1. <script>
  2.         var arr = [1,3,4];
  3.         arr.splice(1,0,2);
  4.         console.log(arr)
  5.     </script>

2. 删除

  1. pop();从后
  2. shift();从前
  3. trim();删除字符串前后的空格
  4. splice(index,howmany,value);
  5.       ----index--从下标开始删除
  6.       ----howmany--删除多少个
  7.             ----value---替代的值
  1.     <script>
  2.         var arr =["html","css","javascript"];
  3.         arr.splice(1,1,"vue");
  4.         console.log(arr)   
  5.     </script>

3.splice(删除、添加)

  1.     <script>
  2.         /*
  3.         从下标前面增加
  4.         */
  5.          var arr =[3,4,5,6];
  6.       /* splice(index,0,value)*/
  7.          arr.splice(2,0,"html","css");
  8.          console.log(arr);
  9.     </script>
  12. ******
  13.         var arr =[3,4,5];
  14.         /*
  15.         [2,3,"vue",5]
  16.         arr.splice(index,hoemany,...value)
  17.         */
  18.         arr.splice(2,1,"vue");
  19.         console.log(arr)

4. 查询（indxOf / slice / includes）

  1. indexOf();
  2. slice(startIndex,endIndex)
  3. includes() //判断数组是否包含某个值
  4.      *******
  5.         var arr = [4,5,6];
  6.         console.log(arr.includes(5));
  7.         console.log(arr.includes(8));
  1. <script>
  2.         /* 、
  3.         indexOf --查询数组中值的下标
  4.         -1  
  5.         slice
  6.         */
  7.        var arr = [2,3,4,5,6];
  8.        var test = arr.slice(1,3)
  9.        /* slice(startIndex,endIndex)
  10.        tips:不包含结束的下标
  11.         */
  12.        console.log(test)
  13.     </script>
  1. <script>
  2.         /*
  3.         includes可以判断数组是否包含某个值
  4.         */
  5.        var arr = [4,5,6];
  7.        console.log(arr.includes(5));
  8.        console.log(arr.includes(8));
  9.     </script>

5. 其他


a. join(将数组拼接成字符串）

  1.  var arr =["html","css","js"];
  2.         /* join(seprate) --->可以将数组拼接成数字符*/;
  3.         console.log(arr.join(""))
  4.         console.log(arr.join("|"));
  5.         console.log(arr.join(" "));
  6.         console.log(arr.join("*"));
  7.         console.log(typeof( arr.join("")));

b. sort(升序，降序)

  1.  <script>
  2.         var arr =[12,3,5,11,1];
  3.         var newArr =arr.sort(function(a,b){
  4.             /*
  5.             数据从小到大
  6.             */
  7.             return a-b;
  8.         })
  9.         /* 降序*/
  10.         var c =[45,12,26,36,5]
  11.         var test =c.sort(function(a,b){
  12.             return b-a;
  13.         })
  14.         console.log(newArr);
  15.         console.log(test);
  16.     </script>

示例：

  1.     <script>
  2.         var arr =[
  3.             {
  4.                 name:"肯德基",price:100,distance:100
  5.             },
  6.             {
  7.                 name:"必胜客",price:200,distance:500
  8.             },
  9.             {
  10.                 name:"华莱士",price:50,distance:1000
  11.             }
  13.         ]
  14.         // arr.sort(function(a,b){
  15.         //     return a.price-b.price;
  16.         // })
  18.         arr.sort(function(a,b){
  19.             return b.distance-a.distance;
  20.         })
  21.         console.log(arr);
  23.     </script>

c. 求和（reduce）

tips:只能对简单的值求和

  1. <script>
  2.         var arr =[1,2,3];
  3.         var sum = arr.reduce((a,b)=>{
  4.             return a+b;
  5.         })
  6.         console.log(sum)
  7.     </script>

d.reverse（改变数组的结构 倒叙）

  1.  <script>
  2.         var arr = ["html","css","js"];
  3.         arr.reverse();
  4.         console.log(arr)  --//*["js","css","html"] 
  5.     </script>

e. for in/for of

  1. <script>
  2.         // var arr = ["html","css","js"];
  3.         // for (var key in arr){
  4.         //     console.log(key)//key 获取的是数组的下标
  5.         //     console.log(arr[key])
  6.         // }
  7.         var test =[
  8.             {
  9.                 name:"肯德基",price:100,distance:100
  10.             },
  11.             {
  12.                 name:"必胜客",price:200,distance:500
  13.             },
  14.             {
  15.                 name:"华莱士",price:50,distance:1000
  16.             }
  18.         ]
  19.         for (var k in test){
  20.             console.log(test[k].name) //对象的属性
  22.         }
  23.     </script>
  1. <script>
  2.         var arr = [2,3,4];
  3.         for(var value of arr){
  4.             // console.log(value)
  5.             console.log(arr.indexOf(value))
  6.         }
  7.     </script>

f. forEach(遍历）

  1.     <script>
  2.         var names =[
  3.             {name:"lisi"},
  4.             {name:"wangwu"}
  5.         ]
  6.         names.forEach(function(names){
  7.             names.like=true
  9.         })
  10.        console.log(names)
  11.     </script>
  1.     <script>
  2.         var arr = ["html","css","js"];
  3.         arr.forEach(function(item){
  4.             console.log(item)
  5.         })
  6.         var test =[2,3,4];
  7.         var newArr=[]
  8.         test.forEach(function(num){
  9.             console.log(num);
  10.             newArr.push(num*2)
  11.         })
  12.         console.log(newArr)
  13.     </script>

g. map

  1.  <script>
  2.         var arr =[2,3,4];
  3.         var res =arr.map(item=>{
  4.             return item*2
  5.         })
  6.         console.log(res)
  7.     </script>
  1.    <script>
  2.         var arr =[
  3.             {name:"html",value:"12px"},
  4.             {name:"css",value:"13px"},
  5.             {name:"js",value:"14px"},
  6.         ]
  7.         arr.map(item=>{
  8.             var value = parseInt(item.value)*2;
  9.             item.value = value;
  10.         })
  11.        console.log(arr)
  13.     </script>
  1.   <script>
  2.       var arr =[
  3.             {name:"html",value:"12px"},
  4.             {name:"css",value:"13px"},
  5.             {name:"js",value:"14px"},
  6.         ]  
  7.         var nums=[]
  8.         arr.map(item=>{
  9.            nums.push (parseInt(item.value)*2);
  11.         })
  12.         console.log(nums.join("-")) 
  13.     </script>

h. some/every

  1.  <script>
  2. //返回值是布尔值
  3.         var arr = [3,4,5,6];
  4.         //只要数组中一项满足某个条件，结果就是true
  5.         var res =arr.some(item=>{
  6.             return item>1;
  8.         })  
  9.         console.log(res);
  10.     </script>
  1. <script>
  2.         //every 数组中每一项都满足某个条件
  3.         var arr =[2,3,4];
  4.         var res = arr.every(item=>{
  5.             return item>1;
  6.         })
  7.         console.log(res)
  8.     </script>

i. filter

  1. <script>
  3.         //只要达到某个条件就会返回一个新的数组
  4.         var arr = [3,4,5,6];
  5.         // var res = arr.filter(item=>{
  6.         //     return item>4;
  7.         // })
  8.         // console.log(res)
  10.         var students =[
  11.             {name:"amy",age:"18"},
  12.             {name:"tom",age:"11"},
  13.             {name:"jack",age:"19"},
  14.             {name:"lisa",age:"22.5"},
  15.         ]
  16.         var newArr=students.filter(item=>{
  17.              return parseFloat
  18.         })
  19.     </script>

示例.

  1. <input type="text" id="app">
  2.     <script>
  3.         var keyword = "a"
  4.         var students = [
  5.             { name: "amy", age: "18" },
  6.             { name: "tom", age: "11" },
  7.             { name: "jack", age: "19" },
  8.             { name: "lisa", age: "22.5" },
  9.         ]
  10.         var apps = document.getElementById("app");
  12.         app.onkeydown = function (event) {
  13.             if (event.keyCode == 13) {
  14.                 var keyword = this.value;
  15.                 console.log(keyword)
  16.                 var newArr = students.filter(item => {
  17.                     return item.name.includes(keyword)
  19.                 })
  20.                 console.log(newArr)
  21.             }
  22.         }
  24.     </script>

j. find

  1.  <script>
  2.         //返回数组中满足某个条件的某个值
  3.         var arr =[2,3,4];
  4.         var res =arr.find(item=>{
  6.             return item ==3;
  7.         })
  8.         console.log(res)
  9.     </script>

k. findIndex

  1. <script>
  2.         //返回数组中满足某个条件的值的下标
  3.         var arr=[1,2,3,4]
  4.         var res=arr.findIndex(item=>{
  5.             return item==2;
  6.         })
  7.         console.log(res)
  8.     </script>


l. instance of/Array.isArray(检测是否是数组）

  1. var arr =[1,2,3,4];
  2. var res ="";
  3. console.log(arr instanceof Array) //tru e
  4. console.log(Array.isArray(res)) //flase

示例：

输入谁的id删除谁

  1. <body>
  2.     <!-- /*
  3.     input输入框，输入谁的id删除谁
  4.     */
  5.     /*
  6.     1、要获取输入框的值
  7.     2、根据id的值，获取数组中对应项的下标
  8.     3、删除
  9.     */ -->
  10.     <input type="text" id="app">
  11.     <script>
  12.          var arr =[
  13.             {name:"amy",id:"1001"},
  14.             {name:"tom",id:"1002"},
  15.             {name:"jack",id:"1003"},
  16.             {name:"lisa",id:"1004"},
  17.         ]
  18.        var app=document.getElementById("app");
  19.        app.onkeydown = function(event){
  20.            if(event.keyCode ==13){
  21.                var id =Number(this.value);
  22.                var index = arr.findIndex(item=>{
  23.                    return item.id ==id;
  24.                })
  25.                if(index!=-1){
  26.                arr.splice(index,1);    
  27.                }
  29.                console.log(arr);
  31.            }
  33.        }
  34.     </script>
  35. </body>