JavaScript 新特性应该这样回答

我正在参与掘金创作者训练营第5期，点击了解活动详情

JavaScript 新特性

1 声明变量

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

1.1 const关键字

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

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

1.2 let关键字

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

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

1.3 模板字符串

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

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

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

const name = 'xiaoming';

console('我的名字是' + name)；
复制代码

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

const name = 'xiaoming';

console(`我的名字是 ${name}`);
复制代码

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

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

2 创建函数

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

2.1 函数声明

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

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

// 声明
function fun() {}

// 调用
fun()
复制代码

2.2 函数表达式

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

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

// 调用
fun()
复制代码

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

传递参数

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

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

// 调用
fun(1)
复制代码

函数返回值

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

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

// 调用
fun(1)
复制代码

2.3 默认参数

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

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

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

// 调用
fun()
复制代码

2.4 箭头函数

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

如可以简化为：

const fun = num => num + 1;
复制代码

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

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

const fun = (num1, num2) => num1 + num2;
复制代码

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

 const fun = (num1, num2) => {
 	...
 	return num1 + num2;
 };
复制代码

返回对象

如果想返回一个对象？

这样做是不对的！！！！

const per = (firstName, lastName) => {
	first: firstName,
	last: lastName,
}
复制代码

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

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

const per = (firstName, lastName) => ({
	first: firstName,
	last: lastName,
})
复制代码

这里缺少的圆括号是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')
复制代码

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

console.log(this); // window
复制代码

为了解决这个问题，我们可以使用箭头函数语法保全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
复制代码

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

务必时刻考虑作用域。

箭头函数不限定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')
复制代码

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

3 编译 JavaScript

一项JavaScript新特性提出并获得一定的支持后，社区通常想在所有浏览器都支持之前就开始使用。为了确保你写出的代码能正常在浏览器中运行，要把代码换成兼容性更好的版本。这个过程叫做编译（compile）。最常用于编译JavaScript代码的工具之一是Babel（www.babeljs.io）。

过去，若想使用最新的JavaScript特性，只有等待，几周，几个月，甚至几年，直到浏览器支持。现在，借助Babel可以立即就使用最新的JavaScript特性。加入编译步骤之后，JavaScript与其他语言更像了。然而，这与常规的编译还不一样，代码不被编译成二进制文件，而是转换成更多浏览器可以解析的语法。另外，JavaScript现在有源码了，这意味着，项目中有些文件不会在浏览器中运行。

以一个接受默认参数的箭头函数为例：

const add = (x = 5, y = 10) => console.log(x + y);
复制代码

使用Babel编译这段代码，生成的代码如下所示：

"use strict";
var add = function add() {
	var x =
		argument.length <= 0 || argument[0] === undefined ? 5 :argument[0];
	var y =
		argument.length <= 0 || argument[1] === undefined ? 10 :argument[1];
     return console.log(x + y);
}
复制代码

Babel添加了“use strict”声明，在严格模式下运行代码。变量x和y通过arguments数组(你可能熟悉这个技术)模拟成默认参数。编译得到的JavaScript支持范围更广。

如果想更进一步学习Babel，请访问文档网站中的Babel REPL（babeljs.io/repl）。在左侧输入…

编译JavaScript代码的过程通常由webpack或parcel等构建工具自动操作。

4 对象和数组

自ES6起，JavaScript句法新增了一些在对象和数组中限定变量作用域的创造性方式。这些创造性技术在react社区中广泛使用。

4.1 析构对象

析构赋值语句把对象中字段的作用域限定在本地，以及声明将用到哪些值。以下面sandwich对象为例。这个对象有四个键，不过我们只想使用其中两个值。为此，可以把bread和meat的作用域限限定在本地。

const sandwich = {
	bread: "dutch crunch",
	meat: "tuna",
	chese: "swiss",
	toppings: ["lettuce", "tomato", "mustard"]
};
const { bread, meat } = sandwich;
console.log(bread, meat); // dutch crunch tuna
复制代码

这段代码从对象中取出bread和meat，创建两个局部变量。另外，由于这两个析构的变量是使用let声明的，因此bread和meat的变化对sandwich对象没有影响。

const sandwich = {
	bread: "dutch crunch",
	meat: "tuna",
	chese: "swiss",
	toppings: ["lettuce", "tomato", "mustard"]
};
const { bread, meat } = sandwich;
bread = "garlic";
meat = "turkey";

console.log(bread); // garlic
console.log(meat); // turkey

console.log(sandwich.bread, sandwich.meat); // dutch crunch tuna
复制代码

