必会的特性

let 和 const

在没有let 和 const以前，js的变量声明是通过 var 关键词来进行的。但这种方式声明的变量会隐式提升 到一个作用域的顶部，在应用时会造成困惑。为了避免这种困惑，提出了 let 和 const。

let 和 const 声明的变量都不允许重复声明。但是：

• let声明的变量可以再定义，const声明的不行
• const声明的同时要定义，let则是声明、定义可分离

注意，const声明的变量如果是一个数组或对象，则内部数据不受const规则影响。如果想内部数据也固定， 可以使用 Object.freeze(变量名) 来冻结其直接下级数据。也就是说，freeze不能够冻结多层对象。

解构赋值

• 数组的解构

let [a,b,c] = [10,20,30];     // a = 10,b = 20,c = 30
let [a,b] = [10,20,30];       // a = 10,b = 20
let [a,b,c] = [10,20];        // a = 10,b = 20,c = undefined
let [,,c] = [10,20,30];       // c = 30
let [a,...arr] = [10,20,30];  // a = 10,arr = [20, 30];

// 可以互换变量
let [a,b] = [10,20];
[a,b] = [b,a];                // 互换了变量

• 对象的解构

let person = {
  name: 'Tony',
  age: 10,
  friend:{
    a: 'zz',
    b: 'kk',
  }
};

let {name} = person;          // name = 'Tony'
let {friend:{a,b}} = person   // a = 'zz',b = 'kk'

模板字符串

let a = 10;
console.log(`${a}是10`)    // 通过反引号来标明其间的内容是模板字符串。${}里可以写代码逻辑，特殊字符使用\进行转义即可

箭头函数

箭头函数的本体是 =>，左边放参数，右边放返回值

let a = age=>age+1        // a是函数，返回值为age+1

//手动返回值
let a = age=>{return 1}   // 返回1

// 多参数
let a = (age,name)=>{}    // 多参数需要括号包裹

// 返回对象
let a = ()=>({            // 无参数也要括号包裹。返回值仅为对象时，为了和本身的函数花括号作区别，需要用括号包裹
  name:'tony',
  age: 10,
})

需要注意的是，箭头函数的this指向上层this

类

• 类的定义

ES6中使用class关键字来定义类

class Person {
  constructor(name){      // 构造函数，指函数实例化时执行的函数
    this.name = name;     // this.name指向类内部的name，右边的 name 是传入的 name 参数
  }
  
  showName(){
    console.log(this.name);
  }
  
  set setAge(age){        // 设置和获取需要 set、get关键字
    this.age = age;
  }
  
  get getAge(){
    if(!this.age) this.age = 0;
    return this.age;
  }
}

let a = new Person();
console.log(a.getAge);          // 返回0；

• 类的继承

class Animal{
  static mm = "niji";          // 静态变量
  constructor(name){
    this.name = name
  }
  
  run(){
    console.log(this.name+"在奔跑")
  }
}

class Dog extends Animal{
  constructor(name) {
    super(name);
  };
  
  bark(){
    console.log(this.name+"在吠叫")
  };
}

const a = new Dog('K');

a.bark();

console.log(a.mm);     // 子类无法继承静态变量，所以这里是undefined

Promise

Promise主要用来解决"回调地狱"的问题。

模块化

如果在html中要使用模块化工具，需要这样写标签<script type="module"></script>

导出可以用export、export default，导入可以用import、import ... from ...

导出时，

export可以导出多个，export default每个模块只能导出一个

导入时，

export导出的，需要使用大括号结构变量；而export default导出的可以自定义变量来接收参数

// 文件1.js
let b = 11;
let obj = {
  name: 'tony',
  age: 10,
}

export let a = 10;      // 还需注意，export 后需为一个声明
export default b;

// 文件2.js
import * as obj from "文件1.js"      // 星号是通配符，此句表示导入所有导出。这里必须用 as做个别名，否则无法调用文件1里的导出

/*
document.onClick = function(){
  import("./fileOne.js").then(res=>{      // import()函数会返还一个promise对象，所以可以调用then方法
    console.log(res);
  })
}
 */

Set 和 Map

两种新的数据结构。Set存储不重复的值，Map用于处理键值对。

Set 和 Map都需要用new实例化。

let a = [1,3,5,5,5,7,9];
let set = new Set(a);       // Set()不接受重复值，所以这里的set值为[1,3,5,7,9]
set.add(11);
console.log(set);
set.delete(11);
console.log(set);
set.has(11);
console.log(set);
set.clear();
console.log(set);

let listArr = [...set];       // 将set结构，使之变成数组

// ==========

let b = {name:"tony",age:10}

let map = new Map(b)
map.set(gender,'men');
console.log(map);
map.has('age');
console.log(map.get('age'))         // 用get方法获取值
map.delete('age');                  // delete删除
console.log(map);
map.clear();                        // clear清空
console.log(map);