1. 历史搜索

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.     <input type="text" id="input">
  11.     <h2>历史搜索</h2>
  12.     <div id="app"></div>
  13.     <script>
  14.         var input = document.getElementById("input");
  15.         var app = document.getElementById("app");
  16.         var historys = []
  17.         // 1.获得输入框的值
  18.         input .onkeydown=function(event){
  19.             if(event.keyCode ==13){
  20.                 // 2.只要数组中没有的值同时字符不能为空，才向数组添加
  21.                 if(this.value !="" && historys.indexOf(this.value)== -1){
  22.                     var p= document.createElement("p");
  23.                     p.innerHTML = this.value;
  24.                     app.prepend(p);
  25.                     historys.unshift(this.value);
  26.                     this.value=""
  27.                     console.log(historys)
  28.                 }else{
  29.                     alert("输入的字段不能为空或相同字段")
  30.                 }
  31.             }
  32.         }
  33.     </script>
  34. </body>
  35. </html>

搜索历史

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
  9. </head>
  10. <body>
  11.     <h2>历史搜索</h2>
  12.     <input type="text" id="app">
  13.     <div id="container">
  15.     </div>
  16.     <script>
  17.         // 1.获取输入框的值
  18.         var historys =[];
  19.         $("#app").keyup(function(){
  21.             if(event.keyCode==13){
  22.                 // 2. 将值添加到一个数组中
  23.                 var value = $(this).val();
  24.                 var template =`
  25.                     <button>${value}</button>
  26.                     `
  27.             // 只要数组中不包含输入的关键字才向数组添加
  28.                 if(value && !historys.includes(value)){
  29.                     historys.unshift(value);
  30.                     // 3.渲染数据到页面
  32.                     $("#container").prepend(template)
  33.                     $(this).val("")
  35.                 }
  36.                 else{
  37.                     // 4.当输入的值在数组中存在时，让其置于数组首位
  38.                     console.log(value)
  39.                     var index =historys.indexOf(value);
  40.                     var res = historys.splice(index,1);
  41.                     historys.unshift(value);
  42.                     console.log(historys)
  43.                     // ui联动
  44.                     $("container button").eq(index).remove();
  45.                     $("#container").prepend(template)
  46.                 }
  47.             }
  48.         })
  49.     </script>
  50. </body>
  51. </html>

2. 求最小值

  1.     <script>
  2.         /* 求最小值 */
  3.         var arr = [4,6,18,1];
  4.         /* 
  5.         var min = arr[0]
  7.          */
  8.         var min  = arr[0];
  9.         for(var i=1;i<arr.length;i++){
  10.             if(min>arr[i]){
  11.                 min = arr[i];
  12.             }
  13.         }
  14.         /* 
  15.         min =4  arr[3]=1
  16.          */
  17.         console.log(min);
  18.     </script>

3. 增加内容

  1.  <script>
  2.         var arr = [
  3.             {name:"lisi",age:"12px"},
  4.             {name:"wangwu",age:"13px"},
  5.             {name:"zhangsan",age:"14px"}
  6.         ]
  7.         /* 
  8.         age>24  like true
  9.          [
  10.             {name:"lisi",age:24,like:false},
  11.             {name:"wangwu",age:26,like:true},
  12.             {name:"zhangsan",age:28,like:true}
  13.         ]
  14.          */
  15.         for(var i=0;i<arr.length;i++){
  17.             var age = parseFloat(arr[i].age)*2
  18.             console.log(age)
  19.             arr[i].age = age;
  20.             if(age>24){
  21.                 arr[i].like = true;
  22.             }else{
  23.                 arr[i].like = false;
  24.             }
  26.         }
  27.         console.log(arr)
  28.     </script>

4.搜索

  1.     <script>
  2.         /* trim去除字符串前后尾的空格 */
  3.         var str = "  fdsf    ";
  4.         console.log(str.trim())
  5.     </script>
  1.     <input type="text" id="input">
  2.     <script>
  3.         var searchs = [{
  4.             spell: "A",
  5.             citys: [{
  6.                     name: "阿里",
  7.                     id: 1001
  8.                 },
  9.                 {
  10.                     name: "阿拉",
  11.                     id: 1001
  12.                 },
  13.                 {
  14.                     name: "阿克",
  15.                     id: 1001
  16.                 }
  17.             ]
  18.         }, {
  19.             spell: "T",
  20.             citys: [{
  21.                     name: "天下",
  22.                     id: 2001
  23.                 },
  24.                 {
  25.                     name: "天天",
  26.                     id: 2002
  27.                 },
  28.                 {
  29.                     name: "天里",
  30.                     id: 2003
  31.                 }
  32.             ]
  33.         }]
  34.         /*
  35.         input输入 里 
  36.          */
  37.         //    var arr = [
  38.         //        {    name:"天里",id:2003},{name:"阿里",id:1001}
  39.         //    ]
  41.         var keyword = "里";
  42.         var arr = [];
  43.         var input = document.getElementById("input");
  44.         input.onkeydown = function (event) {
  45.             if (event.keyCode == 13) {
  46.                 if (this.value != "") {
  47.                     console.log(this.value)
  48.                     var kw = this.value;
  49.                     addCity(kw);
  50.                     console.log(arr);
  51.                 }
  52.             }
  53.         }
  54.         function addCity(keyword) {
  55.             for (var i = 0; i < searchs.length; i++) {
  56.                 var citys = searchs[i].citys;
  57.                 for (j = 0; j < citys.length; j++) {
  58.                     // console.log(citys[j])
  59.                     if (citys[j].name.includes(keyword)) {
  60.                         arr.push(citys[j]);
  61.                     }
  62.                 }
  63.             }
  64.         }
  65.     </script>

