带你走进JS新特性（一）

JavaScript新特性

1 声明变量

ES6之前，声明变量只能使用var关键字。而现在，我们有几种不同的选择，而且功能都得到了增强

1.1 const关键字

常量时不能覆盖的变量，一旦声明，其值不能再更改。

常量的值不可以重置，倘若试图覆盖常量的值，控制台会报错

1.2 let关键字

现在，JavaScript变量具有词法作用域。

使用let关键字，可以把变量的作用域限定在任何代码块中。使用let可以保住全局变量的值

1.3 模板字符串

模板字符串为字符串拼接提供了一种新的方式。还可以在字符串中插入变量。

听别人说模板字符串、模板字面量或字符串模板，其实指的都是这个。

以前，字符串拼接是使用加号把变量的值和字符串组合在一起。

const name = 'xiaoming';

console('我的名字是' + name)；
1
2
3

有了模板，我们在创建的字符串中使用 ${} 插入变量的值

const name = 'xiaoming';

console(`我的名字是 ${name}`);
1
2
3

现在一个字符串可以横跨多行，而不会导致代码错误。

以前，在JavaScript代码中直接使用HTML字符串不是一件易事，要把所有的内容卸载一行内。
现在，空白也作为文本的一部分，我们便可以直接插入格式化的HTML，这样易于阅读和理解。

2 创建函数

只要想让JavaScript重复执行一项任务，就可以使用函数。

2.1 函数声明

函数声明或函数定义以function关键字开头，后跟函数的名称，函数所含的JavaScript语句在一对花括号之间定义。

函数在声明之后便可以调用、执行。

// 声明
function fun() {}

// 调用
fun()
1
2
3
4
5

2.2 函数表达式

另一种选择是使用函数表达式。这种范式通过变量创建函数。

// 声明
const fun = function() {}

// 调用
fun()
1
2
3
4
5

在函数声明和函数表达式之间抉择要明确一点：**函数声明的作用域会被提升，而函数表达式不会。**换句话说，在编写函数声明之前可以调用函数，而创建函数表达式之前不能调用函数，否则会报错。

传递参数

如果想为函数提供动态变量，可以把具名参数传给函数，放在圆括号之间即可。

// 声明
const fun = function(num) {}

// 调用
fun(1)
1
2
3
4
5

函数返回值

我们更多时候，希望函数返回一个值，下面为这个函数添加一个return语句。ruturn语句的作用是指定函数的返回值

// 声明
const fun = function(num) {
	return num + 1
}

// 调用
fun(1)
1
2
3
4
5
6
7

2.3 默认参数

默认参数是ES6规范引入的特性，如果没有为参数提供值，将使用默认值。

如果没有为函数提供参数，它仍然可以正常运行，只不过使用的是默认值。默认参数可以是任何类型，不限于字符串。

// 声明
const fun = function(num = 10) {
	return num + 1
}

// 调用
fun()
1
2
3
4
5
6
7

2.4 箭头函数

箭头函数时ES6新增的一个特性，非常有用。有了箭头函数，创建函数不再需要使用function关键字了。另外，也经常不使用return关键字。

如可以简化为：

const fun = num => num + 1;
1

现在，整个函数在一行内就声明完毕了，去掉了function关键字，也去掉了return关键字，箭头指明的就是要返回的值。这种写法的另一个好处是，如果函数只接收一个参数，可以省略参数两侧的圆括号

不过参数超过一个时要放入圆括号内：

const fun = (num1, num2) => num1 + num2;
1

这个函数可以写在一行内，毕竟只需要返回一个语句。如果多行，要使用花括号。

 const fun = (num1, num2) => {
 	...
 	return num1 + num2;
 };
1
2
3
4

返回对象

如果想返回一个对象？

这样做是不对的！！！！

const per = (firstName, lastName) => {
	first: firstName,
	last: lastName,
}
1
2
3
4

运行这段代码，你会看到一个错误：

Uncaught SyntaxError: Unexpected token ':'

修正的的方法是，把要返回的对象放在圆括号中。

const per = (firstName, lastName) => ({
	first: firstName,
	last: lastName,
})
1
2
3
4

这里缺少的圆括号是JavaScript和React应用中无数bug的根源，千万别忘了！！！

箭头函数和作用域

常规的函数不限定this的作用域。以下述代码为例，在setTimeout回调中，this变成了别的东西，不再是tahoe对象。

const tahoe = {
	mountains: ['Freel', 'Tallac', 'Rubicon', 'Silver'],
	print: function(delay = 1000) {
		setTimeout(function() {
			console.log(this.mountains.join(','));
		}, delay);
	}
}


tahoe.print();// Uncaught TypeError: Cannot read properties of undefined (reading 'join')
1
2
3
4
5
6
7
8
9
10
11

出现这个错误的原因在于试图在this上调用.join方法。在控制台输出this，可以看到它引用的是window对象。

console.log(this); // window
1

为了解决这个问题，我们可以使用箭头函数语法保全this的作用域。

const tahoe = {
	mountains: ['Freel', 'Tallac', 'Rubicon', 'Silver'],
	print: function(delay = 1000) {
		setTimeout(() =>{
			console.log(this.mountains.join(','));
		}, delay);
	}
}


tahoe.print();// Freel,Tallac,Rubicon,Silver
1
2
3
4
5
6
7
8
9
10
11

现在正常了，我们可以使用逗号把几个英文连在一起啦。

务必时刻考虑作用域。

箭头函数不限定this的作用域。

const tahoe = {
	mountains: ['Freel', 'Tallac', 'Rubicon', 'Silver'],
	print: (delay = 1000) => {
		setTimeout(() =>{
			console.log(this.mountains.join(','));
		}, delay);
	}
}


tahoe.print();// Uncaught TypeError: Cannot read properties of undefined (reading 'join')
1
2
3
4
5
6
7
8
9
10
11

把print函数改成箭头函数后，this引用的就是窗口了。