一、let、const、var

(1)let
1、不能重复声明
2、块级作用域 {} if else while for
3、不存在变量提升
4、不影响作用域链

  1. {
  2.   let name = "陈琦"
  3.   function fn(){
  4.     console.log(name)  //此处可以访问name，块级作用域不影响内部访问，此函数也在块级内部
  5.   }
  6.   fn()
  7. }

(2)const
1、声明常量必须赋初始值
2、推荐使用全大写
3、常量的值不能更改
4、块级作用域
5、对数组和对象的修改不算对常量的修改 （因为指向的地址没有被改变）

(3)var
1、能重复声明
2、全局作用域
3、存在变量提升

二、解构赋值

1、概念
es6允许按照一定模式从数组和对象中提取值，对变量进行赋值
2、数组的解构

  1. const F4 = ["cq","xiaoming","abc","fang"];
  2. let [c,x,a,f] = F4;

3、对象的解构

  1. const zhao = {
  2.   name:"赵本山",
  3.   age:"不详",
  4.   still:function(){
  5.     console.log("小品");
  6.   }
  7. }
  8. let { name,age,still } = zhao
  9. console.log(name);
  10. console.log(age);
  11. still()

三、模版字符串

1、使用``进行声明
2、可以直接换行缩进
3、插值：${xxx}

  1. //例子
  2. const first = 123;
  3. const second = 456;
  4. const str = `<ul>
  5.   <li>${first}</li>
  6.   <li>${second}</li>
  7. </ul>`;
  8.  str

四、对象的简化写法

  1. let name = "cq";
  2. let change = function(){
  3.     console.log("fn change")
  4. };
  5. let school = {
  6.     name, //对象简化写法,es5 是 name:name
  7.   change,
  8.   fn1(){ //函数简化写法
  9.     console.log("fn fn1")
  10.   }
  11. };

五、箭头函数

  1. let fn = (a,b) => {
  2.     return a + b;
  3. }

1、this是静态的，始终指向函数声明时所在的作用域下的this的值

  1. function getName(){
  2.   console.log(this.name);
  3. }
  4. let getName2 = () => {
  5.   console.log(this.name);
  6. }
  7. window.name = "chenqi";
  8. const school = {
  9.   name : "SCHOOL"
  10. }
  11. //直接调用
  12. getName(); // chenqi
  13. getName2(); //chenqi
  14. //call方法调用
  15. getName.call(school); //SCHOOL
  16. getName2.call(school); //chenqi

2、不能作为构造函数实例化对象

  1. let person = (name,age) => {
  2.     this.name = name;
  3.   this.age = age;
  4. }
  5. let me = new person("cq",18); // person is not a constructor

3、不能使用arguments对象

  1.  let fn = () => {
  2.      console.log(arguments);
  3.  }
  4.  fn(1,2,3); arguments is not defined ，正常函数会输出arguments对象[1,2,3]

4、箭头函数的简写

  1. 1、参数有且只有一个时，可以省略小括号
  3. 2、省略花括号，此时需要同时省略return
  4. let pow = n => n*n;

5、实战

  1. const name = "cq";
  2. const a = {
  3.   name:"obj cq",
  4.   getName1: ()=>{     //使用箭头函数时，指向外部
  5.     return this.name;
  6.   },
  7.   getName2(){
  8.       return this.name;
  9.   }
  10. }
  11. console.log(a.getName1()); //cq
  12. console.log(a.getName2()); //obj cq

六、函数参数的默认值

1、允许给函数参数设置初始值

  1. function add(a,b,c=10){
  2.   return a+b+c;
  3. }
  5. console.log(add(1,2)); //13  ，如果不给c赋值则等于 NaN

2、与解构赋值结合

  1. function connect({host='127.0.0.1',username='root',password='root'}){
  2.   console.log(host)
  3.   console.log(username)
  4.   console.log(password)
  5. }
  7. connect({
  8.     host:'localhost',
  9.   username:'root',
  10.   password:'root'
  11. })

