React 学习笔记之一 - ES6 基础

1.1 let 及 const

1.1.1 let 命令

用 var 声明变量有变量提升的情况。

    console.log(a);
    var a = 1;

 

如果没有第二行的声明，那么会看到“a is not defined”的错误。但有了第二行，打印结果就是“undefined”。

出现这种结果的原因就是 var 声明变量时的变量提升机制，等同于：

    var a;
    console.log(a);
    a = 1;

针对上面的情况，ES6 引入 let。let 不仅没有变量提升的问题，同时还把作用于局限在代码块中，也就是声明作用域之外无法访问。

第一种是函数内部块级作用域。

    function test(){
        let a;
    }

    test();
    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 命令

 声明常量，声明时必须进行初始化。

如果声明的是对象，仅可以修改对象的属性值。

    const obj = {
        name: "张三",
        age: 20
    };

    obj.name = "李四";

    console.log(obj);

    obj = {};  // Uncaught TypeError: Assignment to constant variable.

通过 Object.freeze 函数冻结对象，可以确保对象属性不被修改，但仅限直接属性。

    const obj = {
        name: "张三",
        age: 20
    };

    Object.freeze(obj);  // 冻结对象

    obj.name = "李四";
    console.log(obj);   // name 还是张三，并未改变

 

 

深度冻结对象示例：

    const obj = {
        name: "张三",
        age: 20,
        family: {
            name: "张安",
            age: 48
        }
    };

    // 深度冻结函数
    function deepFreeze(obj){
        Object.freeze(obj);

        for(let key in obj){
　　　　　　  // hasOwnProperty() 方法会返回一个布尔值，指示对象自身属性中（非继承属性）是否具有指定的属性，
            // 如果 object 具有带指定名称的属性，则 hasOwnProperty 方法返回 true，否则返回 false。此方法不会检查对象原型链中的属性；
　　　　　　　// 该属性必须是对象本身的一个成员。
　　　　　　　// 如果要判断继承属性，通过原型链prototype判断，Object.prototype.hasOwnProperty(''toString'')
　　　　　　　　if(obj.hasOwnProperty(key) & typeof obj[key] === "object"){
             　　Object.freeze(obj[key]);
             }
　　　　 }
    }

    deepFreeze(obj);
    obj.family.age = 50; // 并未修改成功，值还是 48
    console.log(obj);

 

 

1.1.3 临时死区（temporal dead zone）

通过 let 与 const 声明的常量，不会存在变量提升的情况，会放在临时死区。

// 如果没有第二行，那么会打印 undefined
// 第二行存在的情况下，打印 Uncaught ReferenceError: Cannot access 'a' before initialization
console.log(typeof a); 
let a;

 

 

1.1.4 循环中的 let 及 const

var 作用域。

    let funArr = [];
    for(var i = 0; i < 5;i++){
        funArr.push(function(){
            console.log(i);
        });
    }

    // 这里会打印出 5 个 5
    funArr.forEach(item => {
        item();
    });

 

在上面的程序中，i 是保存在全局作用域中。

要解决这样的问题，可以利用闭包创建独立作用域。

    let funArr = [];

    for(var i = 0; i < 5; i++){
        (function(i){
            funArr.push(function(){
                console.log(i);
            })
          })(i)
    };

    funArr.forEach(item => {
        item();
    });

 

利用 let 及 const 提供的块级作用域可以简化并达到同样的效果。

    let funArr = [];
        
    for(let i = 0; i < 5; i++){
        funArr.push(function(){
            console.log(i);
        });
    }

    // 这里能正常打印出 0 - 5
    funArr.forEach(item => {
        item();
    });

由于 const 不能被重复赋值，因此这里的 let 不能换成 const。但 const 可以和 for-in 和 for-of 循环中使用。

    let obj = {
        name: '张三',
        age: 20
    };

    // 打印出 name, age
    for(const i in obj){
        console.log(i);
    }

    let arr = ['张三', '李四', '狗蛋'];
    // 依次打印出数组中的值
    for(const value of arr){
        console.log(value);
    }

 

 

 1.2 解构赋值

1.2.1 数组的结构

 

　　// 运行后 a = 10, b = 20, c = 30
　　// 等号右边的值按照顺序依次赋给等号左边的值
　　let [a, b, c] = [10, 20, 30];

　　// 左右不对应的情况，d = 10, e = 20
　　let [d, e] =  [10, 20, 30];

　　// 通过逗号隔开省略的元素，f = 30
　　let [,, f] =  [10, 20, 30];

　　// i 为 undefined
　　let [g, h, i] = [10, 20];


　　// 通过“...”把特定的元素放在变量里，k 为 [20, 30]
　　let [j,...k] = [40, 50, 60];

　　let [m, n] = [1, 2];
　　// 通过解构赋值简化引入中间变量互换值
　　[n, m] = [m, n];
　　console.log('m = ' + m + ', n = ' + n);

 

1.2.2 对象的解构

 

    let obj = {
        name: '张三',
        age: 20
    };

    // 结构中的名称必须和对象里的下标保持一致，不然值就是 undefined
    let {name, age} = obj;
    console.log('name = ' + name + ', age = ' + age);

上面的例子中，name 和 age 的顺序无关，只要名字相同就可以。

多层对象的处理方式如下：

　　let obj = {
   　　name: '张三',
      age: 20,
      family:{
      　　father: '张一',
         mother: '李二'
      }
   };

   // 如果想要打印 family，会报 Uncaught ReferenceError: family is not defined
   let {name, age, family: {father, mother}} = obj;
   onsole.log('name = ' + name + ', father = ' + father);

