博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
读阮一峰《ECMAScript 6 入门》小结
阅读量:5113 次
发布时间:2019-06-13

本文共 4676 字,大约阅读时间需要 15 分钟。

读阮一峰《ECMAScript 6 入门》小结,

1. ES6简介

Babel 是一个广泛使用的 ES6 转码器,可以将 ES6 代码转为 ES5 代码

在线转换:

2. let和const命令

let在块级作用域内有效,var有变量提升(变量可以在声明之前使用,值为undefined),声明的变量有内存泄露

const定义常量,不能改变

如果区块中存在letconst命令,这个区块对这些命令声明的变量,从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量,就会报错都属于变量的“死区”。

3. 变量的解构赋值

  • 数组的解构
    let [a, b, c] = [1, 2, 3];    // a=1;b=2;c=3let [a, ...b] = [1, 2, 3, 4];    // a=1;b=[2, 3, 4];let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'let [x = 1] = [null]; // x=null
    注意,ES6 内部使用严格相等运算符(===),判断一个位置是否有值。所以,只有当一个数组成员严格等于undefined,默认值才会生效。
  • 对象的解构
    let { foo, bar } = { foo: "aaa", bar: "bbb" };等价于let { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" };// foo="aaa" ; bar="bbb"let { foo: baz } = { foo: 'aaa', bar: 'bbb' };// baz="aaa"
    对象的解构赋值的内部机制,是先找到同名属性,然后再赋给对应的变量。真正被赋值的是后者,而不是前者
  • 字符串的解构赋值
    const [a, b, c, d, e] = 'hello'; //'h','e','l','l','e'let {length : len} = 'hello';  // len=5
  • 数值和布尔值的解构赋值
  • 函数参数的解构赋值

    function add([x, y]){  return x + y;}add([1, 2]); // 3

用途:

  1. 交换变量的值 [x, y] = [y, x]
  2. 从函数返回多个值
  3. 函数参数的定义

    // 参数是一组有次序的值function f([x, y, z]) { ... }f([1, 2, 3]);// 参数是一组无次序的值function f({x, y, z}) { ... }f({z: 3, y: 2, x: 1});
  4. 提取 JSON 数据

    let jsonData = {  id: 42,  status: "OK",  data: [867, 5309]};let { id, status, data: number } = jsonData;console.log(id, status, number);// 42, "OK", [867, 5309]
  5. 函数参数的默认值
  6. 遍历 Map 结构
  7. 输入模块的指定方法

4. 字符串的扩展

  • 可以被for...of循环遍历
  • includes():返回布尔值,表示是否找到了参数字符串。
    startsWith():返回布尔值,表示参数字符串是否在原字符串的头部。
    endsWith():返回布尔值,表示参数字符串是否在原字符串的尾部
    这三个方法都支持第二个参数,表示开始搜索的位置。
  • repeat(): 返回一个新字符串,表示将原字符串重复n次
  • padStart()用于头部补全,padEnd()用于尾部补全。'3'.padStart(2, '0') //03
  • 模板字符串
    $('#result').append(`  There are ${basket.count} items   in your basket, ${basket.onSale}  are on sale!`);
    所有的空格和缩进都会被保留在输出之中
    模板字符串中嵌入变量,需要将变量名写在${}之中。

5. 正则的扩展

  • RegExp构造函数第一个参数是一个正则对象,那么可以使用第二个参数指定修饰符。而且,返回的正则表达式会忽略原有的正则表达式的修饰符,只使用新指定的修饰符。
  • u 修饰符,含义为“Unicode 模式”
  • y 修饰符,叫做“粘连”(sticky)修饰符。后一次匹配都从上一次匹配成功的下一个位置开始
    const REGEX = /a/gy;'aaxa'.replace(REGEX, '-') // '--xa'
    单单一个y修饰符对match方法,只能返回第一个匹配,必须与g修饰符联用,才能返回所有匹配。
  • s 修饰符:dotAll 模式
    使得.可以匹配任意单个字符。/foo.bar/s.test('foo\nbar') // true
  • 后行断言
    ”先行断言“指的是,x只有在y前面才匹配,必须写成/x(?=y)/
    ”先行否定断言“指的是,x只有不在y前面才匹配,必须写成/x(?!y)/
    “后行断言”正好与“先行断言”相反,x只有在y后面才匹配,必须写成/(?<=y)x/
    ”后行否定断言“则与”先行否定断言“相反,x只有不在y后面才匹配,必须写成/(?<!y)x/
  • 具名组匹配
    const RE_DATE = /(?
    \d{4})-(?
    \d{2})-(?
    \d{2})/;const matchObj = RE_DATE.exec('1999-12-31');const year = matchObj.groups.year; // 1999const month = matchObj.groups.month; // 12const day = matchObj.groups.day; // 31

6. 数值的扩展

Number.isFinite()

Number.isNaN()
Number.parseInt()
Number.parseFloat()
Number.isInteger() //判断是否是整数
Math.trunc() //方法用于去除一个数的小数部分,返回整数部分
Math.sign() //用来判断一个数到底是正数、负数、还是零(+1,-1,0,-0,NaN)
指数运算符:**

2 ** 3 // 82 ** 3 ** 2 // 相当于 2 ** (3 ** 2)

7. 函数的扩展

  • ES6 允许为函数的参数设置默认值,即直接写在参数定义的后面。
  • 参数默认值不是传值的,而是每次都重新计算默认值表达式的值。也就是说,参数默认值是惰性求值的。
    let x = 99;function foo(p = x + 1) {  console.log(p);}foo() // 100x = 100;foo() // 101
  • 函数的length属性,将返回没有指定默认值的参数个数
    (function (a, b, c = 5) {}).length // 2
  • rest 参数
function add(...values) {  let sum = 0;  for (var val of values) {    sum += val;  }  return sum;}add(2, 5, 3) // 10
  • 箭头函数
    如果箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分。
    箭头函数有几个使用注意点:
    (1)函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。
    (2)不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。
    (3)不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用 rest 参数代替。
    (4)不可以使用yield命令,因此箭头函数不能用作 Generator 函数。

8. 数组的扩展

9. 对象的扩展

见《》

10. Symbol

  • 一种新的原始数据类型Symbol,表示独一无二的值。
  • 用于对象的属性名,就能保证不会出现同名的属性
    在对象的内部,使用 Symbol 值定义属性时,Symbol 值必须放在方括号之中。
  • 消除魔术字符串
  • Symbol 作为属性名,该属性不会出现在for...infor...of循环中,也不会被Object.keys()Object.getOwnPropertyNames()JSON.stringify()返回。但是,它也不是私有属性,有一个Object.getOwnPropertySymbols方法,可以获取指定对象的所有 Symbol 属性名。

11. Set 和 Map 数据结构

Set 数据结构

它类似于数组,但是成员的值都是唯一的,没有重复的值。

Set 结构的实例有以下属性。

  • Set.prototype.constructor:构造函数,默认就是Set函数。
  • Set.prototype.size:返回Set实例的成员总数。

Set 实例的方法分为两大类:操作方法(用于操作数据)和遍历方法(用于遍历成员)。下面先介绍四个操作方法。

  • add(value):添加某个值,返回 Set 结构本身。
  • delete(value):删除某个值,返回一个布尔值,表示删除是否成功。
  • has(value):返回一个布尔值,表示该值是否为Set的成员。
  • clear():清除所有成员,没有返回值。

Array.from方法可以将 Set 结构转为数组。

去重

const items = new Set([1, 2, 3, 4, 4]);//方法一[...items]//方法二Array.from(items);// [1, 2, 3, 4]

Map 数据结构

它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。

12. Proxy 代理器

Proxy 可以理解成,在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写。

  • get(目标对象,属性名,[proxy 实例本身])

    用于拦截某个属性的读取操作

  • set(目标对象,属性名,属性值,[proxy 实例本身])

    用来拦截某个属性的赋值操作

  • apply(目标对象,上下文对象(this),参数数组)

    拦截函数的调用、callapply操作。

  • has

    用来拦截HasProperty操作,即判断对象是否具有某个属性时,这个方法会生效。典型的操作就是in运算符。
    has拦截只对in运算符生效,对for...in循环不生效,导致不符合要求的属性没有被for...in循环所排除。

  • construct()

    用于拦截new命令

  • deleteProperty()

    用于拦截new命令

  • defineProperty()

    拦截了Object.defineProperty操作

    ...

Reflect

Promise 对象

转载于:https://www.cnblogs.com/conglvse/p/9764305.html

你可能感兴趣的文章
图片等比例缩放及图片上下剧中
查看>>
jQuery方法大全
查看>>
WebView加载网页详情
查看>>
【转载】Linux screen 命令详解
查看>>
dd命令 建立两颗一模一样的磁盘
查看>>
常用的jquery触屏手机页面特效代码下载
查看>>
background-clip,background-origin
查看>>
C# 如何创建一个Windows服务
查看>>
集群和分布式区别
查看>>
Android(java)学习笔记153:采用post请求提交数据到服务器(qq登录案例)
查看>>
Java基础知识强化101:Java 中的 String对象真的不可变吗 ?
查看>>
Android 高级UI设计笔记12:ImageSwitcher图片切换器
查看>>
虚拟主机与虚拟目录学习小结
查看>>
hlg1414安装雷达【贪心】
查看>>
Blog文章待看
查看>>
Golang flag包使用详解(一)
查看>>
python文件IO
查看>>
regsvr32简介
查看>>
升级到 .NET Core 2.1
查看>>
C#多线程交替赋值取值
查看>>