1、函数声明提前

1-1.函数声明提前

函数声明也会提前

<script>
        /* 函数声明也会提前 */ 
        go();
        console.log(go);
        function go(){
            console.log("hello world");
        }
        go();
    </script>

1-2.function定义函数与变量

在声明提前的情况下，在一个作用域中，function定义的函数名与变量名相同时，函数会覆盖变量

<script>
      /*
      var num;
      var num = function(){
          console.log("hello world")
      }
      */ 
      console.log(num);//function
      /* tips：在声明提前的情况下，在一个作用域中，function定义的函数名与变量名相同时，函数会覆盖变量 */ 
      var num = 10;   //num=10;
      function num(){     //使用function定义的函数会声明提前且覆盖同名变量
          console.log("hello world");
      }
      console.log(num);//10
  </script>

<script>
      /*
      var num;
      var num = function(){
          console.log("hello world")
      }
      */ 
      console.log(num);//undefined
      /* tips：在声明提前的情况下，在一个作用域中，function定义的函数名与变量名相同时，函数会覆盖变量 */ 
      var num = 10;
      var num = function(){     
          console.log("hello world");
      }
      console.log(num);   //function
  </script>

1-3.例题

步骤：
num(20);
var a=20;
var a=function(){};
console.log(a); //输出function函数
a=10;
console.log(a); //输出数字10

<script>
      function num(a){
          /* 
          var a = function(){
              console.log("hello world")
          }
          */ 
          console.log(a); //function
          var a = 10
          function a(){
              console.log("hello world")
          }
          console.log(a)  //10
      }
      num(20);
  </script>

2、数组

2-1.数组的后删除

.pop() //从后删除

<script>
      var arr = [1,2,3]
      arr.pop();  //pop()从后删除
      console.log(arr)
  </script>

2-2.数组的前删除

.shift() //从前删除

<script>
      var arr = [2,3,4]
      arr.shift();    //shift()从前删除
      console.log(arr)
  </script>

2-3.数组的自定义删除

splice(index,howmany)
index —从哪个下标开始删除
howmany —删除多少个
**

<script>
      var arr = [4,5,6,7,8];
      /* splice(index,howmany)
      index   --从哪个下标开始删除
      howmany --删除多少个
      */ 
      arr.splice(2,1)     //指定位置，多个删除
      console.log(arr)
  </script>

2-4.数组的修改

splice(index,howmany,value)
index —开始下标
howmany —删除多少个
value —替换的值

<script>
      var arr = ["html","css","javascript"];
      /* 
      splice(index,howmany,value)
      index   --开始下标
      howmany --删除多少个
      value   --替换的值
      */
      arr.splice(1,1,"vue");
      console.log(arr);
  </script>

2-5.splice方法增加

splice(index,0,value……)

splice 增加从选定的下标的前面增加

<script>
      /* splice 增加 从下标的前面增加 */ 
      var arr = [3,4,5,6,];
      /* 
      splice(index,0,value……)
      */ 
      arr.splice(2,0,"html","css")
      console.log(arr);
  </script>

2-6.数组的查询

indexOf() //有值则返回数组下标无值则返回-1
slice(startIndex,endIndex) //从开始下标开始截取至结束的下标并返回一个新的数组

（tips：不包含结束的下标）

<script>
        /* indexOf
            -1
        */ 
       var arr = [2,3,4,5,6];
       console.log(arr.indexOf(8));
       console.log(arr.indexOf(3));
       var test = arr.slice(1,3)
        /* slice(startIndex,endIndex)
        tips：不包含结束的下标
        */ 
       console.log(test)
    </script>

2-7.includes方法查询

includes可以判断数组是否包含某个值

有则返回—true
无则返回—false

<script>
        /*
        includes可以判断数组是否包含某个值
        */ 
        var arr = [4,5,6];
        console.log(arr.includes(5));
        console.log(arr.includes(8));
    </script>

3、算法示例

3-1.简单求和

求数组的总和：

for循环遍历数组，累加

<script>
     var arr = [1,2,3,4,5,8];
     /*  */
     var sum = 0;
     for(var i=0;i<arr.length;i++){
         sum+=arr[i];
     }
     console.log(sum)
 </script>

3-2.选择过滤

将年龄大于16的设置为一个数组：

定义一个新的空数组
for循环遍历原数组
利用parseInt（）抽出年龄对象的整数

if判断年龄>16push至新数组

