ES6学习笔记(let、const、变量的解构赋值、字符串扩展)

一、let命令

　　1.

let

var

　　2.

for

let

　　3.let声明的内部变量

i

i

　　4.

var

undefined

　　   let命令不会发生“变量提升”现象，它所声明的变量一定要在声明后使用，否则报错

　　5.

let

　　6.let会导致暂时性死区，在代码块内，使用

let

let

　　1.外层作用域无法读取内层作用域的变量

　　2.内层作用域可以定义外层作用域的同名变量

二、const命令

　　1.

const

　　2.

const

　　3.

const

let

　　4.

const

　　5.

const

const

var

function

let

const

class

二、变量的解构赋值

　　1.完全解构

let [a, b, c] = [1, 2, 3];//a=1,b=2,c=3

let [foo, [[bar], baz]] = [1, [[2], 3]];

foo // 1

bar // 2

baz // 3

　　　let [ , , third] = ["foo", "bar", "baz"];
　　　　third // "baz"
　　　let [x, , y] = [1, 2, 3];
　　　　x // 1
　　　　y // 3
　　　let [head, ...tail] = [1, 2, 3, 4];
　　　　head // 1
　　　　tail // [2, 3, 4]
　　　let [x, y, ...z] = ['a'];
　　　　x // "a"
　　　　y // undefined
　　　　z // []

　　如果解构不成功，变量的值就等于
undefined
。

let [foo] = [];

let [bar, foo] = [1];

　　　　以上两种情况都属于解构不成功，

foo

undefined

　　2.不完全解构

let [x, y] = [1, 2, 3];

x // 1

y // 2

　　　let [a, [b], d] = [1, [2, 3], 4];

　　　　a // 1

　　　　b // 2

　　　　d // 4

　3.如果等号的右边不是数组（或者严格地说，不是可遍历的结构，参见《Iterator》一章），那么将会报错

　4.对于 Set 结构，也可以使用数组的解构赋值
　　

let [x, y, z] = new Set(['a', 'b', 'c']);

　　x // "a"

三、

\uxxxx

xxxx

\u0000

\uFFFF

codePointAt

var s = '𠮷a';

　　　　　　s.codePointAt(0) // 134071

　　　　　　s.codePointAt(1) // 57271

　　　　　　s.codePointAt(2) // 97
　　　　

codePointAt

toString

　　　　var s = '𠮷a';

　　　　　　s.codePointAt(0).toString(16) // "20bb7"

　　　　　　s.codePointAt(2).toString(16) // "61"
　　　　

你可能注意到了，
codePointAt
方法的参数，仍然是不正确的。比如，上面代码中，字符[code]a

s

codePointAt

for...of

var s = '𠮷a';

　　　　　　for (let ch of s) {

　　　　　　console.log(ch.codePointAt(0).toString(16));
　　　　　　}
　　　　　　// 20bb7
　　　　　　// 61

codePointAt

　　　　　function is32Bit(c) {

　　　　　　　return c.codePointAt(0) > 0xFFFF;

　　　　　}

　　　　　is32Bit("𠮷") // true

　　　　　is32Bit("a") // false

　　3.String.fromCodePoint()
　　　　ES6提供了[code]String.fromCodePoint

0xFFFF

codePointAt

String

.fromCodePoint(0x20BB7)

　　　　　　　　// "𠮷"

　　　　　　String.fromCodePoint(0x78, 0x1f680, 0x79) === 'x\uD83D\uDE80y'

　　　　　　　　// true

　　　　　上面代码中，如果

String.fromCodePoint

　　　　　注意，

fromCodePoint

String

codePointAt

　　　4.字符串的便利器接口

　　　　ES6为字符串添加了遍历器接口（详见《Iterator》一章），使得字符串可以被

for...of

for (let codePoint of 'foo') {

console.log(codePoint)

　　　　　　}
　　　　　　// "f"
　　　　　　// "o"
　　　　　　// "o"
　　　

除了遍历字符串，这个遍历器最大的优点是可以识别大于

0xFFFF

for

循环无法识别这样的码点

var text = String.fromCodePoint(0x20BB7);

　　　　 for (let i = 0; i < text.length; i++) {

　　　　　　　　console.log(text[i]);

　　　　 }

　　　　　// " "

　　　　　// " "

　　　　for (let i of text) {

　　　　　　console.log(i);

　　　　}

　　　　// "𠮷"
　　

上面代码中，字符串

text

for

for...of

循环会正确识别出这一个字符
　　5.at()
　　　ES5对字符串对象提供
charAt
方法，返回字符串给定位置的字符。该方法不能识别码点大于[code]0xFFFF

'abc'.charAt(0) // "a"

　　　　　　'𠮷'.charAt(0) // "\uD842"

　　　　上面代码中，

charAt

　　　　目前，有一个提案，提出字符串实例的

at

0xFFFF

'abc'.at(0) // "a"

'𠮷'.at(0) // "𠮷"

　6.includes(), startsWith(), endsWith()[code]　

