目录

• 声明变量let和const
• 变量的解构赋值：数组，对象，字符串
• 字符串相关扩展：includes,startWiths,endWith,模板字符串
• 函数扩展：参数默认值，参数解构赋值，rest参数，...扩展运算符，合并数组
• 箭头函数：不可以new
• 类与继承：静态方法，super

声明变量let和const

• let
  声明的变量不存在预解析(在块级作用域内部，变量只能先声明再使用)
  声明的变量不允许重复（在同一个作用域内）

• const 用来声明常量
  声明的常量不允许重新赋值
  声明的常量必须初始化

• ES6引入了块级作用域
  块内部定义的变量，在外部是不可以访问的

{
    // 这里是块级作用域
    let flag = 111;
    console.log(flag);
}
for (let i = 0; i < 3; i++) {
    // for循环括号中声明的变量只能在循环体中使用
    console.log(i);
}
console.log(i);

变量的解构赋值

• 数组的解构赋值

let [a,b,c] = [1,2,3];
let [a,b,c] = [,123,];
let [a=111,b,c] = [,123,];
console.log(a,b,c);

• 对象的解构赋值

let {foo,bar} = {foo : 'hello',bar : 'hi'};
let {foo,bar} = {bar : 'hi',foo : 'hello'};

- 对象属性别名(如果有了别名，那么原来的名字就无效了)
let {foo:abc,bar} = {bar : 'hi',foo : 'nihao'};
console.log(foo,bar);
- 对象的解构赋值指定默认值
let {foo:abc='hello',bar} = {bar : 'hi'};
console.log(abc,bar);

let {cos,sin,random} = Math;

• 字符串的解构赋值

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

console.log("hello".length);

let {length} = "hi";
console.log(length);

字符串相关扩展

• includes() 判断字符串中是否包含指定的字串（有的话返回true，否则返回false）
  参数一：匹配的字串；参数二：从第几个开始匹配
• startsWith() 判断字符串是否以特定的字串开始
• endsWith() 判断字符串是否以特定的字串结束
• 模板字符串

console.log('hello world'.includes('world',7));
let url = 'admin/index.php';
console.log(url.startsWith('aadmin'));
console.log(url.endsWith('phph'));

let obj = {
    username : 'lisi',
    age : '12',
    gender : 'male'
}
let tag = '<div><span>'+obj.username+'</span><span>'+obj.age+'</span><span>'+obj.gender+'</span></div>';
console.log(tag);
- 反引号表示模板，模板中的内容可以有格式，通过${}方式填充数据
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('nihao')}</span>
    </div>
`;
console.log(tpl);

函数扩展

• 参数默认值
• 参数解构赋值
• rest参数
• ...扩展运算符
• 合并数组

- 参数默认值
function foo(param){
     let p = param || 'hello';
     console.log(p);
}
foo('hi');
function foo(param = 'nihao'){
    console.log(param);
}
foo('hello kitty');
----------------------------------
- 参数解构赋值
 function foo({uname='lisi',age=13}={}){
     console.log(uname,age);
}
foo({uname:'zhangsan',age:15});
--------------------------------------
- rest参数（剩余参数）
function foo(a,b,...param){
     console.log(a);
     console.log(b);
     console.log(param);
}
foo(1,2,3,4,5);
--------------------------------------
- 扩展运算符 ...
function foo(a,b,c,d,e,f,g){
    console.log(a + b + c + d + e + f + g);
}
- foo(1,2,3,4,5);
let arr = [1,2,3,4,5,6,7];
- foo.apply(null,arr);
foo(...arr);
--------------------------------------
- 合并数组
let arr1 = [1,2,3];
let arr2 = [4,5,6];
let arr3 = [...arr1,...arr2];
console.log(arr3);

箭头函数

• 箭头函数的注意事项
  1、箭头函数中this取决于函数的定义，而不是调用
  2、箭头函数不可以new
  3、箭头函数不可以使用arguments获取参数列表，可以使用rest参数代替

function foo(){
     console.log('hello');
}
 foo();

let foo = () => console.log('hello');
foo();
--------------------------------------
- 多个参数必须用小括号包住
let foo = (a,b) => {let c = 1; console.log(a + b + c);}
foo(1,2);
--------------------------------------
let arr = [123,456,789];
arr.forEach(function(element,index){
     console.log(element,index);
 });
arr.forEach((element,index)=>{
     console.log(element,index);
});
--------------------------------------
- 箭头函数的注意事项：
- 1、箭头函数中this取决于函数的定义，而不是调用
function foo(){
     // 使用call调用foo时，这里的this其实就是call的第一个参数
     // console.log(this);
     setTimeout(()=>{
         console.log(this.num);
     },100);
}
- foo.call({num:1});
----------------------------------
2、箭头函数不可以new
let foo = () => { this.num = 123;};
new foo();
------------------------------------
3、箭头函数不可以使用arguments获取参数列表，可以使用rest参数代替
let foo = (a,b) => {
     // console.log(a,b);
     console.log(arguments);//这种方式获取不到实参列表
}
foo(123,456);
let foo = (...param) => {
    console.log(param);
}
foo(123,456 );

类与继承

• 静态方法(静态方法只能通过类名调用，不可以使用实例对象调用)
• super用来调用父类

function Animal(name){
    this.name = name;
}
Animal.prototype.showName = function(){
    console.log(this.name);
}
var a = new Animal('Tom');
a.showName();
-------------------------
class Animal{
    // 静态方法(静态方法只能通过类名调用，不可以使用实例对象调用)
    static showInfo(){
        console.log('hi');
    }
    // 构造函数
    constructor(name){
        this.name = name;
    }

    showName(){
        console.log(this.name);
    }
}
let a = new Animal('spike');
a.showName();
// a.showInfo();
Animal.showInfo();
------------------------------
// 类的继承extends
class Dog extends Animal{
    constructor(name,color){
        super(name);//super用来调用父类
        this.color = color;
    }

    showColor(){
        console.log(this.color);
    }
}

let d = new Dog('jump','white');
d.showName();
d.showColor();
// d.showInfo();
Dog.showInfo();