开发笔记:js之ES6

1、什么是ES6

ES 的全称是 ECMAScript , 它是由 ECMA 国际标准化组织,制定的一项脚本语言的标准化规范。

2、为什么使用 ES6 ?

每一次标准的诞生都意味着语言的完善&＃xff0c;功能的加强。Javascript语言本身也有一些令人不满意的地方。

• 变量提升特性增加了程序运行时的不可预测性
• 语法过于松散&＃xff0c;实现相同的功能&＃xff0c;不同的人可能会写出不同的代码

1、let&＃xff08;★★★&＃xff09;

ES6中新增了用于声明变量的关键字

1&＃xff09;let声明的变量只在所处于的块级有效

if (true) {
let a &＃61; 10;
}
console.log(a) // a is not defined


注意&＃xff1a;使用let关键字声明的变量才具有块级作用域&＃xff0c;使用var声明的变量不具备块级作用域特性

2&＃xff09;不存在变量提升

console.log(a); // a is not defined
let a &＃61; 20;


3&＃xff09;暂时性死区

利用let声明的变量会绑定在这个块级作用域&＃xff0c;不会受外界的影响

var tmp &＃61; 123;
if (true) {
tmp &＃61; &＃39;abc&＃39;;
//console.log(tmp);
//上面两条语句都会报错&＃xff0c;初始化前无法访问
let tmp;
}


4&＃xff09;经典面试题

var arr &＃61; [];
for (var i &＃61; 0; i < 2; i&＃43;&＃43;) {
arr[i] &＃61; function () {
console.log(i);
}
}
arr[0]();
arr[1]();


经典面试题图解&＃xff1a;此题的关键点在于变量i是全局的&＃xff0c;函数执行时输出的都是全局作用域下的i值。

let arr &＃61; [];
for (let i &＃61; 0; i < 2; i&＃43;&＃43;) {
arr[i] &＃61; function () {
console.log(i);
}
}
arr[0]();
arr[1]();


经典面试题图解&＃xff1a;此题的关键点在于每次循环都会产生一个块级作用域&＃xff0c;每个块级作用域中的变量都是不同的&＃xff0c;函数执行时输出的是自己上一级&＃xff08;循环产生的块级作用域&＃xff09;作用域下的i值.

5&＃xff09;小结

• let关键字就是用来声明变量的
• 使用let关键字声明的变量具有块级作用域
• 在一个大括号里&＃xff0c;使用let关键字声明的变量才具有块级作用域var关键字是不具备这个特点的
• 防止循环变量变成全局变量
• 使用let关键字声明的变量没有变量提升
• 使用let关键字声明的变量具有暂时性死区特征

2、const&＃xff08;★★★&＃xff09;

声明常量&＃xff0c;常量就是值&＃xff08;内存地址&＃xff09;不能变化的量

1&＃xff09;具有块级作用域

if (true) {
const a &＃61; 10;
}
console.log(a) // a is not defined


2&＃xff09;声明常量时必须赋值

const PI; // Missing initializer in const declaration


3&＃xff09;常量赋值后&＃xff0c;值不能修改

const PI &＃61; 3.14;
PI &＃61; 100; // Assignment to constant variable.
const ary &＃61; [100, 200];
ary[0] &＃61; &＃39;a&＃39;;
ary[1] &＃61; &＃39;b&＃39;;
console.log(ary); // [&＃39;a&＃39;, &＃39;b&＃39;];
ary &＃61; [&＃39;a&＃39;, &＃39;b&＃39;]; // Assignment to constant variable.


4&＃xff09;小结

• const声明的变量是一个常量
• 既然是常量不能重新进行赋值&＃xff0c;如果是基本数据类型&＃xff0c;不能更改值&＃xff0c;如果是复杂数据类型&＃xff0c;不能更改地址值
• 声明const时候必须要给定值

5&＃xff09;let、const、var 的区别

• 使用var声明的变量&＃xff0c;其作用域为该语句所在的函数内&＃xff0c;且存在变量提升现象
• 使用let声明的变量&＃xff0c;其作用域为该语句所在的代码块内&＃xff0c;不存在变量提升
• 使用const声明的是常量&＃xff0c;在后面出现的代码中不能再修改该常量的值

3、解构赋值&＃xff08;★★★&＃xff09;

ES6中允许从数组中提取值&＃xff0c;按照对应位置&＃xff0c;对变量赋值&＃xff0c;对象也可以实现解构

