分割数组

上课事例 - 图2

  1.  <script>
  2.         var arr=[1,2,3,4,5,6,7,8,9]
  3.         // 分析
  4.         // slice(0,3)            0-2
  5.         // slice(3,6)         3-5
  6.         // slice(6,9)         6-8
  7.         var newarr=[]
  8.         for(var i=0;i<arr.length;i+=3){
  9.            newarr.push(arr.slice(i,i+3))
  10.         }
  11.         console.log(newarr);
  12.     </script>

上课事例 - 图3

增删改查数组

1-添加like属性 并age大于24的like为true

上课事例 - 图4

  1. <body>
  2.     <script>
  3.         var arr=[
  4.             {name:"lisi",age:"12px"},
  5.             {name:"lisi",age:"13px"},
  6.             {name:"lisi",age:"14px"}
  7.         ]
  8.         for(var i=0;i<arr.length;i++){
  9.             var age=parseInt(arr[i].age)*2 
  10.             arr[i].age=age;
  11.             arr[i].like=true;
  12.             if(parseInt(arr[i].age)<=24){
  13.                 arr[i].like=false;
  14.             }
  15.         }
  16.         console.log(arr);
  17.     </script>
  18. </body>

上课事例 - 图5


2-求最小值

  1. <script>
  2.         var arr=[4,6,18,1];
  3.         var num;
  4.         for(var i=0;i<arr.length;i++){
  5.             num=arr[i]
  6.             if(arr[i]>num){
  7.                 num=arr[i]
  8.             }
  9.         }
  10.         console.log(num);
  11.     </script>

3-合并+去除数组

image.png

  1. <script>
  2.         var arr = [
  3.             {
  4.                 name: "lisi",
  5.                 age: 18,
  6.                 likes: ["lol", "zq"],
  7.                 alikes: ["music", "111"],
  8.                 sex: "male"
  9.             },
  10.             {
  11.                 name: "王五",
  12.                 age: 18,
  13.                 likes: ["12", "book"],
  14.                 alikes: ["go", "222"],
  15.                 sex: "male"
  16.             },
  17.             {
  18.                 name: "张三",
  19.                 age: 18,
  20.                 likes: ["篮球", "run"],
  21.                 alikes: ["333", "333"],
  22.                 sex: "male"
  23.             }
  24.         ]
  25.            var res=[];
  26.            for(var i=0;i<arr.length;i++){
  27.                var name=arr[i].name
  28.                var age=arr[i].age
  29.                var likes=arr[i].likes.concat(arr[i].alikes)
  30.                res.push({
  31.                    name:name,
  32.                    age:age,
  33.                    likes:likes
  34.                })
  35.            }
  36.            console.log(res);
  37.     </script>

es6方法:

  1. <script>
  2.          var arr = [
  3.             {
  4.                 name: "lisi",
  5.                 age: 18,
  6.                 likes: ["lol", "zq"],
  7.                 alikes: ["music", "111"],
  8.                 sex: "male"
  9.             },
  10.             {
  11.                 name: "王五",
  12.                 age: 18,
  13.                 likes: ["12", "book"],
  14.                 alikes: ["go", "222"],
  15.                 sex: "male"
  16.             },
  17.             {
  18.                 name: "张三",
  19.                 age: 18,
  20.                 likes: ["篮球", "run"],
  21.                 alikes: ["333", "333"],
  22.                 sex: "male"
  23.             }
  24.         ]
  25.         var res=[];
  26.         for(var i=0;i<arr.length;i++){
  27.             //解构
  28.             var{name,age,likes,alikes}=arr[i];
  29.             //展开
  30.             likes.push(...alikes);
  31.             //键值相同
  32.             var obj={
  33.                 name,
  34.                 age,
  35.                 likes
  36.             }
  37.             res.push(obj)
  38.         }
  39.         console.log(res);
  40.     </script>

升序降序

1-根据价格升序

  1.      var arr=[
  2.             {name:"肯德基",price:100,distance:100},
  3.             {name:"必胜客",price:200,distance:500},
  4.             {name:"华莱士",price:50,distance:1000},
  5.     ]
  6.     //根据价格进行升序 --从小到大
  7.     arr.sort(function(a,b){
  8.         return a.price-b.price
  9.     })
  10.     console.log(arr);

