用es6快乐的写js代码
原创用es6快乐的写js代码
原创
前端老鸟
修改于 2019-07-30 10:05:47
修改于 2019-07-30 10:05:47
ES6 提供的许多新特性。用这些新特性，我们能在不降低代码可读性与维护性的基础上畅快地写 JavaScript~
箭头函数
将数组的内容 * 2
以前我们这么写
[1, 2, 3].map(function(each){
return each * 2;
});用 ES6 只需这样写
[1, 2, 3].map(each=> each * 2);
// 或
[1, 2, 3].map((each)=> each * 2);
// 或
[1, 2, 3].map((each) => {
return each * 2;
});默认参数
以前我们这么写
var introSomeBody = fuction(name){
name = name || 'Jack';
}用 ES6 只需这样写
var introSomeBody = (name = 'Jack') => {
}不定参数
数字求和
以前我们这么写
var sumFn = function(){
var nums = [].slice.call(arguments);
var sum = nums.reduce(function(prev, curr){
return prev + curr;
}, 0);
return sum;
}用 ES6 只需这样写
var sumFn = (...nums) => {
return nums.reduce((prev, curr)=>{
return prev + curr;
}, 0);
}解构(Destructuring)赋值
交换两个变量的值
以前我们这么写
var temp = a;
a = b;
b = a;用 ES6 只需这样写
[a, b] = [b, a]参数赋值
以前我们这么写
var introSomeBody = fuction(options){
var name = options.name || 'Jack';
var age = options.age || 18;
console.log('I am %s, I am %d years old', name, age);
}用 ES6 只需这样写
var introSomeBody = ({name = "Jack", age = 18}) => {
console.log('I am %s, I am %d years old', name, age);
}模板字符串
拼多行字符串
以前我们这么写
var data = {
name: '新闻',
news: {
name: 'Bable升级到6啦',
content: 'Bable在某年某月升级到6啦，哈哈哈'
}
};
var html = (
'<div class="box">' +
'<h2 class="box-header">${name}</h2>' +
'<div class="box-body">' +
'<h3>${newsName}<h3>' +
'<div>${newsContent}</div>' +
'</div>' +
'</div>').replace('${name}', data.name)
.replace('${newsName}', data.news.name)
.replace('${newsContent}', data.news.content);用 ES6 只需这样写
var data = {
name: '新闻',
news: {
name: 'Bable升级到6啦',
content: 'Bable在某年某月升级到6啦，哈哈哈'
}
};
var html = `
<div class="box">
<h2 class="box-header">${data.name}</h2>
<div class="box-body">
<h3>${data.news.name}<h3>
<div>${data.news.content}</div>
</div>
</div>
`;原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录