ES6 实用特性详解：对象简写、块级作用域与字符串方法

ES6 核心特性概览

前言

JavaScript 社区始终热衷于探索新的 API、语法更新及特性，这些更新提供了更智能、高效且简洁的方式来完成关键任务。

在上一篇《简单谈谈ES6的六个小特性》之后，本文继续分享另外六个能够精简代码并提升开发效率的技巧。

由于 JavaScript 存在变量提升机制，我们通常需要在作用域开头声明一些看似“无用”的迭代变量（如 for (var x = ...)）。ES6 引入 let 关键字解决了这一令人困扰的问题。

新的对象字面量语法允许在属性名与变量名相同时，直接省略冒号和键名声明。

var x = 12;
var y = yes;
var z = {one:'1',two:'2'};

// The old way
var obj = {
 x:x,
 y:y,
 z:z
}
// The new way
var obj = {x,y,z};

2. 方法属性 (Method Properties)

在对象字面量定义函数时，可以省略 function 关键字。

var davidwalsh = {
 makeItHappen(param){
 // do stuff
 }
}

去除 function 关键字确实让代码更加简洁，同时也提升了代码的可维护性。

3. 块级作用域 vs 立即执行函数 (Blocks vs Immediately Executed Functions)

传统的创建立即执行函数（IIFE）的模式在写法上略显繁琐。

(function(){
 // do stuff
})();

利用 ES6 的大括号 {} 配合 let 关键字，可以创建块级作用域，从而在不使用括号的情况下实现类似立即执行函数的效果。

{
 let j = 12;
 let divs = document.querySelectorAll('div');

 // do stuff
}

j; // ReferenceError: j is not defined...

如果在块内部使用 var 声明函数，它可能会暴露给外部作用域；但若使用 let 声明变量，则无需括号即可实现 IEF 的功能，确保变量仅在块内可见。

4. for 循环与 let

由于 JavaScript 存在变量提升机制，开发者常需在作用域前声明看似无用的迭代变量（如 for var x = …）。ES6 引入 let 关键字有效解决了这一困扰。

for(let x = 0; x < len; i++){
 //do stuff
}

x; // ReferenceError: x is not defined

随着时间推移，let 将在代码中得到更广泛的应用。

5. 类的 get 和 set 访问器

class Cart{
 constructor(total){
 this._total = total;
 }
 get total(){return this._total;}
 set total(v){this._total = Number(v);}
}

var cart = new Cart(100);

cart.total // 100

为属性设置 get 和 set 方法是该特性中最实用的部分。无需编写额外的函数来进行特殊设定，当执行 obj.prop = {value} 时，相关逻辑会自动触发。

6. 字符串方法：startsWith, endsWith 和 includes

"MooTools".startsWith("Moo"); // true;
"MooTools".startsWith("moo"); // false;

"MooTools".endsWith("Tools"); // true;

"MooTools".includes("oo"); // true;

注意：includes 方法的浏览器兼容性尚不完善，过去曾出现过因不支持此方法而导致的线上 Bug。

原文：https://davidwalsh.name/es6-features-ii/amp

总结

以上就是本文的全部内容，希望这些内容能对大家的学习或工作有所帮助。如有任何疑问，欢迎留言交流。