es6（初级）

Posted 2022-12-23 forever-xuehf

引言：

ECMAScript 和 javascript 的关系是，前者是后者的规格，后者是前者的一种实现（另外的 ECMAScript 方言还有 JScript 和 ActionScript）。日常场合，这两个词是可以互换的。

ES6 既是一个历史名词，也是一个泛指，含义是 5.1 版以后的 JavaScript 的下一代标准，涵盖了 ES2015、ES2016、ES2017 等等，而 ES2015 则是正式名称，特指该年发布的正式版本的语言标准。本书中提到 ES6 的地方，一般是指 ES2015 标准，但有时也是泛指“下一代 JavaScript 语言”。

Babel 是一个广泛使用的 ES6 转码器，可以将 ES6 代码转为 ES5 代码，从而在现有环境执行。（Google 公司的Traceur转码器，也可以将 ES6 代码转为 ES5 代码。Traceur 允许将 ES6 代码直接插入网页，Traceur 也提供一个在线编译器，可以在线将 ES6 代码转为 ES5 代码）

1.变量与作用域

var  可以重复声明，无法限制修改，没有块级作用域（即）

let ：不能重复声明，变量-可以修改，块级作用域，

const：不能重复声明，常量-不可以修改，块级作用域

注：

let命令不存在变量提升，它所声明的变量一定要在声明后使用

在代码块内，使用let，const命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”，“暂时性死区”也意味着typeof不再是一个百分之百安全的操作。

let不允许在相同作用域内，重复声明同一个变量。

for循环还有一个特别之处，就是设置循环变量的那部分是一个父作用域，而循环体内部是一个单独的子作用域。

ES5 规定，函数只能在顶层作用域和函数作用域之中声明，不能在块级作用域声明。（但是，浏览器没有遵守这个规定，为了兼容以前的旧代码，还是支持在块级作用域之中声明函数）

ES6 引入了块级作用域，明确允许在块级作用域之中声明函数。ES6 规定，块级作用域之中，函数声明语句的行为类似于let，在块级作用域之外不可引用。

2.箭头函数：

function hanshu()等价于  去掉function 加上=>

（）=>

只有一个参数，可省略（）

只有一个return，可省略

3.函数的参数：

a.参数扩展（收集参数-必须最后一个参数rest parameter，展开数组）

b.默认参数：function hanshu(a,b=10,c=5)   即传了参数则以传的参数为准，不传则以默认值为准

4.解构赋值：

左右两边结构一致，右边必须是个东西（是个json是个数组对象都行，合法），声明跟赋值要在一起，如let [a,b,c] = [1,2,3];

数组，json，数组对象字符串等嵌套都可解构赋值。let a,b,c = a：1,b：2,c：3

如：let [a,b,[n1,n2,n3],num,str] = [a:10,b:13,[1,2,3],56,‘qwer‘]------可控制粒度，即控制输出形式

let [obj,arr,num,str] = [a:10,b:13,[1,2,3],56,‘qwer‘] -----输出为json和数组形式

不完全解构，即等号左边的模式，只匹配一部分的等号右边的数组。这种情况下，解构依然可以成功。

解构赋值允许指定默认值。默认值可以引用解构赋值的其他变量，但该变量必须已经声明。

对象的解构赋值，可以很方便地将现有对象的方法，赋值到某个变量。

对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。（注意，对象的解构赋值可以取到继承的属性。）

对象的解构也可以指定默认值。默认值生效的条件是，对象的属性值严格等于undefined。

如果要将一个已经声明的变量用于解构赋值，必须非常小心。

// 错误的写法
let x;
x = x: 1;
// SyntaxError: syntax error

上面代码的写法会报错，因为 JavaScript 引擎会将x理解成一个代码块，从而发生语法错误。只有不将大括号写在行首，避免 JavaScript 将其解释为代码块，才能解决这个问题。

// 正确的写法
let x;
(x = x: 1);

上面代码将整个解构赋值语句，放在一个圆括号里面，就可以正确执行。

字符串也可以解构赋值。这是因为此时，字符串被转换成了一个类似数组的对象。而类似数组的对象都有一个length属性，因此还可以对这个属性解构赋值。

解构赋值时，如果等号右边是数值和布尔值，则会先转为对象。解构赋值的规则是，只要等号右边的值不是对象或数组，就先将其转为对象。由于undefined和null无法转为对象，所以对它们进行解构赋值，都会报错。

5.函数的解构赋值：

函数的参数也可以使用解构赋值。函数参数的解构也可以使用默认值，函数参数本身设置默认值也可以。函数的参数可以是数组对象，

解构赋值的用处：

1.交换变量的值

2.从函数返回多个值

3.函数参数的定义

4.提取json对象中数据

5.函数参数默认值

6.遍历map结构

7.输入模块的指定方法

6.字符串扩展：

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

模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。模板字符串中嵌入变量，需要将变量名写在$之中。大括号内部可以放入任意的 JavaScript 表达式，可以进行运算，以及引用对象属性。所有模板字符串的空格和换行，都是被保留的，比如<ul>标签前面会有一个换行。如果你不想要这个换行，可以使用trim方法消除它。模板字符串之中还能调用函数。如果大括号中的值不是字符串，将按照一般的规则转为字符串。比如，大括号中是一个对象，将默认调用对象的toString方法。如果模板字符串中的变量没有声明，将报错。由于模板字符串的大括号内部，就是执行 JavaScript 代码，因此如果大括号内部是一个字符串，将会原样输出。模板字符串甚至还能嵌套。如果需要引用模板字符串本身，在需要时执行，可以写成函数。

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

alert`123`
// 等同于
alert(123)

标签模板其实不是模板，而是函数调用的一种特殊形式。“标签”指的就是函数，紧跟在后面的模板字符串就是它的参数。“标签模板”的一个重要应用，就是过滤 html 字符串，防止用户输入恶意内容。