这篇学习笔记依然是介绍es6的一些常用的新功能,这一篇会介绍两种新功能:1. const和let,2.模板字符串。之所以把这两个完全不相关的
概念放在一起是因为这两部分的内容不是很多,而且很容易理解。同时,我也会介绍一些其他es6相关的内容。
1. 一些概念
在开始我们的正篇之前,有几个概念需要大家牢记。es6的新功能分为两类,一类是真正的新增功能,另一类叫做语法糖,这两类虽然在代码中没什
么区别,但是实际上却完全不一样。真正的新增功能是指一个功能在以前没有,从这个版本开始加入的,比如Set和Map,const和let等。与这些
功能相比,语法糖指的是其实某个功能在以前的版本已经有了,但是写法很不友好,很不科学,所以为我们设计了新的写法,比如class关键字,虽
然看起来好像和java或者其他面向对象的写法很像,但是js里的class内部实现仍然靠的是原型链继承,和一般的面向对象编程的实现不一样,这
一点请务必牢记。
2.let和const
var关键字是javascript中定义函数的方法,要知道javascript在一开始设计的时候只是为了操作DOM,可是现在呢,javascript可以说无处
不在,我们有NodeJs,可以用javascript来编写服务器代码,或者react native,用javascript来写手机原生app,甚至是electron,可
以用来开发各平台的桌面应用。所以只有var这一种关键字定义函数明显已经不够用,而且var本身的设计也有缺陷,所以es6为我们带来了两种新的
关键字,作用就是用来取代var。
2.1 let
let几乎和var一样,唯一的区别就是let支持块级作用域,而且同名的函数不能定义两次,比如我们可以这样1
2var a = 1;
var a = 2;
但是我们不能这样,会报错1
2let a = 1;
let a = 2;
这些区别也正是我们应该用let代替var的理由,所以在以后的代码中,我们应该尽可能的使用let。
2.2 const
const的意思是常量,如果你接触过别的编程语言,对于这个概念一定不陌生,常量顾名思义就是不会变化的量,所以当我们确定一个变量在之后不会
被改变时,就要尽量使用const。这样做的好处是可以使代码逻辑更加清晰,如果你看到const,那么就应该意识到,这个变量在之后的使用过程中值
不会发生改变。一旦试图改变const就会报错
1 | const a = 1; |
但是值得注意的是,如果用const定义了一个对象,那么我们可以改变这个变量上的属性,甚至可以为其增加新的属性,
1 | const person = {name: 'john', age: 10} |
3. 模板字符串
模板字符串是es6给我们带来的一个非常方便的功能,它可以使我们的string中插入javascript函数或者表达式。这使得我们不需要再去拼接字符串,
从而使得代码更加简洁,逻辑更加清晰。我们来看个例子:
拼接字符串的写法:1
2
3
4
5let firstName = 'Peter';
let lastName = 'Doe';
//现在我们需要输出 My name is Peter Doe
console.log('My name is '+firstName+' '+lastName);
模板字符串写法:1
2
3
4let firstName = 'Peter';
let lastName = 'Doe';
console.log(`My name is ${firstName} ${lastName}`);
是不是很方便?这里大概说一下,我们用`来替代字符串中的’或者”,然后在需要引入变量或者表达式时把它们包在${}中,这样就搞定了。下面我们再来
看两个表达式的例子:1
2
3
4
5let number = 2;
console.log(`Number X 2 is ${number*2}`);
console.log(`Today is ${new Date()}`);
但是值得注意的是,如果有大量的逻辑运算,那么请不要直接写到${}中,比如迭代或者if条件,这样会使代码变得不清晰。
这里我来介绍两个我用模板字符串比较多的情况,如果各位碰到这种情况,也可以考虑使用模板字符串。
1) 动态url,有的时候,我们写出一个url时,它其中的某个部分是变量,要等待我们执行了某些操作以后才能赋值,我觉的这就是一个使用模板字符串的
好时机,比如我们在点击一个按钮后会得到一个postId,那么我们就可以直接把这个postId放到模板字符串中1
const url = `www.mycoolblog.com/post${postId}`;
2) 拼接sql数据库query,如果你用过php或者NodeJs,那么你一定能体会拼接query的痛苦,我们来看个简单的,如果用拼接字符串怎么写:1
const query = "select name, age, gender from users where userId='"+userId+'" and userPassword='"+userPassword+"'";
怎么样,这个其实是最简单的查询,如果我们需要用到表连接或者其他的复杂逻辑,那么这个query就会变得异常复杂,而且我几乎可以肯定你会因为少了一个
‘或者”而导致代码报错。
我们再来看看用模板字符串可以怎么做:1
const query = `select name, age, gender from users where userId='${userId}' and userPassword='${userPassword}'`;
怎么样,是不是再也不用担心引号的问题了呢?不管你的query逻辑有多复杂,只要使用模板字符串就可以完全避免引号带来的问题,是不是很方便。
4. 总结
今天简单的介绍了几个es6为我们带来的新功能,const和let,用来代替var,使变量声明更有逻辑性;以及模板字符串,使我们再也不用去拼接字符串了,
就像第一篇笔记说的,es6带来的新功能基本都是大家平时工作中最需要的功能,所以没有必要害怕es6,它只会让我们写js的时候更加方便,逻辑更加清晰。