ECMAScript6常用内容 学习笔记（附md文件下载链接）

• 百度网盘提取码：
• 链接：https://pan.baidu.com/s/1ymS0J4yiaEEOXI6NwVSbdw
  提取码：g32l

let 与 const

1. 之前定义变量，用 var 关键字；有如下主要缺点：
   • 存在变量提升问题，降低 js 代码的可阅读性
   • 没有块级作用域，容易造成变量污染
2. let 主要特性：
   • 不存在变量提升问题，只有定义之后才能使用此变量
   • 不能重复声明
   • 有 { } 作用域
   • let定义的变量不会挂载在window对象上
     • window.a 没有这个属性,输出undefined
3. const 主要特性：
   • 不存在变量提升问题，只有定义之后才能使用此变量
   • const 定义的常量，无法被重新赋值
   • 当定义常量的时候，必须定义且初始化，否则报语法错误
   • const 定义的常量，也有 块级作用域

// 在控制台输出  控制台可以看做一个console.log()
console.log(1)
1  // --> 
undefined  // --> 

变量的解构赋值（常用）

**定义：**所谓的解构赋值，就是把 某个对象中的属性，当作变量，给解放出来，这样，今后就能够当作变量直接使用了；

• 可以使用 :为解构出来的变量重命名
  • 不推荐重新命名, 直接解构赋值就可以了,重新命名会使代码混乱

解构对象

let person = {
    name : "zs",
    age : 20,
    gender : "男"
}  
// 解构赋值的语法  let {属性名, 属性名:新名字} = 对象名
// name : userName --> 为解构出来的变量重命名
const { name : userName, age, gender } = person;

console.log(name) // --> 报错
console.log(userName) // --> "zs"

解构数组

// 解构数组
let [x,y,z] = [1,2,3];
console.log(x,y,z);

解构字符串

// 解构字符串
let [j,k,l,m,n] = "hello";
console.log(j,k,l,m,n);

交换两个变量的值

// 使用场景 --> 交换值
let a = 100;
let b = 200;
[b,a] = [a,b];  // 这里不能使用 let 重新定义, 会报错
console.log(a,b);

箭头函数(常用)

1. 语法：

   • 定义普通的 function 函数

     // 普通函数写法
     function fn(a) {
         return a + 10;
     }
     

   • 把方法定义为箭头函数（最完整的写法）

     (形参列表) => { 函数体代码 }
     (a) => {
         return a + 10;
     }
     

2. 箭头函数，本质上就是一个匿名函数；

3. 箭头函数的特性： 箭头函数内部的 this, 永远和 箭头函数外部的 this 保持一致；指向父级的this

4. 变体：

   • 变体1：如果箭头函数，左侧的形参列表中，只有一个参数，则，左侧小括号可以省略；

     • let fn1 = a => {
           console.log(1); // 1
           return a + 1;
       };
       console.log("箭头函数变体1 --> " + fn1(1));  // --> 2
       

   • 变体2：如果右侧函数体中，只有一行代码，则，右侧的 { } 可以省略；

     • let fn2 = (a, b) => a + b;
       console.log("箭头函数变体2 --> " + fn2(2, 3)); // --> 5
       

   • 变体3：如果箭头函数左侧 只有一个 形参，而且右侧只有一行代码，则 两边的 () 和 {} 都可以省略

     • let fn3 = a => a + 1;
       console.log("箭头函数变体3 --> " + fn3(10)); // --> 11
       

5. return： 如果我们省略了 右侧函数体的 { }，那么，默认会把 右侧函数体中代码的执行结果，当作箭头函数的调用结果 return 出去； 不需要写return.

6. 箭头函数自调用

   // 普通函数自执行
   (function (a) {
       console.log("普通函数自执行 --> " + (a + 100));  // --> 200
   })(100);
   // 箭头函数自执行
   (a => console.log("箭头函数自执行 --> " + (a + 100)))(100);  // --> 200
   

对象属性与方法简写

• 如果对象字面量的属性由外部变量引入, 且键名与变量名相同, 值不变, 则可以只写键名.
• 对象字面量的方法可简写为xxx(){}的形式, 需用逗号隔开.
• ES6便捷语法 --> 减少了大量重复代码

let uName = "zs";
let age = 20;
let fn = function () {
    console.log("fn方法");
}

// 普通写法
let person1 = {
    uName : uName,
    age : age,
    fn : fn
}
console.log(person1);  // --> { uName: 'zs', age: 20, fn: [Function: fn] }

// 简写
let person2 = {
    uName,  
    age : 30,
    fn,
    fnc() {
        console.log();
    }
}
console.log(person2);  // { uName: 'zs', age: 30, fn: [Function: fn], fnc: [Function: fnc] }

展开运算符 …

• 三个点 … 将一个数组转为用逗号分隔的参数序列
• 主要用于函数调用,和数组的一些操作.

 // 函数调用  替代函数的 apply 方法
 let arr = [1,2,3];
 function add(x,y,z) {
    return x+y+z;
 }
 // apply方法
 console.log(add.apply(null,arr));  // --> 6
 // ...ES6扩展运算符方法
 console.log(add(...arr));  // --> 6

 //字面量数组构造或字符串
 let arr2 = ["a","b","c",...arr];
 console.log(arr2);  // --> [ 'a', 'b', 'c', 1, 2, 3 ]

 // 数组拷贝  只能拷贝一维数组
 //  let arr3 = arr;  --> arr3不是arr的克隆,而是志向同一份数据的另一个指针. 修改arr3, 会直接导致arr的变化.
 let arr3 = [...arr];
 console.log(arr3); --> [ 1, 2, 3 ]

 // 连接多个数组
 let arr4 = [...arr,...arr2];
 console.log(arr4); // --> [ 1, 2, 3, 'a', 'b', 'c', 1, 2, 3 ]