了解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脚手架来开发项目 

作者：沉默成本
链接：https://www.jianshu.com/p/6aa27b424b7f
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。