1.1 let 及 const
1.1.1 let 命令
用 var 声明变量有变量提升的情况。
1 console.log(a); 2 var a = 1;
如果没有第二行的声明，那么会看到“a is not defined”的错误。但有了第二行，打印结果就是“undefined”。
出现这种结果的原因就是 var 声明变量时的变量提升机制，等同于：
1 var a; 2 console.log(a); 3 a = 1;
针对上面的情况，ES6 引入 let。let 不仅没有变量提升的问题，同时还把作用于局限在代码块中，也就是声明作用域之外无法访问。
第一种是函数内部块级作用域。
1 function test(){
2 let a;
3 }
4
5 test();
6 console.log(a); // Uncaught ReferenceError: a is not defined
第二种是“{}”之间的区域。
{
let a;
}
console.log(a); // Uncaught ReferenceError: a is not defined
同时，let 禁止重复声明。
1.1.2 const 命令
声明常量，声明时必须进行初始化。
如果声明的是对象，仅可以修改对象的属性值。
1 const obj = {
2 name: "张三",
3 age: 20
4 };
5
6 obj.name = "李四";
7
8 console.log(obj);
9
10 obj = {}; // Uncaught TypeError: Assignment to constant variable.
通过 Object.freeze 函数冻结对象，可以确保对象属性不被修改，但仅限直接属性。
1 const obj = {
2 name: "张三",
3 age: 20
4 };
5
6 Object.freeze(obj); // 冻结对象
7
8 obj.name = "李四";
9 console.log(obj); // name 还是张三，并未改变
深度冻结对象示例：
1 const obj = {
2 name: "张三",
3 age: 20,
4 family: {
5 name: "张安",
6 age: 48
7 }
8 };
9
10 // 深度冻结函数
11 function deepFreeze(obj){
12 Object.freeze(obj);
13
14 for(let key in obj){
15 // hasOwnProperty() 方法会返回一个布尔值，指示对象自身属性中（非继承属性）是否具有指定的属性，
16 // 如果 object 具有带指定名称的属性，则 hasOwnProperty 方法返回 true，否则返回 false。此方法不会检查对象原型链中的属性；
17 // 该属性必须是对象本身的一个成员。
18 // 如果要判断继承属性，通过原型链prototype判断，Object.prototype.hasOwnProperty(''toString'')
19 if(obj.hasOwnProperty(key) & typeof obj[key] === "object"){
20 Object.freeze(obj[key]);
21 }
22 }
23 }
24
25 deepFreeze(obj);
26 obj.family.age = 50; // 并未修改成功，值还是 48
27 console.log(obj);
1.1.3 临时死区（temporal dead zone）
通过 let 与 const 声明的常量，不会存在变量提升的情况，会放在临时死区。
1 // 如果没有第二行，那么会打印 undefined 2 // 第二行存在的情况下，打印 Uncaught ReferenceError: Cannot access 'a' before initialization 3 console.log(typeof a); 4 let a;
1.1.4 循环中的 let 及 const
var 作用域。
1 let funArr = [];
2 for(var i = 0; i < 5;i++){
3 funArr.push(function(){
4 console.log(i);
5 });
6 }
7
8 // 这里会打印出 5 个 5
9 funArr.forEach(item => {
10 item();
11 });
在上面的程序中，i 是保存在全局作用域中。
要解决这样的问题，可以利用闭包创建独立作用域。
1 let funArr = [];
2
3 for(var i = 0; i < 5; i++){
4 (function(i){
5 funArr.push(function(){
6 console.log(i);
7 })
8 })(i)
9 };
10
11 funArr.forEach(item => {
12 item();
13 });
利用 let 及 const 提供的块级作用域可以简化并达到同样的效果。
1 let funArr = [];
2
3 for(let i = 0; i < 5; i++){
4 funArr.push(function(){
5 console.log(i);
6 });
7 }
8
9 // 这里能正常打印出 0 - 5
10 funArr.forEach(item => {
11 item();
12 });
由于 const 不能被重复赋值，因此这里的 let 不能换成 const。但 const 可以和 for-in 和 for-of 循环中使用。
1 let obj = {
2 name: '张三',
3 age: 20
4 };
5
6 // 打印出 name, age
7 for(const i in obj){
8 console.log(i);
9 }
10
11 let arr = ['张三', '李四', '狗蛋'];
12 // 依次打印出数组中的值
13 for(const value of arr){
14 console.log(value);
15 }
1.2 解构赋值
1.2.1 数组的结构
1 // 运行后 a = 10, b = 20, c = 30
2 // 等号右边的值按照顺序依次赋给等号左边的值
3 let [a, b, c] = [10, 20, 30];
4
5 // 左右不对应的情况，d = 10, e = 20
6 let [d, e] = [10, 20, 30];
7
8 // 通过逗号隔开省略的元素，f = 30
9 let [,, f] = [10, 20, 30];
10
11 // i 为 undefined
12 let [g, h, i] = [10, 20];
13
14
15 // 通过“...”把特定的元素放在变量里，k 为 [20, 30]
16 let [j,...k] = [40, 50, 60];
17
18 let [m, n] = [1, 2];
19 // 通过解构赋值简化引入中间变量互换值
20 [n, m] = [m, n];
21 console.log('m = ' + m + ', n = ' + n);
1.2.2 对象的解构
1 let obj = {
2 name: '张三',
3 age: 20
4 };
5
6 // 结构中的名称必须和对象里的下标保持一致，不然值就是 undefined
7 let {name, age} = obj;
8 console.log('name = ' + name + ', age = ' + age);
上面的例子中，name 和 age 的顺序无关，只要名字相同就可以。
多层对象的处理方式如下：
1 let obj = {
2 name: '张三',
3 age: 20,
4 family:{
5 father: '张一',
6 mother: '李二'
7 }
8 };
9
10 // 如果想要打印 family，会报 Uncaught ReferenceError: family is not defined
11 let {name, age, family: {father, mother}} = obj;
12 onsole.log('name = ' + name + ', father = ' + father);
别名处理如下：
1 let obj = {
2 name: '张三',
3 age: 20
4 };
5
6 // name 和 age 是 Uncaught ReferenceError: age is not defined
7 let {name : myName, age : myAge} = obj;
8 console.log('myName = ' + myName + ', myAge = ' + myAge);
1.2.3 解构的默认值及参数的结构
设了默认值，如果解构时没有值，那就取默认值。
1 let obj = {
2 name: '张三',
3 age: 20
4 };
5
6 // height 设置了默认值，后面没有对应值的情况下，就取默认值
7 let {name, age, height = 175} = obj;
8 console.log('name = ' + name + ', age = ' + age + ', height = ' + height);
函数参数解构的例子。
1 let obj = {
2 name: '张三',
3 age: 20
4 };
5
6 // 注意这里参数的写法，名称还是得相同，顺序无关
7 function fn({name, age} = {}){
8 console.log('name = ' + name + ', age = ' + age)
9 }
10
11 fn(obj);
12
13 for(const i in obj){
14 console.log(i);
15 }
1.3 字符串扩展
1.3.1 Unicode 支持
超过 uFFFF 会打印成两部分/前4位+后四位（首先将0x20BB7-10000计算超出的部分，将超出的部分使用20个2进制表示，将前十位与0xD800 相加转成16进制，后10位与0xDC00 相加），来自 https://blog.csdn.net/weixin_47295886/article/details/127076787。
加了个大括号后，对于超过 uFFFF 的，就不会打印出两个字符，而是一个字符。
console.log('\u{20BB7}');
1.3.2 新增字符串方法
ES5 中有一个 indexOf 方法判断一个字符串是否包含在另一个字符串中，找到返回索引位置，没有找到返回 -1.
ES6 新增了以下方法。
includes()：返回布尔值，是否找到了字符串。
startWith()：返回布尔值，被检测字符串是否在源字符串的头部。
endsWith()：返回布尔值，被检测字符串是否在源字符串的结尾。
repeat()：返回新的字符串将源字符串循环指定次数。
1 let res = 'a'.repeat(5); 2 // 打印出 aaaaa 3 console.log(res);
1.3.3 模板字符串
1 let persons = [{
2 name: '张三',
3 age: 23
4 }, {
5 name: '李四',
6 age: 25
7 }, {
8 name: '王五',
9 age: 27
10 }];
11
12 let str = '';
13 for(let i = 0; i < persons.length; i++){
14 // 模板字符串使用反引号来表示，嵌入的变量通过“${}”表示
15 str += `姓名是：${persons[i].name}，年龄是：${persons[i].age}\n`;
16 }
“${}”支持三目运算符。
1.4 Symbol
ES5 中提供的 6 种数据类型：Undefined，NULL，布尔值（Boolean），字符串（String），数值（Number），对象（Object）。
ES6 提供了 Symbol 来表示唯一的值，每一个创建的 Symbol 都是唯一的。
1.7 异步编程
1.7.1 ES5 中的异步
JavaScript 引擎是基于事件循环的概念实现的。引擎会把任务放在一个任务队列里，通过事件循环机制执行任务队列里的任务。
异步任务不进入主线程。在 ES5 标准中是通过回调来解决执行顺序问题。
1.7.2 Promise 基本语法
实例化后可以得到 Promise 对象。Promise 对象有 3 种状态：pending、resolved（fulfilled）、rejected。
1 let p1 = new Promise(function(){
2
3 });
4 console.log(p1); // pending
5
6 let p2 = new Promise(function(resolve, reject){
7 resolve('success...');
8 });
9 console.log(p2); // fulfilled
10
11 let p3 = new Promise(function(resolve, reject){
12 reject('reject...');
13 });
14 p3.then(res => {
15 console.log(res);
16 }, err => {
17 console.log(err);
18 });
19 console.log(p3); // rejected
1.7.3 Promise 处理异步问题
使用 Promise 对象提供的 then 方法，在每个 then 方法又返回一个 Promise 对象，这样就可以实现 then 的链式调用。
1 function asyncFn(){
2 return new Promise((resolve, reject) => {
3 setTimeout(() => {
4 console.log('异步逻辑');
5 resolve('success..');
6 }, 1000);
7 });
8 }
9
10 asyncFn().then( res => {
11 console.log(res);
12 return asyncFn();
13 }).then(res => {
14 console.log(res);
15 });
ES7 标准中新增了 async 及 await 关键字，可以让 Promise 更简单易用。
1 let print = function(delay, msg){
2 return new Promise(function(resolve, reject){
3 setTimeout(function(){
4 console.log(msg);
5 resolve();
6 }, delay);
7 });
8 }
9
10 async function asyncFunc(){
11 await print(1000, 'Hello1');
12 await print(4000, 'Hello4');
13 await print(3000, 'Hello3');
14 }
15 asyncFunc();
1.7.4 Promise 里的其他用法
可以使用 Promise.all 执行多个 Promise 对象。
1 let p = new Promise(function(resolve, reject){
2 resolve('p1...');
3 });
4
5 let p2 = new Promise(function(resolve, reject){
6 resolve('p2...');
7 });
8
9 let p3 = new Promise(function(resolve, reject){
10 resolve('p3...');
11 });
12
13 Promise.all([p, p2, p3]).then(res => {
14 console.log(res); // 输出 ['p1...', 'p2...', 'p3...']
15 });
Promise.race 会返回最先执行完的结果。
1 let p1 = new Promise(function(resolve, reject){
2 setTimeout(() => {
3 resolve('p1...');
4 }, 3000);
5 });
6
7 let p2 = new Promise(function(resolve, reject){
8 setTimeout(() => {
9 resolve('p2...');
10 }, 1000);
11 });
12
13 let p3 = new Promise(function(resolve, reject){
14 setTimeout(() => {
15 resolve('p3...');
16 }, 2000);
17 });
18
19 Promise.race([p1, p2, p3]).then(res => {
20 console.log(res);
21 }).catch(err => {
22 console.log(err); // 输出 p2...
23 });
1.8 模块化
在 ES5 中采取 AMD、CMD 来实现前段的模块化，比较典型的框架是 sea.js 和 require.js。
ES6 中提供了自己的模块化方式，在 script 标签中声明 type="module" 。
1.8.1 导入导出基本使用
1 // a.js
2 console.log('我是 a 模块');
3
4 let obj = {
5 name: '张三',
6 age: 20
7 }
8
9 export let a = 10;
10 export default obj; // 默认导出只能有一个
11
12
13 //1.html
14 <script type="module">
15 import A, {a} from './a.js'; //通过 export 导出的需要通过大括号解构变量；可以使用任何名称导入默认导出，
16 console.log(A, a);
17 </script>
1.8.2 导入导出变式写法
通过 as 来默认导出，也可以通过 as 起别名。
1 // a.js
2 console.log('我是 a 模块');
3
4 let obj = {
5 name: '张三',
6 age: 20
7 }
8
9 export let a = 10;
10 let b = 20;
11 export {b as c}; // 导出时给 b 取别名为 c
12 export { obj as default}; // 默认导出
13
14
15 // 1.html
16 <script type="module">
17 import A, {a, c as d} from './a.js'; // 导入时给 c 取别名为 d
18 console.log(A, a, d);
19 </script>
通过通配符导入所有导出。
待理解。
1.8.3 按需导入
延迟导入，当需要加载的时候再加载对应的模块来节省性能。
例子待
标签：ES6,console,log,age,笔记,React,let,obj,name From： https://www.cnblogs.com/fxb248/p/16895454.html