ES5 ES6

用户1223725238332
196 阅读9分钟

ES5及ES6

概述

ES(全称ECMAScript ECMA是一个组织名（欧洲计算机协会)，script指代脚本)。利用babel.js的第三方库可以完成ECMAScript的版本转换。它是JavaScript的基础语法支持(除bom，dom相关内容都是es的内容)。

javascript的组成

  1. DOM （操作html文档）
  2. BOM （操作浏览器的）
  3. ECMAScript （基础语法）

ECMAScript 版本

  1. ES3 基础内容 （基础一些的对象及方法 兼容大部分低版本的浏览器）
  2. ES5 进阶内容（在es3基础上新增对应的方法及特性 兼容大部分的浏览器 ）（es5是2009年出的）
  3. ES6 加强内容 （在es5的基础上新增内容及特性 es6以后的版本都称为es6 兼容部分的浏览器（最新浏览器版本支持））（es6是2015年出的）

ES5新增特性

es5主要对于es3的内容进行了增强，主要增强有对象、数组、严格模式、相关高阶函数等

严格模式

严格模式是es5的一个特性，它可以提高代码的执行效率，他对于相关的内容进行了规范（规范性更高 执行效率更快）（普通的写法被称为怪异模式） 它使用use strict进行声明

严格模式具备的特性

  • 严格模式通过抛出错误来消除了一些原有静默错误。
  • 严格模式修复了一些导致JavaScript引擎难以执行优化的缺陷:有时候，相同的代码，严格模式可以比非严格模式下运行得更快。
  • 严格模式禁用了在ECMAScript 的未来版本中可能会定义的一些语法。
严格模式的相关内容
  • 必须使用var 关键词声明
  • 函数内的this不能指向window（如果指向window值就为nudefined）
  • 函数声明只能在对应的上下文对象内声明 （只能声明在函数中或者是全局
  • 不能使用八进制 （八进制是以0开头的）
  • 函数内的形参名不能重复 对象内的属性也不能重名
  • 不能删除不能删除的属性（对象自带的属性）
  • 无法删除声明变量
  • arguments中的callee无法访问对应的函数相关内容
  • arguments 的形参和实参不同步

数组的高阶函数

数组的高阶函数

  • forEach 遍历无返回值，有三个参数（值，下标，数组）
  • map 遍历有返回值(返回值的长度和对应的遍历的数组长度一致)，有三个参数（值，下标，数组）
  • filter过滤的（根据传入条件返回满足条件的内容返回的是一个新的数组)，有三个参数（值，下标，数组）
  • reduce 计算的（传入对应的计算方式返回结果(如果传入了初始值那么从下标0开始没有传入从下标1开始))，有四个参数（上一个值 当前值 当前下标 遍历的数组）
  • reduceRight 计算的(跟reduce一致计算方向为从右到左从后面算起)
  • some判断是否有满足条件的内容(有返回true没有返回false)
  • every判断是否全部都满足条件(都满足返回true否则返回false)
  • now 针对日期 新增方法 now() 静态方法 获取当前日期离1970年1月1日0时0分0秒的毫秒值(时间戳) var n = Date.now()
注意事项
  1. 数组的高阶函数都会忽略对应的空值(empty)
  2. some和every它的执行次和返回的值相关如果some里面有返回true的值后面的都不执行every里面有返回false值后面的都不执行了
  3. forEach常用于要更改原本数组的情况下 map用于无需更改原本数组且需要一个新的数组的时候
  4. reduce方法传入对应的初始值是从下标O开始 未传入是从下标1开始

字符串的字符串模板

var str=`${可以解析的js代码}`
var str=`${1+2+3}` //6天

对象的get set 方法

  1. get 是用于获取数据的 里面返回的值就是得到的数据
  2. set 是用于设置数据的
注意事项
  1. 不要在get 和 set 方法中使用本身的这个属性，会造成内容泄露
  2. 如果只有get 没有set 那么对应的属性就是只读属性（无法赋值）
区别
  1. bind方法返回一个函数不会自动调用需要手动调用而call及apply会自动调用
  2. call传递的是一个个的参数 apply传递是一个参数数组
  3. call 及apply不会更改bind返回的函数的this指向

以及部分的方法

  1. 字符串的 trim
  2. 数组的indexOf 及 lastindexOf
  3. JSON的两个序列化和和反序列化 JSON.stringify JSON.parse
  4. Object类中的大部分方法
  5. Array.isArray 判断是否类型为数组

ES6新增内容

主要在es5的基础上，对于对象、数组、变量修饰符、字符串、循环、函数等进行了增强

ES3的值类型

string 、number 、 Boolean 、 null 、 undefined

新增的基础值类型

  1. symbol 独一无二的值
  2. BigInt 大整型

新增变量修饰符

  1. let 块级作用域（作用范围在当前的代码块内）

    let的特性

    1. 在同一块内不允许重复声明
    2. 具备块级作用域
    3. 不会进行预编译

  2. const 块级作用域 （作用范围在当前的代码块内）

