JavaScript二

目录

函数

函数的定义及其参数获取

变量的作用域

提升变量的作用域

全局函数

规范

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

常量const

方法

apply

内部对象

Date

Json对象


函数

函数的定义及其参数获取

定义方式一

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":"男"}'

相关推荐
zhougl9961 小时前
html处理Base文件流
linux·前端·html
花花鱼2 小时前
node-modules-inspector 可视化node_modules
前端·javascript·vue.js
HBR666_2 小时前
marked库(高效将 Markdown 转换为 HTML 的利器)
前端·markdown
careybobo3 小时前
海康摄像头通过Web插件进行预览播放和控制
前端
TDengine (老段)4 小时前
TDengine 中的关联查询
大数据·javascript·网络·物联网·时序数据库·tdengine·iotdb
杉之5 小时前
常见前端GET请求以及对应的Spring后端接收接口写法
java·前端·后端·spring·vue
喝拿铁写前端5 小时前
字段聚类,到底有什么用?——从系统混乱到结构认知的第一步
前端
再学一点就睡5 小时前
大文件上传之切片上传以及开发全流程之前端篇
前端·javascript
木木黄木木6 小时前
html5炫酷图片悬停效果实现详解
前端·html·html5
请来次降维打击!!!6 小时前
优选算法系列(5.位运算)
java·前端·c++·算法