babel lsit
提案 stage4
ES3
ES5(12月)
浏览器支持
Firefox 4
Safari 5.1 不支持 Function.prototype.bind
Chrome 13
IE9不支持严格模式, 其它都可以
IE10和其他主流浏览器都支持了
PC端开发需要注意IE9以下的兼容, 但移动端开发时不需要
IE8只支持部分方法,需要使用es5-shim.
IE8 几乎不支持 ES5,但支持Object.defineProperty, Object.getOwnPropertyDescriptor, JSON 解析和通过索引访问字符串(‘abcd’[1])
严格模式
使用use strict
开启严格模式。
1. 消除不安全之处,保证安全运行
2. 提升编译效率
3. 未来发展趋势
严格模式下: 规则:
1)变量先定义在使用
2)不允许变量重名
var a=1;function a(){}
3)不允许使用eval
4)不允许delete
5)不允许with语句
var sMessage = "hello";with(sMessage) {alert(toUpperCase());}
JSON
JSON.parse、JSON.stringify
数组方法
every、some、forEach、filter、indexOf、lastIndexOf、map、reduce、reduceRight
Array.isArray
Object方法
Object.getPrototypeOf
Object.create
Object.getOwnPropertyNames
方法返回一个由指定对象的所有自身属性的属性名(包括不可枚举属性但不包括Symbol值作为名称的属性)组成的数组。
Object.defineProperty
Object.defineProperty(object1, 'property1', {value: 42,writable: false});
Object.getOwnPropertyDescriptor
获取对象的修饰符
Object.defineProperties
Object.defineProperties(obj, {'property1': {value: true,writable: true},'property2': {value: 'Hello',writable: false}// etc. etc.});
Object.keys
Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致 。
Object.preventExtensions / Object.isExtensible
禁止扩展,对象不可以新增属性。
Object.seal / Object.isSealed
seal 之后的对象,不可以新增,删除属性,也不可以将其修改为访问器属性,只可以修改属性值
Object.freeze / Object.isFrozen
freeze 之后的对象什么都不可以改
for…in
以任意顺序遍历一个对象的除Symbol以外的可枚举属性。for…in不应该用于迭代一个关注索引顺序的 Array。
会遍历对象原型上的可枚举属性,如果需要只循环对象自身属性,那么使用 getOwnPropertyNames() 或执行 hasOwnProperty() 来判断某属性是否是对象本身。
var t = {a:12,b:55};t.hasOwnProperty('a'); // trueObject.getOwnPropertyNames(t); // ['a', 'b'] for(temp in t){console.log(temp); // a b}//var t = [1,2,3];for(temp in t){console.log(temp); // 0 1 2}// for(temp in 'abcd'){console.log(temp); // 0 1 2 3}
ES6(ECMAScript )
从这个版本开始,规范命名按照年份命名。至于我们还在说的ES7,ES8什么的应该只是大家按照习惯继续增加而已,实际上标准是按照年份命名的,每年的标准在6月份获准生效。我们在配置babel指定版本的时候需要写成es,而不能写成ES8什么的。
(1)块作用域 - let
(2)常量 - const
(3)解构数组 - Array Destructuring
(4)解构对象 - Object Destructuring
(5)模板字符串 - Template Strings
(6)展开操作符
(7)剩余操作符
(8)解构参数
(9)箭头函数
(10)对象表达式
(11)对象属性名
(12)对比两个值是否相等
(13)把对象的值赋值到另一个对象中
(14)设置对象的prototype属性
(15)原型 -proto
(16)supper
(17)迭代器
(18)class类
(19)get set
(20)静态方法
(21)继承
(22)模块化
(23) for…of
在可迭代对象上创建循环,
var t = [1,2,3];for(temp of t){console.log(temp); // 1 2 3}// for(temp in 'abcd'){console.log(temp); // a b c d}
ES(ECMAScript )
Array.prototype.includes()指数运算符 ** 和Math.pow()
类似 12 ** 3 === Math.pow(12,3) 都等于8.ES(ECMAScript )
String padding
padStart 和 padEnd 将字符串填充到指定长度
'es8'.padStart(5);// ' es8''es8'.padStart(6, 'woof'); // 'wooes8''es8'.padStart(14, 'wow'); // 'wowwowwowwoes8'
Object.values and Object.entries
ES5 引入了Object.keys方法,返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历( enumerable )属性的键名。
Object.values方法返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历( enumerable )属性的键值。
Object.entries方法返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历( enumerable )属性的键值对数组
Async/Await
Object.getOwnPropertyDescriptors
批量获取修饰符
函数参数和函数调用中的尾逗号
当我们在函数参数列表后面加上不必要的逗号,函数参数中的尾逗号可以让编辑器不再抛出错误。
function es8(var1, var2, var3,) {
// …
}
像函数声明中的那样,也可以应用到函数的调用:
es8(10, 20, 30,);
这个特性是从对象和数组的字面量的尾逗号中受到启发, [10, 20, 30,] 和 { x: 1, }。
共享内存和原子
ES(ECMAScript )
for await of
Object Rest Spread
const input = {a: 1,b: 2,c: 1}const output = {...input,c: 3}console.log(output) // {a: 1, b: 2, c: 3}
Promise.prototype.finally()
4.新的正则表达式特性
ES9为正则表达式添加了四个新特性,进一步提高了JavaScript的字符串处理能力。这些特点如下:
s (dotAll) 标志
命名捕获组
Lookbehind 后行断言
Unicode属性转义
ES(ECMAScript )
Array.prototype.flat()
抹平数组,可指定深度,默认为1
Array.prototype.flatMap()
抹平一层数组,并调用map方法。
Object.fromEntries()
Object.entries 的反操作
String.trimStart 和 String.trimEnd
移除字符串前后空格 trimLeft()和trimRight() 是对应方法的别名
try…catch
catch后面的参数可选
Symbol.prototype.description
获取Symbol的描述字符
Function.prototype.toString()
获取函数声明,现在返回精确字符,包括空格和注释,
JSON 超集
此提议的动机是 JSON 字符串可以包含未转义的 U + 2028 LINE SEPARATOR (行分隔符)和 U + 2029 PARAGRAPH SEPARATOR 字符,而 ECMAScript 字符串则不能。在 ES 之前,它会产生错误SyntaxError: Invalid or unexpected token
const LS = eval('"\u2028"');const PS = eval("'\u2029'");
ES(ECMAScript )
String.prototype.matchAll
动态导入语句 import()
import.meta
export * as ns from ‘module’
Promise.allSettled
新增数据类型: BigInt
顶层对象: globalThis
空值合并运算符: ??
a ?? b, 左侧操作符为 null 或者 undefined 的时候返回右侧的值
可选链操作符:?.
a?.b 当a为 null或者undefined的时候 返回undefined,而不是报错
ES (ECMAScript )
String.prototype.replaceAllPromise.anyWeakRefsLogical Assignment Operators(逻辑赋值操作符)Numeric separators(数字分隔符 提高可读性)const a = 100_000_00;
ES(ECMAScript )
类字段,私有实例方法和访问器
正则表达式捕获组索引。
顶层await