六、数组 - 二、数组方法（增删改查和遍历） - 《前端三剑客》

一、数组的增加
二、数组的删除
三、数组的修改
四、数组查询
五、数组的遍历

一、数组的增加

1-1 push()

从后面增加值，可以一次添加多个

var arr=[1,2,3]    
arr.push(4,5,6)
console.log(arr)      // [1, 2, 3, 4, 5, 6]

将数组展开使用push添加

var arr = [1,2,3];
var obj = [4,5,6]
/* 展开 */
console.log(...arr)
arr.push(...obj)
console.log(arr)

1-2 unshift()

从数组前面增加

var arr=[4,5,6];
arr.unshift(1,2,3)           // [1, 2, 3, 4, 5, 6]

1-3 concat()

拼接两个数组,但是不能改变原数组的结构

var arr=[1,2,3];
var obj=[4,5,6];
/* arr.push(obj)    不能增加*/
var newArray=arr.concat(obj)    
console.log(newArray)       //[1, 2, 3, 4, 5, 6]

1-4 splice()

定点增加 splice(index, deleteNumber删除的数量, parmas) 从index前面增加

var skills=['html','css','javascript','jquery']     
skills.splice(3,0,'vue','react')
console.log(skills)       //'html','css','javascript','vue','react','jquery'

二、数组的删除

2-1 pop()

从尾部删除

var arr = [1,2,3];
alert(arr.pop());  //3
alert(arr)  //1,2

2-2 shift()

从头部删除

var arr = [1,2,3];
alert(arr.shift());  //1
alert(arr)  //2,3

2-3 splice(index,howmany)

传参：index 下标开始，howmany 删除多少个
```
var app = [1,2,3,4,5,6]
app.splice(2,3);  //从3开始 删除3个
console.log(app)
```
三、数组的修改

3-1 splice(index,howmany,params)

从index开始,修改多少个值

var arr=['html','css','vue'];
arr.splice(1,2,'ps','react')     ////"html", "ps", "react"

3-2 join(separatar)

传参：分隔符

数组拼接为字符串

var arr=[1,2,3,4];
var str=arr.join("");
console.log(str)         //输出：123
console.log(arr.join(","))    //输出：1,2,3
console.log(arr.join("/"))    //输出：1/2/3

3-3 split()

3-3 sort()

排序

       //升序
  arr.sort((a,b)=>{
      return a-b;
  })
  //降序
  arr.sort((a,b)=>{
      return b-a;
  })

3-4 reduce()

求和

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

3-5 reverse()

颠倒数组元素排序

    var arr=[11,23,13]
    arr.reverse();
    console.log(arr)

四、数组查询

4-1 indexOf(value)

查询对应值得下标

var arr=[1,2,3,4];
console.log(arr.indexOf(1)); //0
//如果没有对应的值,则返回-1

4-2 slice(startIndex,end)

startIndex:从第几个下标开始，必须有 end:到哪个元素结束，可选

注释：可使用负值从数组的尾部选取元素。

//arrayObject.slice(start,end)
//1个参数 
var  arr=[1,2,3,4];
var b=arr.slice(1); //下标值开始
console.log(b);  //2,3,4
//2个参数
var c = arr.slice(1,3);
console.log(c); //2,3

复制一个数组

var arr = [1,2,3];
var b = arr.slice(0);
console.log(b);

4-3 includes()

判断数组是否包含某个值

let site = ['runoob', 'google', 'taobao'];
site.includes('runoob'); 
// true 
site.includes('baidu'); 
// false

4-4 Math.max(…arr) Math.min(…arr)

获取最大值，最小值

var arr=[1,2,3,4];
Array.from(arr,item=>{
   console.log(item)
})
/* var max=Math.max(1,2,3);     直接获取值*/
var max=Math.max(...arr)     //获取数组，展开
var min=Math.min(...arr)
console.log(max)        //获取最大值
console.log(min)         //获取最小值

4-5 filter()

过滤器：返回符合条件的值

var arr=[
          {id:01,content:"react",checked:false},
          {id:01,content:"react",checked:true},
          {id:01,content:"react",checked:false}
             ] 
      const ite= arr.filter(item => item.checked==false);
      /* 或者 
      const ite= arr.filter(item => !item.checked); */   
      console.log(ite);       //返回的是有chenked:false的对象

var ar=[1,2,3,4,5];
     var newArr=ar.filter(item=>{
         return item>3;
     })
     console.log(newArr)  //大于3的值

4-6 some()

如果有满足条件的值，则返回true

var ages = [3, 10, 18, 20];
function checkAdult(age) {
  return age >= 18;
}
function myFunction() {
 ages.some(checkAdult);
}
//true

4-7 every()

数组中所有的值满足条件，才返回true

var ages = [32, 33, 16, 40];
function checkAdult(age) {
  return age >= 18;
}
function myFunction() {
  ages.every(checkAdult);
}
//false

4-8 find()

返回满足条件的第一个值

var ages = [3, 10, 18, 20];
function checkAdult(age) {
  return age >= 18;
}
function myFunction() {
  document.getElementById("demo").innerHTML = ages.find(checkAdult);
}
//18

4-9 findIndex()

返回符合条件的第一个值的下标

var ages = [3, 10, 18, 20];
function checkAdult(age) {
  return age >= 18;
}
function myFunction() {
  document.getElementById("demo").innerHTML = ages.findIndex(checkAdult);
}
//2

4-10 判断是否是数组

instanceof（）

var a = ['reg','blue'];
alert( a instanceof Array );  // true

constructor（）

var a = ['reg','blue'];
alert( a.constructor=== Array );  // true

五、数组的遍历

5-1 for

for(var i=1; i<5; i++) {
console.log(i); //1, 2, 3, 4
}

5-2 for in

遍历下标，也可以遍历Object的key值

     // 遍历数组下标
   for(var i in arr) {
     console.log(i);
     }
     // 遍历对象 key 值
    var obj = {
   name: 'jack',
   age: '18'
    }
   for (var i in obj) {
   console.log(i) // name, age
    }

5-3 for of

遍历值，但不能遍历 Object 的值

  var arr= ['html','css','javascript','jquery']
   for(var value of arr){
         console.log(value)
     }

5-4 forEach()

遍历每一项以及下标

   var arr= ['html','css','javascript','jquery']
   arr.forEach((item,index)=>{
         console.log(item)
         console.log(index)
     })

5-5 map()

方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值

  var arr = ['html','css','js','vue']
  var newArray = arr.map((item,index)=>{
          return item+"1"
      })
      console.log(newArray)

                var items = $("img")
        console.log(items)
        var arr = [1,2,3]
        var newArr = arr.map(item=>item*4);
        console.log(newArr)
        var arr = [...items];
        var urls = arr.map(i=>{
            return $(i).attr("src");
        })
        console.log(urls)
    </script>

5-6 from()

<script>
        var arr = [12,3,23,4,5];
        Array.from(arr,item=>{
            console.log(item)
        })
    </script>

5-7 some every

二、数组方法（增删改查和遍历） - 图1
some:任一个满足即可返回ture
every:全部都满足才返回ture

5-8 find(),findIndex()

同上

二、数组方法（增删改查和遍历）