专栏首页front-end technology带你玩转ECMAScript 6,助力你写出高效漂亮的代码

带你玩转ECMAScript 6,助力你写出高效漂亮的代码

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 用es6快乐的写js代码

    ES6 提供的许多新特性。用这些新特性,我们能在不降低代码可读性与维护性的基础上畅快地写 JavaScript~

    前端老鸟
  • canvas的api的学习(一)

    Canvas是 HTML5 新增的,一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作

    前端老鸟
  • canvas的api的学习(一)

    Canvas是 HTML5 新增的,一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作

    前端老鸟
  • 用es6快乐的写js代码

    ES6 提供的许多新特性。用这些新特性,我们能在不降低代码可读性与维护性的基础上畅快地写 JavaScript~

    前端老鸟
  • Web前端学习 第3章 JavaScript基础教程19 原始类型

    原始类型赋值给变量,遍历存储的是这个值本身,而你用类型赋值给变量,变量存储的是一个引用,这个引用会指向内存中的这个对象。

    学习猿地
  • swift 中类(class)和结构体(struct)区别

    引用类型:将一个对象赋值给另一个对象时,系统不会对此对象进行拷贝,而会将指向这个对象的指针赋值给另一个对象,当修改其中一个对象的值时,另一个对象的值会随之改变。

    菜菜不吃蔡
  • js中的this指向

    js中的this指向 首先,js中的this指向是根据运行时确定的,而非定义时。 js中的this指向大致分为如下几种: 作为对象的方法调用 作为普通函数调用 ...

    用户1141560
  • 关于引用变量赋值问题

    * 2个引用变量指向同一个对象, 通过一个引用变量修改对象内部数据, 另一个引用变量也看得见

    李才哥
  • 《Python入门09》揭秘python面向对象的编程~

    Python和C++、Java是一样的,它是一种面向对象的计算机语言。在前几章,主要介绍了Python内置的主要对象类型(数、字符串、列表、元组和字典),大致...

    ShuYini
  • UNPv13:#第1章#简介

    概述 ? TCP本身并不提供记录结束标志:如果应用程序需要确定记录的边界,它就要自己去实现,已有一些常用的方法可供选择。从TCP套接字读取数据时,我们总...

    _gongluck

扫码关注云+社区

领取腾讯云代金券