ES6----字符串扩展、箭头函数、解构赋值、class类、继承

ゞ浴缸里的玫瑰 2022-12-11 13:35 46阅读 0赞

### 目录 ###

*   *   *  字符串扩展
         *  解构赋值
         *  箭头函数
         *  Class类
         *  封装与继承
         *  总结

### 字符串扩展 ###

**子串的识别**

*  `includes()`：返回布尔值，判断是否找到参数字符串。
 *  `startsWith()`：返回布尔值，判断参数字符串是否在原字符串的头部。
 *  `endsWith()`：返回布尔值，判断参数字符串是否在原字符串的尾部。

let url = 'admin/index.php'
    
    console.log(url.startsWith('admin')); //true
    console.log(url.endsWith('php')); //true
    console.log(url.startsWith('aadim')); //false

**模板字符串**  
模板字符串相当于加强版的字符串，用`反引号` \`,除了作为普通字符串，还可以用来定义多行字符串，还可以在字符串中加入变量和表达式。

//普通字符串
    let string  = `hello'\n'world`;
    console.log(string);
    // hello'
    // 'world
    
    //多行字符串
    let string1 = `hey, can you help me`;
    console.log(string1);
    //hey,
    //can you help me
    
    //字符串中加入变量
    let name = 'mike';
    let age = 27;
    let info = `my name is ${ name},i am ${ age+1} years old next year `
    console.log(info);
    //my name is mike,i am 28 years old next year 
    
    //字符串中调用函数
    function f(){ 
      return "have fun!";
    }
    let string2= `Game start,${ f()}`;
    console.log(string2);  
    // Game start,have fun!

模板字符串中的换行和空格都是会被保留的

let tpl = ` <div> <span>${ obj.username}</span> <span>${ obj.age}</span> <span>${ obj.gender}</span> </div> `;
    console.log(tpl)
    // <div>
    // <span>lisi</span>
    // <span>23</span>
    // <span>male</span>
    // </div>

### 解构赋值 ###

解构赋值是对赋值运算符的扩展，是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。

**解构模型**  
解构的源，解构赋值表达式的右边部分。  
解构的目标，解构赋值表达式的左边部分。

**数组模型的解构**

//基本
    let [a, b, c] = [1, 2, 3];
    // a = 1
    // b = 2
    // c = 3
    
    //可嵌套
    let [a, [[b], c]] = [1, [[2], 3]];
    // a = 1
    // b = 2
    // c = 3
    
    //可忽略
    let [a, , b] = [1, 2, 3];
    // a = 1
    // b = 3
    
    //不完全解构
    let [a = 1, b] = []; // a = 1, b = undefined
    
    //剩余运算符
    let [a, ...b] = [1, 2, 3];
    //a = 1
    //b = [2, 3]
    
    //字符串
    let [a, b, c, d, e] = 'hello';
    // a = 'h'
    // b = 'e'
    // c = 'l'
    // d = 'l'
    // e = 'o'

**对象模型的解构**

//基本
    let {  foo, bar } = {  foo: 'aaa', bar: 'bbb' };
    // foo = 'aaa'
    // bar = 'bbb'
     
    let {  baz : foo } = {  baz : 'ddd' };
    // foo = 'ddd'
    
    //可嵌套可忽略
    let obj = { p: ['hello', { y: 'world'}] };
    let { p: [x, {  y }] } = obj;
    // x = 'hello'
    // y = 'world'
    let obj = { p: ['hello', { y: 'world'}] };
    let { p: [x, {   }] } = obj;
    // x = 'hello'
    
    //不完全解构
    let obj = { p: [{ y: 'world'}] };
    let { p: [{  y }, x ] } = obj;
    // x = undefined
    // y = 'world'
    
    //剩余运算符
    let { a, b, ...rest} = { a: 10, b: 20, c: 30, d: 40};
    // a = 10
    // b = 20
    // rest = {c: 30, d: 40}
    
    //解构默认值
    let { a = 10, b = 5} = { a: 3};
    // a = 3; b = 5;
    let { a: aa = 10, b: bb = 5} = { a: 3};
    // aa = 3; bb = 5;

### 箭头函数 ###

基本结构为：`参数 => 函数体`

var f = v => v;
    //等价于
    var f = function(a){ 
     return a;
    }
    f(1);  //1

当箭头函数没有参数或者有多个参数，要用 () 括起来。

var f = (a,b) => a+b;
    f(4,2);  //6

当箭头函数函数体有多行语句，用 \{\} 包裹起来，表示代码块，当只有一行语句，并且需要返回结果时，可以省略 \{\} , 结果会自动返回。

var f = (id,name) => ({ id: id, name: name});
    f(4,2);  // {id: 4, name: 2}

**默认参数**

function foo(username = 'lisi',age=12){ 
        console.log(username,age);
    }
    foo();//lisi 12
    foo('zhangsan',13);//zhangsan 13

> 使用函数默认参数时，不允许有同名参数

**参数的解构赋值**

function foo({  username = 'lisi', age = 13 } = { }){ 
        console.log(username,age);
    }
    foo({ })

> 如果参数没有出现错误 传递\{\}进入函数不会出错 但是实际上是undefined

**剩余参数 rest**

function foo(a,b,...param){ 
        console.log(a);
        console.log(b);
        console.log(param);
    }
    foo(1,2,3,4,5,6);
    //1
    //2
    //[ 3, 4, 5, 6 ]

只有在未传递参数，或者参数为 undefined 时，才会使用默认参数，null 值被认为是有效的值传递。

function fn(name,age=17){ 
        console.log(name+","+age);
    }
    fn("Amy",null); // Amy,null

带有参数以及返回值的`箭头函数`的定义以及调用:

//一般写法
    function foo(v){ 
        return v;
    }
    //带有参数的箭头函数
    let foo = (v)=>{ return v};
    let ret = foo(11);
    console.log(ret);
    //11

带有多个参数或者多条函数的执行体时`箭头函数`的定义以及调用:

let foo=(a,b)=>{ let c = 1;console.log(a+b+c)}
    foo(1,2)
    //4

利用箭头函数循环遍历数组中的数据

let arr = [123,456,789];
    //第一种利用匿名回调函数
    arr.forEach(function(ele,index){ 
        console.log(ele,index);
    })
    //第二种利用箭头函数
    arr.forEach(
        (ele,i)=>{ 
            console.log(ele,i);
        }
    )
    //123 0
    //456 1
    //789 2

> forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。

### Class类 ###

class (类)作为对象的模板被引入，可以通过 class 关键字定义类。class 的本质是 function。

**类定义及声明**

// 匿名类
    let Example = class { 
        constructor(a) { 
            this.a = a;
        }
    }
    // 命名类
    let Example = class Example { 
        constructor(a) { 
            this.a = a;
        }
    }
    //类声明
    class Example { 
        constructor(a) { 
            this.a = a;
        }
    }

> 类表达式可以为匿名或命名。类不可重复声明

**类的主体**

*  属性  
    `prototype`

//覆盖方法 / 初始化时添加方法
    Example.prototype={ 
        //methods
    }
    
    //添加方法
    Object.assign(Example.prototype,{ 
        //methods
    })

> Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

`静态属性`：ES6 中规定，Class 内部只有静态方法，没有静态属性。  
`公共属性`  
`实例属性`：定义在实例对象（ this ）上的属性。  
`name属性`：返回跟在 class 后的类名(存在时)。

*  方法

`constructor 方法`:constructor 方法是类的默认方法，创建类的实例化对象时被调用。

class Example{ 
        constructor(){ 
          console.log('我是constructor');
        }
    }
    new Example(); // 我是constructor

`静态方法`

class Example{ 
        static sum(a, b) { 
            console.log(a+b);
        }
    }
    Example.sum(1, 2); // 3

`原型方法`

class Example { 
        sum(a, b) { 
            console.log(a + b);
        }
    }
    let exam = new Example();//调用
    exam.sum(1, 2); // 3

`实例方法`

class Example { 
        constructor() { 
            this.sum = (a, b) => { 
                console.log(a + b);
            }
        }
    }

**类的实例化**  
class 的实例化必须通过 `new`关键字。

### 封装与继承 ###

通过`extends` 实现类的继承。

class Child extends Father {  ... }

`super`  
子类 constructor 方法中必须有 super ，且必须出现在 this 之前。

class Father { 
        constructor() { }
    }
    class Child extends Father { 
        constructor() { }
        // or 
        constructor(a) { 
        	super()
            this.a = a;
             
         }
    }
    let test = new Child();

举例：

class Person{ 
        //用来创建====》实例化一个对象
        constructor(name,age){ 
            this.name = name;
            this.age = age;
        }
        sayHello(){ 
            console.log(`hello,大家好,我叫${ this.name},我今年${ this.age}`);
        }
    }
    var per  = new Person('palia',19);
    console.log(per);
    per.sayHello();
    
    // extends实现继承父类
    class Student extends Person{ 
        //自定义构造器==》Stu()
        constructor(name,age,stuID){ 
            //super()的使用实例 一一一子类重写父类的方法
            super(name,age);//指向的是 父类 的 构造函数constructor
            this.stuID = stuID;
        }
        study(){ 
            console.log(`$(this.name),学号：${ this.stuID}`);
    
        }
    }
    const s1 = new Student('lala',19,110);
    console.log(s1.name);
    s1.study();
    
    //lala
    //lala,学号：110

### 总结 ###

1.ES6相对于ES5增添了许多新的内容。比如解构赋值、class类等，适合有一定js基础的同学学习；  
2.在JavaScript中，回调函数具体的定义为：函数A作为参数(函数引用)传递到另一个函数B中，并且这个函数B执行函数A。我们就说函数A叫做回调函数。如果没有名称(函数表达式)，就叫做匿名回调函数；  
2.解构赋值在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取；  
3.箭头函数中的`this`关键字取决于函数的定义，原生js中可以使用`call()`方法来改变this指向；  
4.箭头函数中不可以使用arguments来获取参数列表，可以使用rest参数代替；  
5.在使用`class`类时，必须在访问前对类定义，否则会报错，类中的方法不需要`function`关键字,方法之间不能加分号。