es6常用方法

1.let , const

• let

  • let声明的变量不存在预解析
  • let声明的变量在块级作用域有效
  • 同一个作用内，let不可以声明重名的变量
  • 在代码块内部，不可以在声明变量之前使用

• const

  • const 声明的变量不可以重新赋值，必须在声明的时候进行初始化，除了这条规则，别的特性和let一致

es6中引入了块级作用域

2.解构赋值

• 变量的解构赋值

// var a = 1;
// var b = 2;
// var c = 3;
// var a = 4,b = 5,c = 6;
// console.log(a,b,c);

• 数组的解构赋值

// let [a,b,c] = [123,456,789];
// let [a,,c] = [123,789];
// let [a,[num,abc],c] = [123,[111,123],789];
// let [a=1,b,c] = [,123,];
// console.log(a,b,c);
// 交换x和y的值
// let [x,y] = [1,2];
// [x,y] = [y,x];
// console.log(x,y);

• 对象的解构赋

// let {name:username,age} = {name:'zhangsan',age:12};
// let {name:username='lisi',age} = {age:12};
// console.log(username,age);

// var obj = {
//     name : 'zhangsan',
//     age : 13,
//     friend : {
//         fname : 'lisi',
//         sex : 'male'
//     }
// };
// let {name,age,friend} = obj;
// console.log(name,age,friend.fname,friend.sex);

• 字符串解构赋值

// let [a,b,c,d,e,f,length] = 'hello';
// console.log(a,b,c,d,e,f,length);
// console.log('hello'.length);

3.includes(),startsWith(),endsWith()

• includes() 判断字符串中是否包含特定的子串

// let str = 'Hello world';
// console.log(str.includes('world',7));

• startsWith() 判断字符串是否以特定的字串开始

• endsWith() 判断字符串是否以特定的字串结束

// let url = 'admin/index.php';
// console.log(url.startsWith('index',7));
// console.log(url.endsWith('.html'));

4.模板字符串

var tag = `
    <div>
        <span>${data.name}</span>
        <span>${data.age}</span>
        <span>${1+1}</span>
        <span>${foo('nihao')}</span>
    </div>
`;
console.log(tag);

5.参数

函数参数的默认值

// function foo(abc = 'hi'){
//     console.log(abc);
// }
// foo('hello');

参数支持变量的解构赋值

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

rest 参数

// arguments

// function foo(a,...data){
//     console.log(a);
//     console.log(data);
// }
// function foo(...data){
//     console.log(data);
// }
// foo(1,2,3,4,5,6);

扩展运算符 …

// let arr = [1,2,3,4,5,6];
// function foo(a,b,c,d,e){
//     console.log(a,b,c,d,e);
// }
// // foo(...arr);

数组合并

// let arr1 = ['red','green'];
// let arr2 = ['blue','orange','yellow'];
// let arr = [...arr1,...arr2];
// console.log(arr);

6.箭头函数

// let foo = () => console.log('hello world');

箭头函数中注意事项：

• 箭头函数不可以new，也就是说它不是构造函数
• 函数中的this是声明时的对象，不是调用时的对象
• 函数内部不可以使用arguments，可以用rest参数替代

7.类和继承（构造函数）

• 类的基本用法

// class Person{
//     constructor(sex,weight){
//         this.sex = sex;
//         this.weight = weight;
//     }

//     showWeight(){
//         console.log('weight:'+this.weight);
//     }

//     showSex(){
//         console.log('sex:'+this.sex);
//     }
// }

// let p = new Person('female','75kg');
// p.showWeight();
// p.showSex();

• 静态方法(静态方法必须通过类名调用，不可以使用实例对象调用)

// class Person{
//     static showInfo(){
//         console.log('hello');
//     }
//     constructor(sex,weight){
//         this.sex = sex;
//         this.weight = weight;
//     }

//     showWeight(){
//         console.log('weight:'+this.weight);
//     }

//     showSex(){
//         console.log('sex:'+this.sex);
//     }
// }

// let p = new Person('female','75kg');
// p.showWeight();
// p.showSex();
// // p.showInfo();
// Person.showInfo();

• extends继承

// class Student extends Person{
//     constructor(sex,weight,score){
//         super(sex,weight);//调用父类的构造函数,这个步骤是必须的
//         this.score = score;
//     }

//     showScore(){
//         console.log('score:'+this.score);
//     }
// }

// let stu = new Student('male','70kg','100');
// stu.showScore();
// stu.showSex();
// stu.showWeight();
// Student.showInfo();