ES6学习之路（上）

ES6学习之路（上）

本篇文章是通过观看ES6标准入门第一章到第六章重点知识整理。

第一章 ES6简介

个人认为的重点是两种转码器：

1.Babel转码器
2.Traceur转码器

这两种转码器目前还没怎么用过，以后在公司项目应该会用到。主要作用就是ES6代码转为ES5代码，两种转化器都支持在线转码，非常的便捷。

第二章let和const命令

let命令：
1.let命令只在所声明的代码块内有效。
2.不存在变量提升。

console.log(foo);
var foo = 3;

这时候会输出undefined，也就是说实际运行是过程是

var foo;
console.log(foo);
foo = 3;

console.log(foo);
let foo = 3;

如果换做let声明该变量，这时候会报错，这就表明在它声明之前变量foo是不存在的。

3.暂时死区

var foo = 2;
if(true){
foo = 4; //ReferenceError
let foo ;
}

在上面的代码中拥有一个全局变量foo，在块级作用域又声明了一个局部变量foo，导致了后者绑定这个作用域，在let声明该变量之前是不存在的所以会报错。

4.不允许重复声明
不允许在相同的作用域内重复声明一个变量，否则会报错。

补充

do表达式
作用：让块级作用域变成表达式，可以有返回值。

let foo = do{
	let t=1;
	t*t+1;
}

这目前还只是一个提案，当前版本还不支持，估计在下个版本会支持。

const命令
1.const声明一个只读的常量。一旦声明，常量的值就不能改变，否则报错

const foo = 2;
const foo = 3;//TypeError

const的本质其实不是变量的值不能改，而是指向的内存地址不能变

const foo = {};
foo.prop = 'ES6'
console.log(foo.prop) //ES6

声明一个对象foo，并为其添加一个属性是可以成功的

//衔接上面的代码
foo = {} //TypeError

这将foo指向了另一个对象，内存地址发生了变化，出现了报错。
2 .const命令只在声明的块级作用域有效（与let命令一样）

第三章 变量的结构赋值

简单来说就是等号两边的数据类型及格式相同，专业名称叫做“模式匹配”

let [a,b,c] = [1,2,3];//a=1;b=2;c=3;
let [[a,[b]],c] = [[1,[2]],3];//a=1;b=2;c=3;
let [a,,c] = [1,2,3];//a=1;c=3;

1.解构赋值允许指定默认值，以数组的的解构赋值为例

let [foo = true] = []; //foo = true;

值得注意的是，默认值生效的条件：对象的属性值严格等于undefined。如果解构失败，变量值也等于undefined。

var {a=1} = {a:undefined}; //a=1
var {a=1} = {a:null}; //a=null

2.对象的解构赋值和数组的基本一致。接下来来一个复杂的嵌套结构。

let obj = {
	p:[
		'ES6',
		{y:'Good'}
	]
}
let { p:[x,{y}]} = obj; // x='ES6' y='Good'

值得注意的是这里的p是模式，不是变量，所以不会被赋值。
如果想赋值，改成如下样子：

let obj = {
	p:[
		'ES6',
		{y:'Good'}
	]
}
let { p, p:[x,{y}]} = obj;  // x='ES6' y='Good' p=['ES6',{y:'Good'}]

3.解构函数的用途

1. 交换变量的值

let x = 1;
let y = 2;
[x,y] = [y,x];

2. 函数返回多个值

function fun(){
return [4,5,6]
}
let [a,b,c] = fun();

3. 函数参数定义

function fun([x,y,z]){
}
fun({z:7,x:4,y:1});

4. 提取json数据

let json_Data = {
	id : 1,
	name :"zjx",
	data:[1,2,3]
}
let {id,name,data:data} = json_Data  //id = 1 , name = "zjx" ,data = [1,2,3]

第四章 字符串的扩展

在这一章，我发现了几个比较实用的函数

1. includes()： 返回布尔值，表示是否找到字符串。
2. startsWith()： 返回布尔值，表示参数字符串是否在该字符串的开头。
3. endsWith()：返回布尔值。表示参数字符串是否在该字符串的末尾。
4. repeat()：返回一个新的字符串，表示将源字符串重复几次。

'a'.repeat(3); //"aaa"
'a'.repeat(2.9); //是小数也会被取整  "aaa"
'a'.repeat(-1); //0~-1的小数及负数都认同为0  ""

5. padStart() ：在头部不全长度。
6. padEnd() ： 尾部补全长度。

除此之外，还有一个超级好用的模板字符串：${ }，
${ }用来写变量，反引号内可以写任意的文本，其中的空格换行也会被保留 （外面的反引号是主键盘旁边的按键，要在英文状态下才能打出喔），如果不需要可以使用 .trim() 消除。

第六章 数值的扩展

ps：第五章有关正则表达式的感觉用的不算太多就没有整理了。
这一章中发现Math对象扩展中的几个函数，感觉超级实用的

1. Math.trunc()：这个函数用来去除一个数的小数部分，返回整数部分。
2. Math.sign()：这个函数用来判断一个数是正数、负数还是零的。
   参数为负数，返回-1
   参数为正数，返回1
   参数为0，返回0 ；参数为-0，返回-0
   其他值，返回NaN

还有一些其他的Math函数，大家需要的话可以继续了解下~

除此之外，还新增了Integer数据类型，表示为整数。为了和Number区分需要用后缀n来表示。

1n + 2n   //3n

在除法运算方面，如果不能整除会舍弃小数部分。
值得注意的是：Integer类型不能与Number类型混合运算，会报错。
同时也不能与相等运算符（==）混合使用，相等运算符会改变数据类型

0n == 0 //TypeError
0n == false //TypeError

可以与精准相等运算符使用（===），精准相等运算符不会改变数据类型，所以可以混合使用

0n === 0 //false

欢迎大家一起讨论交流~