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.     <script>
  11.         var arr = [{
  12.             name:"肯德基",price:100,distance:100
  13.         },
  14.         {
  15.             name:"必胜客",price:100,distance:500
  16.         },
  17.         {
  18.             name:"华莱士",price:100,distance:1000
  19.         }
  20.         ]
  21.         // 根据价格进行升序 --从小到大
  22.         arr.sort(function(a,b){
  23.             return a.price-b.price;
  24.         })
  25.         console.log(arr);
  26.         // 根据距离进行降序 --从大到小
  27.         arr.sort(function(a,b){
  28.             return b.distance-a.distance;
  29.         })
  30.         console.log(arr);
  31.     </script>
  32. </body>
  33. </html>

让数组中被搜索的值,至于顶部

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

历史搜素

  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.     <input type="text" id="input">
  12.     <h2>历史搜索</h2>
  13.     <div id="container">
  15.     </div>
  16.     <script>
  17.         var historys = [ ];
  18.         /* 1、enter获取输入框的值 */
  19.         $("#input").keyup(function(event){
  20.             if(event.keyCode==13){
  22.                 var value = $(this).val();
  23.                 if(value){
  24.                     /* 2、只有数组中不包含搜索的值,才添加 */
  25.                     if(!historys.includes(value)){
  26.                         historys.unshift(value);
  27.                         $("#container").prepend(`<button>${value}</button>`)
  28.                         console.log(historys)
  29.                         $("#input").val("")
  30.                     }else{
  31.                         /* 3、将数组中存在的值,至于数组的顶部 */
  32.                         console.log(value)
  33.                         var index = historys.indexOf(value);
  34.                         historys.splice(index,1);
  35.                         historys.unshift(value);
  36.                         console.log(historys)
  37.                         $("#container button").eq(index).remove();
  38.                         $("#container").prepend(`<button>${value}</button>`)
  39.                         $("#input").val("")
  40.                     }
  41.                 }
  42.             }
  43.         })
  44.     </script>
  45. </body>
  46. </html>

demo

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

demo2

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

数组去重

  1. # 方法一
  2. var arr = [1,2,1,4,5,6,4]
  3. var res=[]
  4. arr.forEach(item=>{
  5.   if(res.indexOf(item) ==-1){
  6.     res.push(item)
  7.   }
  8. })
  9. console.log(res)
  11. # 方法二
  12. // set--类数组对象 里面的值不重复
  13. // ... 展开语法也适用于set对象
  15. var s = new Set([2,3,2,1])
  16. console.log(s)  // {2,3,1}
  18. var arr = [1,2,1,4,5,6,4]
  19. var s = new Set(arr)
  20. console.log(s) // {1,2,4,5,6}
  21. console.log([...s]) // [1,2,4,5,6]