【译】ES5重要特性回顾

题记：作者有个观点，学习ES6之前，必须先懂ES5,恰巧和我的观点吻合，这里找到作者2014年写的讲的ES5的文章，因而翻译了下来。下面的内容捡重点翻译，不重要的略过,文中ES5和ES5.1含义相同。

原文:Thinking About ECMAScript 5 Parts

ES5.1的浏览器支持情况

　　所有现代浏览器都支持ECMAScript 5.1(ie9+, chrome 19+, safari 5+, firefox 4+, opera 12+, Android 3+, Blackberry Browser 7+, iOS safari 5+, opera mobile 12+, ie Mobile 10+) ,除了IE9不支持严格模式（直到IE10才支持）。

　

IE8仅支持ES3

　　IE8仅支持部分ES5.1的特性，比如JSON,Object.defineProperty,Object.getOwnPropertyDescriptor,所以可以认为IE8是仅支持ES3的浏览器。

尾部逗号

　　ES5规定，对象最后一个属性、数组的最后一个元素后面允许存在逗号。

var myObject = {
    foo:‘foo‘,
    bar:‘bar‘, //no error
};

var myArray = [1,2,3,];

console.log(myArray.length) //logs 3, regardless of trailing comma

使用反斜杠\构造多行字符串

　　为构造多行文本字符串，只需要在每行的末尾写上反斜杠\即可。

var stringLiteral = "Lorem ipsum dolor sit amet, consectetur \
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea";

　　这并不是最好的方法，但是比起ES3要好很多。

对象属性可以使用保留关键词

　　下面是示例：

var myObject = {function:‘function‘,new:‘new‘};

console.log(myObject.function,myObject.new); //logs ‘function new‘

JSON对象及其方法

　　ES5规定了JSON.parse和JSON.stringify方法。

字符串的trim方法

return ‘   foo   ‘.trim(); //returns ‘foo‘

字符串可以使用类似数组下标的方式访问字符

　

return ‘ES5‘[1]; // returns "S"

　　

undefined,NaN,Infinity是只读常量

　　在es5中，这些是只读常量，无法通过像 undefined="foo bar"的方式被重新定义。

使用Array.isArray判断是否是数组

return Array.isArray([]); //returns true

　　

新的数组方法

es5定义了下面8个数组方法。

Array.prototype.every()
Array.prototype.filter()
Array.prototype.forEach()
Array.prototype.indexOf()
Array.prototype.lastIndexOf()
Array.prototype.map()
Array.prototype.reduce()
Array.prototype.some()

这几个方法可以通过函数的call方法，用在其他类数组对象上，可以认为这些方法是“泛型方法”。

//use forEach on string, logging each character in string
[].forEach.call(‘ABC‘,console.log);

//user forEach on array-like object (i.e. arguments), logging each argument passed
var myFunction = function(a,b,c){
    [].forEach.call(arguments,console.log);
};

myFunction(1,2,3);

上面的forEach,every,some,filter,map的参数类型是函数，他们还接收一个可选的对象类型的参数，作为其函数参数的this对象(即函数的上下文)。

var arrayLikeObject = {0:‘f‘,1:‘o‘,2:‘g‘,length:3};

//call foreach, set the callback this value to arraylikeObject
[].forEach.call(arrayLikeObject,function(item){

    //inside of function this = arrayLikeObject
    console.log(item + ‘ total: ‘ + this.length);

},arrayLikeObject); //notice third argument, passing arraylikeObject

新的对象访问器属性

　　在ES3中仅仅存在数据属性，在ES5中新增了访问器属性，在读或者写对象属性的时候，可以调用函数。语法示例如下：

var myObject = {
    //name:‘‘, WOULD CAUSE ERROR
    get name() { //notice use of get to indicate accessor property
        console.log(‘read name‘);
    },
    set name(value) { //notice use of set to indicate accessor property
        console.log(‘wrote to name the value: ‘ + value);
    }

};

myObject.name = ‘codylindley‘; //invokes set
myObject.name; //invokes get

对象属性的可配置特性

　　ES5新增了对象属性的可配置特性，使得在定义对象属性的时候，可以配置该属性是否可写（Writable）、可枚举(enumerable)、可删除(configurable)。使用Object.getOwnPropertyDescriptor()可以取得属性的特性描述情况。

　　

var accessor = {
    get name(){},
    set name(){}
};

var data = {name:‘Cody Lindley‘};

//logs {get: function, set: function, enumerable: true, configurable: true}
console.log(Object.getOwnPropertyDescriptor(accessor,‘name‘));

//logs {value: "Cody Lindley", writable: true, enumerable: true, configurable: true}
console.log(Object.getOwnPropertyDescriptor(data,‘name‘));

