ES6重要吗?为什么要学习ES6?

1,267 阅读2分钟

ES6 的全称 ECMAScript

1. ES6 使用频率比较高的特性

1. 解构赋值 (改变了参数赋值, 变量赋值的形式) 。
2. 箭头函数 。
3. 数据结构: SetMap4. 异步操作: 解决回调噩梦的问题 。
5. 类与对象 。
6. 模块化 。

2. 学习 ES6 的步骤

1. 构建一套支持 ES6 的环境 ( gulp / babel / webpack / npm )。
2. 学习 ES6 的基础语法 ( 了解用法; 代码用法实例; 注意事项 )
3. 实际项目开发 。

3. 对比 ES6 与 ES5 <体现 ES6 有强大的生产力, 提高我们的开发效率>

3.1 通过 对象拷贝 对比 ES6 与 ES5 的语法差距

// ES5 语法实现 对象拷贝 拷贝
var createAssigner = function(keyFunc, defaults) {
  return function(obj) {
    // arguments.length 表示的是实际上向函数传入了多少个参数, 这个数字可以比形参数量大, 也可以比形参数量小 (形参数量的值可以通过 Function.length 获取到).
    var length = arguments.length
    if (defaults) obj = Object(obj)
    if (length < 2 || obj == null) return obj
    for (var index = 1; index < length; index++) {
      var source = arguments[index]
      var keys = keyFunc(source)
      var l = keys.length
      for (var i = 0; i < l; i++) {
        var key = keys[i]
        if (!defaults || obj[key] === void 0) {
          obj[key] = source[key]
        }
      }
    }
    console.log('ES5 -- 对象拷贝 : ', obj)
    return obj;
  }
}

var allKeys = function (obj) {
  var keys = []
  for (var key in obj) keys.push(key)
  return keys
}
var extend = createAssigner(allKeys)
extend({t:1},{k:2})


// ES6 实现方式
const ES6ArrObj = [
  {t:1},
  {k:2}
]

const ES6Obj = Object.assign(ES6ArrObj)

ES6ArrObj[0].t = 'asdas'
console.log('ES6 -- 对象拷贝 - 拷贝之后 ( .assign 对象拷贝不是深拷贝 ) : ', ES6Obj)
console.log('ES6 -- 对象拷贝 - 源对象 : ', ES6Obj)

3.2 通过 '默认参数' 对比 ES6 与 ES5 的语法差距

// ES5 语法

function defaultParameter (txt) {

  /**
   1. 在 ES5 中我们通过 '||' 或 运算符来保证 'txt' 是有值的 。
   2. 也就是说我们在业务开发的时候, 如果调用 defaultParameter 这个方法的时候没有传参, 通过这 '||' 运算符加后面的 'hello world' 默认值, 来达到 变量 不能为空的效果 。

  */

  txt = txt || 'hello world'
  console.log('ES5 语法: ', txt);
}

defaultParameter()



// ES6 语法
function defaultParameterES6 (txt = 'hello world') {
  /**
   1. 这个是 ES6 的使用方法。
   2. ES6 的方法不会让我们代码变得臃肿 。
   3. ES6 是在函数声明的时候, 在参数上加的默认值; 我们的执行代码中没有任何与默认值相关的东西, 相较于 ES5, ES6 的代码更加简介干净 。
    */

  console.log('ES6 语法: ', txt);
}

defaultParameterES6()

3.3 通过 字符串模板 对比 ES6 与 ES5 的语法差距

/**
 * 1. ES5 处理 字符串模板 的方法:
 * 2. _ 表示引用了 Underscore 这个第三方的库, 使用起来需要调用 template compiled 这两个方法 。
 */

// ES5 语法

var stringTemplate = _.template("hello: <%= name %>")
compiled({name: 'moe'})



/**
 * 1. ES6 处理 字符串模板 的方法:
 * 2. ES6 通过字符串拼接的形式, 实现了 模板和数据的编译过程 。
 * 3. 而且还不依赖于任何第三方的库 。
 */

 // ES6 语法

var stringTemplateES6 = 'limi'
var txtES6 = `hello ${stringTemplateES6}`
console.log('ES6 处理 字符串模板 的方法: ', txtES6)

之前有整理过部分知识点, 现在将整理的相关内容, 验证之后慢慢分享给大家; 这个专题是 “前端ES6基础” 的相关专栏; 不积跬步,无以至千里, 戒焦戒躁 。

如果对你有所帮助,喜欢的可以点个关注; 文章会持续打磨 。
有什么想要了解的前端知识吗? 可以评论区留言, 会及时跟进分享所相关内容 。
整理知识点不易, 每次都是在工作繁忙之余夜深人静之时整理, 无论知识点是大是小, 都会验证后再分享, 以防自己发表的文章给大家造成误导 。如有问题还望不吝赐教,本人会及时更改 (本文原创, 如需转载,请注明出处) 。