JS ES6 8

简单改动

1 对象字面量增强写法: const obj = {
    
     name, hh() {
    
    } }  //键值对的省略 + 函数缩写

2 模板字符串: let name = "熊二"  /  let kk = "${name}是个憨憨"  // 定义字符串的时候可以引用变量

3 默认参数的定义: function test(a=1, b=2, c=3) {
    
    }  //若没有传参, a b c 就等于各自对应的默认值

4 形参为对象的时候, 不传参会报错, 所以一般会给一个默认对象: function test( {
    
    a, b, c} = {
    
    }) {
    
    }

5 Symbol 新的数据类型: 主要用于对象定义的属性, 每创建的一个 Symbol值, 都是独一无二的 (就是不等的)

6 一句代码实现数组去重: 

定义变量

1 定义
  1 let name = "zxc"     定义变量
  2 const name = "CAN"     定义常量
  
2 let 特点
  1 在一个作用域下不能声明相同的变量名      错误示例: {
    
    let a = 2;  let a = 3}
  2 可识别块级作用域      所以不能在外部访问 --> 错误示例: {
    
    let a = 2;}  console.log(a)
  3 变量的声明不被提升
  4 let声明的变量不会添加到 window对象下
  
3 const 基于 let增加的特点
  1 声明的同时必须赋值
  2 赋值后它值的地址不能改变
  3 通常命名大写
  4 在ES6开发中, 优先使用const, 如果需要改变某个标识符的时候就使用 let  (会让代码尽可能的规范)

…运算符的基础使用

1 基础功能 (展开)
-----------------------------------------------------------------------------
  1 console.log( ..."zhang" )   // z h a n g
  2 console.log('z', 'h', 'a', 'n', 'g')   // z h a n g

  3 console.log( ...[1, 2, 3, 4 ,5])   // 1 2 3 4 5
  4 console.log(1, 2, 3, 4, 5)   // 1 2 3 4 5
-----------------------------------------------------------------------------

2 拷贝功能
-----------------------------------------------------------------------------
1 拷贝对象 (等价于创建了一个全新的对象, 不同的引用地址)
  1 let {
    
    ...hh} = obj  // 基于 obj, 创建了新的对象 hh
  2 let hh = {
    
    ...obj}  // 等价于上面的代码效果

2 拷贝数组 (等价于创建了一个全新的数组, 不同的引用地址)
  1 let [...hh] = arr  // 基于 arr, 创建了新的数组 hh
  2 let hh = [...arr]  // 等价于上面的代码效果
-----------------------------------------------------------------------------

解构赋值的基础使用

1 基础功能
-----------------------------------------------------------------------------
1 let [a, b] = [1, 2, 3, 4, 5]   // a==1 / b==2
2 let {
    
    a, c} = {
    
    a: 1, b: 2, c: 3}   // a==1  c==3
-----------------------------------------------------------------------------

2 解构赋值 + ...运算符
-----------------------------------------------------------------------------
1 let [a,b,...c] = [1, 2, 3, 4, 5]    // a==1;  b==2;  c==[3,4,5] 
2 let {
    
    a,...c} = {
    
    a: 1, b: 2, c: 3}    // a==1  c=={ b: 2, c: 3} 
-----------------------------------------------------------------------------

3 高级使用
-----------------------------------------------------------------------------
1 函数传参
  定义: function hh({
    
    a, b, c}) {
    
     console.log(a, b, c)}   // 1 2 3
  调用: hh({
    
    a: 1, b: 2, c: 3})

  定义: function hh( [...arr]) {
    
     console.log(arr)}   //[1, 2, 3]
  调用: hh([1, 2, 3])  //这样可以避免, 函数行参和实参使用相同的复杂数据地址

  定义: function hh(...arr) {
    
    console.log(arr)}   //[1, 2, 3]
  调用: hh(1, 2, 3)   //收起运算符的使用
-----------------------------------------------------------------------------

箭头函数

  1 理解: 
	1 把函数当做参数时常用
	2 没有实参列表
	3 内部没有 this指向
	
  2 代码:
	1 () => {
    
    }
	2 hh => {
    
     ..}  --> 只有一位参数省略小括号
	3 hh => console.log( hh)  --> 一句执行语句 或 return一句代码 (可省略大括号)

class类的定义和继承

class 类的定义
----------------------------------------------------------------------------------
    // 1 class类的定义
    class Cat{
    
    
      constructor(x) {
    
      // 相当于构造函数
        this.name = x  // 实例对象的自身属性
        this.pp = function() {
    
    }  // 实例对象的自身的方法
      }
      xx = '呵呵'  // 实例对象的自身属性 -- 所以一般属性写在构造器里面
      hh() {
    
    }  // 实例对象原型上的方法
      kk() {
    
     console.log('kk方法 --- 欢喜')}
      static a1() {
    
    console.log(66)}  // ES6中给类添加 1个静态方法 -- static关键字
    }

    // 2 创建实例对象
    let cat = new Cat('哈哈')

    // 3 访问实例对象
    console.log(cat.name)
    console.log(cat.xx)
    cat.kk()
    console.log(cat)  // constructor 指向--> class Cat 
    console.log(cat.__proto__)  // 指向--> Cat.prototype 
    Cat.a1()  // 静态方法只能通过 Cat类来访问 -- 实例对象是访问不到的 -- 整个原型链上都没有
-----------------------------------------------------------------------------------------

class 类的继承 (基于上面定义的类)
-----------------------------------------------------------------------------------------
    class Dog extends Cat{
    
      // Dog 继承了 Cat 这个类 -- Dog表示子类, Cat 为父类
      constructor(f, x) {
    
     // 此处应在子类参数后面 -- 加上父类的参数
        super(x)  // 子类中使用 this之前, 一定要先执行这个方法 (否则报错) -- 参数为父类的参数
        this.food = f
        // console.log(this.xx) //呵呵 -- 知道就行
        // this.kk() // kk方法 --- 欢喜 -- 知道就行

      }
    }

    // 2 创建实例对象
    let dog = new Dog('骨头', '狗')
    
    // 3 访问子类的属性
    console.log(dog.food)  // 可以正常定义自己的类
    dog.kk()  // 可以访问父类的方法
    console.log(dog.name)
-----------------------------------------------------------------------------------------