盘点ES6新增特性

其他 2021-01-30 15:15:44 阅读次数: 0

ES概述

  • 通常将 ES 看做是 JS 的标准规范
  • 实际上 JS 是 ES 的扩展语言
  • ES 只是提供了最基本的语法
  • JS 在语言(ES)的基础上进行了扩展(比如DOM、BOM等)
  • JS 语言本身指的就是 ES

ES2015概述

  • ES2015解决了原有语法上的一些问题或者缺陷
    • 例如：块级作用域
  • 对原有语法进行增强
    • 例如：解构、展开、参数默认值
  • 全新的对象、全新的方法、全新的功能
    • 例如：Object.assign
  • 全新的数据类型和数据结构
    • 例如：set、map

let 和块级作用域

    if (true) {
    
    
      var foo = 1;
    }
    if (true) {
    
    
      let foo = 1;
    }
    console.log(foo);
    // 可以通过新的关键字 let 定义块内部的变量
    // let 定义的变量在块级作用域内部能够被访问

    // 非常适合设置 在 for 循环中的循环变量
    for (var i = 0 ; i < 3 ; i++) {
    
    
      for (var i = 0; i < 3;i++) {
    
    
        console.log(i);
      }
    }
    // 通过 let 定义变量，只在自己的循环中生效
    for (let i = 0 ; i < 3 ; i++) {
    
    
      for (let i = 0; i < 3;i++) {
    
    
        console.log(i);
      }
    }

    // 通过循环批量添加事件
    // 通过 let 定义变量，只能在块级内部被调用
    var eles = [{
    
    }, {
    
    }, {
    
    }];
    for (let i = 0 ; i < eles.length ; i++) {
    
    
      eles[i].onclick = function () {
    
    
        console.log(i);
      }
    }
    eles[0].onclick();

    // 循环 实际上有两层作用域
    for (let i = 0 ; i < 10 ; i++) {
    
    
      let i = "foo";
      console.log(i);
    }
    let i = 0;
    if (i < 10) {
    
    
      let i = "foo";
      console.log(i);
    }
    i++;

    // 和 var 有另外一个区别，let 不会进行变量声明提升
    console.log(a);
    // var a = 1;
    let a = 2;

const

  • 特点：
    • 在 let 的基础上增加了一个【只读】效果
    • 声明的时候必须同时赋初值
    const name = "zs";
    name = "ls";

    // 声明的时候必须同时赋初值
    const name ;
    name = "zs";

    const obj = {
    
    };
    obj.name = "zs";
    obj = {
    
    };
  • 最佳实践：不用 var，主用 const，配合 let

数组的解构

    // 数组解构
    const arr = [100, 200, 300]
    const foo = arr[0]
    const bar = arr[1]
    const baz = arr[2]
    console.log(foo, bar, baz)

    const arr = [100, 200, 300]
    const [foo, bar, baz] = arr
    console.log(foo, bar, baz)

    const arr = [100, 200, 300]
    const [, , baz] = arr
    console.log( baz)

    const arr = [100, 200, 300]
    const [foo, ...rest] = arr
    console.log(rest)

    const arr = [100, 200, 300]
    const [foo] = arr
    console.log(foo)

    const arr = [100, 200, 300]
    const [foo, bar, baz = 400, more = 123] = arr
    console.log(more)
    console.log(baz)

    const path = "foo/bar/baz"
    // const temp = path.split("/")
    // const a = temp[1]
    const [,,a] = path.split("/")

对象的解构

    // 对象解构
    const obj = {
    
     name: 'zs', age: 18 }
    const {
    
     name } = obj
    console.log(name)

    const obj = {
    
     name: 'zs', age: 18 }
    const name = "tom"
    const {
    
     name: newName = "jack" } = obj
    console.log(name)
    console.log(newName)

    const {
    
     log } = console
    log("haha")

模板字符串

    const str = `this 
    is a \`string`;
    console.log(str)

    const name = "tom"
    const st = `hey, ${
      
      name},${
      
      1 + 1},${
      
      Math.random()}`
    console.log(st)