<script>
  var arr = [
      {name:"李四",age:"18岁"},
      {name:"王四",age:"20岁"},
      {name:"张四",age:"8岁"},
      {name:"长四",age:"16岁"},
  ];
  var test = [];
  for(var i=0;i<arr.length;i++){
      console.log(arr[i])
      if(parseInt(arr[i].age)>16){
          test.push(arr[i])
      }
  }
  console.log(test)
</script>

3-3.简单分组

将数组中每三个元素分为一组：

定义一个新的空数组
for循环遍历原数组

每次splice（0,3）删除并返回数组的前3位并push（）给新数组

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

3-4.取最小值

将数组中的最小值赋给新数组：

定义变量并给予赋值原数组[0]第一位
for循环遍历原数组
if判断当变量test大于数组[i]时，将数组[i]赋给变量test

输出test

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

3-5.改变子元素对象并赋予新对象

将数组中元素的age对象值翻倍并对age大于24的元素赋予新对象like为true，否则为false

for循环遍历数组
利用parseInt（）取出age对象中的整数*2并重新赋值给arr[i].age

if判断新age是否大于24，如大于则赋予新对象.like = true，否则为false

<script>
  var arr = [
      {name:"lisi",age:"12px"},
      {name:"wangwu",age:"13px"},
      {name:"zhangsan",age:"14px"},
  ]
  for(var i=0;i<arr.length;i++){
      var age = parseInt(arr[i].age)*2
      console.log(age);
      arr[i].age = age;
      if (parseInt(arr[i].age)>24) {
          arr[i].like = true;
      }else{
          arr[i].like = false
      }
  }
  console.log(arr)
</script>

！3-6.简单关键字搜索

设置一个简单的关键字搜索框：

定义一个新的test数组，获取input输入框
定义input键盘事件，当键盘值为13且输入框不为空时，获取输入框的值为keyword
将关键字作为参数遍历数组
先用一重for循环遍历每个首字母元素，再用一重for循环遍历首字母数组
利用citys[j].name.includes(keyword)判断是否含有关键字
将含有关键字的元素push()赋给新数组test
重新清空数组test

函数调用方法：

<input type="text" id="input">
    <script>
        var searchs = [
            {
                spell:"A",
                citys:[
                    {name:"阿里",id:1001},
                    {name:"阿拉",id:1001},
                    {name:"阿克",id:1001}
                ]
            },{
                spell:"T",
                citys:[
                    {name:"天下",id:2001},
                    {name:"天天",id:2002},
                    {name:"天里",id:2003},
                ]
            }
        ]
        var test = [];()
        var input = document.getElementById("input");
        /* 1、获取关键字 */ 
        input.onkeydown = function(event){
            if(event.keyCode==13){
                if(this.value !=""){
                    console.log(this.value)
                    var kw = this.value.trim();
                    /* 2、使用关键字对数组进行遍历 */ 
                    addCitys(kw);
                    console.log(test)
                    test = [];
                }
            }
        }
        function    addCitys(keyword){
            for(var i=0;i<searchs.length;i++){
                var citys = searchs[i].citys;
                for(var j=0;j<citys.length;j++){
                    // console.log(citys[j])
                    /* 3、获取包含关键字的项目 */ 
                    if(citys[j].name.includes(keyword)){
                        test.push(citys[j]);
                    }
                }
            }
        }
    </script>

原生方法：

<script>
        var searchs = [
            {
                spell:"A",
                citys:[
                    {name:"阿里",id:1001},
                    {name:"阿拉",id:1001},
                    {name:"阿克",id:1001}
                ]
            },{
                spell:"T",
                citys:[
                    {name:"天下",id:2001},
                    {name:"天天",id:2002},
                    {name:"天里",id:2003},
                ]
            }
        ]
        var test = [];
        var input = document.getElementById("input");
        input.onkeydown = function(event){
            if(event.keyCode == 13){
                if(this.value != ""){
                    var kw = this.value;
                    for(var i=0;i<searchs.length;i++){
                        var citys = searchs[i].citys;
                        for(var j=0;j<citys.length;j++){
                            if(citys[j].name.includes(kw)){
                                test.push(citys[j]);
                            }
                        }
                    }
                    console.log(test);
                    test = [];
                }
            }
        }
    </script>

4、去除字符串空格

trim()去除字符串前后尾的空格

<script>
        /* trim()去除字符串前后尾的空格 */ 
        var str = "  fdsf    ";
        console.log(str.trim());
    </script>

JavaScropt

9.函数与变量，数组