上课事例 - 图7

2-根据价格降序

  1.  //根据价格进行降序 --从大到小
  2.     arr.sort(function(a,b){
  3.         return b.price-a.price
  4.     })
  5.     console.log(arr);

上课事例 - 图8

3-根据距离进行降序

  1. //根据距离进行降序 --从大到小
  2.     arr.sort(function(a,b){
  3.         return b.distance-a.distance
  4.     })
  5.     console.log(arr);

上课事例 - 图9

4-根据选择距离/价格排序

  1. <select  id="myselect">
  2.         <option value="price">低价优先</option>
  3.         <option value="distance">距离优先</option>
  4.     </select>
  5.     <script>
  6.          var arr=[
  7.             {name:"肯德基",price:100,distance:100},
  8.             {name:"必胜客",price:200,distance:1500},
  9.             {name:"华莱士",price:50,distance:1000},
  10.     ]
  11.     var myselect=document.getElementById("myselect");
  12.     myselect.onchange=function(){
  13.         console.log(this.value);
  14.         var value=this.value;
  15.         arr.sort(function(a,b){
  16.          return a[value]-b[value]   //对象的某个属性使变量 不能使用.  只能使用[]
  17.         })
  18.         console.log(arr);
  19.     }
  20.     </script>

5-求和

  1. <script>
  2.          var arr=[
  3.             {name:"肯德基",price:100,distance:100,num:2},
  4.             {name:"必胜客",price:200,distance:1500,num:1},
  5.             {name:"华莱士",price:50,distance:1000,num:5},
  6.     ]
  7.     var sum=0;
  8.     for(var i=0;i<arr.length;i++){
  9.         sum+=arr[i].price*arr[i].num
  10.     }
  11.     console.log(sum);
  13.     </script>

关键字搜索查询/删除

1-根据id输入删除

  1. <body>
  2.     <input type="text" id="app">
  3.     <script>
  4.         var arr=[
  5.             {name:"李四",id:"1001"},
  6.             {name:"王四",id:"1002"},
  7.             {name:"张四",id:"1003"},
  8.             {name:"赵四",id:"1004"},
  9.         ]
  10.         var app=document.getElementById("app")
  11.         app.onkeydown=function(event){
  12.             if(event.keyCode==13){
  13.                 var id=Number(this.value)
  14.                 var index=arr.findIndex(item=>{
  15.                     return item.id==id;
  16.                 })
  17.                 arr.splice(index,1);
  18.                console.log(arr);
  19.             }
  20.         }
  21.     </script>
  22. </body>

上课事例 - 图10

2-选出大于16岁的成员：

  1. <script>
  2.         var arr=[
  3.             {name:"李四",age:"18岁"},
  4.             {name:"李四",age:"20岁"},
  5.             {name:"李四",age:"8岁"},
  6.             {name:"李四",age:"16岁"}
  7.         ]
  8.         var text=[];
  9.         for(var i=0;i<arr.length;i++){
  10.             var age=parseInt(arr[i].age)
  11.             if(age>16){
  12.                 text.push(arr[i])
  13.             }
  14.         }
  15.         console.log(text);
  16.     </script>

上课事例 - 图11

3-关键字查询

方法1

  1. <body>
  2.     <input type="text" id="input">
  3.     <script>
  4.         var searchs = [
  5.             {
  6.                 spell: "A",
  7.                 citys: [
  8.                     { name: "阿里", id: 1001 },
  9.                     { name: "阿拉", id: 1001 },
  10.                     { name: "阿克", id: 1001 },
  11.                 ]
  12.             },
  13.             {
  14.                 spell: "T",
  15.                 citys: [
  16.                     { name: "天下", id: 2001 },
  17.                     { name: "天天", id: 2002 },
  18.                     { name: "天里", id: 2003 }
  19.                 ]
  20.             }
  21.         ]
  22.         var arr = [];
  23.         var input = document.getElementById("input");
  24.         //1、获取关键字
  25.         input.onkeydown = function (event) {
  26.             if (event.keyCode == 13) {
  27.                 if (this.value != "") {
  28.                     var kw = this.value;
  29.                     //2、使用关键字对数组进行遍历
  30.                     for (var i = 0; i < searchs.length; i++) {
  31.                         var citys = searchs[i].citys;
  32.                         for (j = 0; j < citys.length; j++) {
  33.                             //3、获取包含关键字的项目
  34.                             if (citys[j].name.includes(kw)) {
  35.                                 arr.push(citys[j])
  36.                             }
  37.                         }
  38.                     }
  39.                     console.log(arr);
  40.                 }
  41.             }
  42.         }
  43.     </script>

