es2015及es2017对我们的编程方式造成了什么影响?
2017-10-13 11:37
337 查看
记一些写代码中用得到的es6+语法,至于什么正则的拓展,数组的什么fill方法,对我们来说用处不大,就不提及了。
还有es6的import模块和class模块,这些在各种框架中都有体现,而且语法简单,也不提及。仅写一下对当前项目的影响。
导致了typeof再也不是完全安全的操作了
块级作用域以后就不需要自执行函数了
rest 参数
箭头函数
执行 Generator 函数会返回一个遍历器对象
用for of循环遍历
generator函数的yield没有返回,next方法可以带一个参数,该参数就会被当作上一个yield表达式的返回值。
因为都是iterator遍历器对象,所以基于for of的解构赋值也能用,但是return的done状态是true,所以下面这段代码ending为undefined
也可以函数外return,参数为其value
而且
给object添加iterator接口,使其能够被for of遍历出来:
那么如何完成这个操作:
内置执行器
要求await后面是promise
语义性好
a,b,c是3个异步操作,这样会顺序执行,a,b,c。如果希望abc同时执行也可以写为:
这使开发人员能够共享多个service worker和核心线程之间的SharedArrayBuffer对象的数据。
这种引入带来了巨大的益处,因为可以更轻松地在worker之间共享数据,从而可以改善worker之间的协调。
Atomics.add() // 将数组指定位置上的值加上一个给定值。返回这个位置上的旧值。
Atomics.and() // 对数组指定位置上的值进行位与操作。返回这个位置上的旧值。
Atomics.compareExchange() // 如果数组中特定位置的值与给定的值相等,则更新为另一个指定的值。返回这个位置上的旧值
Atomics.store() // 将给定值存在数组的指定位置。返回这个“给定值”。
...
new SharedArrayBuffer(length)
Object.entries
还有es6的import模块和class模块,这些在各种框架中都有体现,而且语法简单,也不提及。仅写一下对当前项目的影响。
let/const
var a = []; for (var i = 0; i < 10; i++) { a[i] = function () { console.log(i); }; } a[6](); // 10
导致了typeof再也不是完全安全的操作了
typeof a; let a; // error
块级作用域以后就不需要自执行函数了
// IIFE 写法 (function () { var tmp = ...; ... }()); // 块级作用域写法 { let tmp = ...; ... }
解构赋值
let [a, b, c] = [1, 2, 3]; 相当于 var _a = [1, 2, 3], a = _a[0], b = _a[1], c = _a[2]; var {x, y = 5} = {x: 1}; x // 1 y // 5 function add([x, y]){ return x + y; } add([1, 2]); // 3 let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 }; x // 1 y // 2 z // { a: 3, b: 4 }
函数的拓展
参数默认值rest 参数
function add(...values) { let sum = 0; // values = [2,5,3]; for (var val of values) { sum += val; } return sum; } add(2, 5, 3) // 10
箭头函数
var f = v => v; 相当于 var f = function(v) { return v; }; var f = v => (a) => "c"; 相当于 var f = function (v) { return function (a) { return "c"; }; }; var f = v => console.log(v); var f = v => {console.log(v)}; var f = v => { return console.log(v)};// 这3种方式有什么区别?
对象拓展
Object.assignconst target = { a: 1 }; const source1 = { b: 2 }; const source2 = { c: 3 }; Object.assign(target, source1, source2); target // {a:1, b:2, c:3} => function extend(obj, ext) { // 用assign写$.extend return Object.assign({}, obj, ext); }
generator
Generator 函数是 ES6 提供的一种异步编程解决方案。执行 Generator 函数会返回一个遍历器对象
function* helloWorldGenerator() { yield 'hello'; yield 'world'; return 'ending'; } var hw = helloWorldGenerator();
hw.next() // { value: 'hello', done: false } hw.next() // { value: 'world', done: false } hw.next() // { value: 'ending', done: true } hw.next() // { value: undefined, done: true }
用for of循环遍历
for (let v of hw){ console.log(v); } // hello world
generator函数的yield没有返回,next方法可以带一个参数,该参数就会被当作上一个yield表达式的返回值。
function* helloWorldGenerator() { console.log('Hello' + (yield 123)); yield 'world'; return 'ending'; } var hw = helloWorldGenerator(); console.log( hw.next('1'));// 第一个next的参数是没用的,因为没有上一个yield console.log( hw.next('2')); // { value: 123, done: false } // Hello2 //{ value: 'world', done: false }
因为都是iterator遍历器对象,所以基于for of的解构赋值也能用,但是return的done状态是true,所以下面这段代码ending为undefined
function* helloWorldGenerator() { yield 'hello' yield 'world'; return 'ending'; } var hw = helloWorldGenerator(); let [hello,world,ending ] = hw; console.log(hello,world,ending );
也可以函数外return,参数为其value
function* helloWorldGenerator() { yield 'hello' yield 'world'; return 'ending'; } var hw = helloWorldGenerator(); console.log( hw.return('a'));// { value: 'a', done: true }
而且
function* bar() { yield 'x'; yield* foo(); yield 'y'; } === function* bar() { yield 'x'; for (let v of foo()) { yield v; } yield 'y'; }
给object添加iterator接口,使其能够被for of遍历出来:
var obj = { a:1,b:2,c:3,d:4 }; obj[Symbol.iterator] = () => { var keys = Object.keys(obj); var current = 0; return { next: function () { var res = { value: obj[keys[current]], done: keys[current] ?false:true }; console.log(res) current++; return res; } }; }; for (let v of obj){ console.log(v); } 思考一下,怎么把iterator函数里的obj换成this?
那么如何完成这个操作:
function* a(){ yield "a"; } function* b(){ yield a(); } b()______; //填什么得到a()中的“a”?
es8的主要特性
其中js的多线程阿,共享内存对我们影响不大,但是还是稍微提及一下,主要影响就是async函数了async
是 Generator 函数的语法糖。内置执行器
要求await后面是promise
语义性好
async function main() { try { const val1 = await a(); const val2 = await b(val1); const val3 = await c(val1, val2); console.log('Final: ', val3); } catch (err) { console.error(err); } }
a,b,c是3个异步操作,这样会顺序执行,a,b,c。如果希望abc同时执行也可以写为:
// 写法一 let [foo, bar] = await Promise.all([a(), b(), c()]); // 写法二 let aP = a(); let bP = b(); let cP = c(); let foo = await aP; let bar = await bp; let res = await cP;
function PromiseFactory(delay){ return (name) => new Promise((rs,rj) => { setTimeout(()=>{ console.log(delay,'over'); rs(name); },delay) }) } var a = PromiseFactory(1000); var b = PromiseFactory(2000); var c = PromiseFactory(3000); async function gen(){ let aP = a('a'); let bP = b('b'); let cP = c('c'); let foo = await aP; let bar = await bP; let res = await cP; return console.log(foo,bar, res); } gen();
共享内存和Atomics
此功能引入了一个新的低级别Atomics命名空间对象和一个SharedArrayBuffer构造函数,来作为更高级别并发抽象的原始构建块。这使开发人员能够共享多个service worker和核心线程之间的SharedArrayBuffer对象的数据。
这种引入带来了巨大的益处,因为可以更轻松地在worker之间共享数据,从而可以改善worker之间的协调。
Atomics
当内存共享时,内存中的数据块可能被多个线程同时读写。Atomic 操作保障了数据读写符合预期,即下一个操作一定会在上一个操作结束后才开始,操作也不会被中断。Atomics.add() // 将数组指定位置上的值加上一个给定值。返回这个位置上的旧值。
Atomics.and() // 对数组指定位置上的值进行位与操作。返回这个位置上的旧值。
Atomics.compareExchange() // 如果数组中特定位置的值与给定的值相等,则更新为另一个指定的值。返回这个位置上的旧值
Atomics.store() // 将给定值存在数组的指定位置。返回这个“给定值”。
...
SharedArrayBuffer
对象用来表示一个泛型的,固定长度的原生二进制数据缓冲区,类似于 ArrayBuffer 对象。但在某种程度上,它们能被用于在共享内存上创建视图。与 ArrayBuffer 不同的是,SharedArrayBuffer 不能被移除。new SharedArrayBuffer(length)
字符串填充
padStart 和 padEnd 。正如其名,这俩函数的作用就是在字符串的头部和尾部增加新的字符串,并且返回一个具有指定长度的新的符串。'es8'.padStart(2); // 'es8' 'es8'.padStart(5); // ' es8' 'es8'.padStart(6, 'woof'); // 'wooes8' 'es8'.padEnd(2); // 'es8' 'es8'.padEnd(5); // 'es8 ' 'es8'.padEnd(6, 'woof'); // 'es8woo'
Object values和entries函数
Object.values类似Object.keys的返回。const obj = { x: 'xxx', y: 1 }; Object.values(obj); // ['xxx', 1] const obj = ['e', 's', '8']; // same as { 0: 'e', 1: 's', 2: '8' }; Object.values(obj); // ['e', 's', '8']
Object.entries
const obj = { x: 'xxx', y: 1 }; Object.entries(obj); // [['x', 'xxx'], ['y', 1]] const obj = ['e', 's', '8']; Object.entries(obj); // [['0', 'e'], ['1', 's'], ['2', '8']]
getOwnPropertyDescriptors
const obj = { get es7() { return 777; }, get es8() { return 888; } }; Object.getOwnPropertyDescriptor(obj); // { // es7: { // configurable: true, // enumerable: true, // get: function es7(){}, //the getter function // set: undefined // }, // es8: { // configurable: true, // enumerable: true, // get: function es8(){}, //the getter function // set: undefined // } // }
结尾逗号
function es8(var1, var2, var3,) { // ... } es8(10, 20, 30,);
相关文章推荐
- Web 2.0的社交工具影响了我们的思考方式?
- 新手学习编程的最佳方式是什么
- “钱三篇”后续之利率调整对我们有什么影响?
- 编程之久除了算法和数据结构 什么也不属于我们
- 什么是404错误?404的处理方式及对SEO的影响
- 编程我们学到了什么?
- “新式”教育制度对我们思维造成的影响
- 跨界会对电商行业造成什么影响
- 高温或低温会对光模块造成什么影响?
- 在IE下的JS编程中,以下的编程方式都会造成即使关闭IE也无法释放内存的问题
- 编程之久除了算法和数据结构,什么也不属于我们。
- Web 2.0的社交工具影响了我们的思考方式?
- 编程之久除了算法和数据结构,什么也不属于我们。
- 编程之久,除了算法和数据结构什么也不属于我们
- 一个网上流传的段子解释什么是大数据,及它给我们生活带来的影响
- 编程之久除了算法和数据结构,什么也不属于我们。
- 网络编程除了socket之外还有什么方式?
- 【自】JavaScript面向对象初探一:通过编写一个简单的Tab选项卡插件,让我们更直观的去认识面向对象的编程方式
- 无线网存在安全隐患会给我们的电脑造成哪些影响