别名处理如下：

　　let obj = {
   　　name: '张三',
      age: 20
    };

    // name 和 age 是 Uncaught ReferenceError: age is not defined
    let {name : myName, age : myAge} = obj;
    console.log('myName = ' + myName + ', myAge = ' + myAge);

 

1.2.3 解构的默认值及参数的结构

设了默认值，如果解构时没有值，那就取默认值。

　　let obj = {
    　　name: '张三',
       age: 20
    };
        
    // height 设置了默认值，后面没有对应值的情况下，就取默认值
    let {name, age, height = 175} = obj;
    console.log('name = ' + name + ', age = ' + age + ', height = ' + height);    

 

函数参数解构的例子。

　　let obj = {
   　　name: '张三',
      age: 20
   };
        
   // 注意这里参数的写法，名称还是得相同，顺序无关
   function fn({name, age} = {}){
   　　console.log('name = ' + name + ', age = ' + age)
   }

   fn(obj);

   for(const i in obj){
   　　console.log(i);
   }

 

 

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()：返回新的字符串将源字符串循环指定次数。

　　let res = 'a'.repeat(5);
    // 打印出 aaaaa
    console.log(res);

 

1.3.3 模板字符串

　　let persons = [{
    　　name: '张三',
        age: 23
   　　}, {
        name: '李四',
        age: 25
       }, {
        name: '王五',
        age: 27
    }];

    let str = '';
    for(let i = 0; i < persons.length; i++){
    　　// 模板字符串使用反引号来表示，嵌入的变量通过“${}”表示
       str += `姓名是：${persons[i].name}，年龄是：${persons[i].age}\n`;
    }

“${}”支持三目运算符。

 

 

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。

　　let p1 = new Promise(function(){

   });
   console.log(p1); // pending

   let p2 = new Promise(function(resolve, reject){
   　　resolve('success...');
   });
   console.log(p2);  // fulfilled       

   let p3 = new Promise(function(resolve, reject){
   　　reject('reject...');
   });        
   p3.then(res => {
   　　console.log(res);
   }, err => {
   　　console.log(err);
   });
   console.log(p3); // rejected

 

1.7.3 Promise 处理异步问题

使用 Promise 对象提供的 then 方法，在每个 then 方法又返回一个 Promise 对象，这样就可以实现 then 的链式调用。

　　function asyncFn(){
   　　return new Promise((resolve, reject) => {
      　　setTimeout(() => {
         　　console.log('异步逻辑');
            resolve('success..');
         }, 1000);
       });
    }

    asyncFn().then( res => {
    　　console.log(res);
       return asyncFn();
    }).then(res => {
    　　console.log(res);
    });

 

ES7 标准中新增了 async 及 await 关键字，可以让 Promise 更简单易用。

　　let print = function(delay, msg){
   　　return new Promise(function(resolve, reject){
      　　setTimeout(function(){
         　　console.log(msg);
            resolve();
         }, delay);                
       });
    }

    async function asyncFunc(){
    　 await print(1000, 'Hello1');
       await print(4000, 'Hello4');
       await print(3000, 'Hello3');
    }
    asyncFunc();

 

1.7.4 Promise 里的其他用法

可以使用 Promise.all 执行多个 Promise 对象。

    let p = new Promise(function(resolve, reject){
    　　resolve('p1...');
    });

    let p2 = new Promise(function(resolve, reject){
    　　resolve('p2...');
    });

    let p3 = new Promise(function(resolve, reject){
    　　resolve('p3...');
    });

    Promise.all([p, p2, p3]).then(res => {
    　　console.log(res);    // 输出 ['p1...', 'p2...', 'p3...']

});

Promise.race 会返回最先执行完的结果。

　　let p1 = new Promise(function(resolve, reject){
   　　setTimeout(() => {
      　　resolve('p1...');
      }, 3000);            
    });

    let p2 = new Promise(function(resolve, reject){
    　　setTimeout(() => {
       　　resolve('p2...');
       }, 1000);
    });

    let p3 = new Promise(function(resolve, reject){
    　　setTimeout(() => {
       　　resolve('p3...');
        }, 2000);
    });

    Promise.race([p1, p2, p3]).then(res => {
    　　console.log(res);
    }).catch(err => {
    　　console.log(err);   // 输出 p2...
    });

 

 

1.8 模块化

在 ES5 中采取 AMD、CMD 来实现前段的模块化，比较典型的框架是 sea.js 和 require.js。

ES6 中提供了自己的模块化方式，在 script 标签中声明 type="module" 。

 

1.8.1 导入导出基本使用

 

// a.js
console.log('我是 a 模块');

let obj = {
    name: '张三',
    age: 20
}

export let a = 10;
export default obj;  // 默认导出只能有一个


//1.html
<script type="module">
　　import A, {a} from './a.js';   //通过 export 导出的需要通过大括号解构变量；可以使用任何名称导入默认导出， 
　　console.log(A, a); 
</script>

 

1.8.2 导入导出变式写法

通过 as 来默认导出，也可以通过 as 起别名。

// a.js
console.log('我是 a 模块');

let obj = {
    name: '张三',
    age: 20
}

export let a = 10;
let b = 20;
export {b as c};  // 导出时给 b 取别名为 c
export { obj as default};  // 默认导出


// 1.html
<script type="module">
　　import A, {a, c as d} from './a.js';  // 导入时给 c 取别名为 d
   console.log(A, a, d);
</script>

通过通配符导入所有导出。

待理解。

 

1.8.3 按需导入

延迟导入，当需要加载的时候再加载对应的模块来节省性能。

例子待