模板字符串标签函数

    // 模板字符串标签函数
    // const str = console.log`hello JavaScript`

    const name = "zs"
    const gender = true
    function myTagFunc(strings, name, gender) {
    
    
      // console.log(strings,name,gender)
      // 处理一下 性别
      const sex = gender ? "man" : "woman"
      return strings[0] + name + strings[1] + sex + strings[2]
    }
    const str = myTagFunc`hi, ${
      
      name} is a ${
      
      gender}`
    console.log(str)

字符串扩展方法

    // 字符串扩展方法
    const msg = 'Error: foo is not defined.'
    console.log(msg.startsWith('Error'))
    console.log(msg.endsWith('.'))
    console.log(msg.includes('foo'))

参数默认值

    // 函数参数的默认值
    function foo(bar,enable = true) {
    
    
      // enable = enable || true
      // enable = enable === undefined ? true : enable
      console.log('foo invoked enable:')
      console.log(enable)
    }
    foo('bar')

剩余操作符

    // 剩余参数
    function fun(n,...args) {
    
    
      console.log(args)
    }
    fun(1,2,3,4)

展开操作符

    // 展开数组操作
    const arr = ['foo', 'bar', 'baz']
    // console.log(arr[0],arr[1],arr[2])
    // console.log.apply(console,arr)

    console.log(...arr)

箭头函数

    // 箭头函数
    // function plus(a) {
    
    
    //   return a + 1
    // }
    // console.log(plus(10))

    const plus = (a, b) => {
    
    
      console.log('plus invoked')
      return a + b
    }
    console.log(plus(1,2))
    
    const arr = [1,2,3,4,5,6,7]
    // const arr1 = arr.filter(function (item) {
    
    
    //   return item % 2
    // })
    const arr1 = arr.filter(i => i % 2)
    console.log(arr1)

箭头函数的this

    // 箭头函数与 this
    const person = {
    
    
      name: "tom",
      // sayHi: function () {
    
    
      //   console.log(`hi,my name is ${this.name}`)
      // }
      // sayHi: () => {
    
    
      //   console.log(`hi,my name is ${this.name}`)
      // }
      sayHi: function () {
    
    
        // const _this = this;
        setTimeout(() => {
    
    
          console.log(`hi,my name is ${
      
      this.name}`)
        },1000);
      }
    }
    person.sayHi()

对象字面量的增强

    // 对象字面量增强
    const bar = "bar"
    const age = "age"
    const obj = {
    
    
      name: "tom",
      // bar: bar
      bar,
      sayHi () {
    
    
        console.log('hi')
        console.log(this)
      },
      // 计算属性名
      [1+2]: 18
    }
    // obj[age] = 18
    console.log(obj)
    // obj.sayHi()

Object.assign 方法

  • 对象扩展方法
    • Object.assign 方法
    const source1 = {
    
    
      a: 123,
      b: 123
    }
    const source2 = {
    
    
      b: 678,
      d: 789
    }
    const target = {
    
    
      a:456,
      c:789
    }
    const result = Object.assign(target,source1,source2)
    console.log(target)
    console.log(target === result)
  • 复制对象
    function fun(obj) {
    
    
      // 希望内部更改时，不要改外部的对象
      const newObj = Object.assign({
    
    },obj)
      newObj.name = 'tom'      
      console.log(newObj)
    }
    const obj = {
    
    
      name: 'jack',
      age: 18
    }
    fun(obj)
    console.log(obj)
  • 应用，在 options 对象参数接收时，简化
    function Block(options) {
    
    
      // this.width = options.width;
      Object.assign(this,options)
    }
    const block1 = new Block({
    
    width: 100, height: 100, x: 50, y: 50})
    console.log(block1)

Object.is 方法

    console.log(
      0 == false
      0 === false
      +0 === -0
      NaN === NaN
      Object.is(+0,-0)
      Object.is(NaN,NaN)
    )
    /* 
      true
      false
      true
      false
      false
      true
    */

