ES6

ES6细枝末节很多（因为大家知道，JS是一个千疮百孔的语言，所以ES6在定稿的时候就特别细致，细枝末节极多），我们的课程注重实战中使用的、面试常考的ES6语言精粹。没有涉及到的知识点，我们会列出，有兴趣的同学可以自己学习。

一、ES6中的let和const关键字

ES5中只有var能够定义变量，作用域是在function中。

ES6中可以用let来定义变量，定义是块级作用域变量。

{
let a = 10;
var b = 20;
}
console.log(a); //报错
console.log(b); //20

let的声明范围就是{}内部。

比如循环语句中定义函数，此时var：

var arr = [];
for(let i = 0 ; i < 10 ; i++){
arr[i] = function(){
console.log(i);
}
}
arr[6](); //10
输出10而不是6，因为函数中的i是全局作用域的i，定义其他函数的时候，扰动了i的值。
但是，如果用let定义：
var arr = [];
for(let i = 0 ; i < 10 ; i++){
//i实际上定义在了循环体中
arr[i] = function(){
console.log(i);
}
}
arr[6](); //6
如果用let来引导循环，出了循环体就真的没有定义了
for(let i = 0; i < 10 ; i++){
//相当于在这里定义了i
}
console.log(i);  //报错
不存在变量声明的提升：
console.log(a); //报错
let a = 10;

let会引发暂时性死区（面试常考）：

在代码块内，使用let命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”（temporal dead zone，简称 TDZ）。

var m = 10;
function fun(){
m = 20;  //报错。函数在预解析阶段会预读所有的语句，发现了let语句，所以就将这个函数变为了一个m的暂时性死区，此时m不允许在let前被赋值。
let m;
console.log(m);
}
fun();

暂时性死区是一个特别好的性质，比如我们之前特别经典的题目：

var m = 10;
function fun(){
m = 20;
var m = 30;
}
fun();
console.log(m);  //输出10，因为函数里面有变量声明的提升，所以改变的都是局部变量m，没有改变全局变量m的值。
但是如果用let：
var m = 10;
function fun(){
m = 20;    //语句有错误！因为这里是暂时性死区，不能对m在let之前操作。
let m = 30;
}
fun();
console.log(m);   //报错

const命令表示定义一个常量，不能被更改的量：

const pi = 3.14;
console.log(pi);
pi = 3.1415;  //报错

但是可以指向一个引用类型值，对这个引用类型值的操作是允许的，但是不能允许指向别的值：

const arr = ["白板","幺鸡","二条"];
arr.push("三筒");
console.log(arr);    // 合法，["白板","幺鸡","二条","三筒"];
arr = ["王","王","2","2","2","2"];  //报错，因为arr是常量。
如果要冻结对象，用Object.freeze()
const arr = Object.freeze(["白板","幺鸡","二条"]);
console.log(arr); //合法
arr.push("三桶"); //报错！因为对象已经被冻结！
Object.freeze()只能冻结一层：
var obj = Object.freeze({"a" : 1 , "b" : 2 , "c" : ["J","Q","K"]});
obj.a = 44; //没有修改成功
obj.c.push("A"); //A成功推入了数组，因为freeze只能冻结1层
console.log(obj); //{"a" : 1 , "b" : 2 , "c" : ["J","Q","K","A"]};
let和const定义的变量不会成为window对象的属性，
let a = 100;
var b = 200;
const c = 300;
alert(window.a);  //undefined
alert(window.b);  //200
alert(window.c);  //undefined

二、ES6中的解构

数组的解构：

var [a,b,c] = ["白板","幺鸡","二条"];
console.log(a);
console.log(b);
console.log(c);

对象的结构：

var {name,age}  = {name :"老王" , age : 12};
console.log(name);
console.log(age);

数组的结构用[]，对象的解构用{}。此时一定要区分它数数组，还是解构。区分方法很简单，看它是在赋值还是在取值。等号左边的，都是解构，等号右边的，都是数组或者对象。

来看一个...运算符，

先看：

var [a,b,c] = ["白板","幺鸡","二条","三饼","四筒"];
console.log(a);
console.log(b);
console.log(c);

如果给c加上一个...运算符：

var [a,b,...c] = ["白板","幺鸡","二条","三饼","四筒"];
console.log(a);
console.log(b);
console.log(c);

...必须出现在尾巴上，这个叫做rest运算符，俗称“尾巴”解构。

var [a,...b,c] = ["白板","幺鸡","二条","三饼","四筒"]; //报错

函数的参数也可以解构：

function fun([a,b]){
console.log(a + b);
}
fun([4,7]);

我靠！这不就是将一个数组传入了函数，函数自动帮我拆开数组了么！

想起了一个东西，apply！

类似于：

function fun(a,b){
console.log(a+b);
}
fun.apply(null,[4,7]);  //11

apply基本上下岗了，以后可以使用[]在形参列表中，表示自动解构。

再来看一个，函数的形参列表中也可以使用...运算符：

