ES6学习 - 前端笔记 JSRUN

let与var的区别：

1.let声明的变量只在let命令所在的代码块内有效

{
    let a= 10;
    var b= 1;
}

2.for循环计数器 //为了解决var导致的用来计数的循环变量泄露为全局变量

for(let i=0;i<10;i++){}

3.设置循环变量的部分是一个父作用域，而循环内部是一个单独的子作用域。

for(let i =0;i<3;i++){
    let i = 'abc';  //此i和上面循环里面的i位于不同作用域
    console.log(i);
}

4.var声明的变量会发生“变量提升”现象，值为undefined； let命令所声明的变量一定要在变量后使用，否则报错

console.log(foo); //输出undefined
var foo =2;
console.log(bar); //报错
let bar =2;

5.不允许重复声明不能在函数内部重新声明参数

//报错
function(){
    let a =10; var a =1;
}
function(){
    let a=10;let a =1;
}

function func(arg){ let arg;//报错  }
function func(arg){ 
    {    let arg;//不报错  } //加了一层中括号就好了
}

使得点击不同的clickBox，显示不同的i

function iteratorFactory(i){
    var onclick = function(e){
        console.log(i);
    }
    return onclick;
}
var clickBoxs =  document.querySelectorAll('.clickBox')
for(var i=0;i<clickBoxs.length;i++){
    clickBoxs[i].onclick = interactorFactory(i);
}

6.const 用来声明变量，声明的是常量，一旦声明，常量的值就不能改变。//不然浏览器会报错当引用第三方库声明的变量时，用const来声明可以避免未来不小心重命名而导致的bug

const moment = require("moment")

7.ES5的原型、构造函数、继承对应class/extends/super

class Animal{     //用class定义一个类
    constructor(){   
    //constructor构造方法，constructor内定义的方法和属性是实例对象自己的
    //constructor外定义的方法和属性是所有实例对象可以共享的
        this.type = 'animal'    //this关键字代表实例对象
    }
    says(say){
        console.log(this.type +'says'+say)
    }
}

let animal = new Animal()
animal.says('hello')

class Cat extends Animal{   //通过extends关键字实现继承
    constructor(){  //子类必须在constructor方法中调用super方法，否则新建实例时会报错
    //子类没有自己的this对象，只能继承父类的this对象，然后对其进行加工。不调用super方法，子类就得不到this对象
        super()    //super关键字代表父类的实例，即父类的this对象。
        this.type ='cat'
    }
    //ES6继承机制——先创造父类的实例对象this,即先调用super方法，然后再用子类的构造函数修改this
}
let cat = new Cat()
cat.says('hello')

8.箭头函数

function(i){ return i+1 }
(i) => i+1

function(x,y){
    x++;
    y--;
    return x+y;
}
//如果方程比较复杂就用{}括起来
(x,y) =>{ x++;y--;return x+y }

Javascript语言的this对象使用问题：

class Animal {
    constructor(){
        this.type = 'animal'
    }
    says(say){
        setTimeout(function(){
            console.log(this.type+'says'+say)
        },1000)   //此处的this指向全局对象
    }
}
var animal = new Animal()
animal.says('hi')

解决方法一：将this传给self,用self来指代this

says(say){
    var self = this;
    setTimeout(function(){
        console.log(self.type + 'says'+say)
    },1000)
}

解决方法二：用bind(this)

says(say){
    setTimeout(function(){
        console.log(self.type + 'says'+say)
    }.bind(this),1000)
}

解决方法三：箭头函数

says(say){
    setTimeout(()=>{ console.log(this.type +'says'+say) },1000)
}
//使用箭头函数时，函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象
//并不是箭头函数内部有绑定this的机制，而是箭头函数没有自己的this,因而要继承外面的this,内部的this就是外层代码块的this

9.传统对于插入大段的html内容的写法是用“+”来连接文本与变量

$("#result").sppend(
 "There are <b>" + basket.count + "</b> " +
  "items in your basket, " +
  "<em>" + basket.onSale +
  "</em> are on sale!"
);

ES6写法：反引号`来标识起始，用${}来引用变量，所有空格和缩进都会被保留在输出中

$('#result').append(`
    There are <b>${basket.count}</b> items
   in your basket, <em>${basket.onSale}</em>
  are on sale!
`)

ES6允许按照一定的模式，从数组和对象中提取值，对变量进行赋值——解构Destructuring

let cat = 'ken'
let dog ='lili'
let zoo = {cat:cat.dog:dog}
//let zoo = {cat , dog}
console.log(zoo)

let dog = {type:'animal',many:2}
let {type,many} = dog
console.log(type,mang) //animal 2

11.设置默认值来防止调用时没有传参数

function animal(type){
    type = type||'cat'  //传统写法
    console.log*(type)
}
animal()

ES6写法：

function animal(type ='cat'){  //ES6写法
    console.log(type)
}
animal()

function animals(...types){   //rest语法
    coansole.log(types)
}
animal('cat','dog','fish')