var let const 的区别

var 为全局作用域 let 块级作用域 const 块级作用域 const的特性 1. 修饰的内容为常量 2. 修饰的常量地址不可变 3. 声明变量必须赋值 4. 不会进行预编译 5. 具备块级作用域

数组增加

  1. 静态方法
    • Array.of 是将多个内容填入到数组返回一个新的数组
    • Array.form 将伪数组转为一个新的数组并返回
  2. 对象方法
  • find 根据条件查找第一个找到的元素
  • dindIndex 根据条件查找返回第一个满足条件的元素的下标
  • fill 填充值的方法
  • flat 扁平化方法
  • includes 是否包含

字符串的新增方法

  • startsWith 判断当前字符是否以传入字符开头
  • endsWith 判断当前字符是否以传入字符结尾
  • includes 是否包含
  • repeat 返回一个新的字符串 将原本的字符串进行平铺

对象内的简写

  1. 属性值简写（属性值为变量 如果属性名和属性值的变量名一致 就可以省略对应的值）
  2. 方法简写（方法可以省略对应的function 直接使用属性名（）{}） image.png

解构赋值

对象的解构赋值使用{} 对象的解构是通过对应的key来指定的 也就是位置可以随意变化（声明的变量名得是对象key得来的）

image.png 数组的解构赋值使用[] 数组的解构是通过对应的下标来指定得 也就是位置一一对应（声明的变量名随便书写）

image.png

函数新增

  1. 默认参数（在定义形参得时候指定默认值）

image.png 3. 箭头函数（箭头函数是匿名函数，需要具备名字实现其复用性，那么需要将它赋值给对应的变量，其变量名就是它的函数名）

    var 函数名 =  (形参) => {函数体}

箭头函数得特性

  1. 没有this
  2. 没有arguments （）
  3. 没有原型（不能被new）

箭头函数的简写

  1. 如果有且只有一个形参 可以省略（）
  2. 如果函数体内只有一句代码 那么可以省略{}
  3. 如果函数中只有一句代码 且省略了{} 且你需要返回值 那么必须省略return 关键词

扩展运算符

主要是用于打开数组，暴露里面的内容

image.png

对象方法新增

  1. Object.is 判断两个对象是否是一个
  2. Object.assign 将后面的参数对象内容拷贝到第一个参数对象内
  3. Object.keys 获取对象中的所有的key组成的数组
  4. Object.value 获取对象中的所有的值组成的数组
  5. Object.entries 获取对象中的所有的键值对组成的数组

class 类

image.png

  1. class 是用于构建对象的 他只能使用new关键词调用
  2. class 的名字首字母必须大写
  3. class 中采用了严格模式
  4. class 中的constructor方法表示当前的构造方法 在new的时候会调用这个方法
  5. class使用extends来实现继承 它可以继承父类的非私有属性和方法
  6. class如果使用extends关键词实现继承 那么当前的类中的contructor中必须调用super方法（指向
  7. 父类的构造方法）
  8. class中使用static关键词来声明静态属性及方法 通过类名可以直接调用

generator 方法

用于控制代码的执行顺序的一个方法（将异步代码同步执行）

主要方法
  • next 下一步
  • return 返回一个值 结束当前的generator 对象
  • throw 抛出一个错误（打印错误 结束整个generator对象）
promise ES6新增的一个类，主要是用于将异步代码同步执行
set  是一个存储结构，它主要的特点是存储的数据不重复（地址唯一）
set  使用new关键词进行构建
set的相关方法  size 属性（里面的存储的内容个数）（只读属性）
相关方法
  • add 添加
  • clear 清空方法
  • has 判断值是否存在
  • keys 获取所有的key的set
  • values 获取所有的值是否存在
  • entries 获取所有的键值对的set
  • forEach 遍历数组
Map map也是一个存储结构，里面的存储是使用键值对进行存储
map  使用new关键词进行构建
map的相关方法  size 属性（里面的存储的内容个数）（只读属性）
相关方法
  • get 通过key来获取value
  • set 传入key:value 进行设置
  • delete 根据key删除对应的内容
  • keys 获取所有的key
  • values 获取所有的key
  • entries 获取所有的键值对
  • has 判断key是否存在
  • clear 清空
  • forEach 遍历方法
ES6模块化
  • 将对应的 文件分成模块，进行相关的分类及使用。提高性能及对应的复用性。
  • 在浏览器端使用ES6的模块化技术在script标签中声明 type= module
模块化规范
  1. AMD （代表作 require.js）（预加载）
  2. CMD ( 代表作 Sea.js) （懒加载）
AMD和CMD的区别
  1. AMD 是将对应的模块先进行优先加载，再使用
  2. CMD 就近加载在使用的时候才进行加载
  3. CMD性能更优,AMD它用户体验更佳
ES6的模块化
  1. export 导出模块
  2. import 导入模块
avatar
文章
阅读
粉丝