ES6常用语法

ES6常用语法

1. 变量声明let和const

• let
  • let在同一作用域不能重复声明
  • let不存在预解析（需要先声明再使用）
  • let块级作用域
• const
  • const是用来声明常量
  • const声明的常量不允许重新赋值
  • const声明的常量必须初始化
  • 也适用let三种限制

2. 变量的解构赋值

• 数组的解构赋值
  • let[a,b,c] = [1,2,3]
  • let[a,b,c] = [,2,] //缺省
  • let[a=11,b,c] = [,2,] //默认值
• 对象的解构赋值
  • let {foo,bar} =
  • let {foo,bar} = {bar:'world',foo:'hello'}//和顺序无关，只和属性名称有关
  • let {foo,bar} = {bar:'world'}//缺省
  • let {foo:abc,bar} = {foo:'hello',bar='world'}//对象属性别名，如果有了别名，那么原来的名字就无效了
  • let{foo:'hello',bar}={bar:'world'} //默认值
  • 内置对象解构赋值
    • let{cos,sin,random} = Math
• 字符串解构赋值
  • let{a,b,c,d,e} = 'hello'
  • let{a,b,c,d} = 'hello'
  • 字符串长度
    • let {length} = 'hello'

3. 字符串扩展

• includes(arg1[,arg2])
  • 判断字符串中是否包含指定的字串（true,false）
  • 参数1：匹配的字串
  • 参数2：从第几个字符串开始匹配
• startsWith()
  • 判断字符串是否以特定的字串开始
• endsWith()
  • 判断字符串是否以特定的字串结束
• 模板字符串
  • ``
  • 以反引号表示模板，模板中的内容可以有格式，通过${}方式填充数据
  • 可以调用表达式

4. 函数扩展

• 参数默认值
  • function foo(param='hello'){}
• 参数解构赋值
  • funciton foo({name,age}){}
  • function foo({name,age}={}){}
  • function foo({name:'moren',age}){}
• rest参数（剩余）
  • function foo(a,b,...param){}
  • ...param多个参数变为数组
• ...扩展运算符
  • function foo(a,b,c){} foo(...数组)
  • 数组变为多个参数
  • 合并数组
    • let arr3=[...arr1,...arr2]
• 箭头函数

• 单行
  • let foo = ()=> console.log('hi');
• 多行{}
  • let foo = ()=>{let c=1; console.log(c);};
• 参数
  • 单个参数
    • let foo = v => v;
  • 多个参数
    • let foo = (a,b) => console.log(a,b);
  • 匿名函数

* 箭头函数注意事项
     * 箭头函数中的this取决于函数的定义，而不是调用
     * 箭头函数不可以new 
     * 箭头函数不可以使用arguments获取参数列表，可以使用rest(...)参数代替

5. 类与继承
   类:class
   继承：extends

    /*
        类与继承
     */
    
    //之前的方法
    function Animal(name){
        this.name = name;
    }
    
    Animal.showInfo = function(){
        console.log("Hi");
    };
    
    Animal.prototype.showName = function(){
        console.log(this.name);
    }
    
    let a = new Animal('Tom');
    a.showName();
    let a1 = new Animal('Jerry');
    a1.showName();
    Animal.showInfo();
    //=============================
    //类：class
    //模板
    class Animal2{
        //静态方法：静态方法只能通过类名调用，不能使用实例对象调用
        static showInfo(){
            console.log("Hi");
        }
        //构造方法
        constructor(name) {
            this.name = name;
        }
    
        showName(){
            console.log(this.name);
        }
    }
    
    let ac = new Animal2('T0T0');
    ac.showName();
    //调用静态方法
    Animal2.showInfo();
    
    
    //---------------------------------
    //类的继承extends
    class Dog extends Animal2{
        constructor(name,color){
            super(name); //super调用父类
            this.color = color;
        }
    
        showColor(){
            console.log(this.color);
        }
    }
    
    let dog = new Dog('tomo','yellow');
    dog.showName();
    dog.showColor();
    // dog.showInfo() //会报错