ES6总结

作者: 方圆几里666 | 来源:发表于2019-02-12 15:29 被阅读0次

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

    相关文章

      网友评论

          本文标题:ES6总结

          本文链接:https://www.haomeiwen.com/subject/sarkeqtx.html