本文介绍 ES6 中广泛应用的四个基础新语法。首先解析 let 和 const 如何解决块级作用域与常量定义问题；其次展示模板字符串简化字符串拼接的方法；接着介绍 Set 去重与 Map 键值对存储的优势；最后说明函数默认参数与对象解构的便捷用法，帮助开发者快速掌握 ES6 核心内容。
ES6 应用现状与概述
ES6 标准目前已获得主流浏览器的广泛支持，众多前端框架已集成该规范，配合 Babel 等工具进行兼容性处理，ES6 特性已具备实际应用条件。
若对 ES6 尚不熟悉，可通过以下四个基础用法快速建立初步认知。
变量声明：let 与 const
1. 使用 let 和 const 声明变量 在传统的 ES5 代码中，变量声明主要存在两个局限。
（1）缺乏对块级作用域的支持。
（2）无法直接声明常量。
ES6 通过引入 let 和 const 两个新关键字，有效解决了上述问题。
利用 let 实现块级作用域。
var a = 1;
if (true) {
var b = 2;
}
console.log(a); // 1
console.log(b); // 2
在 ES5 中，在 if 语句块内部声明的变量 b，在块外部依然可以被访问。
// in ES6
let a = 1;
if (true) {
let b = 2;
}
console.log(a); // 1
console.log(b); // ReferenceError: b is not defined
而在 ES6 中，若在 if 语句块内部使用 let 声明变量 b，则在块外部访问将导致错误。
以下代码展示了一个常见的易混淆场景。
var a = [];
for (var i=0; i< 5; i++) {
a.push(function() {
console.log(i);
});
}
a.forEach(function(value) {
value();
});
该代码的运行结果为：5, 5, 5, 5, 5。
若在循环中使用 let 声明变量 i。
var b = [];
for ( let i=0; i< 5; i++) {
b.push(function() {
console.log(i);
});
}
b.forEach(function(value) {
value();
});
运行结果将变为：0, 1, 2, 3, 4。
利用 const 定义常量。
// in ES5
var MY_CONSTANT = true;
MY_CONSTANT = false;
ES5 不支持常量定义，变量值可被修改，需依靠开发者自行约束。
// in ES6
const MY_CONSTANT = true;
MY_CONSTANT = false; // Uncaught TypeError: Assignment to constant variable
ES6 中通过 const 声明的常量，其值不可被重新赋值。
字符串处理：模板字符串
2. 模板字符串 在 ES5 中，字符串与变量的拼接通常较为繁琐。
var url = 'http://www.' + domain + '.com/' + path + '?' + queryParams; ES6 提供了更简洁的写法。
let url = `http://www.${domain}.com/${path}?${queryParams}`;
数据结构：Set 与 Map
3. 新的 Set 和 Map 对象 在 ES5 中，我们常使用数组来存储动态数据，例如。
var collection = [];
collection.push(1, 2, 1);
console.log(collection); // [ 1, 2, 1]
数组中可能包含重复数据，若需去重，必须编写额外代码进行判断。
function addToCollection(collection, value) {
if (collection.indexOf(value) < 0) {
collection.push(value)
}
}
ES6 提供了 Set 对象，处理此类情况更为便捷。
let collection = new Set();
collection.add(1);
collection.add(2);
collection.add(1);
console.log(collection); // Set {1, 2}
Set 还支持便捷的集合遍历及数据处理操作。
在 ES5 中，通常使用 object 来存储键值对数据，例如。
var collection = {};
collection.a = ‘abc';
collection.b = ‘xyz';
ES6 引入 Map 后，使用方式如下。
let collection = new Map();
collection.set(‘a', ‘abc');
collection.set(‘b', ‘xyz');
遍历操作同样简单。
collection.forEach(function(value, key) {
console.log(key + ":" + value);
});
console.log(collection.size);
函数特性：默认参数与解构
4. 函数参数 ES6 中函数的参数具备两项新特性。
默认值。
function doSomething(someObject) {
console.log(someObject);
}
此处可能引发运行时错误，需进行参数验证。
function doSomething(someObject) {
if (someObject === undefined) {
someObject = {};
}
console.log(someObject);
}
此类验证代码十分常见，ES6 允许为参数设置默认值，从而简化代码。
function doSomething(someObject = {}) {
console.log(someObject);
}
对象解构。
我们常将包含键值对的对象作为参数传递给函数，并在函数内部获取对象的各个属性。
function doSomething(someObject) {
var one = someObject.propOne;
console.log(one);
var two = someObject.propTwo;
console.log(two);
var three = someObject.propThree;
console.log(three);
}
ES6 允许直接在参数列表中解构对象参数。
function doSomething({ propOne, propTwo, propThree }) {
console.log(propOne);
console.log(propTwo);
console.log(propThree);
}
以上内容为本文全部要点，希望能为您的学习提供助益，欢迎继续支持本站。