ES6 学习笔记

本贴最后更新于 402 天前,其中的信息可能已经时异事殊

概念

ECMAScript 是浏览器脚本语言的规范,Java script 是规范的具体实现。

参考:1.1 ES6 教程 | 菜鸟教程 (runoob.com)

变量

let 和 var

let 是在代码块内有效,var 是在全局范围内有效,下述代码打印时,会提示 a is not defined

<script>
    {
        let a = 1;
        var b = 2;
    }
    console.log(a)
    console.log(b)
</script>

let 声明的变量不能重复定义,var 可以,下属代码运行提示 Identifier 'a' has already been declared

<script>
    {
        let a = 1;
        let a = 1;
        var b = 2;
        var b = 3;
    }
    console.log(a)
    console.log(b)
</script>

var 存在变量提升,let 不存在变量提升,下述代码,b 打印结果为 undefined,a 打印提示 caught ReferenceError: Cannot access 'a' before initialization

<script>
    console.log(b)
    var b = 2;
    console.log(a)
    let a = 1;
</script>

const

const 声明的变量不能修改,const 声明的变量必须初始化,下属代码修改 const 值,控制台报错提示 peError: Assignment to constant variable.

结构表达式

解构赋值是对赋值运算符的扩展。

他是一种针对数组或者对象进行模式匹配,然后对其中的变量进行赋值。

<script>
    let arr = [1,2,3]
    let [a,b,c] = arr;
    console.log(a,b,c)
</script>

函数参数

参数默认值

下述代码中,a 和 b 默认都为 0,如果不给函数传递参数,拿就会按默认值运算

function addNum(a=0,b=0){
    console.log(a+b)
}

参数个数不固定

    function paramsFunc(...params){
        console.log(params)
    }
    paramsFunc(1,2)
    paramsFunc(1,2,3)

下属代码输出结果

image.png

箭头函数

箭头函数是一种简洁得函数写法

单个参数

    var f = v => v;
    //等价于
    var f = function(a){
        return a;
    }

多个参数

var f = (a,b) => a+b;

方法有多行

方法有多行得话,将箭头后的部分用大括号括起来,然后再里面写方法体

    var f = (a,b) =>{
        let c = a+b;
        return  c;
    };

方法返回值

方法不加大括号就默认返回箭头后得表达式运算值,如果方法不需要返回值则需要在大括号中声明

    var f = (a,b) =>{
        let c = a+b;
        console.log(c)
    };

返回一个对象

需要返回对象时,可以用大括号将方法体包起来,然后再里面定义定向返回,如果不适用方法体,可以用()封装对象

var f = (a,b) => ({'a':a,'b':b})
    console.log(f(1,2))

返回结果

image.png

使用时特殊情况总结

  • 没有 this、super、arguments 和 new.target 绑定;
  • 箭头函数体中的 this 对象,是定义函数时的对象,而不是使用函数时的对象;
  • 不可以作为构造函数,也就是不能使用 new 命令,否则会报错
// 此时的this指向定义Pershon中sayHello函数的对象,此时控制台输出undefined
var Person = {
    'age':18,
    'sayHello':()=>{
        console.log(this.age)
    }
}

若对象中定义方法,需要访问 this 使用以下方法

var Person = {
    'age':18,
    'sayHello':function (){
        setTimeout(()=>{
            console.log(this.age)
        })
    }
}

或者

var Person = {
    'age':18,
    'sayHello':function (){
       console.log(this.age)
    }
}
  • JavaScript

    JavaScript 一种动态类型、弱类型、基于原型的直译式脚本语言,内置支持类型。它的解释器被称为 JavaScript 引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在 HTML 网页上使用,用来给 HTML 网页增加动态功能。

    712 引用 • 1174 回帖 • 136 关注

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...