九、数组

1、增加

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

1.1、push()

向数组后面增加
特点：1、可以增加多个值
使用场景：加载更多 —上拉刷新

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

1.2、unshift()

从前增加
使用场景 —历史搜索，下拉刷新

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

1.3、concat()

特点：
1、支持添加多个值
2、支持数组数据格式
3、不会改变数组原本的结构

<script>
        var arr = [1,2,3];
        var b = arr.concat([4,5]);
        console.log(b);
        console.log(arr);
        var  test = [6,7,8]
        test.push([4,5]);
        console.log(test)
    </script>

1.4、indexOf 判断数组中值的下标 、 -1（数组中没有这个值）

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

1.5、splice 增加

从下标的前面添加
splice (index,0,value)

<script>
        //splice   增加
        var arr = [3,4,5,6,7]
        arr.splice(2,0,"html","css");
        console.log(arr);
    </script>

2、删除

2.1、pop() 从后删除

<script>
        var arr = [1,2,3];
        arr.pop();
        console.log(arr);
    </script>

2.2、shift() 从前删除

<script>
        var arr = [2,3,4];
        arr.shift();
        console.log(arr);
    </script>

2.3、splice 定点删除

splice(index,howmany)
index —从哪个下标开始删除
howmany —删除多少个
从后删除

<script>
        var arr = [4,5,6,7,8];
        arr.splice(2,1);   //从第二个元素开始，删除一个
        console.log(arr);
    </script>

3、修改

splice(index,howmany,value)
index 下标
howmany 删除多少个
value 替代的值

<script>
        var arr = ["html","css","js"];
        arr.splice(1,1,"vue");
        console.log(arr);
    </script>

4、查询

4.1、indexOf 查询数组中值的下标 -1表示数组中没有这个值

var arr = [1,2,3,4];
        console.log(arr.indexOf(8));
        console.log(arr.indexOf(3));

4.2、slice (startindex,endindex) 不包含结束的下标

var test = arr.slice(1,3);
        //  slice (startindex,endindex)   不包含结束的下标
        console.log(test);

4.3、includes 是否包含某个值

结果返回布尔值

<script>
        var arr = [4,5,6];
        console.log(arr.includes(4));
        console.log(arr.includes(8));
    </script>

5、join 拼接

<script>
        var arr = ["html","css","js"];
        //join  可以将数组拼接成字符串
        console.log(arr.join(""));
        console.log(arr.join("|"));
        console.log(arr.join(" "));
        console.log(typeof arr.join(""));
    </script>

5.1、事例

<p id="app"></p>
    <script>
        var directs = [
            {name:"吴京",id:1001},
            {name:"章子怡",id:1002},
            {name:"徐峥",id:1003}
        ]
        var arr = [ ];
        for(var i = 0; i<directs.length; i++){
            console.log(directs[i].name);
            arr.push(directs[i].name);
            console.log(arr);
            var str = arr.join("/");
            console.log(str)
            var app = document.getElementById("app");
            app.innerHTML = str;
        }
    </script>

6、sort 排序

<script>
        var arr = [12,3,4,11,1];
        console.log(arr.sort());
        //得到从小到大的数据结构
        var newArr = arr.sort(function(a,b){
            return a-b;   //升序
        })
        var c = [12,14,45,2];
        var test = c.sort(function(a,b){
            return b - a;    //降序
        })
        console.log(test);
        console.log(newArr);
    </script>

6.1、事例

 <script>
        var arr = [
            {
            name:"肯德基",price:100,distance:100
        },
            {
            name:"华莱士",price:200,distance:500
        },
            {
            name:"必胜客",price:50,distance:1000
        }
    ]
    //根据价格进行升序
    arr.sort(function(a,b){
        return a.price-b.price;
    })
    console.log(arr);
    //根据距离进行降序
    arr.sort(function(a,b){
        return b.distance - a.distance;
    })
    console.log(arr);
    </script>

7、reverse() 反转颠倒

<script>
        var arr = ["html","css","js"]
        arr.reverse();
        console.log(arr);
    </script>

8、for in 遍历

<script>
        // for in
        var arr = ["html","css","js"]
        for(var key in arr){
            console.log(key);   //key获取的是数组的下标
            // console.log(arr[key]);
        }
        var obj = {
            name:"lisi",
            age:18
        }
        for(var k in obj){
            console.log(k);
            console.log(obj[k]);
        }
    </script>

9、some 方法 只要数组中有一项满足某个条件，结果就是true

<script>
        var arr = [3,4,5,6];
        //只要数组中有一项满足某个条件，结果就是true
        var res = arr.some(item=>{
            return item>7;
        })
        console.log(res);
    </script>

10、map 方法

<script>
        var arr = [
            {name:"html",value:"12px"},
            {name:"css",value:"13px"},
            {name:"js",value:"14px"}
        ]
         arr.map(item => {
             var value = parseInt(item.value)*2;
             item.value = value;
            })
            console.log(arr);
    </script>

11、filter 过滤 只要达到某个条件，就会返回一个新的数组

<script>
        var arr = [3,4,5,6];
        var res = arr.filter(item=>{
            return item>4;
        })
        console.log(res);
        var students = [
            {name:"李四",age:"18岁"},
            {name:"李二",age:"11岁"},
            {name:"礼物",age:"19岁"},
            {name:"王思",age:"22.5岁"}
        ]
        var result = students.filter(item=>{
            return parseFloat(item.age)>11;
        })
        console.log(result)
    </script>