UDN-企业互联网技术人气社区

板块导航

浏览  : 1780
回复  : 0

[干货] 使用ES6新特性开发微信小程序(9)

[复制链接]
舞操的头像 楼主
发表于 2017-1-6 21:23:50 | 显示全部楼层 |阅读模式
  不需要申明严格模式

  不需要将"use strict"放在脚本文件的第一行,微信小程序开发工具开启ES6转换功能的情况下,默认启用javasctipt严格模式(Strict Mode)。

  用块级作用域代替IIFES

  IIFE(立即执行函数表达式)的通常用途是创造一个内部的作用域,在ES6中,能够创造一个块级作用域而不仅限于函数作用域。块级作用域的出现使得获得广泛应用的立即执行匿名函数(IIFE)不再必要了。

  IIFE:

  1.   (function() {

  2.   var food = 'Meow Mix';

  3.   }());

  4.   // console.log(food); // 输出:ReferenceError: food is not defined
复制代码


  ES6块级作用域:

  1.   {

  2.   let food = 'Meow Mix';

  3.   }

  4.   // console.log(food); // 输出:ReferenceError: food is not defined
复制代码


  使用for...of循环

  ES6 借鉴 C++、Java、C# 和 Python 语言,引入了for...of循环,作为遍历所有数据结构的统一的方法。

  一个数据结构只要部署了Symbol.iterator属性,就被视为具有iterator接口,就可以用for...of循环遍历它的成员。也就是说,for...of循环内部调用的是数据结构的Symbol.iterator方法。

  for...of循环可以使用的范围包括数组、Set 和 Map 结构、某些类似数组的对象、Generator 对象以及字符串。

  遍历数组:

  1.   const arr = ['red', 'green', 'blue'];

  2.   for (let s of arr) {

  3.   console.log(s); // 输出:red green blue

  4.   }
复制代码


  遍历Set:

  1.   var set = new Set(['red', 'green', 'blue', 'green']);

  2.   for (var s of set) {

  3.   console.log(s); // 输出:red green blue

  4.   }
复制代码


  for...of 用于遍历一个迭代器:

  let names1 = ['zhao', 'qian', 'sun', 'li'];

  for (let name of names1) {

  console.log(name); // 输出:zhao qian sun li

  }

  for...in 用来遍历对象中的属性:

  1.   let names2 = ['zhou', 'wu', 'zheng', 'wang'];

  2.   for (let name in names1) {

  3.   console.log(name); // 输出:0 1 2 3

  4.   }
复制代码


  数组实例的forEach方法遍历一个数组的元素和索引

  1.   let names3 = ['feng', 'chen', 'chu', 'wei'];

  2.   names3.forEach(function(elem, index) {

  3.   console.log(`index = ${index}, elem = ${elem}`); // 输出:index = 0, elem = feng index = 1, elem = chen index = 2, elem = chu index = 3, elem = wei

  4.   });
复制代码


  for...of循环支持 ES6 迭代(通过 iterables 和 iterators)和解构。。通过数组的ES6新方法enteries()结合解构,可以代替数组实例的forEach方法。

  1.   let names4 = ['jiang', 'shen', 'han', 'yang'];

  2.   for (const [index, elem] of names4.entries()) {

  3.   console.log(`index = ${index}, elem = ${elem}`); // 输出:index = 0, elem = jiang index = 1, elem = shen index = 2, elem = han index = 3, elem = yang

  4.   }
复制代码


  通过变量解构交换两个变量的值

  如果将一对变量放入一个数组,然后将数组解构赋值相同的变量(顺序不同),就可以不依赖中间变量交换两个变量的值。

  1.   let [a, b] = [10, 20];

  2.   [a, b] = [b, a];

  3.   console.log(`a = ${a}, b = ${b}`); // 输出:a = 20, b = 10
复制代码


  使用展开运算符和剩余操作符

  展开运算符(the spread syntax )允许一个表达式在某处展开,在多个参数(用于函数调用)或者多个元素(用于数组字面量)或者多个变量(用于解构赋值)的地方就会这样。

  用于函数调用语法:

  
  1. myFunction(...iterableObj);
复制代码

  用于数组字面量语法:

 
  1.  [...iterableObj, 4, 5, 6]
复制代码

  剩余操作符(the rest operator),它的样子看起来和展开操作符一样,但是它是用于解构数组和对象。在某种程度上,剩余元素和展开元素相反,展开元素会“展开”数组变成多个元素,剩余元素会收集多个元素和“压缩”成一个单一的元素。

  剩余参数(rest parameter)允许长度不确定的实参表示为一个数组。

  剩余参数语法:

  1.   function(a, b, ...theArgs) {

  2.   // ...

  3.   }
复制代码


  使用示例:

  1.   function sum(x, ...theArgs) {

  2.   let v = x;

  3.   for (let num of theArgs) {

  4.   v += num;

  5.   }

  6.   return v;

  7.   }

  8.   let result = sum(...[3, 4, 5, 6]);

  9.   console.log(`result = ${result}`); // 输出:result = 18
复制代码


  比较两个值是否严格相等

  Object.is()用来比较两个值是否严格相等。它与严格比较运算符(===)的行为基本一致,不同之处只有两个:一是+0不等于-0,二是NaN等于自身。

  1.   console.log(+0 === -0); // 输出:true

  2.   console.log(NaN === NaN); // 输出:false

  3.   console.log(Object.is(+0, -0)); // 输出:false

  4.   console.log(Object.is(NaN, NaN)); // 输出:true
复制代码


  为了满足移动端的适配,可在程序中加入Polyfill

  1.   if (!Object.is) {

  2.   Object.is = function(x, y) {

  3.   // SameValue algorithm

  4.   if (x === y) { // Steps 1-5, 7-10

  5.   // Steps 6.b-6.e: +0 != -0

  6.   return x !== 0 || 1 / x === 1 / y;

  7.   } else {

  8.   // Step 6.a: NaN == NaN

  9.   return x !== x && y !== y;

  10.   }

  11.   };

  12.   }
复制代码


  对象属性复制

  Object.assign方法用来将源对象(source)的所有可枚举属性,复制到目标对象(target)。它至少需要两个对象作为参数,第一个参数是目标对象,后面的参数都是源对象。只要有一个参数不是对象,就会抛出TypeError错误。

  1.   var target = { a: 1, b: 1 };

  2.   var source1 = { b: 2, c: 2 };

  3.   var source2 = { c: 3 };

  4.   Object.assign(target, source1, source2);

  5.   console.log(target); // 输出:Object {a: 1, b: 2, c: 3}
复制代码


  如果目标对象与源对象有同名属性,或多个源对象有同名属性,则后面的属性会覆盖前面的属性。

  为了满足移动端的适配,可在程序中加入Polyfill

  1.   if (typeof Object.assign != 'function') {

  2.   Object.assign = function(target) {

  3.   'use strict';

  4.   if (target == null) {

  5.   throw new TypeError('Cannot convert undefined or null to object');

  6.   }

  7.   target = Object(target);

  8.   for (var index = 1; index < arguments.length; index++) {

  9.   var source = arguments[index];

  10.   if (source != null) {

  11.   for (var key in source) {

  12.   if (Object.prototype.hasOwnProperty.call(source, key)) {

  13.   target[key] = source[key];

  14.   }

  15.   }

  16.   }

  17.   }

  18.   return target;

  19.   };

  20.   }
复制代码


  其他

  完整代码:https://github.com/guyoung/GyWxappCases/tree/master/ES6

原文作者:佚名  来源:开发者头条

相关帖子

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部