ES6常用语法

/**
 * 声明变量let和const
 */

//let声明的变量不存在预解析
//报错 flag is not defined
 console.log(flag);
 let flag = 123;

//let声明的变量不允许重复（在同一个作用域内）
 //报错Identifier ‘flag‘ has already been declared
let flag = 123;
let flag = 456;
console.log(flag);

//ES6引入了块级作用域，而之前在浏览器中的JS是不存在块级作用域的
if (true) {
    //var flag = 123;   //用var声明的flag变量在for循环外也可以正常打印出来
    let flag = 123;     //用let声明的flag变量在for循坏外面打印报错：flag is not defined
}
console.log(flag);

//const用来声明常量
//const声明的常量不允许重新赋值
//报错：Assignment to constant variable.
const n = 1;
n = 2;

//const声明的常量必须初始化
//报错：Missing initializer in const declaration
const a;

/**
 * 变量的解构赋值
 */
/* 
var a = 1;
var b = 2;
var c = 3;
 */    //或者var a = 1, b = 2, c = 3;

//ES6中数组的解构赋值
//var [a,b,c] = [1,2,3];      //打印结果：1 2 3
//let [a,b,c] = [,123,];      //打印结果：undefined 123 undefined
let [a = 111,b,c] = [,123,];  //打印结果：111 123 undefined
console.log(a,b,c);

//对象的解构赋值
//对象的赋值与顺序没有关系，是通过对象的名称进行赋值
//let {foo,bar} = {foo:‘hello‘,bar:‘hi‘};
let {foo,bar} = {bar:‘hi‘,foo:‘hello‘};
console.log(foo,bar);

//对象的属性别名（如果有了别名，那原来的名字就无效了）
let {foo:abc,bar} = {bar:‘hi‘,foo:‘hello‘};  //打印结果：hello hi
//let {foo:abc,bar} = {bar:‘hi‘,abc:‘hello‘};   //打印结果：undefined ‘hi‘
console.log(abc,bar);   //正常打印
//console.log(foo,bar);     //报错：foo is not defined

let {cos,sin,random} = Math;

//字符串的解构赋值
//[]里面声明的叫变量，这种方法不能获取字符串的长度
let[a,b,c,d,e] = "hello";
console.log(a,b,c,d,e);   //打印结果：h e l l o

let[a,b,c,d] = "hello";
console.log(a,b,c,d);      //打印结果：h e l l

//{}里面声明的是对象，即对象的解构赋值
let {length} = "hello";
console.log(length);    //打印结果：5

//对象的解构赋值指定默认值
let {foo:abc = ‘hello‘,bar} = {bar:‘hi‘};
console.log(abc,bar);

/**
 * 字符串相关扩展
 * 几个常用的API：
 * includes():判断字符串中是否包含指定的子串，有的话返回true，否则返回false
 *              参数一：匹配的字符串；参数二：从第几个开始匹配
 * startsWith():判断字符串是否以特定的字符串开始
 * endsWith():判断字符串是否以特定的字符串结束
 * 
 * 模板字符串
 */

/* console.log(‘hello world‘.includes(‘world‘));  //true
console.log(‘hello world‘.includes(‘world1‘));  //false
console.log(‘hello world‘.includes(‘world‘,6));  //true
console.log(‘hello world‘.includes(‘world‘,7));  //false */

/* let url = ‘admin/index.php‘;
console.log(url.startsWith(‘admin‘));
console.log(url.endsWith(‘php‘)); */

let obj = {
    username:‘xiaoming‘,
    age:‘24‘,
    gender:‘male‘
}

let tag = ‘<div><span>‘+obj.username+‘</span><span>‘+obj.age+
            ‘</span><span>‘+obj.gender+‘</span></div>‘;
console.log(tag);

//模板字符串:注意：用的是反引号（键盘上数字1左边的）
//反引号表示模板，模板中的内容可以有格式，通过${}方式填充数据
//支持一些简单的表达式运算，也支持函数调用
let fn = function(info){
    return info;
}
let tpl = `
    <div>
        <span>${obj.username}</span>
        <span>${obj.age}</span>
        <span>${obj.gender}</span>
        <span>${1+1}</span>        
        <span>${fn(‘hello‘)}</span>   
    </div>
`;
console.log(tpl);