定义对象属性的新方式

　　ES5新增了Object.defineProperty和Object.defineProperties两个方法，用于定义对象的属性，前者定义单个属性，后者定义多个属性。

var data = {}; //create data object
Object.defineProperty( //define properties on data object
    data,
    "age",
    {
        value: 38,
        writable: true,
        enumerable: true,
        configurable: true
    }
);

var accessor = {}; //create accessor object
Object.defineProperty( //define properties on accessor object
    accessor,
    "name",
    {
        get: function () {},
        set: function (value){},
        enumerable: true,
        configurable: true
    }
);

//logs {value: 38, writable: true, enumerable: true, configurable: true}
console.log(Object.getOwnPropertyDescriptor(data,‘age‘));

//logs {get: function, set: function, enumerable: true, configurable: true}
console.log(Object.getOwnPropertyDescriptor(accessor,‘name‘));

上面示例用Object.defineProperty分别定义了数据属性age和访问器属性name，并定义了该属性的可写、可枚举、可删除特性。

var cody = {}; //create cody object
Object.defineProperties( //define age and name properties on cody object
    cody,
    {
        "age": {
            value: 38,
            writable: true,
            enumerable: true,
            configurable: true
        },
        "name": {
            get: function(){},
            set:function(value){},
            enumerable: true,
            configurable: true
        }
    }
);

//logs {value: 38, writable: true, enumerable: true, configurable: true}
console.log(Object.getOwnPropertyDescriptor(cody,‘age‘));

//logs {get: function, set: function, enumerable: true, configurable: true}
console.log(Object.getOwnPropertyDescriptor(cody,‘name‘));

注意使用Object.defineProperty和Object.defineProperties定义的属性，默认是不可写(Writable)、不可枚举(Enumerable),不可删除(Configurable)的。

遍历对象属性

　　ES5新增了Object.keys和Object.getOwnPropertyNames两个方法，用于遍历对象属性。两个方法的共同点是都不会遍历继承的属性，不同点Object.keys仅仅返回可枚举属性，而Object.getOwnPropertyNames则会返回所有的属性，包括不可枚举的属性。

　　

var person = {};
Object.defineProperties(person,
    {
        "name": {value: ‘Cody Lindley‘,enumerable: true},
        "age": {value: 38,enumerable: false}
    }
);

//return array of all properties that are enumerable
console.log(Object.keys(person)); //logs ["name"]

//return array of all properties, including ones that are non-enumerable
console.log(Object.getOwnPropertyNames(person)); //returns ["name", "age"]

对象的保护方法

　　ES5新增了Object.preventExtensions,Object.seal,Object.freeze三个方法，用于保护对象不被改变，级别从低到高。

1）Object.preventExtensions，阻止添加新属性到对象中,但是原有属性可写可删除

2）Object.seal包含Object.preventExtensions的功能，还将所有属性变成不可删除(Non-Configurable)　　

3）Objec.freeze包含Object.preventExtensions和Object.seal的功能，且讲所有的属性变成不可写(Non-Writable)

除了上面三个方法外，还定义了如下几个方法用于判断对象的状态。

Object.isExtensible()
Object.isSealed()
Object.isFrozen()

对象继承

　　ES5新增了对象继承的方法Object.create，他可以指定新创建的对象是从哪个对象创建而来，如果该方法未指定第一个参数，则默认就是Object.prototype,如果第一个参数是null,则新对象不继承任何对象。

var object = Object.create(Object.prototype); //same as {} or new Object()

　　该方法第二个参数是定义的新的属性，定义方式同Object.defineProperties.

var person = {alive: true};

var cody = Object.create(person, {
    name: {
        configurable: true,
        enumerable: true,
        writeable: true,
        value: ‘cody‘
    }
});

console.log(cody.alive); //logs true

//because
console.log(Object.getPrototypeOf(cody).alive); //logs true

获取对象原型

　　ES5新增加了标准的访问对象原型的方法，Object.getPrototypeOf，而此前的方法是非标准的__proto__.

Object.getPrototypeOf(new Object(‘foo‘)) === String.prototype //return true

函数的上下文

　　在ES3中年，使用函数的apply,call来定义函数的上下文，而在ES5中有了新的方法bind.

var myObject = {foo:‘foo‘};

var myFunction = function(){
    //note I am logging this and arguments here
    console.log(this,arguments[0],arguments[1],arguments[2]);
};

var usingBind = myFunction.bind(myObject,1,2,3); //create new function

//when usingBind() is called the this reference, references myObject
usingBind(); //logs {foo="foo"} 1 2 3

//Note, that any additional argumetns sent to bind, are also sent to the original function, i.e. the 1 2 4

