第二章数据类型转换及运算符 - js数组的方法 - 《HTML && JavaScript》

 <!-- 在js中调用函数时传递变量函数时，是值传递还是引用传递 
    值传递
    、-->
     var a = 3
        function fn (a){
            a= a+1
        }
        fn(a)
        console.log(a)
         function fn2 (obj){
             console.log(obj.name)
         }
         var obj = {name: 'tom'}
         fn2(obj)

 var btns = document.getElementsByTagName("button");
        // 1给每个btn绑定点击事情
        for(var i=0;i<btns.length;i++){
            btns[i].onclick = function(){
                // 2点击对应的元素，将其父元素删除
                var isShow = confirm("是否删除");
                console.log(isShow);
                if(isShow){
                    this.parentNode.style.display = "none"
                }
            }
        }

history事件

 <button id="btn">高云锋</button>
    <script>
       var  btn  =document.getElementById("btn");
       btn.onclick = function(){
        //    回退到前一个页面
        history.back()
       }

screen事件

 <!-- screen  测量屏幕的高度和宽度
    availWidth 屏幕的宽度
    -->
      var sw = screen.availWidth;
        var swe = screen.availHeight;
        console.log(sw)
        console.log(swe)
        // 可视区域的高度
        var vh  =document.documentElement.clientHeight;
        console.log(vh)

怎么判断滚动条的距离
 var bodyH = document.body.clientHeight;
        var vw = document.documentElement.clientHeight
        console.log(bodyH);
        console.log(vw);
        // 滚动条滚动的距离+vw ==bodyH
        window.onscroll = function(){
            var scrollTop =  window.scrollY;
            console.log(scrollTop)
        }
        // scrollTop+vw ==bodyH

 //点击键盘的center 获取input的值
  var app = document.getElementById("app");
        app.onkeydown = function(event){
            if(event.keyCode ==13){
                console.log(this.value)
                //将这个值传递给另一个页面
                location.href = "15search.html?s"+this.value;
            }
        }
        <!-- location.href   传递给另一个页面 -->
          console.log(location.search)
        console.log(decodeURIComponent("%E9%AB%98%E4%BA%91%E9%94%8B"))

 // 以直接量的方式创建  tips:在函数前后调用都是可以的
        function go(){
        console.log("hellow word");
        }
        //以变量的方式创建   tips：只能在函数之后调用
        var b = function(){
            console.log("good")
        }
        go();
        b();

函数的返回值

  <!-- 函数的返回值 
    函数的执行结果
    函数遇到return语句会立即停止，退出
    3return语句的作用，将函数内容的值返回给外部
    -->
    <script>
        function go(){
            return 10;
            console.log("hellow word")
        }
        var res = go();
        console.log(res)
    </script>

函数的参数

    function go(a,b){
            //函数的参数是局部变量
            console.log(a);
            console.log(b);
        }
        /*
        伪代码
        function go(var a,b){
            console.log(a);
            consoel.log(b);
        }
        js传不定参
        */
        go();
        go(10);
        go(10,20);

重载

 /*使用function声明的方法，本质上是window*/
        // var a = 10;
        // var a = 20;
        // console.log(a)
        function go(a){
            console.log(a)
        }
        function go(a,b){
            console.log(a);
            console.log(a+b);
        }
       window.go(10);

重载

<!--重载： 函数名相同，参数不同，根据传入的参数
    js不支持重载，
        就要js支持的话   arguments
    js传递不定参，函数使用arguments对象管理函数内部的参数
    -->
    <script>
        function go(){
            console.log(arguments)
        }
        go(10,20,4)

 /*要有一个参数和两个参数的场景*/
        function go(){
            if(arguments.length ==1){
                console.log(arguments[0])
            }else if(arguments.length ==2){
                console.log(arguments[0]);
                console.log(arguments[0]+arguments[1])
            }
        }
        go(10,20)

  /*
        函数和对象的方法
        函数作为对象的方法
        */
     var  obj ={
            name:"html",
            sayName:function(){
                console.log(this.name)
            }
        }
        // 函数是对象的一个方法
       obj.sayName();
    //    this关键字的指向问题
    /*
    onclick  谁执行事件，this指向谁
    2谁执行方法，this指向谁
    */

回调函数
  /*回调函数
        就是函数作为参数传递给另一个参数
        */
        function show(a){
            console.log(a);
        }
        function go(callback){
            var b = 10;
            callback(b)
        }
        go(show);
        /*
        callback =show
        callback = function(a){
            console.log(a);
        }
        */

    function go(callback){
            var b =20;
            callback(b);
        }
        go(function(res){
            console.log(res)
        })

js的回调
 /*
        回调函数：就是将函数作为函数传递给另一个函数
        使用场景：异步问题
        */
       function go(callback){
        var b =20;
        callback(b);
       }
       go(function(res){
           console.log(res)
       })

es6

 var show = function(a){
            console.log(a);
        }
        /*es6 箭头
        特点：省略了function关键字
        */
        var go=(a)=>{
            console.log(a)
        }
        go(30)

 var go = (a)=>{
            console.log(a);
        }
        /*简写
        tips：如果参数只有一个可以省略小括号，输出语句只有一段可以省略大括号
        */
        var show =a=>console.log(a);
        show(10);

 var go =(a)=>{
            return a;
                }
                /*如果输出语句只有一段return语句，可以省略return；*/
                var show =a=>a;
                console.log(show(10))

数组
  /*
        数组
        增 删  该  查  遍历
        */
       //数组增加的方法  使用push来进行增加
       var arr = [1,2,3,];
       arr.push(4);
       arr.push(5,6)
       arr.push([7,8,9])
       console.log(arr)

 <!-- 数组从前面增加 
    unshift
        1，可以增加多个值
        使用场景 历史搜索，下拉刷新
-->
    <script>
        var arr = [1,2,3];
        arr.unshift(0,-1);
        console.log(arr)

  <!-- indexOF 可以判断数组中的下标
    -1 数组中没有这个值
    -->
    <script>
        var arr = [1,2,3,4];
        console.log(arr.indexOf(4))
        console.log(arr.indexOf(3))
        console.log(arr.indexOf(9))

todoList
  var input = document.getElementById("input");
        var app = document.getElementById("app")
        var historys = []
        input.onkeydown = function(event){
            if(event.keyCode==13){
                //2只要数组中没有的值同时字符不能空，才向数组添加
                if(this.value != "" && historys.indexOf(this.value) == -1){
                    var p = document.createElement("p");
                    p.innerHTML = this.value;
                    app.prepend(p);
                     //console.log
                historys.unshift(this.value);
                console.log(historys)
                }else{
                    alert("输入的字是空字符或者相同的字段")
                }
            }
        }

 /*concat
        特点1 支持添加多个值
        2 支持数组数据的格式
        3 不会改变数组原本的结构
        */
        var arr = [1,2,3];
        var b = arr.concat([4,5]);
        console.log(b);
        console.log(arr)
        var test = [6,7,8];
        test.push([4,5]);
        console.log(test)