方法2

  1. <body>
  2.     <input type="text" id="input">
  3.     <script>
  4.         var searchs = [
  5.             {
  6.                 spell:"A",
  7.                 city: [
  8.                     { name: "阿里", id: 1001 },
  9.                     { name: "阿拉", id: 1001 },
  10.                     { name: "阿克", id: 1001 },
  11.                 ]
  12.             },
  13.             {
  14.                 spell:"T",
  15.                 city: [
  16.                     { name: "天下", id: 2001 },
  17.                     { name: "天天", id: 2002 },
  18.                     { name: "天里", id: 2003 }
  19.                 ]
  20.             }
  21.         ]
  23.         var arr = [];
  24.         var input = document.getElementById("input");
  25.         input.onkeydown = function (event) {
  26.             if (event.keyCode == 13) {
  27.                 if (this.value != "") {
  28.                     var kw = this.value;
  29.                     addCity(kw);
  30.                     console.log(arr);
  31.                 }
  32.             }
  33.         }
  34.         function addCity(keyword) {
  35.             for (var i = 0; i < searchs.length; i++) {
  36.                 var city = searchs[i].city;
  37.                 for (j = 0; j < city.length; j++) {
  38.                     if (city[j].name.includes(keyword)) {
  39.                         arr.push(city[j]);
  40.                     }
  41.                 }
  42.             }
  43.         }
  44.         console.log(arr);
  45.     </script>
  46. </body>

历史搜索

1-初级历史搜索(遇到重复弹窗口)

  1. <body>
  2.     <input type="text" id="input">
  3.     <h2>历史搜索</h2>
  4.     <div id="app"></div>
  5.     <script>
  6.         var input = document.getElementById("input");
  7.         var historys = []
  8.         //1\获取输入框的值
  9.         input.onkeydown = function (event) {
  10.             if (event.keyCode == 13) {
  11.                 //2、只要数组中没有的值同时字符不能为空，才向数组添加
  12.                 if (this.value != "" && historys.indexOf(this.value) == -1) {
  13.                     var p = document.createElement("p");
  14.                     p.innerHTML = this.value;
  15.                     app.prepend(p);
  16.                     historys.unshift(this.value);
  17.                     this.value = ""
  18.                     console.log(historys)
  19.                 } else {
  20.                     alert("输入的字段不可以是空字符或相同字段")
  21.                 }
  22.             }
  23.         }
  24.     </script>
  25. </body>

2-进阶历史搜索（搜索重复置于顶部）

jquery：

  1.  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
  2. </head>
  4. <body>
  5.     <h2>历史搜索</h2>
  6.     <input type="text" id="app">
  7.     <div class="container">
  9.     </div>
  10.     <script>
  11.         //1、获取输入框的值
  12.         var historys = [];
  13.         $("#app").keyup(function (event) {
  14.             if (event.keyCode == 13) {
  15.                 //2、将值添加到一个数组里面去
  16.                 console.log(Boolean($(this).val()))
  17.                 var value = $(this).val();
  18.                 var template =
  19.                     `
  20.                     <button>${value}</button>
  21.                     `
  22.                 //只有数组中不包含这个关键字才向数组添加
  23.                 if (value && !historys.includes(value)) {
  24.                     historys.unshift(value);
  25.                     //3、渲染数据到页面
  26.                     $(".container").prepend(template)
  27.                     $(this).val("")
  28.                 } else {
  29.                     //4、当输入的值数组中存在的时候 让其至于数组的首位
  30.                     var index = historys.indexOf(value);
  31.                     var res = historys.splice(index, 1);
  32.                     historys.unshift(value);
  33.                     console.log(historys);
  34.                     //ui联动
  35.                     $(".container button").eq(index).remove();
  36.                     $(".container").prepend(template)
  37.                 }
  38.             }
  39.         })
  40.     </script>
  41. </body>

