JavaScript ES6对象符号入门
(window.slotbydup=window.slotbydup || []).push({
id: '2611110',
container: s,
size: '240,200',
display: 'inlay-fix'
您当前位置： &
[ 所属分类
| 时间 2015 |
作者 红领巾 ]
让我们来聊聊ES6中的对象申明。和前身ES5相比，它有一个较大的升级。ECMAScript 6 在这领域没有带来任何新的功能(我们不在这里讨论 class 关键字)，但它确实有大量的新语法来帮助我们保持在海湾的所有括号。
通过这篇文章，我要去概括所有的新ES6对象声明语法。
你有多频繁的申明属性函数？我知道我应该比我记得的次数还多。
var obj = {
hello : function ( ) {
ES6带来了新的语法来缩短这很常见的申明模式。请注意下面的示例中，缺少了 function 关键字！在ES6中这两个例子在技术上是同一回事，并且可以共存，这也是一件好事情。
var obj = {
hello ( ) {
Getters和Setters
在相当长的时间里，在ES5中用 Object.createProperty() 定义只读属性。我现在想，也许这就是为什么你很少看到今天正在使用此功能的原因。
var obj = Object . defineProperties ( { } , {
hello ( ) &s4&{&/s4&
get : function ( ) {
return ‘hello’ ;
configurable : true ,
enumerable : true
为了定义一个只读属性而每次都打这么多让我觉得十分麻烦。ES6介绍了正确的getter和setter语法是这个成为第一个类功能：
var obj = {
get hello ( ) {
return this . _
这里的区别相当惊人。这两个例子是等效的功能，但ES6更易于管理和感觉属性属于类。任何尝试设置 hello 属性值都会返回一个异常：
obj . hello = ‘new value’ ;
// Uncaught TypeError: Cannot set property hello of [object Object] which has only a getter
使用 set 关键字 也十分容易的定义setter：
var obj = {
set hello ( value ) {
this . _hello =
在ES5中应该这样定义：
var obj = Object . defineProperties ( { } , {
hello ( ) &s4&{&/s4&
set : function ( value ) {
this . _hello =
configurable : true ,
enumerable : true
和getter不同，尝试从只写属性中读取只，不会抛出错误，而会返回 undefined . 我不能确定感受得到这里的行为差异，同时也不认为我一生中遇到过使用只写属性。我想我们可以认为这是一个“没什么大不了”的功能。
计算的属性名称
通常你必须使用键基于变量创建对象。在这种情况下传统的方法看起来像这样：
var param = ‘size’ ;
var config = { } ;
config [ param ] = 12 ;
config [ “mobile-“ + param ] = 4 ;
功能化？是的而且也非常恼人。在ES6中，您可以定义计算的属性名称期间无需单独的语句的对象声明，如下所示：
const param = ‘size’ ;
const config = {
[ param ] : 12 ,
[ ` mobile – $ { param } ` ] : 4
这里有另外一个例子：
var index = 0 ;
var obj = {
[ ` key $ { index } ` ] : index ++ ,
[ ` key $ { index } ` ] : index ++ ,
[ ` key $ { index } ` ] : index ++ ,
console . log ( obj ) ;
// {“key0″:0,”key1″:1,”key2″:2}
我个人最喜欢的功能之一就是速记分配。让我们先看看ES5的例子：
module . exports = {
readSync : readSync ,
readFile : readFile ,
readFileSync : readFileSync ,
writeFile : writeFile ,
writeFileSync : writeFileSync ,
appendFile : appendFile ,
appendFileSync : appendFileSync
撒上一些ES6魔法，你就可以拥有：
module . exports = {
readSync ,
readFile ,
readFileSync ,
writeFile ,
writeFileSync ,
appendFile ,
appendFileSync
基本上，如果变量和属性的名称是相同的则可以省略右侧。没有任何事情可以阻止你从混合和匹配：
module . exports = {
appendFile ,
appendFileSync : function ( ) {
如何在今天使用ES6的功能？在过去几年中使用编译器已成为常态。人和大公司不再回避。 Babel 是ES6到ES5转换器，它支持所有ES6的功能。
如果你正在你构建流中使用 Browserify ，增加 Babel 转换功能 只需要花几分钟时间 。当然了，几乎每个常见的Node.js生成系统，例如Gulp,Grunt以及其他类型，都支持。
浏览器呢？
大多数的 浏览器正在加紧 实施新的功能，但不会充分支持。那就意味着你需要等待？那是需要的。好消息是在未来1-2年内这个语法特性将会普及，所以你可以在那时候很舒服的使用它。另一方面，如果你觉得有必要100%控制源代码，你应该现在坚持使用ES5.
本文前端（javascript）相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程
转载请注明本文标题：本站链接：
分享请点击：
1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责；
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性，不作出任何保证或承若；
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
阅读(2727)
有三种东西必须控制：情绪、语言、行为；有三个问题必须思考：生命、死亡、永恒；有三种品质必须尊敬：坚毅、自尊、仁慈；有三种习惯必须培育：理性、谦逊、好学；
手机客户端
，专注代码审计及安全周边编程，转载请注明出处：http://www.codesec.net
转载文章如有侵权，请邮件 admin[at]codesec.net酷勤网 C 程序员的那点事！
当前位置： >
浏览次数：次
Addy Osmani 是Google Chrome开发团队的工程师，近日他在其中宣布，ES6字符串模板已经可以在Chrome中工作。你可以在字符串文字中嵌入表达式，（此功能尚未发布）。以前此类功能多由第三方JavaScript模板引擎库来实现，如Mustache, jQuery Templates, doT.js, ejs等。目前还不清楚此功能对性能的影响。
& var persion = &Alex Russell&;console.log('Yo! My name is ${person}!');& Yo! My name is Alex Russell!
下图来自其Twitter：
& 相关主题：　　要使用Babel， 我们需要nodeJS的环境和npm， 主要安装了nodeJS， npm就默认安装了 ， 现在安装nodeJS很简单了， 直接下载安装就好了；
　　安装es-checker
　　在使用Babel之前 ， 我们要先检测一下当前node对es6的支持情况， 我们使用先es-checker， 命令行下执行：
npm -g install es-checker
　　es-checker安装完毕以后， 命令行执行：es-checker&， 如下图， 我的node环境版本是v4.4.3，&支持64%哦 ：&
　　babel的安装
　　所以我们来安装babel吧， 有了babel， 能够使用更多高级词法！
　　首先新建一个工作目录， 然后创建一个.json的文件， 内部内容为：
"name": "my-project",
"": "1.0.0",
"devDependencies": {
　　然后再打开cmd(命令行), 在工作目录下执行命令安装babel-cli：
--save-dev install babel-cli
　　再安装一个全局的babel-cli：
install babel-cli
　　接着在工作目录创建一个名字为.babelrc的文件， 文件内容入如下（&要注意window系统下创建这种文件系统会提示你：&必须键入文件名& ， 你可以找别的方式去创建， 我是在开发工具的工程目录中把这个文件创建出来的）：
"presets": [
"plugins": []
　　安装babel-preset-es2015
　　还是工作目录， 然后再安装babel-preset-es2015：
npm install --save-dev babel-preset-es2015
　　到目前为止babel算是安装完毕了：
　　测试es6代码
　　创建一个test.js的文件， 键入内容：
let [a,b,c] = [1,2,3];
console.log(a,b,c);
　　在当前目录下执行：
babel-node test
　　结果应该是这样的：
　　如果直接用执行node test， 我这边会报异常：&SyntaxError: Unexpected token [
　　　　nodeJS ：&https://nodejs.org/en/
　　　　babel官网 ：&https://babeljs.io/
出处：/diligenceday/ES6特性中文版-前端开发博客热门文章
4,706Views
3,888Views
2,395Views
2,006Views
1,923Views
1,634Views