class 类

    // function Person(name, age) {
    
    
    //   this.name = name;
    //   this.age = age;
    // }
    // Person.prototype.sayHi = function () {
    
    
    //   console.log(`hi,my name is ${this.name}`)
    // }

    class Person {
    
    
      constructor (name, age) {
    
    
        this.name = name;
        this.age = age;
      }
      sayHi () {
    
    
        console.log(`hi,my name is ${
      
      this.name}`)
      }
    }
    const p1 = new Person("tom",18)
    console.log(p1)
    p1.sayHi()

静态方法 static

    class Person {
    
    
      constructor (name, age) {
    
    
        this.name = name;
        this.age = age;
      }
      sayHi () {
    
    
        console.log(`hi,my name is ${
      
      this.name}`)
      } 
      static create (name,age) {
    
    
        console.log(this)
        return new Person(name,age)
      }     
    }
    const p1 = Person.create("zs",19)
    console.log(p1)

类的继承 extends

    class Person {
    
    
      constructor (name, age) {
    
    
        this.name = name;
        this.age = age;
      }
      sayHi () {
    
    
        console.log(`hi,my name is ${
      
      this.name}`)
      }   
    }
    class Student extends Person {
    
    
      constructor (name,age,number) {
    
    
        super(name,age)
        this.number = number
      }
      hello () {
    
    
        super.sayHi()
        console.log(`学号是 ${
      
      this.number}`)
      }
    }
    const s1 = new Student("tom",18,101)
    s1.hello();

Set

    const s = new Set()
  • add方法
    s.add(1).add(2).add(3).add(4).add(2)
    console.log(s)  // 1,2,3,4
  • forEach
    s.forEach(i => console.log(i))  // 1,2,3,4
  • for of
    for (let i of s) {
    
    
      console.log(i)  // 1,2,3,4
    }
  • size
    console.log(s.size) // 4
  • has
    console.log(s.has(4)) // true
    console.log(s.has(100)) // false
  • delete
    console.log(s.delete(3))  // true
    console.log(s)  // 1,2,4
    console.log(s.delete(100))  // false
    console.log(s)  // 1,2,3,4
  • clear
    s.clear()
    console.log(s)  // 空
  • 数组去重
    const arr = [1.3,4,6,2,4,7,5,8]
    // const b = Array.from(new Set(arr))
    const b = [...new Set(arr)]
    console.log(b)

Map

    const obj = {
    
    }
    obj[true] = "boolean"
    obj[123] = "number"
    obj[{
    
    a: 1}] = "object"

    console.log(Object.keys(obj)) 
    // keys：输出对象的所有键
    // ['123', 'true', '[object object]']

    console.log(obj[{
    
    }])  // object
    console.log(obj['[object Object]']) // object
    // ↑↑↑错误写法↑↑↑

    const map = new Map()
    const a = {
    
     a: 1}
    map.set(a,100)
    console.log(map)  // {
    
    {a:1} => 100}
    console.log(map.get(a)) // 100
  • has
    map.has()
  • delete
    map.delete()
  • clear
    map.clear()
  • forEach
    map.forEach((value,key) => {
    
    
      console.log(key,value)  // {a: 1}   100
    })

Symbol 数据类型

  • 最主要的作用：给对象添加一个独一无二的属性标识符
    // shared.js =============================
    const cache = {
    
    }
    // // a.js ==================================
    cache['foo'] = Math.random()
    // // b.js ==================================
    cache['foo'] = 123
    
    console.log(cache)  // 123
  • 解决方案1
    // shared.js =============================
    const cache = {
    
    }
    // a.js ==================================
    cache['a_foo'] = Math.random()
    // b.js ==================================
    cache['b_foo'] = 123
    
    console.log(cache)
  • 解决方案2
    // Symbol 符号，作用就是表示一个独一无二的值
    const s = Symbol()
    console.log(s)  // Symbol()
    console.log(typeof s) // symbol
    console.log(Symbol() === Symbol())  // false
    console.log(Symbol('foo'))  // Symbol(foo)
    console.log(Symbol('bar'))  // Symbol(bar)
    console.log(Symbol('baz'))  // Symbol(baz)
  • ES6之后，对象可以使用Symbol()的值当做属性名
    const obj = {
    
    
      [Symbol()] : 789,
      name: "zs"
    }
    obj[Symbol()] = 123;
    obj[Symbol()] = 456;
    console.log(obj)  // {Symbol(): 789, Symbol(): 123, Symbol(): 456}
    console.log(obj[Symbol()])  // undefined
    console.log(obj.name) // zs

