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)
之前有整理过部分知识点, 现在将整理的相关内容, 验证之后慢慢分享给大家; 这个专题是 “前端ES6基础” 的相关专栏; 不积跬步，无以至千里, 戒焦戒躁 。
如果对你有所帮助，喜欢的可以点个关注; 文章会持续打磨 。
有什么想要了解的前端知识吗? 可以评论区留言, 会及时跟进分享所相关内容 。
整理知识点不易, 每次都是在工作繁忙之余夜深人静之时整理, 无论知识点是大是小, 都会验证后再分享, 以防自己发表的文章给大家造成误导 。如有问题还望不吝赐教，本人会及时更改 (本文原创, 如需转载，请注明出处) 。