从零开始学 Web 之 ES6(三)ES6基础语法一
2019-12-02

大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新......

github:https://github.com/Daotin/Web微信公众号:Web前端之巅博客园:http://www.cnblogs.com/lvonve/CSDN:https://blog.csdn.net/lvonve/

在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧!

一、let

作用:与var类似, 用于声明一个变量。

let和var的区别:

在块作用域内有效不能重复声明不会预处理, 不存在提升

<script type="text/javascript"> console.log(res); //不会预处理, 不存在提升,报错 // 不能重复声明 let res = 10; let res = 10; // 报错 </script>

应用:循环遍历加监听

我们先开看一个例子:

<body> <button>测试1</button> <button>测试2</button> <button>测试3</button> <script type="text/javascript"> let btns = document.getElementsByTagName("button"); for (var i = 0; i < btns.length; i++) { btns[i].onclick = function () { alert(i); } } </script></body>

我们分别点击按钮的时候,分别打印多少?

结果:打印的都是2。因为回调函数的写法会进行覆盖操作。如何解决?

方法一:使用闭包。

for (var i = 0; i < btns.length; i++) { (function(){ btns[i].onclick = function () { alert(i); } })(i); }

这种方式相当于,每个回调函数有个自己的区间,各个区间互不干扰。而 let 正好有这个特性。

方法二:将 for循环的 var改为let即可。

二、const

作用:定义一个常量。

特点:不能修改,其它特点同let。

const uName = "Daotin";

三、变量的解构赋值

理解:从对象或数组中提取数据, 并赋值给变量(多个)。

1、对象的解构赋值

之前我们要获取一个对象的属性,会定义变量然后接收对象的属性值。

let obj = {name : "kobe", age : 39};let name = obj.name;let age = obj.age;console.log(name, age);

对象的解构赋值可以这样做:

let {name, age} = obj;console.log(name, age);

注意:1、对象的解构赋值必须使用大括号 {}

2、大括号里面的变量名必须和obj里面的属性名相同

3、可以只定义一部分变量接收一部分的obj属性,不需要全部接收。

2、数组的解构赋值

数组没有对象的数组名,但是有下标可以使用。所以这里的变量名可以随便起。

let arr = ["abc", 23, true];let [a, b, c] = arr;console.log(a, b, c);

注意:

1、数组的解构赋值必须使用中括号 []

如果只想取其中的某几个值,那么变量可以使用逗号隔开。

let [,,a,,] = arr;

如果定义的变量个数比数组的个数多,多出来的变量的值为 undefined

四、模板字符串

作用:简化字符串的拼接。

注意:

1、模板字符串必须用 ``` ` 包含;

2、变化的部分使用${xxx}定义

let obj = { name: "anverson", age: 41};// 我们之前拼接字符串用的是+console.log("我叫:" + obj.name + ", 我的年龄是:" + obj.age);// 使用模板字符串的方式console.log(`我叫:${obj.name}, 我的年龄是:${obj.age}`);

五、对象的简化写法

如果有变量和对象的属性名称相同,之前的写法是赋值操作:

let a = 1;let b = 2;let Obj = { a: a, b: b,};

现在,如果变量和对象的属性名称相同,可以简写如下:

let a = 1;let b = 2;let Obj = { a, b,};

对于对象的属性,如果是个函数的话,也可以简写:

之前的写法为:

let Obj = { foo: function(){ //... }};

现在的写法为:(去掉冒号和function)

let Obj = { foo(){ //... }};

六、箭头函数

作用:箭头函数的作用主要是定义匿名函数。

有下面几种情况的匿名函数都可以使用箭头函数:

let foo = function () {};// 转换成箭头函数let foo = () => {};//------------------------------let Obj = { foo: function () { }}// 转换成箭头函数let Obj = { foo: () => { }}

基本语法(参数)

1、匿名函数没有参数:() 不能省略,占位作用。let foo = () => {};

2、只有一个参数:() 可以省略,也可以不省略。let foo = a => {};

3、多个参数,() 不能省略。let foo = (a,b) => {};

基本语法(函数体)

1、函数体只有一条语句:可以省略{},并且默认返回结果(不需要 return)。

let foo = (x, y) => x + y;console.log(foo(1, 2));

2、函数体如果有多个语句, 需要用{}包围,若有需要返回的内容,需要添加return。

let foo = (x, y) => { console.log(x, y); return x + y; }; console.log(foo(1, 2));

箭头函数的特点:

1、简介

2、箭头函数没有自己的this,箭头函数的this不是调用的时候决定的,而是在定义的时候处在的对象就是它的this。(意思:箭头函数的外层的是否有函数,如果有,箭头函数的this就是外层函数的this,如果没有,则为 window)

<script type="text/javascript"> let foo = () => { console.log(this); }; foo(); // window 对象 let Obj1 = { bar() { let foo = () => { console.log(this); }; foo(); } }; Obj1.bar(); // Obj1 对象,箭头函数外层有函数bar,bar里面的this是Obj1. let Obj2 = { bar: () => { let foo = () => { console.log(this); }; foo(); } }; Obj2.bar(); // window 对象,箭头函数外层有函数bar,bar函数也是箭头函数,bar的外层没有函数,所以bar里面的this是window,所以foo里面的this也是window。 </script>

七、三点(可变参数)运算符

作用:

1、用来取代 arguments 但比 arguments 灵活,

arguments 是个伪数组,但是三点运算符是真数组,可以使用 forEach 等方法。

2、三点(可变参数)运算符只能是最后部分形参参数。 但是前面是可以有参数来占位的。

3、扩展运算符

let arr = [1, 6]; let arr1 = [2, 3, 4, 5]; arr = [1, ...arr1, 6]; console.log(arr); // [1,2,3,4,5,6] console.log(...arr); // 1 2 3 4 5 6

语法:...数组名 :表示遍历数组的所有元素。

八、形参默认值

作用:当不传入参数的时候默认使用形参里的默认值。

<script type="text/javascript"> //定义一个点的坐标 function Point(x = 12, y = 12) { // 形参的默认值 this.x = x; this.y = y; } let p = new Point(); console.log(p); let point = new Point(25, 36); console.log(point); </script>