ES6所有新增特性总结

￡神魔★判官ぃ 2023-07-25 14:05 55阅读 0赞

ES6新增特性

  • let
  • const
  • 解构赋值
  • 模板字符串
  • 数组新增的方法
  • 字符串新增的方法
  • 函数新增的方法
  • 对象新增的方法
  • Symbol用法
  • Set-Map数据结构
  • Proxy
  • Class的基本用法
  • Promise
  • Iterator和for…of循环
  • Generator
  • Module体系

let

  1. 只能在块作用域里面生效
  2. 不能重复定义同一个变量

const

  1. 声明常量，不可被修改，但存储对象时可增加key-value属性值
  2. 只能在块作用域内生效
  3. 不能先声明后赋值

解构赋值

分为数组解构和对象解构，项目中从接口获取的数据可以解构为自己需要的数据，也常用于交换变量值
这里面引入了rest参数，用来获取函数的多余参数，这样就不需要使用arguments对象。

模板字符串

主要是针对变量

  1. { 
  2.     let name = 'list';
  3.     let info = 'hello world';
  4.     let m = `i am ${ name},${ info}`;
  5. }

数组新增的方法

  1. Array.from()：遍历数组元素，也可遍历类似数组的兑现和可遍历的对象
  2. Array.of()：将一组值转换为数组
  3. Array.fill()：替换元素
  4. Array.keys()：返回一个数组，返回的是数组的下标
  5. Array.values()：返回一个数组，返回的是数组中的值

  6. Array.entries()：返回下标和值

    for(let [index,value] of Array.entries()){ index,value}

  7. Array.copyWithin(起始位置,从第几个数据读取,截止位置)

  8. Array.find()：找出第一个符合条件的数组成员
  9. Array.findIndex()：找出第一个符合条件的数组成员的下标

字符串新增的方法

字符串/数组.includes(value)：是否包含value值，是的话返回true

函数新增的方法

  1. 扩展运算符：…[1,2,3] //1,2,3 把数组拆分成了三个值
  2. 箭头函数：
    箭头函数是普通函数的简写，可以更优雅的定义一个函数，和普通函数相比，有以下几点差异：
    （1）函数体内的 this 对象，就是定义时所在的对象，而不是使用时所在的对象。
    （2）不可以使用 arguments 对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。
    （3）不可以使用 yield 命令，因此箭头函数不能用作 Generator 函数。
    （4）不可以使用 new 命令，因为：
    没有自己的 this，无法调用 call，apply。
    没有 prototype 属性 ，而 new 命令在执行时需要将构造函数的 prototype 赋值给新的对象的 proto

对象新增的方法

  1. Object.is(value1,value2)：判断两个参数是否相等
  2. Object.assign(value1,value2)：浅拷贝，拷贝出来的结果是 [value1,value2]（value1和value2都是对象）
  3. 扩展运算符：{a,b,…c}={a:’a’,b:’b’,c:’c’,d:’d’}→c={c:’c’,d:’d’}
  4. for…in循环遍历对象自身的和继承的可枚举属性
  5. Object.keys(obj)：返回一个数组，返回的是数组成员的下标
  6. Object.getOwnPropertySymbols(obj)：返回的是Symbol定义的值
  7. Object.ownKeys(obj)：可以拿到所有的值，包括Symbol定义的和非Symbol定义的

Symbol用法

这是一种数据类型，表示独一无二的值

  1. { 
  2. let a1 = Symbol.for(‘a1’)
  3. //后面再对a1赋值也是无效的，a1的值依旧是’a1’
  4. }

Set-Map数据结构

  1. Set本身是一个构造函数，类似于数组，但是里面的值都是唯一的，没有重复的值，所以可以用Set去重

    { 

    1. let array = [1,1,2,2,6,5];
    2. let set = new Set(array);
    3. console.log(set);  //[1,2,6,5]

    }
    { 

    1. //接下里介绍几个方法
    2. let arr = ['add','delete','clear','has'];
    3. let list = new Set(arr);
    4. list.has('add') //判断是否有该值
    5. list.delete('add');    //、删除该值
    6. list.clear(); //清空

    }

  2. Map数据结构类似于对象，也是键值对的集合，但是键的范围不局限与字符

    { 

    1. let map = new Map();
    2. let arr = ['123'];
    3. map.set(arr,456);
    4. map.get(arr);  //456

    }

