使用ES6新特性开发微信小程序(2)

Template Literals(模板对象)

ES6中的模板字符串(Template String)是一种能在字符串文本中内嵌表达式的字符串字面量(String Literal)。 除了使用反撇号字符 ` 代替普通字符串的引号 ‘ 或 “ 外,它们看起来与普通字符串并无二致。

let firstName = 'Zhang',
    lastName = 'San';   
let fullName =
    `${firstName} ${lastName}`;    
console.log(fullName); // 输出:Zhang San
let add = function(x, y) {    
    return `${x} + ${y} = ${x + y}`;
};    
console.log(add(10, 5)); // 输出:10 + 5 = 15

与普通字符串不同的是,模板字符串可以多行书写。

console.log(`
<div>
    Support for multiple lines with backticks
</div>`);

模板字符串中所有的空格、新行、缩进,都会原样输出在生成的字符串中。

Extended Literals(字面量的扩展)

ES6增加了两个新的数字进制标识符,第二个字母为b来表示二进制,第二个字母为o来表示八进制。

console.log(0b111110111 === 503) // 输出: true
console.log(0o767 === 503) // 输出: true

ES6更好的支持Unicode,支持扩展字符串和正则表达式的Unicode。

Enhanced Regular Expression(增强的正则表达式)

ES6对正则表达式添加了u修饰符,含义为“Unicode模式”,用来正确处理大于\uFFFF的Unicode字符。也就是说,会正确处理四个字节的UTF-16编码。

console.log(/^\uD83D/u.test('\uD83D\uDC2A')); // 输出: true
console.log(/^\uD83D/.test('\uD83D\uDC2A')); // 输出: false

上面的代码中,\uD83D\uDC2A是一个四字节的UTF-16编码,代表一个字符。不加“u”,会按 ES5 将其识别为2个字符,加了“u”之后,会按 ES6 将其正确识别为一个字符。

ES6对正则表达式添加了y修饰符,叫做“粘连”(sticky)修饰符。y修饰符的作用与g修饰符类似,也是全局匹配,后一次匹配都从上一次匹配成功的下一个位置开始。不同之处在于,g修饰符只要剩余位置中存在匹配就可,而y修饰符确保匹配必须从剩余的第一个位置开始。

// y修饰符
var s = 'aaa_aa_a';    
var r1 = /a+/g;    
var r2 = /a+/y;    // 第一次匹配都成功
console.log(r1.exec(s)[0]); // 输出: aaa
console.log(r2.exec(s)[0]); // 输出: aaa
console.log(r1.exec(s)[0]); // 输出: aa// 剩余部分第一个位置是下划线,不匹配
console.log(r2.exec(s)); // 输出: null

ES6 为正则表达式新增了sticky属性,用于表示正则对象是否设置了y修饰符。

var r = /hello\d/y;    
console.log(r.sticky); // 输出: true

ES6 为正则表达式新增了flags属性,返回正则表达式的修饰符。

console.log(/abc/ig.flags); // 输出: gi

Enhanced Object Literals(增强的对象字面量)

ES6新增属性的简洁表示法,允许直接写入变量和函数,作为对象的属性和方法。这样的书写更加简洁。

function f1(x, y) {    
    return { x, y };
}

除了属性简写,ES6方法也可以简写。

function f2() {    
    return {
        hello() {          
            return "Hello!";
        }
    }
}

ES6新增属性名表达式,允许字面量定义对象时,用表达式作为对象的属性名,即把表达式放在方括号内。

function f3() {    
    return {
        foo: true,
        ['a' + 'bc']: 123
    }
}
function getCar(make, model, value) {   
    return {
        make,
        model,
        value,
        ['make' + make]: true,
    
        depreciate() {            
            this.value -= 2500;
        }
    };
}    
let car = getCar('Kia', 'Sorento', 40000);    
console.log(car); // 输出: Object {make: "Kia", model: "Sorento", value: 40000, makeKia: true}
car.depreciate();    
console.log(car.value); // 输出: 37500

Destructuring Assignment(解构赋值)

ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。

解构赋值允许你使用类似数组或对象字面量的语法将数组和对象的属性赋给各种变量。这种赋值语法极度简洁,同时还比传统的属性访问方法更为清晰。

数组的解构赋值,可以从数组中提取值,按照对应位置,对变量赋值。

let numbers = [10, 20];    
let [a, b] = numbers;    
console.log(a, b); // 输出: 10 20

对象的解构赋值。

let position = { lat: 42.34455, lng: 17.34235 };    
let { lat, lng } = position;    
console.log(lat, lng); // 输出:  42.34455 17.34235

字符串的解构赋值,字符串被转换成了一个类似数组的对象。

const [c1, c2, c3, c4, c5] = 'hello';    
console.log(c1, c2, c3, c4, c5); // 输出: h e l l o

函数参数的解构赋值

function add([x, y]) {    
    return x + y;
}    
console.log(add([1, 2])); // 输出: 3

原文发布于微信公众号 - 极乐技术社区(wxapp-union)

原文发表时间:2016-12-28

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏蓝天

Linux内核list/hlist解读

Linux内核实现了一批优雅而功能强大的双向循环列表操作宏,它们位于/usr/include/linux/list.h(请注意直接#include会报编译错误...

1251
来自专栏土豆专栏

Java面试之数据类型(一)

封装类是引用类型,基本类型在传递参数的时候都是按值传递,而封装类型是按引用传递的(其实引用也是按值传递的,但是传递的是对象的地址)

1842
来自专栏每日一篇技术文章

Swift3.0 - 对象和类

1.对象中的所有变量或者常量在定义时如果不初始化,在对象初始化的时候,必须初始化,这个是swift安全性考虑,可选类型没有强制性要求初始化,因为系统默认给可选类...

1091
来自专栏C/C++基础

字符数组的初始化与赋值

C语言中表示字符串有两种方式,数组和指针,字符数组是我们经常使用的方式。变量的定义包括指明变量所属类型、变量名称、分配空间以及初始化。可以看出,变量的初始化是变...

2612
来自专栏武军超python专栏

python组合数据类型及各种操作小总结

python中,一共有四种组合数据类型,他们分别是列表(list),元组(tuple),集合(set),字典(dict)。而这些数据类型分别都有什么作用?他们有...

1227
来自专栏xiaoxi666的专栏

【模板小程序】2~62位非负数任意进制转换

  对于负数,有小伙伴说可以直接将符号丢弃,按照整数进行进位转换,最后再将负号补回来,我认为这种做法是不对的。

1002
来自专栏CaiRui

Python生成器和迭代器

 1、生成器  通过列表生成式,我们可以直接创建一个列表。但是,受到内存的限制,列表容量肯定是有限的。而且,创建一个包含100万个元素的列表,不仅占有很大的存储...

2085
来自专栏desperate633

LintCode 移动零题目分析

给一个数组 nums 写一个函数将0 移动到数组的最后面,非零元素保持原数组的顺序

812
来自专栏技术点滴

快速傅里叶变换C++递归算法实现

快速傅里叶变换C++递归算法实现 网上有些算法资料经测试运行结果是错误的,虽然代码的使用的是非递归形式。为了方便验证快速傅里叶变换的准确性,我提供了自己设计的...

47010
来自专栏Vamei实验室

Python补充03 Python内置函数清单

作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明。 Python内置(built-in)函数随着py...

1946

扫码关注云+社区

领取腾讯云代金券