七、rest参数(…args)

  1. function date(...args){         //rest参数 rest参数必须放在最后 function date(a,b,...args)
  2.     console.log(args);
  3. }
  5. date(11,22,33) // [11,22,33]
  7. function date(){                                //es5的arguments
  8.     console.log(arguments)        
  9. }
  11. date(11,22,33)  //返回arguments对象

八、扩展运算符

1、介绍

  1. const arr = [11,22,33];
  3. function fn(){
  4.     console.log(arguments)
  5. }
  7. fn(...arr)  //等同于 fn(11,22,33)

2、应用

  1. //1、数组合并
  2. const arr1 = [11,22];
  3. const arr2 = [33,44];
  4. const arr1arr2 = [...arr1,...arr2];
  5. console.log(arr1arr2);  //[11,22,33,44]
  6. //2、数组克隆
  7. const arr3 = [11,22];
  8. const arr4 = [...arr3]; //浅拷贝
  9. //3、将伪数组转化为真正的数组

九、Symbol

  1. //1、创建Symbol
  2. let s = Symbol();
  3. console.log(typeof s)  //symbol
  5. let s2 = Symbol("chenqi");
  6. console.log(s2)  //Symbol(chenqi)
  7. let s3 = Symbol("chenqi");
  8. console.log(s2 == s3);  //false
  10. let s4 = Symbol.for("chenqi");
  11. let s5 = Symbol.for("chenqi");
  12. console.log(s4 == s5);     //true
  14. //不能于其他数据进行运算
  15. //js数据类型 => USONB  you are so nuibility
  16. u undefined
  17. s symbol
  18. o object
  19. n null number
  20. b boolean

十、迭代器(iterator)

1、任何数据只要部署 iterator接口 就可以完成遍历
iterator接口就是对象里的一个属性，symbol.iterator
2、iterator主要供for of消费
3、原生具备iterator接口的数据：

  1. Array
  2. Arguments
  3. Set
  4. Map
  5. String
  6. TypedArray
  7. NodeList

4、for in 和 for of的普通使用

  1. const arr = [11,22,33];
  3. for (const value of arr) {  //for of 打印的是值
  4.   console.log(value);          //11 22 33
  5. }
  7. for (const key in arr) {    //for of 打印的是key
  8.   if（arr.hasOwnProperty(key)){//hasOwnPropery方法可以判断某属性是否是该对象的实例属性
  9.     console.log(key);         //1 2 3
  10.   }
  11. }
  14. for (var [key, value] of phoneBookMap) {        //遍历map使用解构
  15.    console.log(key + "'s phone number is: " + value);
  16. }

5、迭代器的原理

  • 创建一个指针对象，指向当前数据结构的起始位置
  • 第一次调用对象的next方法，指针自动指向数据结构的第一个成员
  • 接下来不断调用next方法，指针一只往后移动，知道指向最后一个成员
  • 每调用next方法，返回一个包含value和done属性的对象
    1. const xiyou = ["唐僧","孙悟空","八戒","沙僧"];
    2. const iterator =  xiyou[Symbol.iterator]() //创建iterator对象
    3. console.log(iterator.next());        //{value: "唐僧", done: false}
    4. console.log(iterator.next());        //{value: "孙悟空", done: false}
    5. console.log(iterator.next());        //{value: "八戒", done: false}
    6. console.log(iterator.next());        //{value: "沙僧", done: false}
    7. console.log(iterator.next());        //{value: "undefined", done: true}

    十一、set和map

    1、set
    set中的值都是不重复的
    创建set
    let s = new Set();
    添加
    s.add(1);
    删除
    s.delete(1); //成功返回true
    查询
    s.has(1);
    查看元素个数
    s.size;
    遍历
    forEach //es5
    for … of //es6

