ES6学习总结(一)

前端发展的太快了,快到ES6,ES7出来之后,今年已经是ES8了,但是纵然前端发展很快,我们除了马不停蹄的学习新的技术之外,也要沉下心来,好好的潜心磨砺自己,本文是整理了自己学习ES6之后相关的知识要点,寄希望于书之于笔,一来自己可以更好地领悟,而来也可以留作日后翻阅查看。

ES6新增的知识点主要包括变量声明let以及const,新增类型symbol,模板字符串,语法糖实现类,用于异步调用的promise对象,模块化,箭头函数,rest参数以及参数默认值,Set和Map集合,for of循环和迭代器iterator以及Generator等等,可以看出,ES6较之于ES5还是有着很多的新增特性,接下来会分为几篇文章将其一一介绍。

let和const

在JavaScript中咱们以前主要用关键var来定义变量,ES6之后,新增了定义变量的两个关键字,分别是let和const

对于变量来说,在ES5中var定义的变量会提升到作用域中所有的函数与语句前面,而ES6中let定义的变量则不会,let声明的变量会在其相应的代码块中建立一个暂时性死区,直至变量被声明。

1
2
3
4
5
6
//var声明变量
console.log(x === undefined); // "true"
var x = 3;
//let声明变量
console.log(x === undefined); // Uncaught ReferenceError: x is not defined
let x = 3;

从上面的代码可以看出来,使用let我们可以伪造一个代码块,终于不再局限于函数作用域中,而且对于代码也会更加的规范,使用let定义变量,提倡人们先定义再使用,不然会报错。

const主要作用于定义常量,而且一旦声明,初始必须赋值,并且变量值不能更改,否则会报错

1
2
3
4
5
const CALA;
//Missing initializer in const declaration
const CALA="calabash519"
CALA="hello world";
//Assignment to constant variable.

symbol

ES6 以前,我们知道5种基本数据类型分别是Undefined,Null,Boolean,Number以及String,然后加上一种引用类型Object构成了JavaScript中所有的数据类型,但是ES6出来之后,新增了一种数据类型,名叫symbol,像它的名字表露的一样,意味着独一无二,意思是每个 Symbol类型都是独一无二的,不与其它 Symbol 重复。

可以通过调用 Symbol() 方法将创建一个新的 Symbol 类型的值,这个值独一无二,不与任何值相等。

1
2
var mySymbol=Symbol();
console.log(typeof mySymbol) //"symbol"

其他类型可以被强制转换成字符串,但是Symbol 却不能,千万不要这么做,不然会报错,提示TypeError。

可以使用Symbol来定义对象的属性,而且当Symbol作为属性名的时候,必须用[]来进行调用而不是点操作符。

1
2
3
4
5
var obj = {};
var mySymbol = Symbol();
obj[mySymbol] = "calabash519";
console.log(obj[mySymbol]); //calabash519
console.log(obj.mySymbol); //undefined

Symbol还可以使 instanceof 可扩展,在 ES6 中,object instanceof constructor 表达式被标准化为构造函数的一个方法:constructor[Symbol.hasInstance](object),这意味着它是可扩展的。

模板字符串

字符串是JavaScript中基本类型之一,应该算是除了对象之外是使用最为频繁的类型吧,字符串中包含了例如substr,replace,indexOf,slice等等诸多方法,ES6引入了模板字符串的特性,用反引号来表示,可以表示多行字符串以及做到文本插值(利用模板占位符)。

1
2
3
4
5
6
7
8
9
10
11
// 以前的多行字符串我们这么写:
console.log("hello world 1\n\
hello cala");
// "hello world
// hello cala"

//有了模板字符串之后
console.log(`hello world
string text line 2`);
// "hello world
// hello cala"

可以用${}来表示模板占位符,可以将你已经定义好的变量传进括弧中,例如:

1
2
3
4
var name="cala";
var age=22;
console.log(`hello,I'am ${name},my age is ${age}`)
//hello,I'am cala,my age is 22

上述是个很简单的例子,展示了模板字符串和模板占位符的基本用法,对比与普通字符串,模板字符串可以更好地支持自动转义特殊的字符串,也可以在其内嵌套控制语句,使得代码的逻辑更加清晰。