Proxy

Proxy 用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种“元编程”（meta programming），即对编程语言进行编程。

Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，
因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理，
用在这里表示由它来“代理”某些操作，可以译为“代理器”。

  1. var proxy = new Proxy(target, handler);

优点：通过代理，条件与对象本身隔绝，后续代码维护、健壮都很强

Class的基本用法

class其实是对function的简化 class的声明

  1. //基本定义和生成实例
  2. class Parent{ 
  3.     constructor(name){ 
  4.         this.name = name;
  5.     }
  6. }
  7. let parent = new Parent('xiaomao')
  8. //继承
  9. class Child extends Parent{ 
  10.     //子类怎么去覆盖父类,this一定要放在super后面
  11.     constructor(name = 'child'){ 
  12.         super(name);   //若super()，则所有参数都是父类的
  13.         this.type = 'child';   //子类增加的属性
  14.     }
  15. }

Promise

promise实际上解决jquery的ajax回调地域(解决层层嵌套),只是异步编程的一种解决方案

  1. new promise(function(resolve,reject) { 
  2.         // 111111111
  3.         resolve('...')
  4.     } ).then(function(value) { 
  5.         console.log(value)
  6.     }).catch(function(error){ 
  7.     console.log(error)
  8. })

Iterator和for…of循环

遍历器（Iterator）就是这样一种机制。它是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口，就可以完成遍历操作（即依次处理该数据结构的所有成员）。

Iterator 的作用有三个：
一是为各种数据结构，提供一个统一的、简便的访问接口；
二是使得数据结构的成员能够按某种次序排列；
三是 ES6 创造了一种新的遍历命令for…of循环，Iterator 接口主要供for…of消费

Generator

Generator 函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同。

Generator 函数有多种理解角度。语法上，首先可以把它理解成，Generator 函数是一个状态机，封装了多个内部状态。

执行 Generator 函数会返回一个遍历器对象，也就是说，Generator 函数除了状态机，还是一个遍历器对象生成函数。
返回的遍历器对象，可以依次遍历 Generator 函数内部的每一个状态。

形式上，Generator 函数是一个普通函数，但是有两个特征。
一是，function关键字与函数名之间有一个星号；
二是，函数体内部使用yield表达式，定义不同的内部状态（yield在英语里的意思就是“产出”）

  1. function* helloWorldGenerator() { 
  2.   yield 'hello';
  3.   yield 'world';
  4.   return 'ending';
  5. }
  6. var hw = helloWorldGenerator();
  7. hw.next()

上面代码定义了一个 Generator 函数helloWorldGenerator，它内部有两个yield表达式（hello和world），即该函数有三个状态：hello，world 和 return 语句（结束执行）。

然后，Generator 函数的调用方法与普通函数一样，也是在函数名后面加上一对圆括号。
不同的是，调用 Generator 函数后，该函数并不执行，返回的也不是函数运行结果，而是一个指向内部状态的指针对象，
也就是前面介绍的遍历器对象（Iterator Object）。

Module体系

模块功能主要由两个命令构成：
export和import。
export命令用于规定模块的对外接口，
import命令用于输入其他模块提供的功能。
export default{}
为了给用户提供方便，让他们不用阅读文档就能加载模块，就要用到export default命令，为模块指定默认输出。

  1. import animal from './content'
  2. export default 'a cat'
  4. import { say.type} from './content'
  5. import * as content from './content'

发表评论

表情：
评论列表 （有 0 条评论，55人围观）

还没有评论，来说两句吧...

相关阅读

    相关 ES6新增知识小总结

    ES6 let／const ES6中新增的声明变量的方式： let关键字用来声明变量，类似于var，但是使用let声明的变量有以下几点特性： 1.不存在变量提升

    女爷i女爷i/ 0 赞/ 214 阅读