JavaScript二 - 技术栈

函数

函数的定义及其参数获取

变量的作用域

提升变量的作用域

全局函数

规范

[局部作用域 let](#局部作用域 let)

函数

函数的定义及其参数获取

定义方式一

javascript 复制代码

    <script>
        function f(x) {
            if(x >= 60)alert('ok~');
            else alert('no');
        }
    </script>

执行到return函数结束，返回结果

如果没有执行return，函数执行完后会返回undefined

定义方式二

javascript 复制代码

    <script>
        var f = function(x){
            if(x >= 60)alert('ok~');
            else alert('no');
        }
    </script>

function x(){...}这是一个匿名函数，但是可以把结果赋值给abs，通过abs就可以调用函数

方式一与方式二等价

javascript可以传任意参数，也可以不传参数

手动抛出异常规避无参数

javascript 复制代码

    <script>
        var f = function(x){
            if(typeof(x) !== 'number')throw("not a number");
            if(x >= 60)alert('ok~');
            else alert('no');
        }
    </script>

解决多个参数问题

arguments

javascript 复制代码

    <script>
        var f = function(x){
            console.log("x=>"+x);
            for(var i = 0;i < arguments.length;i++){
                console.log(arguments[i]);
            }
            if(typeof(x) !== 'number')throw("not a number");
            if(x >= 60)alert('ok~');
            else alert('no');
        }
    </script>

rset 获取除了当前变量之外的参数

javascript 复制代码

    <script>
        var f = function(x,y,...rest){
            console.log("x=>"+x);
            console.log("y=>"+y);
            console.log(rest);
            if(typeof(x) !== 'number')throw("not a number");
            if(x >= 60)alert('ok~');
            else alert('no');
        }
    </script>

rset参数只能写在最后面，必须用...标识

变量的作用域

假设在函数体中声明，则在函数体外不可使用

如果两个函数使用了相同的变量名，只要在函数的内部，就不冲突

javascript 复制代码

    <script>
        var f = function(x,y,...rest){
            console.log("x=>"+x);
            console.log("y=>"+y);
            console.log(rest);
            if(typeof(x) !== 'number')throw("not a number");
            if(x >= 60)alert('ok~');
            else alert('no');
        }
        var abs = function(x){
            if(x >= 0)return x;
            else return -x;
        }
    </script>

内部函数可以访问外部函数的成员，反之则不行

在javascript中查找函数从自身开始，由"内"向"外"查找，假设外部存在同名的函数变量，则内部函数会屏蔽外部函数的变量。

提升变量的作用域

javascript 复制代码

    <script>
        var f = function(){
            var y;
            var x = "x" + y;
            console.log(x);
            y = "y";
        }
    </script>

结果xundefined

javascript执行引擎，自动提升了y的声明，但是不会提升y的赋值

养成规范：所有的变量定义都放在函数的头部，不要乱发，便于代码的维护

全局函数

默认所有的全局变量，都会绑定在window对象下

javascript 复制代码

    <script>
        'use script'
        var x = 1;
        console.log(x);
        console.log(window.x);
    </script>

alert这个函数本身也是一个window变量

javascript 复制代码

    <script>   
     'use script'
        var x = 1;
        window.alert(x);
        var old_alert = window.alert;
        //old_alert(x);
        window.alert=function(){

        }
        window.alert(123);//alert失效了
        window.alert = old_alert;
        window.alert(456);
    </script>

规范

所有的全局变量都会绑定到windows上，如果不同的js文件，使用了相同的全局变量就会产生冲突

javascript 复制代码

    <script>
        'use script'
        var myCode={};
        myCode.name = 'hi';
        myCode.add=function(a,b){
            return a+b;
        }
    </script>

把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突的问题

局部作用域 let

javascript 复制代码

    <script>
        'use script'
        f = function(){
            for(var i = 0;i < 100;i++){
                console.log(i);
            }
            console.log(i + 1);
        }
    </script>

发现i出了for还可以使用

let关键字，解决局部作用域冲突问题

javascript 复制代码

    <script>
        'use script'
        f = function(){
            for(var i = 0;i < 100;i++){
                console.log(i);
            }
            console.log(i + 1);
        }
    </script>

建议使用let来定义局部作用域的变量

常量const

在ES6之前，只有用全部大写字母命名的变量就是常量

在ES6引入了常量关键字const

javascript 复制代码

    <script>
        'use script'
        const PI = 3.14;
        console.log(PI);
        PI = 3;
    </script>

发现修改PI的值会报错

方法

方法是把函数放在对象的里面，对象只有两个东西，属性和方法

javascript 复制代码

    <script>
        'use script'
        var myCode={
            name: "hi",
            birth: 2020,
            age: function(){
                var now = new Date().getFullYear();
                return now - this.birth;
            }
        }
    </script>

this指向调用它的人

javascript 复制代码

    <script>
        'use script'
        getAge = function(){
            var now = new Date().getFullYear();
            return now - this.birth;
        }
        var myCode={
            name: "hi",
            birth: 2020,
            age: getAge
        }
    </script>

apply

可以控制this指向

javascript 复制代码

    <script>
        'use script'
        getAge = function(){
            var now = new Date().getFullYear();
            return now - this.birth;
        }
        var myCode={
            name: "hi",
            birth: 2020,
            age: getAge
        }
        getAge.apply(myCode,[]);
    </script>

内部对象

typeof

javascript 复制代码

typeof '123'
'string'
typeof 123
'number'
typeof []
'object'
typeof NaN
'number'
typeof {}
'object'
typeof Math.abs
'function'
typeof true
'boolean'

Date

javascript 复制代码

    <script>
        'use script'
        var now = new Date();
        now.getFullYear();
        now.getMonth();//月 0~11
        now.getDate();
        now.getDay();//星期几
        now.getHours();
        now.getMinutes();
        now.getSeconds();
        now.getTime();//时间戳 全世界统一 1070 1.1 0:00:00 毫秒数
        console.log(new Date(now.getTime()));
    </script>

转换

javascript 复制代码

    <script>
        'use script'
        var now = new Date(1704171911697);
        console.log(now.toLocaleDateString());
    </script>

Json对象

Json是一种轻量级的数据交换格式，任何javascript支持的类型都可以用json来表示

格式

对象都用{}

数组都用\[\]

所有键值对都用key:value

javascript 复制代码

    <script>
        'use script'
        var user = {
            name: "hi",
            age: 3,
            gender: '男'
        }
        //对象转化成json字符串
        var jsonUser = JSON.stringify(user);
        //json字符串转换成对象
        var obj = JSON.parse('{"name":"hi","age":3,"gender":"男"}');
    </script>

JSON和javascript的区别

var obj = {name: 'hi', age: 3, gender: '男'}

var json = '{"name":"hi","age":3,"gender":"男"}'