Symbol 补充

    console.log(Symbol("foo") === Symbol("foo"))  // false
  • for
    const a = Symbol.for('foo')
    const b = Symbol.for('foo')
    console.log(a === b)  // ture

    const a = Symbol.for(true)
    const b = Symbol.for('true')
    console.log(a === b)  // true
  • symbol还提供了一些内置的常量，可以用来做为内部方法的一些标识，通过这些标识，可以让自定义的对象实现一些内置的接口
    const obj = {
    
    }
    console.log(obj.toString()) // [Object Object]

    const obj = {
    
    
      [Symbol.toStringTag]: "XObject"
    }
    console.log(obj.toString()) // [object XObject]
  • 使用symbol的值作为属性名和使用普通字符串作为属性名的区别
    const obj = {
    
    
      [Symbol()]: "Symbol value",
      foo: "foo value"
    }
    for (var k in obj) {
    
    
      console.log(k)  // foo
    }
    console.log(Object.getOwnPropertySymbols(obj))  // [Symbol()]
    console.log(Object.keys(obj)) // ['foo']
    console.log(JSON.stringify(obj))  // {"foo":"foo value"}

for of 遍历

  • for — 使用普通数组
  • for in — 适用有键值对的对象
  • forEach等等
  • 这些遍历数据方式都有一定局限性
  • for of 循环 — 遍历所有数据结构的统一方式
    const arr = [100, 200, 300, 400];

    for (const item of arr) {
    
    
      console.log(item)  // 100 200 300 400
    }

    arr.forEach(item => {
    
       
      console.log(item) // 100 200 300 400
    })

    // forEach没有办法打断遍历，但for of可以
    for (const item of arr) {
    
    
      console.log(item) // 100 200
      if (item >= 200) {
    
    
        break
      }
    }
  • 遍历map与set
    const s = new Set(["foo", "bar", "baz"])
    for (const item of s) {
    
    
      console.log(item) // foo bar baz
    }
    
    const m = new Map()
    m.set("foo",1)
    m.set("bar",2)

    for (const item of m) {
    
    
      console.log(item)  // ['foo', 1] ['bar', 2]
    }

    for (const [key,value] of m) {
    
    
      console.log(key,value)  // foo 1       bar 2
    }
  • 遍历普通对象的问题
    const obj = {
    
    
      name: "zs",
      age: 18
    }
    for (const item of obj) {
    
    
      console.log(item) // 报错
    }

ES2015其他内容

  • 可迭代接口
  • 迭代器模式
  • 生成器
  • Proxy 代理对象
  • Reflect 统一的对象操作 API
  • Promise 异步解决方案
  • ES Modules 语言层面的模块化标准

ES2016概述

    const arr = [1,true,NaN,23,'hello']
    console.log(arr.indexOf(true))  // 1
    console.log(arr.indexOf(null))  // -1
    console.log(arr.indexOf(NaN)) // -1

    // includes 包含
    console.log(arr.includes(NaN))  // true

    // 指数运算符 **
    console.log(Math.pow(2,3))  // 8
    console.log(2 ** 3)  // 8

猜你喜欢

转载自blog.csdn.net/CS_DGD/article/details/111290930
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
让自己的头脑极度开放
CentOS 6.5(x64) 和Redhat6.5操作系误删libc
高可用注册中心
【日记】12.28/【题解】AtCoder AGC041
XML（5）_XML 约束_DTD
Java集合Map（四）
树梅派安装桌面环境教程
pipenv 的 使用和安装
小程序白屏问题和内存研究
C语言简单选择排序
每日归档
更多
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022