标签搜索
搜索到
8
篇与
的结果
-
ES6生成器函数 //生成器函数以*和普通函数区分 function* gen(a){ yield a+1; yield a+2; } let nbm = gen(0); console.log(nbm.next()); //{value: 1, done: false} console.log(nbm.next()); //{value: 2, done: false}调用 Generator 函数，会返回一个内部指针（即遍历器 ）g 。这是 Generator 函数不同于普通函数的另一个地方，即执行它不会返回结果，返回的是指针对象。调用指针 g 的 next 方法，会移动内部指针（即执行异步任务的第一段），指向第一个遇到的 yield 语句，上例是执行到 a + 2 为止，再次调用g的next的方法，内部指针指向下个yield语句。next传参function* gen(){ let a = yield 1; if(a){ yield a+2; } } let nbm = gen(0); console.log(nbm.next()); //{value: 1, done: false} console.log(nbm.next(12)); //{value: 14, done: false}还可以将参数传递给 next 并使用该参数修改生成器的状态，以创建更高级的生成器。 next 将成为之前执行的 yield 表达式的结果值next 方法的作用是分阶段执行 Generator 函数。每次调用 next 方法，会返回一个对象，这个对象就是具有两个属性（done (done=false) 和 value (value=operand)）的 IteratorResult 对象。value 属性是 yield 语句后面表达式的值，表示当前阶段的值；done 属性是一个布尔值，表示 Generator 函数是否执行完毕，即是否还有下一个阶段。这里说明了Generator 函数可以暂停执行和恢复执行，这是它能封装异步任务的根本原因。 -
JS生成器 function* 这种声明方式(function关键字后跟一个星号）会定义一个生成器函数 (generator function)，它返回一个 Generator 对象。function* generator(i) { yield i; yield i + 10; } var gen = generator(10); console.log(gen.next().value); // expected output: 10 console.log(gen.next().value); // expected output: 20生成器函数在执行时能暂停，后面又能从暂停处继续执行。调用一个生成器函数并不会马上执行它里面的语句，而是返回一个这个生成器的 迭代器 （iterator ）对象。当这个迭代器的 next() 方法被首次（后续）调用时，其内的语句会执行到第一个（后续）出现yield的位置为止，yield 后紧跟迭代器要返回的值。或者如果用的是 yield*（多了个星号），则表示将执行权移交给另一个生成器函数（当前生成器暂停执行）。next()方法返回一个对象，这个对象包含两个属性：value 和 done，value 属性表示本次 yield 表达式的返回值，done 属性为布尔类型，表示生成器后续是否还有 yield 语句，即生成器函数是否已经执行完毕并返回。调用 next()方法时，如果传入了参数，那么这个参数会作为上一条执行的 yield 语句的返回值function *gen(){ yield 10; y=yield 'foo'; yield y; } var gen_obj=gen(); console.log(gen_obj.next());// 执行 yield 10，返回 10 console.log(gen_obj.next());// 执行 yield 'foo'，返回 'foo' console.log(gen_obj.next(10));// 将 10 赋给上一条 yield 'foo' 的左值，即执行 y=10，返回 10 console.log(gen_obj.next());// 执行完毕，value 为 undefined，done 为 true
-
迭代器[Symbol.iterator] 当需要对一个对象进行迭代时（比如开始用于一个for..of循环中），它的@@iterator方法都会在不传参情况下被调用，返回的迭代器用于获取要迭代的值。自定义迭代器let arr []; arr[Synbol,iterator] = fuction(){ let i = 0; let self = this; return { next() { return { done: self.length - 1 < i, value: self[i++] }; } }; } for (let v of arr) { console.log(v); }当执行 for(var i of arr) 的时候，其实是调用了 arr[Symbol.iterator]() 方法，这个方法返回了一个iterator（迭代器）。迭代器有一个next方法，for循环会不断调用这个 arr.next方法来获取下一个值，直到返回值中的 done 属性为true的时候结束循环。
-
JS计算精度问题 export default function point(f) { if (f === '+') { return accAdd; } else if (f === '-') { return accSub; } else if (f === '*') { return accMul; } else { return accDiv; } } /** ** 除法函数，用来得到精确的除法结果 ** 说明：javascript的除法结果会有误差，在两个浮点数相除的时候会比较明显。这个函数返回较为精确的除法结果。 ** 调用：accDiv(arg1,arg2) ** 返回值：arg1除以arg2的精确结果 **/ function accDiv(arg1, arg2) { var t1 = 0; var t2 = 0; var r1, r2; try { t1 = arg1.toString().split('.')[1].length; } catch (e) {} try { t2 = arg2.toString().split('.')[1].length; } catch (e) {} r1 = Number(arg1.toString().replace('.', '')); r2 = Number(arg2.toString().replace('.', '')); return (r1 / r2) * Math.pow(10, t2 - t1); } //给Number类型增加一个div方法，调用起来更加方便。Number.prototype.div = function (arg) { return accDiv(this, arg); /** ** 乘法函数，用来得到精确的乘法结果 ** 说明：javascript的乘法结果会有误差，在两个浮点数相乘的时候会比较明显。这个函数返回较为精确的乘法结果。 ** 调用：accMul(arg1,arg2) ** 返回值：arg1乘以 arg2的精确结果 **/ function accMul(arg1, arg2) { var m = 0; var s1 = arg1.toString(); var s2 = arg2.toString(); try { m += s1.split('.')[1].length; } catch (e) {} try { m += s2.split('.')[1].length; } catch (e) {} return Number(s1.replace('.', '')) * Number(s2.replace('.', '')) / Math.pow(10, m); } // 给Number类型增加一个mul方法，调用起来更加方便。Number.prototype.mul = function (arg) { return accMul(arg, this); /** ** 减法函数，用来得到精确的减法结果 ** 说明：javascript的减法结果会有误差，在两个浮点数相减的时候会比较明显。这个函数返回较为精确的减法结果。 ** 调用：accSub(arg1,arg2) ** 返回值：arg1加上arg2的精确结果 **/ function accSub(arg1, arg2) { var r1, r2, m, n; try { r1 = arg1.toString().split('.')[1].length; } catch (e) { r1 = 0; } try { r2 = arg2.toString().split('.')[1].length; } catch (e) { r2 = 0; } m = Math.pow(10, Math.max(r1, r2)); //last modify by deeka //动态控制精度长度 n = (r1 >= r2) ? r1 : r2; return ((arg1 * m - arg2 * m) / m).toFixed(n); } // 给Number类型增加一个mul方法，调用起来更加方便。Number.prototype.sub = function (arg) { return accMul(arg, this); /** ** 加法函数，用来得到精确的加法结果 ** 说明：javascript的加法结果会有误差，在两个浮点数相加的时候会比较明显。这个函数返回较为精确的加法结果。 ** 调用：accAdd(arg1,arg2) ** 返回值：arg1加上arg2的精确结果 **/ function accAdd(arg1, arg2) { var r1, r2, m, c; try { r1 = arg1.toString().split('.')[1].length; } catch (e) { r1 = 0; } try { r2 = arg2.toString().split('.')[1].length; } catch (e) { r2 = 0; } c = Math.abs(r1 - r2); m = Math.pow(10, Math.max(r1, r2)); if (c > 0) { var cm = Math.pow(10, c); if (r1 > r2) { arg1 = Number(arg1.toString().replace('.', '')); arg2 = Number(arg2.toString().replace('.', '')) * cm; } else { arg1 = Number(arg1.toString().replace('.', '')) * cm; arg2 = Number(arg2.toString().replace('.', '')); } } else { arg1 = Number(arg1.toString().replace('.', '')); arg2 = Number(arg2.toString().replace('.', '')); } return (arg1 + arg2) / m; } //给Number类型增加一个add方法，调用起来更加方便。Number.prototype.add = function (arg) { return accAdd(arg, this);
-
ES6 函数参数解构 解构赋值也可以发生在函数传参的时候，ES6中函数参数的灵活性大大提高了。函数参数的解构既可以用数组形式，也可以用对象形式，先看两个简单的例子：[javascript] view plain copy function foo( [ x, y ] ) { console.log( x + " " +y ); } foo( [ 1, 2 ] ); // 1 2 foo( [ 1 ] ); // 1 undefined foo( [] ); function bar( { x, y:YY } ) { console.log( x + " " + YY ); } bar( { y: 1, x: 2 } ); // 2 1 bar( { y: 42 } ); // undefined 42 bar( {} ); // undefined undefined 数组解构的时候还可以应用rest操作符：[javascript] view plain copy function f3([ x, y, ...z], ...w) { console.log( x + y + z + w ); } f3( [] ); // undefined undefined [] [] f3( [1,2,3,4], 5, 6 ); // 1 2 [3,4] [5,6] 同样函数参数的解构也可以有默认值，看下面的例子：[javascript] view plain copy function f({ x = 10 } = {}, { y } = { y: 10 }) { console.log( x + " " + y +"\n"); } f(); // 10 10 f( undefined, undefined ); // 10 10 f( {}, undefined ); // 10 10 f( {}, {} ); // 10 undefined f( undefined, {} ); // 10 undefined f( { x: 2 }, { y: 3 } ); // 2 3 数组参数解构也可以有默认值，但是如果传入undefined的话，将会报异常，因为undefined不能转换成iterator：[javascript] view plain copy function f([ x=2, y=3, z ]) { console.log(x + " " +y + " " + z + "\n"); } //f();//# Exception: f: cannot coerce undefined to object! f([1]);//1 3 undefined f([1,2]);//1 2 undefined f([1,2,3]);//1 2 3 f([1,2,3,4]);//1 2 3 下面看一下参数函数默认值的两种形式的不同：[javascript] view plain copy function move1({x=0, y=0} = {}) { console.log(x + " " + y + "\n"); } function move2({x, y} = { x: 0, y: 0 }) { console.log(x + " " + y + "\n"); } move1({x: 3, y: 8}); // 3 8 move1({x: 3}); // 3 0 move1({}); //0 0 move1(); //0 0 move1({z:3})//0 0 console.log("\n"); move2({x: 3, y: 8}); //3 8 move2({x: 3}); //3 undefined move2({}); //undefined undefined move2(); //0 0 move2({z:3})//undefined undefined 通过结果可以看出，采用{x=0,y=0} = {}的形式，无论怎么传参，都能保证x，y的默认值是0，但是采用{x,y} = {x:0,y:0}的形式，如果传入的参数值不是undefined，那么将不能有效保证函数参数默认值是0，这里需要仔细区分两者的不同。
-
ES6 const const(常量)定义的变量不可修改.注意javascript的垃圾回收机制不会回收常量.常量的声明必须赋予初值.作用域为块级作用域.那么我们用const定义一个对象呢?const obj = {name : "小米",age : 18}; obj = "小米" //TypeError: Assignment to constant variable.这里obj不可重写.const obj = {name : "小米",age : 18}; obj.age = 20; console.log(obj.age); //20总结:在用const定义应用类型时(对象,数组...)时,不可修改本身,但可以修改对象的属性值以及数组的元素.发现了这个特性, 你可以发现有很多妙用.
-
牛逼的Object.defineProperty var obj = { name: '小米'}; Object.defineProperty(obj, "age", { value:18, //属性值 writable:true,//是否可写 enumerable: true,//该属性是否可以枚举 configurable: true,//属性的总开关(如果是false,下次设置将无效) }); Object.defineProperty(obj,"age",{ //get set 方法不能同时和 value writable 存在 get(){ return 22 //必须返回一个 }, set(val){ console.log(val) } }) obj.age=24
-
for of循环和map()方法 在javascript有时候对数组数据进行操作时,会想的var arr=[1,2,3]; for(var i=0; i<arr.length; i++){ arr[i]+=1; }用ES6的for offor(var value of arr){ value=value+1 //特别注意,这里不会改变原数组的值 } //这是最简洁、最直接的遍历数组元素的语法 //这个方法避开了for-in循环的所有缺陷 //与forEach()不同的是，它可以正确响应break、continue和return语句ES6 map()方法和forEach()方法类是var newarr = arr.map((item,index,arr)=>{ //接收一个方法,接收3个参数 console.log(item,index,arr); //map方法返回一个新数组,这也是与forEach()不同之处 return item+1; }) console.log(newarr)
![迭代器[Symbol.iterator]](https://blog.cicaba.cn/usr/themes/Joe-master/assets/thumb/19.jpg)
