关于ES6的六个小特性（二）_网络技术_宿州市腾雀网络科技有限公司

关于ES6的六个小特性（二）

发布时间 - 2026-01-10 23:10:01 点击率：次

前言

Javascript 团体的每个人都喜欢新的API,语法更新以及特性，它们提供了更好的，更智能，更有效的方式以完成重要的任务。

继上一篇的《简单谈谈ES6的六个小特性》，这次我再分享6个可以减少代码和最大化效率的方法。

1.Object Shorthand

新的对象声明方法允许我们可以不声明对象的 key :

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.Blocks vs Immediately Executed Functions

下面创建立即执行方法的模式有点难看：

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

通过ES6我们可以通过 {} 和 let 来创建块级作用于，完成立即执行函数的作用：

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

 // do stuff
}

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

如果在 Block 内部声明函数，它将会被外部访问到。但你如果使用 let 关键字声明函数自变量，将不使用括号的情况下实现 IEF 的功能。

4. for loops and let

因为在JS里面会存在变量提升，我们经常会在作用域前面声明一些”无用”的迭代变量，例如（for var x = …）。ES6 使用 let 解决了此恼人的问题：

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

x; // ReferenceError: x is not defined

不久以后 let 会被应用的更多。

5.get and set for Classes

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 and 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

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。

# es6的新特性 # es6新特性 # es6特性 # ES6新特性之模块Module用法详解 # ES6新特性之解构、参数、模块和记号用法示例 # ES6中非常实用的新特性介绍 # 简单谈谈ES6的六个小特性 # ES6的新特性概览 # ES6新特性之字符串的扩展实例分析 # ES6新特性之函数的扩展实例详解 # ES6新特性之Symbol类型用法分析 # ES6(ECMAScript 6)新特性之模板字符串用法分析 # ES6新特性之变量和字符串用法示例 # ES6中module模块化开发实例浅析 # 我们可以 # 将会 # 不需要 # 每个人 # 不久以后 # 一切都 # 会在 # 这部 # 线上 # 我再 # 不支持 # 这篇文章 # 上一篇 # 但你 # 能为 # 将不 # 曾有 # 最棒 # 可以减少 # 更有效

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：淘宝网络营销工作内容,什么叫做淘宝接单员？怎么做呢？

下一篇：使用无限智能建站生*自动SEO站需要哪些步骤？

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：淘宝网络营销工作内容,什么叫做淘宝接单员？怎么做呢？

下一篇：使用无限智能建站生*自动SEO站需要哪些步骤？