2、map
创建map
const person = new Map();
添加，如果map已经有此key，会删除旧的值更新为新的
person.set(“name”,”cq”);
查询
person.has(“name”); //true
获取
person.get(“name”); //cq
删除
person.delete(“name”); //true
遍历
forEach
for … of

十二、class

class是一个语法糖，其底层还是通过 构造函数 去创建的。所以它的绝大部分功能，ES5 都可以做到。class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。
class的知识点：

  1. class 声明类;
  2. constructor 定义构造函数初始化;
  3. extends 继承父类;
  4. super 调用父级构造方法;
  5. static 定义静态方法和属性;
  6. 父类方法可以重写;
  1. //父类
  2. class Person{
  3.   constructor(name, age){
  4.     this.name = name
  5.     this.age = age
  6.   }
  7.   static from = "China" //Person.from可以访问，实例对象.from不能访问
  8.   show(){
  9.     console.log(`名字：${this.name},年龄${this.age}`);
  10.   }
  11. }
  12. //extends继承
  13. class Student extends Person{
  14.   constructor(name, age, uid){
  15.     super(name, age)
  16.     this.uid = uid
  17.   }
  18.   show(){
  19.     console.log(`名字：${this.name}，年龄${this.age}，学号${this.uid}`)
  20.   }
  21. }
  23. const cq = new Student("chenqi",18,3323)
  24. console.log(cq);
  25. cq.show()
  1. function Person(name, age){
  2.   this.name = name
  3.   this.age = age
  4. }
  6. Person.from = "China"
  7. Person.prototype.show = function(){
  8.   console.log(`名字：${this.name},年龄${this.age}`);
  9. }
  11. function Student(name, age, uid) {
  12.   Person.call(this, name, age)
  13.   this.uid =uid
  14. }
  16. // 设置子级构造函数的原型
  17. Student.prototype = new Person
  18. Student.prototype.constructor = Student;
  20. //重写
  21. Student.prototype.show = function(){
  22.   console.log(`名字：${this.name}，年龄${this.age}，学号${this.uid}`);
  23. }
  26. const cq = new Student("chenqi",18,3323)
  27. console.log(cq);
  28. cq.show()

十三、模块化

模块化是指将一个大的程序文件，拆分成许多小的文件，然后将小文件组合起来;

模块化的优势有以下几点:

  1. 防止命名冲突;
  2. 代码复用;
  3. 高维护性;

ES6 之前的模块化规范有:

  1. CommonJS => NodeJS、Browserify;
  2. AMD => requireJS;
  3. CMD => seaJS;
  1. //m.js
  2. export let name = "陈琦"
  3. export function getName(age){ 
  4.   console.log(`我叫${name}，年龄${age}`);
  5. }
  7. //index.html 方法1
  8. <script type="module">
  9.   import * as m from "./js/m.js"; 
  10.   console.log(m); 
  11.   console.log(m.name); 
  12.   m.getName(18);
  13. </script>
  15. //index.html 方法2 结构赋值
  16. <script type="module">
  17.   import { name, getName} from "./m.js"
  18.   console.log(name); 
  19.   getName(18);
  20. </script>
  1. //m.js
  2. let name = "陈琦"
  3. function getName(age){ 
  4.   console.log(`我叫${name}，年龄${age}`);
  5. }
  7. export { name, getName }
  1. //m.js
  2. export default{
  3.   name:"陈琦",
  4.   getName:function(age){ 
  5.     console.log(`我叫${this.name}，年龄${age}`); //此处要加this
  6.   }
  7. }
  9. //index.html 第一种写法 必须加default才能访问
  10. import * as m from "./m.js"; 
  11. console.log(m.default); 
  12. console.log(m.default.name); 
  13. m.default.getName(18);
  16. //index.html 第二种写法 解构赋值 必须给default别名
  17. import { default as m } from "./m.js"
  18. console.log(m); 
  19. console.log(m.name); 
  20. m.getName(18);
  1.      <br />