zoukankan      html  css  js  c++  java
  • ES6 小记

    1.let & const

    let:相当于var,不同的是没有变量提升,且只在声明的作用域内有效(新增了块级作用域)。

    Const: 声明一个静态场量,一旦声明,常量的值就不能改变。

    for..of..遍历

    for(let item of arr){}, 需要注意的是如果遍历普通数组时需要返回index值,需要用entries()方法:

      for( let [index,item]  of  arr.entries() ){...}

    2.String 方法

    CodePointAt():  识别字符串,返回十进制码点。

    String.fromCharCode():  识别并返回16位的UTF-16字符

    String.fromCharPoint():  识别并返回16/32位的UTF-16字符,与CodePointAt()相反

    字符串遍历器接口:for..of..(能识别32位的字符,而传统for 循环不能)

                      Eg: for(let  codePoint  of  “foo”){

                             Console.Log(codePoint)

                          }

                          //”f”

                          //”o”

                          //”o”

    at():  返回字符串给定位置的字符(能识别32位的字符,而传统charAt()不能)

    normalize():  Unicode正规化, 将字符的不同表示方法统一为同样的形式

    includes():  返回布尔值,表示是否找到了参数字符串。

    startsWith():  返回布尔值,表示参数字符串是否在源字符串的头部。

    endsWith():  返回布尔值,表示参数字符串是否在源字符串的尾部。

    Repeat():  返回一个新字符串,表示将原字符串重复n次,参数为负时报错,为小数是自动取整,所以0~-0.9为0,NaN为0,

    模板字符串:用反引号(`)标示  模板字符串中使用反引号需要用 来转义

      在字符串中嵌入变量: `hello ${name}`  // 变量表达式函数调用写在${}中,保留空格与缩进

      模板编译: 

    3.面向对象

    3.1      Class(类)类似于java 通过extends实现继承

    Class  A{

      Constructor(){     //构造函数,this指向实例本身

      This.a = “dog”

    }

    Say(){…}

    }

    Class  B extends A{

      Constructor(){     //构造函数,this指向实例本身

    //super继承父类的this对象,子类必须在constructor方法中调用super方法,否则新建实例时会报错。这是因为子类没有自己的this对象

    super()

    This.a = “cat”

    }

    }

    ES6的继承机制,实质是先创造父类的实例对象this(所以必须先调用super方法),然后再用子类的构造函数修改this。

    React中用的很多,创建的每个component都是一个继承React.Component的类

    4.Arrow function

    Class  A{

      Constructor(){

     This.a = “cat”

    }

    Say(){

        //如果不用箭头函数,settimeout中的this本应该绑在全局变量

        setTimeout( () => {   

        console.log(this.a)

     }, 1000)

    }

    }

    自带this,函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象,可以解决很多this指向带来的问题。

    实际原因是箭头函数根本没有自己的this,它的this是继承外面的,因此内部的this就是外层代码块的this。

    5.Destructuring(解构)

     let cat = 'ken'

    let dog = 'lili'

    let zoo = {cat: cat, dog: dog} //ES5

    let zoo = {cat, dog}  //ES6

    反过来可以这么写:

    let dog = {type: 'animal', many: 2}

    let { type, many} = dog

       console.log(type, many)

    1. Default  rest

    function animal(type = 'cat'){

       console.log(type)

    }

    animal(); //cat

    rest:

    function animals(...types){

       console.log(types)

    }

    animals('cat', 'dog', 'fish') //["cat", "dog", "fish"]

    交换变量的值: [x , y] = [y , x]

    6.import export(es6 module功能)

    传统的写法

    首先我们回顾下require.js的写法。假设我们有两个js文件: index.js和content.js,现在我们想要在index.js中使用content.js返回的结果,我们要怎么做呢?

    首先定义:

    //content.js

    define('content.js', function(){

       return 'A cat';

    })

    然后require:

    //index.js

    require(['./content.js'], function(animal){

       console.log(animal);   //A cat

    })

    那CommonJS是怎么写的呢?

    //index.js

    var animal = require('./content.js')

     

    //content.js

    module.exports = 'A cat'

    ES6的写法

    //index.js

    import animal from './content'

     

    //content.js

    export default 'A cat'

    export命令除了输出变量,还可以输出函数,甚至是类(有没有很眼熟 react的模块基本都是输出类)

  • 相关阅读:
    移动端布局方案汇总&&原理解析
    Javascript运行机制
    git 使用
    async await详解
    vue使用axios调用豆瓣API跨域问题
    hash和history的区别
    http状态码
    XSS 和 CSRF简述及预防措施
    【pytorch】pytorch基础学习
    [源码解读] ResNet源码解读(pytorch)
  • 原文地址:https://www.cnblogs.com/jlliu/p/7474384.html
Copyright © 2011-2022 走看看