前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >ES6 写法示例

ES6 写法示例

作者头像
前端GoGoGo
发布2018-08-24 17:21:39
3100
发布2018-08-24 17:21:39
举报

匿名函数调用

ES5

(function(){
  //dosth
})()

ES6

{
  //dosth
}

箭头函数

将数组的内容 * 2

ES5

[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;
});

默认参数

ES5

var introSomeBody = fuction(name){
  name = name || 'Jack';
}

ES6

var introSomeBody = (name = 'Jack') => {
}

不定参数

数字求和

ES5

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);
}

展开运算符

数组和字符串的展开

ES5

var a1 = [1, 2]
var a2 = [0].concat(a1).concat(3)
doSth('abc'.split())
function doSth(x, y, z){}

ES6

var a1 = [1, 2]
var a2 = [0, ...a1, 3]
doSth(...'abc')
function doSth(x, y, z){}

解构(Destructuring)赋值

交换两个变量的值

ES5

var temp = a;
a = b;
b = a;

ES6

[a, b] = [b, a]

参数赋值

ES5

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);
}

模板字符串

拼多行字符串

ES5

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>
`;

想了解更多 ES6 相关知识,请阅读

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2015.12.28 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 匿名函数调用
  • 箭头函数
    • 将数组的内容 * 2
    • 默认参数
    • 不定参数
      • 数字求和
      • 展开运算符
        • 数组和字符串的展开
        • 解构(Destructuring)赋值
          • 交换两个变量的值
            • 参数赋值
              • 模板字符串
                • 拼多行字符串
            领券
            问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档