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

Posted 2022-01-19 黑木令

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ES6重要吗?为什么要学习ES6?相关的知识，希望对你有一定的参考价值。

ES6 的全称 ECMAScript

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

1. 解构赋值 (改变了参数赋值, 变量赋值的形式) 。
2. 箭头函数 。
3. 数据结构: Set 和 Map 。
4. 异步操作: 解决回调噩梦的问题 。
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)