使用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('uD83DuDC2A')); // 输出: true
console.log(/^uD83D/.test('uD83DuDC2A')); // 输出: false
上面的代码中,uD83DuDC2A是一个四字节的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 = /hellod/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
- Android APP 快速 Pad 化实现
- PHP彩蛋还是漏洞?expose_php彩蛋的触发和屏蔽方法
- 深入源码探索 ReactNative 通信机制
- PHP跨站脚本攻击(XSS)漏洞修复思路(二)
- WordPress发布文章自动同步到新浪微博(带特色图片)
- go http 服务器编程(1)
- Linux系统内存监控、性能诊断工具vmstat命令详解
- go http 服务器编程(2)
- 利用placeholder属性来添加输入框默认文字提示,提高用户体验
- Linux系统监控、诊断工具之top命令详解
- 【Dev Club分享】iOS黑客技术大揭秘
- Linux终端:用cat命令查看不可见字符
- golang 函数定义及其接口实例
- 分享两种圣诞节雪花特效JS代码(网站下雪效果)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 硬核看房利器——Web 全景的实现
- 超级播放器tcplayer如何设置logo
- 【Flutter 实战】1.20版本更新及新增组件
- 手把手教你使用Python实现常用的假设检验 !
- Oracle 每日一题系列合集
- Arrow更好用的python时间序列处理库,你用过吗?
- 死信队列监听补充
- 手把手教你用Python查询你的物流信息
- Selenium自动登录淘宝,我无意间发现了登录漏洞!
- 【DB宝20】在Docker中分分钟即可拥有OGG Director环境
- mq监听死信队列后如何处理
- 【小白学PyTorch】7 最新版本torchvision.transforms常用API翻译与讲解
- 小白学PyTorch | 8 实战之MNIST小试牛刀
- 干货:用好VSCode这13款插件和8个快捷键,工作效率提升10倍
- 使用dplyr包对表格整理