React学习之路(2)--ES6

ES6

学习来源↓

http://es6.ruanyifeng.com/?search=yield&x=0&y=0

感谢阮一峰老师！！

ES6声明变量

ES5 只有两种声明变量的方法：var命令和function命令。ES6 除了添加let和const命令，后面章节还会提到，另外两种声明变量的方法：import命令和class命令。所以，ES6 一共有 6 种声明变量的方法。

let命令

ES6 新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。
不存在变量提升。
暂时性死区：只要块级作用域内存在let命令，它所声明的变量就“绑定”（binding）这个区域，不再受外部的影响。
不允许重复声明。

块级作用域

一对大括号包含的内容即一个块级作用域，可以嵌套，内层作用域可以声明和外层一致的变量名，变量只在所在作用域中有效。

const

const声明一个只读的常量，一旦声明，值不得改变，所以，一旦声明，必须立即初始化，
const其他特征通let.
const实际保证变量指向的内存地址(指向时间数据的指针)不得改动。
冻结对象 Object.freeze;

eg:const foo = Object.freeze({});

除了将对象本身冻结，对象的属性也应该冻结。下面是一个将对象彻底冻结的函数。

var constantize = (obj) => {
  Object.freeze(obj);
  Object.keys(obj).forEach( (key, i) => {
    if ( typeof obj[key] === 'object' ) {
      constantize( obj[key] );
    }
  });
};

自ES6始，var、function命令声明的全局变量依旧是顶层对象属性；let、const、class命令声明的全局变量则不属于。

globalThis

变量的解构赋值

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

数组的解构赋值。

eg：let [a,b,c] = [1,2,3];
等号右边赋值数据需要是可遍历解构，否则报错。
只要某种数据结构具有 Iterator 接口，都可以采用数组形式的解构赋值
赋值操作本质为模式匹配，因为数组的元素是按次序排列的，变量的取值由它的位置决定
左边变量数大于右边值数据时，会出现解构不成功现象，变量值等于undefined。
左边变量数小于右边植数据时，会出现不完全解构现象，但解构是成功的。
解构赋值允许指定默认值。
eg：let [x, y = 'b'] = ['a']; // x='a', y='b'
let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'
当一个数组成员等于undefined，默认值生效。
当默认值是一个表达式，那么这个表达式是惰性求值的，即只有在用到的时候，才会求值。

对象的解构赋值

eg：let { foo, bar } = { foo: 'aaa', bar: 'bbb' };
对象的解构与数组有一个重要的不同，对象的属性没有次序，变量必须与属性同名，才能取到正确的值。
eg：let { bar, foo } = { foo: ‘aaa’, bar: ‘bbb’ };
对象的解构赋值是下面形式的简写,真正被赋值的是后者。
let { foo: foo, bar: bar } = { foo: 'aaa', bar: 'bbb' };
foo是匹配的模式，baz才是变量。真正被赋值的是变量baz，而不是模式foo。
对象的解构也可以指定默认值。
默认值生效的条件是对象的属性值等于undefined。

字符串的解构赋值

字符串也可以解构赋值。这是因为此时，字符串被转换成了一个类似数组的对象。
eg : const [a, b, c, d, e] = 'hello';
a:h; b:e; c:l; d:l; e:o;
类似数组的对象都有一个length属性
let {length:len} = 'hello' ;// len=5

数值和布尔值的解构赋值

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

函数参数的解构赋值

函数的参数也可以使用解构赋值。
undefined会触发函数蚕食默认值
eg：let [m,n,l] =[1, undefined, 3].map((x = 'yes') => x);
console.log("m:"+m+";n:"+n+";l:"+l);

圆括号问题

建议只要有可能，就不要再模式中放置圆括号。
1）变量声明语句中，模式不能使用圆括号。
2）函数参数属于变量声明，不能带圆括号。
3）赋值语句中，模式不能带圆括号。
#赋值语句的非模式部分，可以使用圆括号。

变量的解构赋值用途

1. 交换变量的值
2. 从函数返回多个值
3. 定义函数参数
4. 提取JSON数据
5. 制定函数参数的默认值
6. 遍历Map结构
7. 输入模块的制定方法

字符串的扩展

1：字符串支持码点范围在\u0000~\uFFFF之间的字符用\uxxxx的形式表示，如果超过这一范围，将码点放入大括号{}，即可正确解读该字符。
2：字符串可以被for...of循环遍历
3：JavaScript 规定有5个字符，不能在字符串里面直接使用，只能使用转义形式。
如下：
U+005C：反斜杠（reverse solidus)
U+000D：回车（carriage return）
U+2028：行分隔符（line separator）
U+2029：段分隔符（paragraph separator）
U+000A：换行符（line feed）
举例来说，字符串里面不能直接包含反斜杠，一定要转义写成\\或者\u005c。
(此处学习有疑问，我们写Unicode表达式展示数据时本来就要加反斜杠\不是么)
4：JSON.stringify():将一个对象或数组转换成JSON字符串。ES2019改造了改方法，如果遇到0xD800到0xDFFF之间的单个码点，或者不存在的配对形式，它会返回转义字符串，留给应用自己决定下一步的处理。
eg:JSON.stringify('\u{D834}') // ""\\uD834""
JSON.stringify('\uDF06\uD834') // ""\\udf06\\ud834""
5：模板字符串是增强版的字符串，用反引号`标识。里面可以使用${变量名}嵌入变量；用${方法名()}调用函数；模板字符串还可以嵌套模板字符串；
也可以引用模板字符串本身
eg:

let func = (name) => `Hello ${name}!`;
func('Jack') // "Hello Jack!"

模板字符串还有 编译模板及标签模板的功能。
编译模板功能只看代码不甚了解，需要结合学习视频细看一遍。ps:仅针对我自己
模板字符串可以紧跟在一个函数名后面，这被称为“标签模板”功能。
eg:alert`123` 等同于 alert(123)
标签模板可以过滤HTML字符串，防止用户输入恶意内容；

(此处有疑问,函数方法为我们自定义，里面的内容有我们自己书写，HTML字符串是在方法里面被替换掉，怎么是标签模板的功劳，不是我们自己写的代码实现的么)
可以多语言转换，如下：

i18n`Welcome to ${siteName}, you are visitor number ${visitorNumber}!`
// "欢迎访问xxx，您是第xxxx位访问者！"

理论上，标签模板可以内嵌其他语言，但是，模板字符串默认会见字符串转义导致无法嵌入。