　　　　endsWith()：返回布尔值，表示参数字符串是否在源字符串的尾部。
[code]　　　　　　var s = 'Hello world!';

　　　　　　s.startsWith('Hello') // true

　　　　　　s.endsWith('!') // true

　　　　　　s.includes('o') // true
　　　　

这三个方法都支持第二个参数，表示开始搜索的位置。
　　　　　　

var s = 'Hello world!'

　　　　　　s.startsWith('world', 6) // true

　　　　　　s.endsWith('Hello', 5) // true

　　　　　　s.includes('Hello', 6) // false

　　　　上面代码表示，使用第二个参数
n
时，[code]endsWith

n

n

repeat

n

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

　　　　　　'hello'.repeat(2) // "hellohello"

　　　　　　'na'.repeat(0) // ""
　　　　

参数如果是小数，会被取整(舍去小数)
　　　　　　

'na'.repeat(2.9) // "nana"

如果

repeat

Infinity

-0

repeat

NaN

repeat

　　　　　　'na'.repeat('na') // ""

　　　　　　'na'.repeat('3') // "nanana"
　

8.

padStart()

padEnd()

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

　　　　　　'x'.padStart(4, 'ab') // 'abax'

　　　　　　'x'.padEnd(5, 'ab') // 'xabab'

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

如果原字符串的长度，等于或大于指定的最小长度，则返回原字符串
　　　 如果省略第二个参数，默认使用空格补全长度
　9、模板字符串
　　　

模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量

　　　　　　// 普通字符串

　　　　　　`In JavaScript '\n' is a line-feed.`

　　　　　　// 多行字符串

　　　　　　`In JavaScript this is

　　　　　　　not legal.`

　　　　　　console.log(`string text line 1

　　　　　　　　　　　　　　string text line 2`);

　　　　　　// 字符串中嵌入变量，模板字符串中嵌入变量，需要将变量名写在
${}
之中，大括号内部可以放入任意的JavaScript表达式，可以进行运算，以及引用对象属性

　　　　　　var name = "Bob", time = "today";

　　　　　　`Hello ${name}, how are you ${time}?`
　　　　　　//模板字符串还能调用函数
　　　　　　

function fn() {

　　　　　　　　return "Hello World";

　　　　　　}

　　　　　　`foo ${fn()} bar`

　　　　　　// foo Hello World bar
　　　　

如果大括号中的值不是字符串，将按照一般的规则转为字符串。比如，大括号中是一个对象，将默认调用对象的

toString

方法
　　　 如果模板字符串中的变量没有声明，将报错

　　　上面代码中的模板字符串，都是用反引号表示。如果在模板字符串中需要使用反引号，则前面要用反斜杠转义

　　　　　　var greeting = `\`Yo\` World!`;
　　　　

如果使用模板字符串表示多行字符串，所有的空格和缩进都会被保留在输出之中，如果你不想要这个换行或空格，可以使用
trim
方法消除它

　　　　　　`

　　　　　　<ul>

　　　　　　　　<li>first</li>

　　　　　　　　<li>second</li>

　　　　　　</ul>

　　　　　　`.trim()

[code]　10.标签模板

　　　　模板字符串的功能，不仅仅是上面这些。它可以紧跟在一个函数名后面，该函数将被调用来处理这个模板字符串。这被称为“标签模板”功能（tagged template）。

　　　　　　alert`123`

　　　　　　// 等同于

　　　　　　alert(123)
　　　　

标签模板其实不是模板，而是函数调用的一种特殊形式。“标签”指的就是函数，紧跟在后面的模板字符串就是它的参数
　　　 但是，如果模板字符里面有变量，就不是简单的调用了，而是会将模板字符串先处理成多个参数，再调用函数

　　　　　　var a = 5;

　　　　　　var b = 10;

　　　　　　tag`Hello ${ a + b } world ${ a * b }`;

　　　　　　// 等同于

　　　　　　tag(['Hello ', ' world ', ''], 15, 50);

　　　上面代码中，模板字符串前面有一个标识名
tag
，它是一个函数。整个表达式的返回值，就是[code]tag

　　　函数
tag
依次会接收到多个参数。
　　　　　

function tag(stringArr, value1, value2){

　　　　　　　　// ...

　　　　　　}

　　　　　　// 等同于

　　　　　　function tag(stringArr, ...values){

　　　　　　　　// ...

　　　　　　}

“标签模板”的一个重要应用，就是过滤HTML字符串，防止用户输入恶意内容

　　　　　　var message =

SaferHTML`<p>${sender} has sent you a message.</p>`;

　　　　　　function SaferHTML(templateData) {

　　　　　　　　var s = templateData[0];

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

　　　　　　　　　　var arg = String(arguments[i]);

　　　　　　　　　　// Escape special characters in the substitution.

　　　　　　　　　　s += arg.replace(/&/g, "&")

.replace(/</g, "&lt;")

.replace(/>/g, ">");

　　　　　　　　　　// Don't escape special characters in the template.

　　　　　　　　　　s += templateData[i];

　　　　　　　　}

　　　　　　　　return s;

　　　　　　}