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 crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

再script中写react代码

<script type="text/babel">


    const element=<h1 className="box">我是标题1</h1>;
    ReactDOM.render(element,document.getElementById('app'));



</script>



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