ES6语法糖浅谈上 | 青训营笔记

北方小学生
119 阅读4分钟

这是我参与「第四届青训营 」笔记创作活动的的第20天，今天主要记录的内容是记录学习es6新规范，可以做到查缺补漏，ES6小字典。

一、文章内容

本文会围绕下面列出的内容进行一个一个介绍.

  • es6简单介绍

  • let和const

  • 字符串模板

  • 箭头函数this的考点

  • 数组的简单用法

  • 对象的使用

  • set和map使用

Es6简单介绍

es6简单来讲就是一句话，在es5的基础上升级了，这不是废话吗，当然，es6就是一套新规范将JavaScript代码变得简洁高效、并不是一个新的语言，我当时学的事和疑惑很大.就是一些新奇的语法而已.

let和const

熟悉的小伙伴一定知道这是俩个声明变量的语法，let声明的变量只在代码块起作用，const声明的变量不可以修改值，一旦声明赋值终身不可修改，跟dr差不多.

let使用演示

let的特点是不可以先使用后定义图1、有区域性（生命周期）图2、只可以声明一次图3.

1660316500523.jpg

图1 没有变量提升

image.png

图2 作用域范围

image.png

图3 不可多次声明

const

const声明的变量值不可以改，但是指向地址的对象可以改、同样没有变量提升,如图4.图5.

image.png

图4 const不可改

image.png

图5 照样保错

字符串模板

`` 的普通用法一个是多行字符串，高级用发就是${}配合美元符号加变量.

1.普通用法输入什么格式输出就是什么格式模板.如图6所示.

image.png

图6 普通用法

2.高级用法加变量名，方便了开发人员输出信息，不用＋号或者逗号了，省去很多麻烦。如图7所示.不但可以加变量名，而且还可以加运算符，比如age+10，如图8所示。更加牛逼的是alert的用法可省掉括号和冒号，还有函数调用也可以加到里面.如图9所示.

image.png

图7 高级用法

-----

image.png

图8 高级运算符

image.png

图9 调用函数

以上就是字符模板调用了，可以帮助我们少些好多逗号和加号.es6的特点也慢慢体现出来了.

箭头函数

箭头函数其实跟JavaScript中的普通函数差不多,就是变得更加简单化了，不用写function然后直接箭头，语法是这样：

参数 => 函数体

比如一个名为a的函数返回a.

let a = () => 'a';

如果函数包涵多个参数需要加括号，如果不加就是默认没有参数加个()即可，如果语句较多则需要加{}.

let f = (a,b) => a+b;
alert(f(1,1)); // 2

如果函数需要返回对象，需要在花括号外面嵌套一个().

let f = () => ({'name':'name'});

注意:箭头函数不可做为构造函数不可以new对象，因为它的构造器是windows的,并且箭头函数没有 arguments这个参数.因为没有prototype.

this:如果普通函数被调用，那么this就是函数本身，如果是箭头函数被调用那么this就是他父级的this,因为它没有自己的this，其this指向从外层代码库继承。也就是人们常说的上下文，接下来教大家如何分辨上下文.

var Person = {
    'age': 18,
    'sayHello': ()=>{
        console.log(this.age);
      }
};
var age = 20;
Person.sayHello();  // 20
// 此时 this 指向的是全局对象
 
var Person1 = {
    'age': 18,
    'sayHello': function () {
        console.log(this.age);
    }
};
var age = 20;
Person1.sayHello();   // 18
// 此时的 this 指向 Person1 对象

为什么最上面的age打印的是20，仔细一看，原来是全局变量的age=20，所以输出了20，此时箭头函数的this指向的是person这个对象的环境,此时环境this指向是window,所以在Window下找到一个age的变量输出来，然后下面的sayhello()是普通函数，是person1调用的所以默认this指向person1. 下面看一下这个案例，为什么俩个都输出是window ，第一个输出window因为箭头函数本身没有this，所以就往上寻找，对象t是window的一个对象，所以此时的this就是window本身；为什么第二个输出也是window，因为第二个talk()调用是单独调用，作为全局调用，所以也挂载在window上.

let t = {
    age : 15,
    say: ()=>{
        console.log(this); // window
        function talk(){
            console.log(this) // window
        }
        talk();
    }
}
t.say();

总结

本文主要简单引入了es6，简单的介绍了let、const声明变量其次介绍了字符模板常见格式显而易见的体现了es6的高效性，以及箭头函数的奇妙之处，下节课的内容更能将es6的特点显现出来,如果有不懂的地方敲一遍就懂了，还是不懂欢迎留言.

相关文章：ES6语法糖浅谈下 | 青训营笔记 - 掘金 (juejin.cn)

avatar
文章
阅读
粉丝