Es6知识回顾①

Es6知识汇总

1.let和const变量声明

let关键字声明

1. let声明的变量不会挂在window中，不会造成全局变量污染
2. 新增一个块级作用域
3. let不允许重复声明
4. let不会有声明提升（只是人为看到没有，但其实本身是由声明提升的，只是提升至暂时性死区中）

const关键字说明

1. let的四点const都有
2. 不允许被修改，不允许改变内存空间地址
3. const声明和赋值必须一次性完成

2.解构赋值

允许按照一定的模式从数组和对象中提取值，对变量进行赋值，这被称为解构赋值。
频繁使用对象方法、数组元素，就可以使用解构赋值形式。

  // 1.数组解构
    var [a, b, c] = [1, 2, 3];
    let [ , , third] = ["foo", "bar", "baz"];
		third // "baz"

	let [x, , y] = [1, 2, 3];
	x // 1
	y // 3

	let [head, ...tail] = [1, 2, 3, 4];
	head // 1
	tail // [2, 3, 4]
	
        // 2.对象解构
       	var { foo, bar } = { foo: "aaa", bar: "bbb" };
		foo // "aaa"
		bar // "bbb"
		var {x = 3} = {};
		x // 3

		var {x, y = 5} = {x: 1};
		x // 1
		y // 5

		var {x:y = 3} = {};
		y // 3

		var {x:y = 3} = {x: 5};
		y // 5

       

4.模板字符串

在ES6中，可以使用 ·· 来引住字符串，模板字符串的特点
1.字符串中可以出现换行符
2.可以使用模板字符串直接对变量进行拼接 在 ·· 中使用 ${变量名} 来完成拼接

   let str = `今天天气
  突然转凉`
  console.log(str)
  let day = "今天";
  let str = "天气不好";
  console.log(day + str + "记得加一");
  console.log(`${day}${str}记得加一`);
      `
      <div>
          <span>${day}</span>
          <p>${str}</p>
      </div>
      `

5.对象的简写

1. 属性简写:属性名和属性值相同，只写属性值即可
2. 方法简写：方法名和方法相同，只写方法即可
3. 计算属性名：对象的属性名可以引用变量值 [变量名]

 function createUser(loginId, loginPwd, nickName) {
     const say = function() {
         console.log(loginId, nickName)
     }
     return {
         loginId, //1.属性简写
         loginPwd,
         nickName,
         say, //2.方法简写
         fun() { //方法速写，不是箭头函数
             console.log(this.loginId)
         },
         //    "fun" : function(){
         //    
         //    }
     }
 }
 const user = createUser("01", "123456", "abc")
 console.log(user)
 // 3.计算属性名
 const prop1 = "name";
 const prop2 = "age";
 const prop3 = "say";
 const user = {
     [prop1]: "周老师",
     [prop2]: 30,
     [prop3]() {
         console.log(this[prop1], this[prop2])
     }
 }
 console.log(user)

6.class 类的创建

1. 可以写成计算属性名
2. 可以使用getter和setter方法
3. 静态成员：只属于自己所有，不能够被实例出来给其他人共享
4. 字段初始化（ES7）:简写constructor

  class Person {
      constructor(name, job, age, sex) {
          this.job = job;
          this.name = name;
          this.age = age;
          this.sex = sex;
      }
      print() {
          console.log('原型方法');
          console.log(`姓名:${this.name} 工作：${this.job} 年龄:${this.age} 性别：${this.se
      }
  }
  const p1 = new Person('柯南', '侦探', '36', '男');
  p1.print()

 // 类的声明不会被提升和let const 一样，有暂时性死区
 // 类的所有代码全部是在严格模式下进行的
 // 类的所有方法不可被枚举
 // 类的所有方法不能当构造函数使用
 //类的构造器必须使用new来调用

注意点：new.target

        // es6之后 new.target进行半盘是否使用new关键字调用
        function Person(firstName,lastName){
            // 加判断
            console.log(new.target)
            if(new.target === undefined){
                throw new Error("该函数必须使用new调用")
            }
            this.firstName = firstName;
            this.lastName = lastName;
            this.fullName = `${firstName}${lastName}`;
        }
        const p1 = new Person("张","三")
        console.log(p1)