对象还可以析构给函数的参数。

我们可以在函数中析构出想要的使用的值

const obj = {
	firstName: 'aa',
	lastName: 'bb'
};
const lordify = ({ firstName }) => {
	console.log(`${firstName} 是我的姓！`);
};

lordify(obj); // aa是我的姓！
复制代码

我们还可以这样！

const obj = {
	firstName: 'aa',
	lastName: 'bb'
	like: {
		one: '篮球'，
		two: '足球'，
	};
};
const lordify = ({ like: {one} }) => {
	console.log(`${one} 是我的爱好！`);
};

lordify(obj); // 篮球是我的爱好！
复制代码

使用冒号和嵌套的花括号可以从obj对象中析构出like。

4.2 析构数组

值也可以从数组中析构出来。假设我们想把数组中的第一值赋给一个变量。

const [first] = ['1', '2', '3'];

console.log(first); // 1
复制代码

此外，还可以使用逗号跳过不需要的值，这叫列表匹配（list matching）。在需要跳过的元素位置上使用逗号执行的就是列表匹配。还以前面的数组为例。在前两个值的位置上使用逗号就可以获取第三个值。

const [, , third] = ['1', '2', '3'];

console.log(third); // 3
复制代码

4.3 对象字面量增强

对象字面量增强与析构相反，它指把对象重新组合成一体。使用对象字面量增强可以把全局作用域中的变量添加到一个对象中。

const name = 'xiaoming';
const like = '篮球'；

const obj = {name, like};

console.log(obj); // {name: 'xiaoming', like: '篮球'}
复制代码

定义对象方法时无须使用function关键字。

// 旧方法
var skier = {
	name: name,
	sound: sound,
	fun: function() {
		console.log('123456');
	}
};

// 新语法
// 旧方法
const skier = {
	name,
	sound,
	fun() {
		console.log('123456');
	}
};
复制代码

使用对象字面量增强可以把全局变量放到对象中，还可以省略function关键字，减少输入量。

4.4 展开运算符

展开运算符是三个点号（...），可用于执行几项不同的任务。首先，可以使用展开运算符合并数组的内容。

假如有两个数组，我们可以把它们合并成一个数组，创建第三个数组。

const arr1 = ['xiaoming', 'xiaowang', 'xiaoli'];
const arr2 = ['小明', '小王', '小李'];

const arr3 = [...arr1, ...arr2];

console.log(arr3.join(',')); // xiaoming,xiaowang,xiaoli,小明,小王,小李
复制代码

下面来看展开运算符可以解决一个问题。

以上面 arr1 数组为例，这次我们不想获取第一个元素，而是获得最后一个元素。为此我们可以使用 Array.reverse 方法反转数组，再析构数组

const arr1 =  ['xiaoming', 'xiaowang', 'xiaoli'];
const [last] = arr1.reverse();

console.log(last); // xiaoli
// 原数组被改变了
console.log(arr1); // ['xiaoli', 'xiaowang', 'xiaoming']
复制代码

在有展开运算符的情况中，我们无须改变原数组，而是创建一个副本，再做反转。

const arr1 =  ['xiaoming', 'xiaowang', 'xiaoli'];
const [last] = [...arr1].reverse();

console.log(last); // xiaoli
// 原数组没有被改变了
console.log(arr1); // ['xiaoming', 'xiaowang', 'xiaoli']
复制代码

由于我们使用展开运算符创建了一个副本，arr1数组完好无损。仍可以原来的形式继续使用。

展开运算符也可以用于获取数组中剩余的元素：

const arr2 = ['小明', '小王', '小李', '小傻瓜'];
const [first, ...others] = arr2;

console.log(others.join(',')); // 小王,小李,小傻瓜
复制代码

我们还可以使用三个点号句法把函数收集到一个数组中。在函数中，这叫剩余参数（rest parameters）。这里，我们可以使用展开运算符定义一个可以接受n个参数的函数，然后使用它们：

function funArr(...args) {
	let [first, ...arr] = args;
	console.log(first);
	console.log(arr);
}
funArr('1', '2', '3', '4');
// 1
// ['2', '3', '4']
复制代码

展开运算符还可以用于处理对象。

使用展开运算符处理对象的方式与处理数组类似。

const obj = {
	name: 'xiaoming',
	like: '篮球',
};

const work = '程序员';

const obj2 = {
	...obj,
	work
};

console.log(obj2); // {name: 'xiaoming', like: '篮球', work: '程序员'}
复制代码