前言
-
内容主要来自网络,主要来自
MDN
-
ES(JavaScript)是一门大家都要努力学习语言,也是一门努力不让开发者精通的语言。
-
ES678 大部分功能能通过Polyfill或者Babel来解决。
也就是说ES5能实现这些功能
/**
* ie78 没有 trim方法
* @returns {string}
*/
if(!String.prototype.trim){
String.prototype.trim = function(){
return this.replace(/(^\s*)|(\s*$)/g, "");
}
还有一些 语法糖 ,语法糖就是指那些没有给语言添加新功能,而只是对人类来说更“甜蜜”的语法。
比如 class ES5的继承
function Base(opt){
}
function SubClass(opt){
Base.call(this,opt);
}
SubClass.prototype = new Page;//继承属性
SubClass.prototype.constructor = SubClass;//防止指向父类的constructor
var obj = new SubClass(opt);//实例化对象
ES6继承的写法:
class Base(opt){
}
class SubClass(opt) extends Base {
super(opt);
}
let obj = new SubClass(opt);
1、什么是ES、ES8(随便讲讲,你们随便听听)
- ECMAScript:一个由 ECMA International 进行标准化,TC39 委员会进行监督的语言。通常用于指代标准本身。
- JavaScript:ECMAScript 标准的各种实现的最常用称呼。这个术语并不局限于某个特定版本的 ECMAScript 规范,并且可能被用于任何不同程度的任意版本的 ECMAScript 的实现。
- ECMAScript5 (ES5) :ECMAScript 的第五版修订,于 2009 年完成标准化。这个规范在所有现代浏览器中都相当完全的实现了。
- ECMAScript 6 (ES6) / ECMAScript 2015 (ES2015):ECMAScript 的第六版修订,于 2015 年**完成标准化。这个标准被部分实现于大部分现代浏览器。可以查阅这张兼容性表来查看不同浏览器和工具的实现情况。
- ECMAScript 2016(ES7):第七版 ECMAScript 修订,只加了Array.prototype.includes、Exponentiation Operator(求冥运算)
- ECMAScript2017(ES8) :第八版 ECMAScript 修订
- ECMAScript Proposals:被考虑加入未来版本 ECMAScript标准的特性与语法提案,他们需要经历五个阶段:Strawman(稻草人),Proposal(提议),Draft(草案),Candidate(候选)以及 Finished (完成)。
2、padStart&padEnd(字符串填充)
2.1 存在的意义
- 以等宽字体显示平整的数据。
- 在文件名或URL中添加计数或ID:’001.txt’。
- 对齐控制台输出: ‘Test 001: ’。
- 打印具有固定位数的十六进制或二进制数字:’0x00FF’
2.2 语法
String.prototype.padStart(targetLength [, padString])
String.prototype.padEnd(targetLength [, padString])
- 参数
- targetLength 当前字符串需要填充到的目标长度。如果当前字符串原本就达到了该长度,那么该方法什么都不会做,直接返回原字符串。
- padString填充字符串。如果在填充过程中发现用不完这一整个填充字符串,则优先用左侧部分,能用多少用多少。该参数为可选参数,默认值为空格 " "
- 返回值
- 在原字符串头部/尾部填充指定的填充字符串直到目标长度所形成的新字符串
2.3 例子
'abc'.padStart(10); // " abc"
'abc'.padStart(10, "100"); // "1001001abc"
'abc'.padStart(6,"123465"); // "123abc"
'abc'.padStart(8, "0"); // "00000abc"
'abc'.padStart(1); // "abc"
2.4 兼容性
注意:这是一个实验中的功能,未来浏览器可能会改变语法和功能。
浏览器 | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
支持 | 57 | 15 | 48 | No | 44 | 10 |
浏览器 | Android webview | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
---|---|---|---|---|---|---|---|
支持 | ? | 57 | Yes | 48 | No | ? | 10 |
2.5 其他:
- 为什么这两个填充方法不叫做 padLeft 和 padRight ?
- 对于双向或从右到左的语言, left 和 right 这两个词显然容易混淆。因此,padStart 和 padEnd 的命名遵循了现有的 startsWith 和 endsWith 名称。
3、Object.values(obj)(遍历对象值)
方法返回一个给定对象自己的所有可枚举属性值的数组,值的顺序与使用for…in循环的顺序相同 ( 区别在于 for-in 循环枚举原型链中的属性 )。
3.1 存在的意义
- 以前有Object.keys,可以遍历对象的Key,所以遍历value的话只能这样获取:
var values = [];
Object.keys(obj).forEach(function(key){
values.push(obj[key])
})
现在只需要
var values = Object.values(obj)
3.2 语法
Object.values(obj)
-
参数
- obj 被返回可枚举属性值的对象。(TODO:拓展可枚举属性值)
-
返回值
- 一个包含对象自身的所有可枚举属性键值的数组
3.3 例子
var obj = {
foo: "bar", baz: 42 };
console.log(Object.values(obj)); // ['bar', 42]
// array like object 长得像有序下标数组的对象
var obj = {
0: 'a', 1: 'b', 2: 'c' };
console.log(Object.values(obj)); // ['a', 'b', 'c']
// array like object with random key ordering 长得像无序下标数组的对象
var an_obj = {
100: 'a', 2: 'b', 7: 'c' };
console.log(Object.values(an_obj)); // ['b', 'c', 'a']注意顺序
// getFoo is property which isn't enumerable 可枚举属性值
var my_obj = Object.create({
}, {
getFoo: {
value: function() {