【ES6】声明、解构赋值、字符串的扩展、字符串新增方法

最新推荐文章于 2021-08-05 16:21:29 发布

CUG-GZ

最新推荐文章于 2021-08-05 16:21:29 发布

阅读量270

点赞数

分类专栏： JavaScript 文章标签： javascript js es6/es7

本文链接：https://blog.csdn.net/qq_42033567/article/details/106353223

版权

JavaScript 专栏收录该内容

39 篇文章 8 订阅

订阅专栏

1. 声明

（1）新增了const和let命令：

const：声明常量
let：声量变量

（2）const和let命令有以下特点：

const命令必须在声明时就赋值，let命令可以声明时赋值或声明之后再赋值
作用域为块级作用域：{}
不能重复声明
不存在变量提升，即它所声明的变量一定要在声明后使用，否则报错。
暂时性死区，如果区块内存在let或const命令，这个区块对这写声明的变量，从一开始就形成了块级作用域，凡是在声明之前就使用这个变量就会报错

2. 解构赋值

解构赋值遵循“模式匹配”，即只要等号两边的模式相等，左边的变量就会被赋予对应的值。

（1）数组的解构赋值

具有 Iterator 接口的数据结构，都可以采用数组形式的解构赋值。

解构成功：let [foo, [[bar], baz]] = [1, [[2], 3]];
解构失败：let [bar, foo] = [1];， foo为undefined
不完全解构：let [x, y] = [1, 2, 3];
允许指定默认值：let [x, y = 2] = [1];，默认值可以引用解构赋值的其他变量，但该变量必须已经声明。

（2）对象的解构赋值

对象的解构赋值的本质其实是先找到同名的属性，在赋值给对应的变量：let { foo: foo, bar: bar } = { foo: 'aaa', bar: 'bbb' };，本质上是给属性值foo、bar赋值
对象的解构赋值中，对象的属性是没有次序的，变量必须与属性同名，才能取到值，例：let { bar, foo } = { foo: 'aaa', bar: 'bbb' };
如果解构赋值失败，变量的值为undefined
对象的解构赋值中，可以将现有对象的方法赋值给某个变量，例：let { log, sin, cos } = Math;
对象和数组的解构赋值一样，可以进行嵌套，指定默认值。如果是嵌套对象，并且子元素所在的父属性不存在，那么就会报错。

（3）字符换的解构赋值

解构赋值规则：只要等号右边的值不是对象或数组，就先将其转为对象
字符串在解构赋值时被转换成为了一个类数组的对象

const [a, b, c, d, e] = 'hello';
console.log(a, b, c, d, e) // h e l l o

类数组的对象都有一个length属性，因此可以给这个属性进行及解构赋值：let {length : len} = 'hello';

（4）数值和布尔值的解构赋值

解构赋值时，如果等号右边是数值和布尔值，则会先转为对象。

let {toString: s} = 123;
s === Number.prototype.toString // true

let {toString: s} = true;
s === Boolean.prototype.toString // true

注意null和undefined不能转换为对象，所以如果右边是这两个值，就会报错

（5）函数参数的解构赋值

函数参数表面上是一个数组，在传入参数的那一刻，就会被解构为x和y。

function add([x, y]){
  return x + y;
}
add([1, 2]); // 3

解构赋值的应用场景：

交换变量：[x, y] = [y, x];
从函数返回多个值：

function example() {
  return [1, 2, 3];
}
let [a, b, c] = example();

函数参数的定义：

// 参数是一组有次序的值
function f([x, y, z]) { ... }
f([1, 2, 3]);

// 参数是一组无次序的值
function f({x, y, z}) { ... }
f({z: 3, y: 2, x: 1});

提取JSON数据：

let jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
};
let { id, status, data: number } = jsonData;

定义函数参数的默认值：

function Func({ x = 1, y = 2 } = {}) {}

遍历Map结构：

Map 结构原生支持 Iterator 接口，配合变量的解构赋值，获取键名和键值就非常方便。

const map = new Map();
map.set('first', 'hello');
map.set('second', 'world');

for (let [key, value] of map) {
  console.log(key + " is " + value);
}
// first is hello
// second is world

输入模块的指定方法：

const { readFile, writeFile } = require("fs")

3. 字符串的扩展

（1）字符的Unicode表示法

ES6加强了Unicode的支持，使用\uxxxx形式表示一个字符，其中xxxx表示字符的码点，此方式限制码点在\u0000-\uFFFF之间。若超出以上范围，要是用两个双字节的形式表示

（2）遍历器接口

为字符串添加了遍历器接口，使字符串可以被for...of循环遍历：

for (let code of 'hello') {
  console.log(code)   // 输出：h e l l o （输出次数为字符串长度）
}

这个接口还可以识别大于0xFFFF的码点，而for循环会认为包含两个字符，且打印不出来：

let text = String.fromCodePoint(0x20BB6);
for (let i = 0; i < text.length; i++) {
  console.log(text[i]); 
}
for (let i of text) {
  console.log(i);  // 输出：𠮶
}

（3）模板字符串

1）模板字符串
传统的JavaScript语言中输出模板经常使用的是字符串拼接的形式，这样写相当繁琐，在ES6中引入了模板字符串来解决以上问题。

模板字符串是增强版的字符串，用反引号``来标识，他可以用来定义单行字符串，也可以定义多行字符串，或者在字符串中嵌入变量。

