1-1 数组的方法

  1. var arr = [1,2,3,4,5,7]  //[1,2,7]
  2. arr.splice(2,3)
  3. console.log(arr);
  5. var arr = [1,2,3,4,5,7]  //[1,8,9,7]
  6. arr.splice(1,4,8,9)
  7. console.log(arr);

1-2 ==运算

  1. // Number(""),Number(" "),Number(null) => 输出 0
  2. console.log(false == ""); // true
  3. console.log(true == 1); // true
  4. console.log(null == undefined);  // true
  5. console.log(undefined == false);  // false
  6. console.log(1 == "1"); // true
  7. /* 1.只有有一边为 boolean 先两边转为number 
  8.    2.一边为string，一边为number，先将两遍转为number
  10.    // 两边都先转为number
  11.    3. null == undefined
  12.    4. null 和 undefined 不能转化为其他值
  13. */

1-3 join 练习

  1. var data ={
  2.   country:"美国",
  3.   year:1994,
  4.   story:"犯罪"
  5. }
  6. // 美国/1994/犯罪
  7. /* 先将对象转为数组 在进行字符串拼接*/
  8. var arr = []
  9. for(var i in data){
  10.   arr.push(data[i])
  11. }
  12. var str = arr.join("/")
  13. console.log(str);

1-4 sort 练习

1-4-1 练习1 根据年龄升序、降序

  1. var students = [
  2.   {name:"zhang",age:20},
  3.   {name:"li",age:18},
  4.   {name:"wang",age:9},
  5.   {name:"chen",age:14}
  6. ]
  7. /* 
  8.     根据年龄升序
  9.     根据年龄降序
  10. */
  11. var result = students.sort((a,b)=>{
  12.   return a["age"]-b["age"]
  13. })
  14. console.log(result);
  16. var result2 = students.sort((a,b)=>{
  17.   return b["age"]-a["age"]
  18. })
  19. console.log(result2);

1-4-2 练习2 根据相应的值排序

  1. <button id="like">通过好评数排序</button>
  2. <button id="price">通过价格排序</button>
  3. <script>
  4.   var like = document.getElementById("like")
  5. var price = document.getElementById("price")
  6. var sales = [
  7.   {name:"张三",like:40,distance:1000,price:10},
  8.   {name:"李四",like:60,distance:500,price:50},
  9.   {name:"王五",like:30,distance:600,price:40}
  10. ]
  12. /* 升序 */
  13. function addOrder(arr,value){
  14.   if(Array.isArray(arr)){
  15.     var str = arr.sort((a,b)=>{
  16.       return a[value]-b[value]
  17.     })
  18.     return str
  19.   }else{
  20.     return null
  21.   }
  22. }
  23. like.onclick = function(){
  24.   console.log(addOrder(sales,"like"));
  25. }
  26. price.onclick = function(){
  27.   console.log(addOrder(sales,"price"));
  28. }
  29. </script>

1-4-3 练习3 根据价格升序，距离降序

  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.     <select  id="mySelect">
  11.         <option value="price">低价优先</option>
  12.         <option value="distance">距离优先</option>
  13.     </select>
  14.     <script>
  15.          var arr = [{
  16.             name:"肯德基",price:100,distance:100
  17.         },
  18.         {
  19.             name:"必胜客",price:200,distance:1500
  20.         },
  21.         {
  22.             name:"华莱士",price:50,distance:1000
  23.         }
  24.     ]
  25.     var mySelect = document.getElementById("mySelect");
  26.     // console.log(mySelect)
  27.     mySelect.onchange = function(){
  28.         console.log(this.value);
  29.         var value = this.value;
  30.         arr.sort(function(a,b){
  31.             return a[value]-b[value];
  32.         })
  33.         /* 对象的某个属性是变量,不能使用.。只能使用[] */
  34.         console.log(arr);
  35.     }
  36.     </script>
  37. </body>
  38. </html>

1-5 map 练习

  1. var arr = [
  2.   {name:"html",value:"12px"},
  3.   {name:"css",value:"13px"},
  4.   {name:"vue",value:"11px"}
  5. ]
  6. arr.map(item =>{
  7.   var result = parseInt(item["value"])*2
  8.   return item["value"] = result
  9. })
  10. console.log(arr);
  11. /* {name: "html", value: 24}
  12.    {name: "css", value: 26}
  13.    {name: "vue", value: 22} */
  15. /* var res = []
  16.   for(var key in arr){
  17.     arr[key].value = parseInt(arr[key].value)*2;
  18.     res.push(arr[key])
  19.   }
  20.     console.log(res);
  21.  */

1-6 filter 练习

  1. var arr = [
  2.   {name:"小米",price:1999},
  3.   {name:"红米",price:999},
  4.   {name:"iphone",price:9999},
  5.   {name:"华为",price:3000},
  6. ]
  7. var res = arr.filter(item =>{
  8.   return item["price"]>1000
  9. })
  10. console.log(res);

1-7 输入框获取对应数据

  1. <input type="text" id="input">
  2.   <script>
  3.   var arr = [
  4.     {name:"你是谁,你在哪",id:1102},
  5.     {name:"圈住你",id:1102},
  6.     {name:"hello在哪里",id:1102},
  7.     {name:"怪你",id:1102},
  8.     {name:"world",id:1102}
  9.   ]
  10.     /* 
  11.     1.enter回车获取关键字
  12.     2.使用关键字，对数据查询，得到一个新数组
  13.     3.name的字符超过3位以...结尾
  14.   */
  16. /* 1.enter回车获取关键字 */
  17. var input = document.getElementById("input")
  18. input.onkeydown = function(event){
  19.   if(event.keyCode == 13){
  20.     var value = this.value
  21.     /* 2.使用关键字，对数据查询，得到一个新数组 */
  22.     if(value){
  23.       var res = arr.filter(item =>{
  24.         return  item["name"].includes(value)
  25.       })
  26.       /* 3.name的字符超过3位以...结尾 */
  27.       res.map(item=>{
  28.         if(item.name.length>3){
  29.           return item.name=item.name.slice(0,3)+"..."
  30.         }
  31.       })
  32.       console.log(res);
  33.     }
  34.   }
  35. }
  36. </script>

1-8 分割数组

  1. var arr = [1,2,3,4,5,6,7,8,9]
  2. // [1,2,3] [4,5,6] [7,8,9]
  3. // 0  2    
  4. // 3  5
  5. // 6  8
  6. var sum = []
  7. for(var i =0;i<arr.length;i=i+3){
  8.   var item = arr.slice(i,i+3)
  9.   sum.push(item)
  10. }
  11. console.log(sum);

1-9 数组去重

  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]

1-10 输入id，删除数组中对应的项

  1. <input type="text" id="app">
  2.     <script>
  4.         var arr = [
  5.             {name:"李四",id:1001},
  6.             {name:"王四",id:1002},
  7.             {name:"张四",id:1003},
  8.             {name:"赵四",id:1004}
  9.         ]
  10.         /* 
  11.         input输入框，输入谁的id删除谁
  12.          */
  13.        /* 
  14.        1、要获取输入框中的值
  15.        2、根据id值,获取数组中对应项的下标
  16.        3、删除
  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.                arr.splice(index,1);
  26.                console.log(arr);
  27.            }
  28.        }
  29.     </script>

1-11 关键词过滤

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