排序

  1. var arr1 = [{
  2.             name:"肯德基",price:100,distance:500
  3.         },{
  4.             name:"必胜客",price:200,distance:100
  5.         },{
  6.             name:"华莱士",price:50,distance:1000
  7.         }]
  8.         var mySelect = document.getElementById("mySelect")
  9.         mySelect.onchange = function(){
  10.             // if(this.value === "distance"){
  11.             //     arr1.sort(function(a,b){
  12.             //         return a.distance-b.distance
  13.             //     })
  14.             //     console.log(arr1);
  15.             // }else{
  16.             //     arr1.sort(function(a,b){
  17.             //         return a.price-b.price
  18.             //     })
  19.             //     console.log(arr1);
  20.             // }
  22.             var value = this.value
  23.             // 对象的某个属性时变量，不能用. 只能使用[]的方式
  24.             arr1.sort((a,b)=>a[value]-b[value])
  25.             console.log(arr1);
  26.         }
  1. var sum = 0
  2.         var arr = [{
  3.             name:"肯德基",price:100,distance:500,num:2
  4.         },{
  5.             name:"必胜客",price:200,distance:100,num:1
  6.         },{
  7.             name:"华莱士",price:50,distance:1000,num:5
  8.         }]
  9.         for(var i=0;i<arr.length;i++){
  10.             sum += (arr[i].price*arr[i].num)
  11.         }
  12.         console.log(sum);
  13. 求总价格

遍历

  1. var value
  2.         var arr = [
  3.             {name:'html',value:"12px"},
  4.             {name:'css',value:"13px"},
  5.             {name:'hjs',value:"14px"}
  6.         ]
  7.         arr.forEach(item=>{
  8.             value = parseInt(item.value)*2;
  9.             item.value = value 
  10.         })
  11.         console.log(arr);
  1. var nums = []
  2.         var arr = [
  3.             {name:'html',value:"12px"},
  4.             {name:'css',value:"13px"},
  5.             {name:'hjs',value:"14px"}
  6.         ]
  7.         arr.map(item=>{
  8.             nums.push(parseInt(item.value)*2)
  9.         })
  10.         console.log(nums.join("-"));
  12.         var str = [12,13,14]
  13.         for(let v in str){
  14.             str[v] *= 2
  15.         }
  16.         console.log(str);
  17. 将数组中的value值变成24-26-28

some

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

every

  1. // 返回值为布尔值
  2.         // every    数组中的每一个项，都必须满足某个条件
  3.         var arr = [2,3,4]
  4.         var res = arr.every(item=>{
  5.             return item>2
  6.         })
  7.         console.log(res);    //false

filter

  1. var students = [
  2.             {name:"李四",age:"18岁"},
  3.             {name:"李二",age:"11岁"},
  4.             {name:"李五",age:"19岁"},
  5.             {name:"王四",age:"22.5岁"}
  6.         ]
  7.         var result = students.filter(item=>{
  8.             return parseInt(item.age)>11
  9.         })
  10.         console.log(result);
  11. 拿到age大于11岁的
  1.         var students = [
  2.             {name:"李四",age:"18岁"},
  3.             {name:"李二",age:"11岁"},
  4.             {name:"李五",age:"19岁"},
  5.             {name:"王四",age:"22.5岁"}
  6.         ]
  7.         var app = document.getElementById('app')
  8.         app.onkeydown = function(event){
  9.             if(event.keyCode === 13){
  10.                 var keyword = this.value
  11.                 var res = students.filter(item=>{
  12.                     return item.name.includes(keyword) || item.age.includes(keyword)
  13.                 })
  14.                 console.log(res);
  15.             }
  16.         }
  17.    在输入框中输入值，返回符合条件的新数组

find

  1.                 var arr = [2,3,4,3]
  2.         var res = arr.find(item=>{
  3.             return item == 3
  4.         })
  5.         console.log(res);//3

findIndex

  1.                 var arr = [2,3,4]
  2.         var index = arr.findIndex(item=>{
  3.             return item == 4
  4.         })
  5.         console.log(index);        //2
  1.         <input type="text" id="app">
  2.     <script>
  3.         var arr = [
  4.             {name:"李四",id:1001},
  5.             {name:"王四",id:1002},
  6.             {name:"张四",id:1003},
  7.             {name:"赵四",id:1004}
  8.         ]
  10.         var app = document.getElementById('app')
  11.         app.onkeydown = function(event){
  12.             if(event.keyCode === 13){
  13.                 // var keyword = this.value
  14.                 // for(var key in arr){
  15.                 //     if(keyword == arr[key].id){
  16.                 //         arr.splice(key,1)
  17.                 //         console.log(arr);
  18.                 //     }
  19.                 // }
  20.                 var id = Number(this.value)
  21.                 var res = arr.findIndex(item=>{
  22.                     return item.id == id
  23.                 })
  24.                 arr.splice(res,1)
  25.                 console.log(arr);
  26.             }
  27.         }
  28.     </script>
  29.     在输入框中输入id，通过输入的id在数组中查找，有的话，就删除

复习

  1.         <h2>历史搜索</h2>
  2.     <input type="text" id="app">
  3.     <div id="container">
  5.     </div>
  6.     <script>
  7.         // 1、获取输入框的值
  8.         var historys = []
  9.         $('#app').keyup(function(event){
  10.             if(event.keyCode === 13){
  11.                 // 2、将值添加到一个数组中
  12.                 var value = $(this).val()
  13.                 //tips：jQuery可以将带html结构的字符串，转化为html
  14.                 var template = `                                    
  15.                             <button>${value}</button>
  16.                         `
  17.                 // 只有数组中不包含输入的关键字才向数组添加
  18.                 if(value && !historys.includes(value)){
  19.                     historys.unshift(value)
  20.                     console.log(historys);
  21.                     // 3、渲染数据到页面
  22.                         $('#container').prepend(template)
  23.                         $(this).val("")
  24.                 }else{
  25.                     // 4、当输入的值数组中存在的时候，让其置于数组的首位
  26.                     var index = historys.indexOf(value)
  27.                     var res = historys.splice(index,1)
  28.                     //historys.unshift(value)
  29.                     historys.unshift(...res)
  30.                     console.log(historys);
  31.                     // ui联动
  32.                     $('#container button').eq(index).remove()
  33.                     $('#container').prepend(template)
  34.                     $(this).val("")
  35.                 }
  36.             }
  37.         })
  38.     </script>
  39.     历史搜索：在输入框中输入，然后将其value值添加到数组中，并通过字符串模版将其添加到页面上，
  40.                         如果输入的有重复的值，则将那个中放到数组和页面的顶部(前面)
  1.         让数组中被搜索的值置于顶部
  2.     <input type="text" id="app">
  3.     <script>
  4.         // 让数组中被搜索的值置于顶部
  5.         var arr = ['html','css','js','vue','react']
  6.         $('input').keyup(function(event){
  7.             if(event.keyCode === 13){
  8.                 var value = $(this).val()
  9.                 if(arr.includes(value)){
  10.                     var index = arr.indexOf(value)
  11.                     var res = arr.splice(index,1)
  12.                     arr.unshift(...res)
  13.                     console.log(arr);
  14.                     $(this).val("")
  15.                 }
  16.             }
  17.         })
  18.     </script>