注意：

如果在字符串中使用反引号，就要使用\来转义
如果在多行字符串中有空格和缩进，那么它们都会被保留在输出中
模板字符串中嵌入变量，需要将变量名写在${}之中
模板字符串中可以放任意的表达式，也可以进行运算，以及引用对象的属性，甚至可以调用函数
如果模板字符中的变量没有声明，会报错
如果

// 字符串中嵌入变量
let name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

// 字符串中调用函数
` ${fn()} `

2）标签模板

模板字符串不仅有上述功能，还可以标签模板的功能，它紧跟在一个函数名后面，这个函数将被调用来处理这个模板字符串。

标签模板其实不是模板，而是一种函数调用的特殊形式，所谓的标签就是函数，跟在后面的模板字符串就是函数的参数。

但是如果模板字符串中的有变量，就会先将模板字符串处理成为多个参数，在进行函数的调用。

注意： tag函数的第一个参数是一个数组，它保存着模板字符串中没有被变量替换的部分，其他参数都是被变量替换的参数。

let a = 5;
let b = 10;

tag`Hello ${ a + b } world ${ a * b }`;
// 等同于
tag(['Hello ', ' world ', ''], 15, 50);

标签模板的作用：

标签模板的一个重要作用就是过滤HTML字符串，防止用户输入恶意的内容。对用户的提供的变量进行解析，经过处理之后，里面的特殊字符都会被转义。
另外一个重要作用就是多语言的转换（国际化处理）

4. 字符串新增方法

（1）String.fromCodePoint()

ES5 中提供了String.fromCharCode()方法，用于从 Unicode 码点返回对应字符。但是该方法不能识别码点大于0xFFFF的字符（ 32 位的 UTF-16 字符）。在ES6中提供了String.fromCodePoint()方法，解决了以上问题。

需要注意：fromCodePoint方法定义在String对象上，而codePointAt方法定义在字符串的实例对象上。

（2）String.raw()

String.raw() 是一个模板字符串的标签函数，用来获取一个模板字符串的原始字符串。该方法会把所有变量替换，而且对斜杠进行转义，如果斜杠已经转义，那么会再次转义。

String.raw`Hi\n${2+3}!`
// 实际返回 "Hi\\n5!"，显示的是转义后的结果 "Hi\n5!"

String.raw`Hi\\n`
// 实际返回 "Hi\\\\n"，显示的是转义后的结果 "Hi\\n"

（3）codePointAt()

在JavaScript中，字符以UTF-16的格式储存，每个字符固定为2个字节。而那些Unicode码点大于0xFFFF的字符（ 32 位的 UTF-16 字符），JavaScript会把它们看做是两个字符，这些字符需要4个字节来储存。

ES6中提供了codePointAt()方法，可以正确的处理需要4个储存的字符，返回一个字符的码点，而对于正常的需要2个字节储存的常规字符，他的返回结果与charCodeAt()方法相同。

（4）includes(), startsWith(), endsWith()

在ES6之前，我们只能使用indexOf方法来确定一个字符串中是否包含在另一个字符串中，ES6又为我们提供了三个方法：

includes()：返回布尔值，表示是否找到了参数字符串。
startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。
endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。

注意： 这三个方法是实例方法，需要以下形式来调用：

let s = 'Hello world!';
s.startsWith('Hello') // true

这三个方法有第二个可选参数，它是一个数值，表示开始搜索的位置。不过endWith()方法表示的的是对前n个字符进行搜索，而其他两个方法是从第n个字符开始搜索。

（5）repeat()

repeat方法返回一个新字符串，表示将原字符串重复n次。

'x'.repeat(3) // "xxx"

需要注意：

如果参数是小数，那么会被舍弃小数部分
如果参数是负数或者Infinity，会报错
如果参数是NAN，那么会被视为0，返回空字符串
如果参数是字符串，那么会先将其转换为数字

（6）padStart()，padEnd()

在ES2017中引入了字符串不全长度的功能，如果某个字符串长度不够，就在头部或者尾部补全，padStart()用于头部补全，padEnd()用于尾部补全。

这两个方法都接收两个参数，第一个参数为数值，表示字符串补全生效后的长度，第二个参数为字符串，表示用来补全的字符串。

'x'.padStart(5, 'ab') // 'ababx'

'x'.padEnd(4, 'ab')   // 'xaba'

需要注意：

如果原字符串的长度大于或等于第一个参数，则补全不生效，返回原字符串
如果补全的字符串与原字符串长度和大于第一个参数，那么就会截出超出长度的补全字符串
如果省略第二个参数，那么默认使用空格补全长度

padStart()的常见用途:

为数值补全指定位数:

'1'.padStart(10, '0') // "0000000001"

提示字符串格式:

'12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12"
'09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"

（7）trimStart()，trimEnd()

这两个方法是ES2019新增的方法，他们主要用于消除字符串首尾的空格，trimStart()消除字符串头部的空格，trimEnd()消除尾部的空格。这两个方法返回的都是新的字符串，不会修改原字符串。

之前我们使用trim()方法来消除字符串首尾的空格，而这trimStart()和trimEnd() 方法只能消除首部或者尾部的空格。

这两个方法除了能够消除首尾空格之外，还能消除首尾的tab键、换行符等不可见的空白符。

CUG-GZ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录