ES6总结

vs code中文设置:

https://jingyan.baidu.com/article/7e44095377c9d12fc1e2ef5b.html

let和const

1.let定义变量,为了取代var

  (1) 是否有变量提升  let没有变量提升,var有变量提升
  (2) 是否有块级作用域  let块级作用域,var没有

    出现ES6之前,作用域就有两种:全局作用域,局部作用域


  (3) 是否重复定义 let不允许重复定义,var允许

2.const定义常量

  特点:和let类似,也没有变量提升,也有块级作用域,不能重复定义,定义时必须赋值,但只能赋值一次

箭头函数

格式:

   (参数1,参数2) => {

       函数体
   }

箭头函数与普通函数的区别:主要是this的指向问题,箭头函数本身没有this,它的this使用是父级函数的this,而普通函数有自己的this

箭头函数如果=>后面没有{},默认是带return

模板字符串

用反引号引起来的字符串: `   `
用${}来获取变量中的值

例如:var str=`你的姓名为${info.name},你的年龄是${info.age},你的籍贯是${info.address}`

解构赋值

 注:主要对数组,对象进行解构

例如:

var info={
  
  name:'关帅河北',
  age:18,
  address:'河北',
  isMarry:'否'

}

var {name,age,address}=info

类(class)

ES5如何实现类:用函数模拟一个类,即构造函数

例如:

function Chinese() {

    this.theme="黄色",
    this.eyes="黑色"
}

公共方法:用prototype原型实现

Chinese.prototype.spring=function() {
  
  console.log(`${this.name}过春节`);

}

  如何实现类之间的继承:例如:chinese类如何继承Person类

原型链继承:Chinese.prototype=new Person()

缺点:不能传参,所以要引入类式继承 .call

通用作法即原型链继承和类式继承组合用

例如:

  function Chinese(name) {

      Person.call(this,name)

      this.theme="黄色",
      this.eyes="黑色"
  }

  Chinese.prototype=new Person()

  Chinese.prototype.spring=function() {

    console.log(this.name+"过春节");

  }


ES6如何实现类:用class定义类

 常用关键字:class,extends,super,constructor


 定义一个类:

    class 类名 {




    }

例如:

class Person1 {

constructor(name='关帅') {
    
   this.name=name 

}

eat() {

console.log(this.name+"喜欢美食");

}

sleep() {

console.log(this.name+"喜欢欣赏枕头");

}

}

用extends实现继承

例如:

class Chinese1 extends Person1 {

    constructor(name) {
      super(name)  // super就是要继承的父类
      this.theme="黄色"
      this.eyes="黑色"


  }


  spring() {

    console.log(this.name+"过春节");

  }



}
  

  注意:只要加extends,supe是必加的

数组常用遍历方法

forEach 返回undefined

arr.forEach((item,index,arr)=>{

  console.log(`第${index}的值为:`,item.name)


})

filter 返回新数组

var result=arr.filter((item,index,arr)=>{

      return item.age>25


  })

map 返回新数组

    var result=arr.map((item,index,arr)=>{

      return `姓名:${item.name},年龄:${item.age}`
    

  })

React学习资料:

1.菜鸟教程:http://www.runoob.com/react/react-tutorial.html
2.react文档:

  官方文档:https://reactjs.org/docs/hello-world.html
  中文文档:http://react.html.cn/docs/getting-started.html

React初步

环境搭建:

  1.用script引入方式

  
  
  

再script中写react代码





  2.用react官方create-react-app脚手架来开发项目 

你可能感兴趣的:(ES6总结)