1&＃xff09;数组解构

let [a, b, c] &＃61; [1, 2, 3];
console.log(a)//1
console.log(b)//2
console.log(c)//3
//如果解构不成功&＃xff0c;变量的值为undefined


2&＃xff09;对象解构

let person &＃61; { name: &＃39;zhangsan&＃39;, age: 20 };
let { name, age } &＃61; person;
console.log(name); // &＃39;zhangsan&＃39;
console.log(age); // 20
let {name: myName, age: myAge} &＃61; person; // myName myAge 属于别名
console.log(myName); // &＃39;zhangsan&＃39;
console.log(myAge); // 20


3&＃xff09;小结

• 解构赋值就是把数据结构分解&＃xff0c;然后给变量进行赋值
• 如果结构不成功&＃xff0c;变量跟数值个数不匹配的时候&＃xff0c;变量的值为undefined
• 数组解构用中括号包裹&＃xff0c;多个变量用逗号隔开&＃xff0c;对象解构用花括号包裹&＃xff0c;多个变量用逗号隔开
• 利用解构赋值能够让我们方便的去取对象的属性跟方法

4、箭头函数&＃xff08;★★★&＃xff09;

1&＃xff09;ES6中新增的定义函数的方式

() &＃61;> {} //()&＃xff1a;代表是函数&＃xff1b; &＃61;>&＃xff1a;必须要的符号&＃xff0c;指向哪一个代码块&＃xff1b;{}&＃xff1a;函数体
const fn &＃61; () &＃61;> {}//代表把一个函数赋值给fn


2&＃xff09;函数体中只有一句代码&＃xff0c;且代码的执行结果就是返回值&＃xff0c;可以省略大括号

function sum(num1, num2) {
return num1 &＃43; num2;
}
//es6写法
const sum &＃61; (num1, num2) &＃61;> num1 &＃43; num2;


3&＃xff09;如果形参只有一个&＃xff0c;可以省略小括号

function fn (v) {
return v;
}
//es6写法
const fn &＃61; v &＃61;> v;


4&＃xff09;箭头函数不绑定this关键字&＃xff0c;箭头函数中的this&＃xff0c;指向的是函数定义位置的上下文this&＃xff0c;箭头函数不能使用arguments

const obj &＃61; { name: &＃39;张三&＃39;}
function fn () {
console.log(this);//this 指向 是obj对象
return () &＃61;> {
console.log(this);//this 指向 的是箭头函数定义的位置&＃xff0c;那么这个箭头函数定义在fn里面&＃xff0c;而这个fn指向是的obj对象&＃xff0c;所以这个this也指向是obj对象
}
}
const resFn &＃61; fn.call(obj);
resFn();


4&＃xff09;小结

• 箭头函数中不绑定this&＃xff0c;箭头函数中的this指向是它所定义的位置&＃xff0c;可以简单理解成&＃xff0c;定义箭头函数中的作用域的this指向谁&＃xff0c;它就指向谁
• 箭头函数的优点在于解决了this执行环境所造成的一些问题。比如&＃xff1a;解决了匿名函数this指向的问题&＃xff08;匿名函数的执行环境具有全局性&＃xff09;&＃xff0c;包括setTimeout喝setInterval中使用this所造成的问题

5&＃xff09;面试题

var age &＃61; 100;
var obj &＃61; {
age: 20,
say: () &＃61;> {
alert(this.age)
}
}
obj.say();//箭头函数this指向的是被声明的作用域里面&＃xff0c;而对象没有作用域的&＃xff0c;所以箭头函数虽然在对象中被定义&＃xff0c;但是this指向的是全局作用域


5、剩余参数&＃xff08;★★&＃xff09;

剩余参数语法允许我们将一个不定数量的参数表示为一个数组&＃xff0c;不定参数定义方式&＃xff0c;这种方式很方便的去声明不知道参数情况下的一个函数

function sum (first, ...args) {
console.log(first); // 10
console.log(args); // [20, 30]
}
sum(10, 20, 30)


1&＃xff09;剩余参数和解构配合使用

let students &＃61; [&＃39;wangwu&＃39;, &＃39;zhangsan&＃39;, &＃39;lisi&＃39;];
let [s1, ...s2] &＃61; students;
console.log(s1); // &＃39;wangwu&＃39;
console.log(s2); // [&＃39;zhangsan&＃39;, &＃39;lisi&＃39;]