ES6学习

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!
`)
  1. 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')
JSRUN前端笔记, 是针对前端工程师开放的一个笔记分享平台,是前端工程师记录重点、分享经验的一个笔记本。JSRUN前端采用的 MarkDown 语法 (极客专用语法), 这里属于IT工程师。