5. 让数组中被搜索的值，至于顶部

  1.     <input type="text" id="app">
  2.     <script>
  3.         // 让数组中被搜索的值，至于顶部
  4.         var arr = ["html","css","js","vue","react"]
  5.         var historys =[];
  6.         $("#app").keyup(function(event){
  7.             if(event.keyCode==13){
  8.                 var value = $(this).val();
  10.                 if(arr.indexOf(value)!= -1){
  11.                     console.log(value)
  12.                     var index = arr.indexOf(value);
  13.                     arr.splice(index,1);
  14.                     arr.unshift(value);
  15.                     console.log(arr)
  16.                 }
  17.             }
  18.         }) 
  19.     </script

6. 升序与降序

  1. <script>
  2.         var arr =[12,3,5,11,1];
  3.         console.log(arr.sort())
  4.         // arr.sort(function(a,b){
  5.         //     return a-b;
  6.         // })
  7.         var newArr =arr.sort(function(a,b){
  8.             return a-b;
  9.         })
  10.         var c =[12,14,45,2];
  11.         var test =c.sort(function(a,b){
  12.             return b-a;
  13.         })
  14.         console.log(newArr)
  15.         console.log(test)
  16.     </script>
  1. <select  id="mySelect">
  2.         <option value="price">低价优先</option>
  3.         <option value="distance">距离优先</option>
  4. </select>
  6. <script>
  7.         var arr = [{
  8.             name:"肯德基",price:100,distance:100
  9.         },
  10.         {
  11.             name:"必胜客",price:200,distance:500
  12.         },
  13.         {
  14.             name:"华莱士",price:50,distance:1000
  15.         }
  16.     ]
  17.     /* 根据价格进行升序 --从小到大 */
  18.     arr.sort(function(a,b){
  19.         return a.price-b.price;
  20.     })
  21.     console.log(arr);
  22.     /* 根据距离进行降序 --从大到小 */
  23.     arr.sort(function(a,b){
  24.         return b.distance-a.distance;
  25.     })
  26.     console.log(arr);
  27.     </script>

II.注意

  1. <script>
  2.         /*  对象的某个属性是变量,不能使用.。只能使用[] */
  3.         var obj = {
  4.             name:"lisi",
  5.             age:18
  6.         }
  7.         var value = "name";
  8.         console.log(obj.value);
  9.         console.log(obj[value]);
  10.     </script>

7. 输入谁的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>

8. 过滤数组并整合

(1)

image.png

  1.     <script>
  2.         var obj ={
  3.             top250:["你好154","他的152"],
  4.             comingSoon:["防抖456","节流121"],
  5.             theaters:["放大镜222","防静电666"]
  6.         }
  7.         var arr =[];
  8.         // 1.获取对象中属性的值
  9.         for(var k in obj){
  10.             // console.log(obj[k]);
  11.             // 2.需要将属性的值整合到一个数组
  12.             arr.push(obj[k][0])
  13.         }
  14.         // console.log(arr)
  15.         var reg =/\d/g;
  16.         var res =[];
  17.         // 3.对数组中每一项值，过滤
  18.         arr.forEach(name=>{
  19.             var name = name.replace(reg,"");
  20.             console.log(name)
  21.             res.push({
  22.                 name
  23.             })
  24.         })
  25.         console.log(res)
  26.     </script>

(2)

image.png

  1.  <script>
  2.         var str =
  3.         `<span>9.7</span><span >-248人评价</span>
  4.         <br><span>9.5</span><span>-48人评价</span>
  5.         <br><span>9.6</span><span>-508人评价</span>`
  7.         var arr =str.split("<br>"); 
  8.         var reg =/<[^<>]+>/g;
  9.         var res = arr.map(item=>{
  10.             return item.trim().replace(reg,"")
  11.         })
  12.         // console.log(res)
  13.         var list=[];
  14.         res.forEach(item=>{
  15.             // console.log(item.split("-"))
  16.             list.push(item.split("-"))
  17.         })
  18.         // console.log(list)
  19.         var sum =[];
  20.         var rSum =/[^\d]/g;
  21.         list.forEach(item=>{
  22.             // console.log(item)
  23.             sum.push({
  24.                 star:item[0],
  25.                 rating:item[1].replace(rSum,"")
  26.             })
  27.         })
  28.         console.log(sum)
  29.     </script>

9. 过滤相同值并整合

（1）

  1. <script>
  2.         var  arr = [
  3.             {name:"lisi"},
  4.             {name:"html"},
  5.             {name:"css"},
  6.             {name:"vue"},
  7.             {name:"vue"},
  8.             {name:"html"}
  9.         ]
  10.         /*var list =  ["lisi","html","css","vue"] */
  11.         /* 1、 list [ ]; */
  12.         var list = [];
  13.         arr.forEach(item=>{
  14.             var {name} = item;
  15.             if(!list.includes(name)){
  16.                 list.push(name);
  17.             }
  18.         })
  19.         console.log(list)
  20.     </script>

（2）

  1. <script>
  2.         var arr ={
  3.             A:[{city:"武汉"},{city:"广州"}],
  4.             B:[{city:"深圳"},{city:"广州"}],
  5.             C:[{city:"上海"},{city:"武汉"}]
  6.         }
  7.         /* 
  8.         var citys  = ["武汉","广州","深圳","上海"]
  9.          */
  10.         var list = [];
  11.         for(var key in arr){
  12.             // console.log(arr[key])
  13.             list.push(...arr[key]);
  14.         }
  15.         var res = [];
  16.         list.forEach(item=>{
  17.             var {city}= item;
  18.             console.log(item)
  19.             if(!res.includes(city)){
  20.                 res.push(city);
  21.             }
  22.         })
  23.         console.log(res)
  24.     </script>