现在就可以使用的5个 ES6 特性

这篇文章介绍了5个 ES6 特性,使你的 JavaScript 代码变的更好。不用说,我们大多数前端开发工程师非常关注 JavaScript 的性能和特性,这就是为什么 ES6 对于我们来说是如此令人兴奋。

ES6的变化是巨大的,是令人兴奋的,也有令人困惑的地方。在本文中,我将介绍5个 ES6 的新特性,您可以立即使用它们来增强你的 JavaScript代码,以及哪些特性不建议使用。 继续阅读

简单的字符串模板

每次在写脚本的时候拼装字符串是个头痛的事情,主要是双引号,单引号,还有一堆变量,一不小心就搞错了,而且可读性非常差。这里推荐一个小工具:http://www.html-js.com/my-js/version0.0.1/tool/html2string.html 这个工具可以将复杂的字符串转换成js的字符串。至少解决的了手动拼装的的问题,但是变量的话还是非常难受。比如一个列表:

  • 《愚人码头》 – 熊天平
  • 《富士山下》 – 陈奕迅
  • 《假如》 – 信乐团
通常如果是异步的请求,后端一般返回回来的是一个json:

[code=”javascript”]
[
{“song”:”愚人码头”,”songurl”:”http://www.css88.com/mp3/1.html”,”songer”:”熊天平”,”songerurl”:”http://www.css88.com/songer/1.html”},
{“song”:”富士山下”,”songurl”:”http://www.css88.com/mp3/2.html”,”songer”:”陈奕迅”,”songerurl”:”http://www.css88.com/songer/2.html”},
{“song”:”假如”,”songurl”:”http://www.css88.com/mp3/3.html”,”songer”:”信乐团”,”songerurl”:”http://www.css88.com/songer/3.html”}
]
[/code]
通常情况下会这样拼装:
[code=”javascript”]
var listData=[
{“song”:”愚人码头”,”songurl”:”http://www.css88.com/mp3/1.html”,”songer”:”熊天平”,”songerurl”:”http://www.css88.com/songer/1.html”},
{“song”:”富士山下”,”songurl”:”http://www.css88.com/mp3/2.html”,”songer”:”陈奕迅”,”songerurl”:”http://www.css88.com/songer/2.html”},
{“song”:”假如”,”songurl”:”http://www.css88.com/mp3/3.html”,”songer”:”信乐团”,”songerurl”:”http://www.css88.com/songer/3.html”}
];
var listHtml=”


    for(var i=0,lengths = listData.length;i < lengths;i++){ listHtml+='
  • 《’+listData[i].song+’》 – ‘+listData[i].songer+’
    }
    listHtml+=”


console.log(listHtml);
[/code]
继续阅读