1、数组

1、数组

1-1.join转换为字符串方法

.join(seprate) —>可以将数组拼接成字符串

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

提取导演名字转化为字符串

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

2-1.sort排序方法

升序：
arr.sort(function(a,b){
return a-b;
})
降序：
arr.sort(function(a,b){
return b-a;
})

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

1-3.简单求和reduce方法

只能对简单的值数组求和，如[5,85,68]等
arr.reduce((a,b)=>a+b)

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

1-4.reverse颠倒方法

能够改变数组结构
.reverse() 颠倒数组

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

1-5.遍历方法

for in 遍历下标

<script>
        /* for in 遍历下标 */
         var arr = ["html","css","js"];
         for(var key in arr){
             console.log(key);  //key在数组中获取的是数组的下标
             console.log(arr[key]);
         }
    </script>

<script>
        var obj = {
            name:"list",
            age:18
        }
        for(var k in obj){
            console.log(obj[k])     //在对象中指的是对象的属性
        }
    </script>

for of 遍历值

<script>
        var arr = [3,4,5];
        /* for of 遍历值 */ 
        for(var value of arr){
            console.log(value)  //value获取的是数组的值
            console.log(arr.indexOf(value))     //获取数组下标
        }
    </script>

forEach()

<script>
        var arr = ["html","css","js"];
        arr.forEach(function(item){
            console.log(item)
        })
    </script>

<script>
        var arr = [2,3,4];
        var newArr = []
        arr.forEach(function(item){
            newArr.push(item*2)
        })
        console.log(newArr)
    </script>

遍历数组添加对象属性

<script>
        var names = [
            {name:"李四"},
            {name:"王五"}
        ]
        names.forEach(function(item){
            item.like = true;
        })
        console.log(names);
    </script>

map() —改变数组中的每一项

<script>
        var arr = [2,3,4];
        var test = arr.map(item=>{
            return item*2;
        })
        console.log(test);
    </script>

提取number进行翻倍

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

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

some()

返回值Boolean
只要数组中有一项满足某个条件，结果返回true

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

every()

every:
数组中的每一项都必须满足某个条件 —返回Boolean

<script>
        /*
        every:
        数组中的每一项都必须满足某个条件    --返回Boolean
        */ 
        var arr = [2,3,4];
        var res = arr.every(item=>{
            return item>2;
        })
        console.log(res)
    </script>

filter() —过滤

只要是达到某个条件，就会返回一个新的数组

<script>
        /* 只要是达到某个条件，就会返回一个新的数组 */ 
        var arr = [3,4,5,6];
        var res = arr.filter(item=>{
            return item>4;
        })
        console.log(res)
    </script>

返回年龄大于11岁的对象数组

<script>
        var students = [
            {name:"李四",age:"18岁"},
            {name:"李二",age:"11岁"},
            {name:"李五",age:"19岁"},
            {name:"王四",age:"22.5岁"},
        ]
        var res = students.filter(item=>{
            return parseFloat(item.age)>11;
        })
        console.log(res)
    </script>

根据搜索框内容返回名字中含有相同值的对象数组

<input type="text" id="app">
    <script>
        var students = [
            {name:"李四",age:"18岁"},
            {name:"李二",age:"11岁"},
            {name:"李五",age:"19岁"},
            {name:"王四",age:"22.5岁"},
        ]
        var input = document.getElementById("app");
        input.onkeydown = function(event){
            if(event.keyCode == 13){
                console.log(this.value)
                var res = students.filter(item=>{
                    return item.name.includes(this.value);
                })
                console.log(res)
            }
        }
    </script>

find()

find
返回数组中满足条件的某个值 —只返回一个值

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

findIndex()

findIndex
返回数组中满足条件的某个值的下标

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

根据输入框内容的数字删除对应id的对象数组

<input type="text" id="app">
    <script>
        var arr = [
            {name:"李四",id:1001},
            {name:"王四",id:1002},
            {name:"张四",id:1003},
            {name:"赵四",id:1004},
        ]
        var input = document.getElementById("app");
        input.onkeydown = function(event){
            if(event.keyCode == 13){
                console.log(this.value);
                var num = arr.findIndex(item=>{
                    return item.id == this.value;
                })
                arr.splice(num,1);
                console.log(arr);
            }
        }
    </script>

JavaScropt

10.数组