(完)

时间： 2024-10-17 08:41:36

【译】ES5重要特性回顾的相关文章

【ElasticSearch】ES5新特性-keyword-text类型-查询区别

ES5新特性-keyword-text类型-查询区别 elasticsearch-head Elasticsearch-sql client junneyang (JunneYang) es keyword_百度搜索 Elasticsearch 5.0 中term 查询和match 查询(text和keyword) - wenbo的博客 - CSDN博客 第三章:ES分词简单说明 - 风之圣痕 - 博客园 elasticsearch的keyword与text的区别 - CSDN博客 原文地址:h

温故知新——JS_ ES5新特性简介

ES5浏览器支持情况: 一般来说,除了针对个别特性的特殊说明,各大主流浏览器都支持es5,包括 Chrome 13+ Firefox 4+ Safari 5.1* IE 9* 其中IE9不支持es的严格模式,从IE10开始支持.Safari 5.1不支持Function.prototype.bind. 1.Strict Mode, 即所谓的严格模式. 在一个文件.项目或函数的开头加上"use strict";即开启严格模式. 详细内容参考:参考链接1: 参考连接2: 参考链接3--阮一

ES5新特性：理解 Array 中增强的 9 个 API

为了更方便的对JS中Array进行操作,ES5规范在Array的原型上新增了9个方法,分别是forEach.filter.map.reduce.reduceRight.some.every.indexOf 和 lastIndexOf,本文将对这几个方法进行详细的讲解,并对每一个方法进行原型扩展,以兼容不支持ES5的浏览器. forEach(callback[,thisArg]) 在ES5之前,我们可以通过for和for in 两种方式来遍历数组,而ES5引入了一个新方法forEach,使数组遍历

es5的特性 有多少你没用过

一:新的对象创建方式 参数可以是某个对象的原型 function Person(name, age){ this.name = name; this.age = age; } Person.prototype.sayHello = function(){ console.log('hello'); } Person.prototype.getName = function(){ console.log(this.name); } Person.prototype.getAge = functio

H5特性回顾

canvas 绘画, video 媒介回放 audio元素 对本地离线存储的更好支持, 新的特殊内容 - 元素 比如 article,footer,header,nav,section, 新的表单控件  calendar,  date,  time, email, url, search,

js教程（7） -- JS 常见错误、JS加速、保留词、ES5（6）特性

2019.09.24: 学习内容:JS 常见错误.JS加速.ES5(6)特性 补充:js保留词:https://www.w3school.com.cn/js/js_reserved.asp js版本及浏览器支持:https://www.w3school.com.cn/js/js_versions.asp 一.JS 常见错误: 1.=.==.=== 的含义 2.数字和字符串相加得到让人困惑的结果 3.JavaScript 中的数字均保存为 64 位的浮点数(Floats).所有编程语言,包括 Ja

黑马程序员_JavaSE学习总结第27天_反射 & 设计模式 & JDK5、7、8新特性

------- android培训.java培训.期待与您交流! ----------  27.01  反射_类的加载概述和加载时机 类的加载:当程序要使用某个类时,如果该类还未被加载到内存中,则系统会通过加载,连接,初始化三步来实现对这个类进行初始化. 加载:就是指将class文件读入内存,并为之创建一个Class对象.任何类被使用时系统都会建立一个Class对象. 连接 验证 是否有正确的内部结构,并和其他类协调一致 准备 负责为类的静态成员分配内存,并设置默认初始化值 解析 将类的二进制数

ECMAScript5特性介绍之数组篇

Es5的特性以及发布很长时间了,增加了很多实用的特性(Array的 indexOf.every,some,forEach等,Object的create,keys,isFrozen等),这些特性已经得到个浏览器的支持,比如:IE9+,FF21+,chrome23+,opera 15+,SF6+都已经基本支持全部特性.详细的特性检测见:http://kangax.github.io/compat-table/es5/ 很早时候都想认真理下特性的使用方法,总是被这样或者那样的理由推迟了,现在是时候理一

JavaEE基础（二十七）/反射、JDK新特性

1.反射(类的加载概述和加载时机) A:类的加载概述 当程序要使用某个类时,如果该类还未被加载到内存中,则系统会通过加载,连接,初始化三步来实现对这个类进行初始化. 加载  就是指将class文件读入内存,并为之创建一个Class对象.任何类被使用时系统都会建立一个Class对象. 连接 验证 是否有正确的内部结构,并和其他类协调一致 准备 负责为类的静态成员分配内存,并设置默认初始化值 解析 将类的二进制数据中的符号引用替换为直接引用 初始化 就是我们以前讲过的初始化步骤 B:加载时机 创建类