/**
 * 函数扩展：
 * 1.参数默认值
 * 2.参数解构赋值
 * 3.rest参数
 * 4.扩展运算符：...
 */

 //参数默认值
 //以前的写法：
function foo(param){
    let p = param || ‘hello‘;   
    //let p = ‘hello‘ || param;   //注意，如果把‘hello‘赋值放在前面，则不管参数是什么都将打印hello 
    console.log(p);
}
//foo();   //打印结果：hello
foo(‘hi‘);   //打印结果：hi

//ES6的写法：在原来的基础上做了精简
function foo(param = ‘hello‘){
    console.log(param);
}
//foo();   //打印结果：hello
foo(‘hi‘);   //打印结果：hi

//参数的解构赋值（传入的参数就是一个对象了）
function foo({name=‘xiaoming‘,age=24} = {}){
    console.log(name,age);
}
foo();    //打印结果：xiaoming 24
foo({name:‘zhangsan‘,age:22});   //打印结果：zhangsan 22

//rest参数（剩余参数）：将单个数据转化成数组
function foo(a,b,...param){
    console.log(a);
    console.log(b);
    console.log(param);   //剩余的参数用数组的形式打印出来
}
foo(1,2,3,4,5,6);
 

//扩展运算符 ... :将数组转化成单个数据
function foo(a,b,c,d,e){
    console.log(a+b+c+d+e);
}
foo(1,2,3,4,5);     //打印结果：15
let arr = [1,2,3,4,5];
foo.apply(null,arr);    //打印结果：15
foo(...arr);      //打印结果：15

//合并数组:rest参数的应用
let arr1 = [1,2,3];
let arr2 = [4,5,6];
let arr3 = [...arr1,...arr2];
console.log(arr3);         //打印结果：[ 1, 2, 3, 4, 5, 6 ]

/**
 * 箭头函数
 */
//普通函数：
function foo(){
    console.log(‘hello‘);
}
//箭头函数：
let foo = () => console.log(‘hello‘);

//带一个参数的普通函数：
function foo(v){
    return v;
}
//带一个参数的箭头函数：
let foo = v => v;

//多个参数的箭头函数参数必须用（）包住，函数体内有多行代码的必须用{}包住
let foo = (a,b) => {let c=a+b; console.log(c);}

/**
  * 箭头函数的注意事项
  */
 //1.箭头函数中的this取决于函数的定于，而不是调用
 function foo(){
     //使用call调用foo时，这里的this其实就是call的第一个参数
     console.log(this);     //打印结果：{ num: 1 }
     setTimeout(() => {console.log(this.num)},100);    //打印结果：1
 }
 foo.call({num:1});

//2.箭头函数不可以new
 let foo = () => {this.num = 123;}
 new foo();  //报错：foo is not a constructor

//3.箭头函数不可以使用arguments获取参数列表，可以使用rest参数代替
let foo = (a,b) => {
    console.log(arguments);   //打印出来的对象
}

let foo = (...param) => {
    console.log(param);     //打印结果：[ 123, 456 ]
}
foo(123,456);

/**
 * 类与继承
 */
//以前创建构造函数和实例
function Animal(name){
    this.name = name;
}
Animal.prototype.showName = function(){
    console.log(this.name);
}
var a = new Animal(‘Tom‘);
a.showName();
var b = new Animal(‘Jerry‘);
b.showName();
//===============================================
//ES6语法创建构造函数和实例
class Animal{
    //静态方法
    static showInfo(){
        console.log(‘hello‘);
    }
    //构造函数
    constructor(name){
        this.name = name;
    }
    showName(){
        console.log(this.name);
    }
}
let a = new Animal(‘spike‘);
a.showName();
Animal.showInfo();    //静态方法只能通过类名来调用
//============================================================
//类的继承extends
class Dog extends Animal{
   constructor(name, color){
       super(name);    //调用父类的构造函数
       this.color = color;
   } 
   showColor(){
       console.log(this.color);
   }
}

let dog = new Dog(‘doudou‘,‘yellow‘);
dog.showName();
dog.showColor();
Dog.showInfo();     //继承静态方法也是用类名调用