function fun(...arr){
let sum = 0;
for(let i = 0 ; i < arr.length ; i++){
sum += arr[i];
}
console.log(sum);
}
fun(1,2,3,4);

此时这个函数就是计算所有实参的和，原来要使用arguments对象，此时arguments基本也下岗了。

形参列表中还可以有对象的自动解构语法：

function fun({shuxue,yuwen,yingyu}){
console.log(shuxue + yuwen + yingyu);
}
var xiaoming = {"name" : "小明" , "age" : 12 , "shuxue" : 10 , "yuwen" :20 , "yingyu" :30};
fun(xiaoming); //60，在计算各个科目的总分。
对于对象来说，还有一个k:v的解构模式，特别重要。
let obj = {"a" : 1 , "b" : 2};
let { a : n , b : m} = obj;
console.log(n);  //1
console.log(m);  //2
console.log(a);  //报错
console.log(b);  //报错

冒号右边的变量才真正的被赋值，冒号左边的变量表示对象的属性。

:在结构中很好用，哲学是从对象中取一个属性，但是又要给这个属性改名。比如对象中的属性叫做shuxue，我们想取得这个值，并且用math变量来接收：

let xiaoming = {"name" : "小明" , "age" : 12 , "shuxue" : 10 , "yuwen" :20 , "yingyu" :30};
let {shuxue : math} = xiaoming;
console.log(math);
...很好用：
function fun(a,b,c){
console.log(a);
console.log(b);
console.log(c);
}
var arr = [1,2,3];
我们想让控制台输出1、2、3，也就是将数组中的数组“打开”传入函数。我们之前：
fun.apply(null,arr);
现在：
fun(...arr);

三、ES6中的字符串、数组的增强

原来，我们只能用A.indexOf(B)来判定A字符串中含不含有B字符串。

现在有了：

includes(), startsWith(), endsWith()
includes()：返回布尔值，表示是否找到了参数字符串。
startsWith()：返回布尔值，表示参数字符串是否在源字符串的头部。
endsWith()：返回布尔值，表示参数字符串是否在源字符串的尾部。
let str = "我爱北京天安门";
console.log(str.includes("北京"));   //true
console.log(str.startsWith("北京"));  //false
console.log(str.endsWith("天安门"));  //true
repeat()重复多少次
var str = "★".repeat(5);
console.log(str);

`是一个新增加的运算符，表示模板字符串。

var a = 10;
var b = "高兴";
var c = "手机";
var str = `好高兴啊，我买了一个${c}，花了${a}元，我很${b}啊！`;
console.log(str);

可以有效减少斩断连接！

可以有轻微运算：

var str = `好高兴啊，我买了一个${c}，花了${a + shui}元，我很${b}啊！`;

不能有复杂语法：

$(if())
`中的东西可以依法换行，不需要斩断连接。
let imgurl = "logo.jpg"
let str = `
<ul>
<li>
<a href="">
<img src="${imgurl}" alt=""/>
</a>
</li>
</ul>
`;
console.log(str)

来看数组的改变，Array.from()可以将类数组对象变为数组：

let obj = {
"0" : "白板",
"1" : "幺鸡",
"2" : "二筒",
length : 3
};
let arr = Array.from(obj);
console.log(arr);

Array.of方法用于将一组值，转换为数组

var arr = Array.of(1,2,3);
console.log(arr);

寻找数组中是否有某项find()、findIndex()，里面要放置回调函数

需要注意的是，里面的回调函数的三个参数分别是项、编号、数组本身。机理是JS会测试每一个项目，返回第一个返回true的项。

var arr = [3,4,5,34,34,324,342,43,23,30,60,45,34,53];
var item = arr.find(function(value,index,arr){
if(value % 5 == 0 && value % 6 == 0){
return true;
}
});
console.log(item);  //30

返回第一个返回true的下标项，用findIndex，如果没有一个项目返回true的函数，此时就会显示-1。

var arr = [3,4,5,34,34,324,342,43,23,30,60,45,34,53];
var item = arr.findIndex(function(value,index,arr){
if(value % 5 == 0 && value % 6 == 0){
return true;
}
});
console.log(item);  //9

增加了一种数组的遍历方法，叫做for of遍历。通常配合arr.entries()和arr.key()来使用。

let arr = ["白板","幺鸡","二条","三饼","四筒"];
for(let v of arr){
console.log(v);
}

let arr = ["白板","幺鸡","二条","三饼","四筒"];
for(let [k,v] of arr.entries()){
console.log(k,v);
}

includes()返回一个布尔值，判断数组中是否有某个项。现在终于不用遍历整个数组来验证某一个项目是否存在了。

let arr = ["白板","幺鸡","二条","三饼","四筒"];
console.log(arr.includes("二条"));

ES6学习笔记（一）

ES6

目录

一、ES6中的let和const关键字

二、ES6中的解构

三、ES6中的字符串、数组的增强

热门文章

最新文章

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

ES6学习笔记（一）

ES6

目录

一、ES6中的let和const关键字

二、ES6中的解构

三、ES6中的字符串、数组的增强

热门文章

最新文章

相关电子书