需要注意的是jq渲染的页面是可以直接用<button>${value}</button>将带html结构的字符串,转化成html
但是原生的js不能识别标签

置于数组首位原理

  1. <script>
  2.         var arr=["html","css","js","vue"]
  3.         var res=arr.splice(2,1)
  4.         console.log(res);
  5.         console.log(arr);
  6.         arr.unshift(...res);
  7.         console.log(arr);
  8.     </script>

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

  1. <body>
  2.     <input type="text" id="app">
  3.     <script>
  4.         //让数组中被搜索的值 置于顶部
  5.         var arr = ["html", "js", "vue", "zz"]
  6.         $("#app").keyup(function (event) {
  7.             if (event.keyCode == 13) {
  8.                 var value = $(this).val();
  9.                 //只有包含才判断
  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>
  20. </body>

原生：
image.png

  1. <body>
  2.     <input type="text" id="app">
  3.     <script>
  4.         /* 需要将数组中被搜索到的值,至于数组的顶部 */
  5.         var arr = [ "html","css","js","vue","react"]
  6.         /*  [ "react","vue",html","css","js"] */
  7.         var app = document.getElementById("app");
  8.         app.onkeydown = function(event){
  9.             if(event.keyCode==13){
  10.                if(this.value){
  11.                    /* 1.数组中值对应的下标 */
  12.                    var index = arr.indexOf(this.value);
  13.                    /* 2.将值删除 */
  14.                    var item = arr.splice(index,1);
  15.                    /* 3.将删除的值至于数组的顶部 */
  16.                    arr.unshift(...item);
  17.                    console.log(arr)
  18.                }
  19.             }
  20.         }
  21.     </script>
  22. </body>

历史搜索记录

  1. <body>
  3.     <input type="text" id="input">
  4.     <h2>历史搜索</h2>
  5.     <div id="app">
  6.     </div>
  8.     <script>
  9.         var input = document.getElementById("input");
  10.         var app = document.getElementById("app");
  11.         var historys = []
  12.         /* 1、获取输入框的值 */
  13.         input.onkeydown = function (event) {
  14.             if (event.keyCode == 13) {
  15.                 // console.log(this.value)
  16.                 /* 2、只有数组中没有的值同时字符不能空,才向数组添加 */
  17.                 if (this.value != ""  && historys.indexOf(this.value) == -1) {
  18.                     var p = document.createElement("p");
  19.                     p.innerHTML = this.value;
  20.                     app.prepend(p);
  21.                     historys.unshift(this.value);
  22.                     this.value = ""
  23.                     console.log(historys)
  24.                 }else{
  25.                     alert("输入的字段不能是空字符或相同的字段")
  26.                 }
  27.             }
  28.         }
  29.     </script>
  31. </body>

原生历史搜索 记录置顶 点击删除

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  11.     </style>
  12. </head>
  14. <body>
  15.     <input type="text" id="input">
  16.     <h2>历史搜索</h2>
  17.     <div id="#app">
  18.     </div>
  19.     <script>
  20.         var input = document.getElementById("input")
  21.         var app = document.getElementById("#app")
  22.         var historys = []
  23.         var item = document.getElementsByTagName("p");
  26.         input.onkeydown = function (event) {
  27.             if (event.keyCode == 13) {
  28.                 console.log(item);
  29.                 if (this.value != "" && historys.indexOf(this.value) == -1) {
  30.                     var p = document.createElement("p");
  31.                     historys.unshift(this.value)
  32.                     // p.setAttribute("data-aid",historys.length-1)
  33.                     // p.className = 'item'
  34.                     p.innerHTML = this.value;
  35.                     app.prepend(p)
  36.                     // this.value = ""
  37.                     console.log(historys);
  38.                     // console.log(item);
  39.                     for (var i = 0; i < item.length; i++) {
  40.                         item[i].onclick = function () {
  41.                             console.log(this.innerHTML);
  42.                             var index = historys.indexOf(this.innerHTML)
  43.                             // console.log(index);
  44.                             historys.splice(index, 1)
  45.                             console.log(historys);
  46.                             // app.removeChild(app.childNodes[index]);
  47.                             item[index].remove()
  48.                         }
  50.                     }
  52.                 } else {
  53.                     alert("错误")
  54.                 }
  55.             }
  56.         }
  59.     </script>
  60. </body>
  62. </html>

1-数组变对象并+name属性

  1.  <script>
  2.         var str="剧情,犯罪,月黑风高"
  3.         var arr=[]
  4.         str=str.split(",")
  5.         str.map(name=>{
  6.             arr.push({
  7.                 name
  8.             })
  9.         })
  10.         console.log(arr);
  11.     </script>

image.png

2-对象转数组+变属性

image.png

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

3-字符串变为数组包含对象

image.png

  1.  <script>
  2.         var str = `<span>9.7</span><span>-250人评价</span><br><span>9.6</span><span>-450人评价</span><br><span>9.5</span><span>-550人评价</span>`;
  3.         str = str.split("<br>")
  4.         var reg = /<[^<>]+>/g
  5.         var r = /[^\d]/g
  6.         var arr = []
  7.         str.map(item => {
  8.             var a = item.replace(reg, "").split("-")
  9. 两种方法添加 // var obj = {}
  10.            // obj.star = a[0]; obj.rating = a[1].replace(r, "")
  11.            // arr.push(obj)
  12.             arr.push({
  13.                 star:a[0],
  14.                 rating: a[1].replace(r, "")
  15.             })
  16.         })
  17.         console.log(arr);
  18.     </script>

2:

  1. <script>
  2.         var str  = `<span>9.7<span><span>-248人评价</span><br>
  3.         <span>9.5<span><span>-48人评价</span>
  4.         <br><span>9.6<span><span>-508人评价</span>`;
  5.         /* 
  6.         arr = [
  7.             {star:9.7,rating:248},
  8.             {star:9.5,rating:48},
  9.             {star:9.6,rating:508},
  10.         ]
  11.          */
  12.         /* 1、<br> */
  13.         var  arr = str.split("<br>");
  14.         // console.log(arr)
  15.         /* 2、将数组中每一项的html标签去除  9.7-248人评价 */
  16.         var reg = /<[^<>]+>/g
  17.         var res = arr.map(item=>{
  18.             // console.log(item.trim().replace(reg,""))
  19.             return item.trim().replace(reg,"")
  20.         })
  21.         // console.log(res)
  22.         /* 3、[[9.7,248]....] */
  23.         var list = [];
  24.         res.forEach(item=>{
  25.             // console.log(item.split("-"))
  26.             list.push(item.split("-"))
  27.         })
  28.         var sum = [];
  29.         var rNum = /[^\d]/g;
  30.         list.forEach(item=>{
  31.             console.log(item)
  32.             sum.push({
  33.                 star:item[0],
  34.                 rating:item[1].replace(rNum,"")
  35.             })
  36.         })
  37.         console.log(sum)
  39.     </script>

4-json对象

image.png

  1.  <script>
  2.         var str = `
  3.         [{"name":"李四666","data":[2019,10,11]},
  4.         {"name":"李三666","data":[2019,10,11]},
  5.         {"name":"李二666","data":[2019,10,11]}]
  6.         `
  7.         var arr = JSON.parse(str)
  8.         var list=[];
  9.         arr.forEach(item=>{
  10.             console.log(item);
  11.             var {name,data}=item;
  12.             name=name.replace(/\d/g,"")
  13.             data=data.join("-")
  14.             list.push({
  15.                 name,
  16.                 data
  17.             })
  18.         })
  19.         console.log(list);
  20.     </script>

image.png

5-重复的不添加

image.png

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

image.png

6-重复不添加

image.png

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

image.png

7-数组包对象包数组

  1. <script>
  2.         var obj = {
  3.             top250: ["你好666", "他的666"],
  4.             comingSoon: ["额外111", "的广告和111"],
  5.             theaters: ["放大镜222", "放阿瓦蒂222"]
  6.         }
  7.         var reg = /\d+/g
  8.         // 属性不要数组 值只保留前面的一位
  10.         var arr=[]
  11.         for(var k in obj){
  12.             var key=k.replace(reg,"")
  13.             console.log(key);
  14.             var res=(obj[k][1])
  15.             console.log(res);
  16.             var ob={}
  17.             ob[key]=[res]
  18.             arr.push(ob)
  19.         }
  20.         console.log(arr);
  21.     </script>

image.png
image.png