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

相关推荐
三天不学习1 分钟前
CSS :root伪类详解:实现动态主题切换的关键所在
前端·css·root·主题换肤·css 伪类
江城开朗的豌豆4 分钟前
Vue图片懒加载:极简方案 vs 兼容全攻略
前端·javascript·vue.js
oil欧哟7 分钟前
🧐 AI 批量检查数千份技术文档,如何实现高效文档纠错?
前端·人工智能·ai编程
江城开朗的豌豆9 分钟前
Vue组件data必须用函数?这个设计暗藏玄机!
前端·javascript·vue.js
前端小巷子16 分钟前
web域名解析
前端·javascript·面试
LaoZhangAI17 分钟前
沉浸式翻译API深度解析:500万用户的翻译神器如何配置[2025完整指南]
前端·后端
然我24 分钟前
链表指针玩不转?从基础到双指针,JS 实战带你破局
前端·数据结构·算法
江城开朗的豌豆24 分钟前
组件封装实战:如何设计灵活又好用的前端组件?
前端·javascript·vue.js
EndingCoder32 分钟前
算法与前端的可访问性
前端·算法·递归·树形结构
brzhang40 分钟前
别再梭哈 Curosr 了!这 AI 神器直接把需求、架构、任务一条龙全干了!
前端·后端·架构