温故知新——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——阮一峰

2、JSON对象

ES5提供一个内置的(全局)JSON对象,可用来序列化(JSON.stringfy)和反序列化(parse)对象为JSON格式。

其一般性用法如下,

var test = {
    "name": "gejiawen",
    "age": 22
};
console.log(JSON.strinfy(test)); // ‘{"name": "gejiawen", "age": 22}‘
console.log(JSON.parse(‘{"name": "larry"}‘)); // Object {name: "larry"}

JSON对象提供的parse方法还提供第二个参数,用于对具体的反序列化操作做处理。比如,

JSON.parse(‘{"name": "gejiawen", "age": 22, "lucky": "13"}‘, function(key, value) {
    return typeof value === ‘string‘ ? parseInt(value) : value;
});

这里我们在回调函数中对解析的每一对键值对作处理,如果其是一个数字字符串,我们则对其进行parseInt操作,确保返回的value必定是数值型的。

JSON对象提供的stringify方法也会提供第二个参数,用于解析的预处理,同时也会提供第三个参数,用于格式化json字符串。

比如,

var o = {
    name: ‘gejiawen‘,
    age: 22,
    lucky: ‘13‘    
};
var ret = JSON.stringify(o, function(key, value) {
    return typeof value === ‘string‘ ? undefined : value;
}, 4);
console.log(ret);

上面代码在输出时,得到的字符串将不会再呈现一行输出,而是正常的格式化输出,并采用4个space进行格式化。

另外,如果预处理函数的返回值为undefined,则此键值对将不会包含在最终的JSON字符串中。所以上面代码最终的结果是,

"{
    "age": 22
}"

3、新增Object接口

对象 构造器 说明
Object getPrototypeOf 返回对象的原型
Object getOwnPropertyDescriptor 返回对象自有属性的属性描述符
Object getOwnPropertyNames 返回一个数组,包括对象所有自有属性名称集合(包括不可枚举的属性)
Object create 创建一个拥有置顶原型和若干个指定属性的对象
Object defineProperty 给对象定义一个新属性,或者修改已有的属性,并返回
Object defineProperties 在一个对象上添加或修改一个或者多个自有属性,并返回该对象
Object seal 锁定对象。阻止修改现有属性的特性,并阻止添加新属性。但是可以修改已有属性的值。
Object freeze 冻结对象,阻止对对象的一切操作。冻结对象将永远不可变。
Object preventExtensions 让一个对象变的不可扩展,也就是永远不能再添加新的属性。
Object isSealed 判断对象是否被锁定
Object isFrozen 判断对象是否被冻结
Object isExtensible 判断对象是否可以被扩展
Object keys 返回一个由给定对象的所有可枚举自身属性的属性名组成的数组

这里不打算对每个新增接口作详细描述,不过比较常用的有如下几个,

  • Object.create
  • Object.defineProperties
  • Object.keys

4、新增Array接口

对象 构造器 说明
Array.prototype indexOf 返回根据给定元素找到的第一个索引值,否则返回-1
Array.prototype lastIndexOf 方法返回指定元素在数组中的最后一个的索引,如果不存在则返回 -1
Array.prototype every 测试数组的所有元素是否都通过了指定函数的测试
Array.prototype some 测试数组中的某些元素是否通过了指定函数的测试
Array.prototype forEach 让数组的每一项都执行一次给定的函数
Array.prototype map 返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组
Array.prototype filter 利用所有通过指定函数测试的元素创建一个新的数组,并返回
Array.prototype reduce 接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终为一个值
Array.prototype reduceRight 接受一个函数作为累加器,让每个值(从右到左,亦即从尾到头)缩减为一个值

新增的数组接口中,基本都是比较有用的接口。需要注意的一点是,有的数组方法是不返回新数组的,有的接口是返回一个新数组,就是说使用这些新接口时,需要注意一下方法的返回值。

另外Array还有一个新增的接口,Array.isArray。显然此新增接口并不是实例方案,而是类似“静态方法”一样的存在。其作用很简单,就是判断某一对象是否为数组。

参考链接

5、Function.prototype.bind

bind()方法会创建一个新函数,称为绑定函数.当调用这个绑定函数时,绑定函数会以创建它时传入 bind()方法的第一个参数作为 this,传入 bind() 方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数。

此方法的用法如下,

fun.bind(thisArg[, arg1[, arg2[, ...]]])

使用bind可以为函数自定义this指针。它的常见使用场景如下,

this.x = 9; 
var module = {
    x: 81,
    getX: function() {
        return this.x;
    }
};
module.getX(); // 81
var getX = module.getX;
getX(); // 9, 因为在这个例子中,"this"指向全局对象
// 创建一个‘this‘绑定到module的函数
var boundGetX = getX.bind(module);
boundGetX(); // 81

Javascript中重新绑定this变量的语法糖还有callapply。不过bind显然与它们有着明显的不同。bind将会返回一个新的函数,而call或者apply并不会返回一个新的函数,它们将会使用新的this指针直接进行函数调用。

时间: 2024-10-27 02:30:09

温故知新——JS_ ES5新特性简介的相关文章

CSS3新特性简介

1.CSS3 边框:通过 CSS3,能够创建圆角边框,向矩形添加阴影,使用图片来绘制边框,如border-radius:box-shadow:border-image 2.CSS3 背景:CSS3 包含多个新的背景属性,它们提供了对背景更强大的控制.background-size:background-origin 3.CSS3 文本效果:CSS3 包含多个新的文本特性.text-shadow:word-wrap 4.CSS3 @font-face规则:可将设计师希望使用的字体文件存放到web服

【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

PHP7 新特性 简介

整理了一些常用的新特性,欢迎点赞!!! 新增操作符 1.?? $username = $_GET['user'] ?? ''; $username = isset($_GET['user']) ? $_GET['user'] : 'nobody'; 2.<=> $number1 <=> $number2; 当 $number1 小于.等于.大于 $number2 时 分别返回 -1,0,1 新增函数 intdiv(被除数, 除数) — 对除法结果取整 intdiv(3, 2) //

webpack3新特性简介

升级到webpack3 升级到webpack3,只需要通过npm安装即可: 1 npm install [email protected] --save-dev webpack3几乎与webpack2完美兼容,除了会影响一些插件的使用,官方给出的数据是:98%的用户升级后,没有影响webpack功能的正常使用.升级的时候可能会有一些相关的warning,但是一般不影响使用. 1 2 3 npm WARN [email protected] requires a peer of [email pr

java8新特性——简介

java8问世已经有好长时间了,但是之前项目中都没有使用到,所以一直都只是了解一些,近期刚刚换了加新公司,在开发中需要使用到java8来开发,所以也是马上赶来学习一下java8得新特性. 一.新特性 1.Lambda表达式(重要) 2.函数式接口 3.方法引用与构造器引用 4.stream API(重要) 5.接口中得默认方法和静态方法 6.新时间日期 以上几个知识点就是打算后期主要学习得几个特性. 二.优点 1.速度快,效率搞.(底层数据结构做了优化,gc做了优化) 2.开发方便,更简洁.(l

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,使数组遍历

JAVA8 新特性简介

特点: 速度更快(HashMap加哈希表,ConcurrentHashMap使用CAS,内存结构无永久区.新增元数据区使用物理内存)代码更少(增加了新的语法 Lambda 表达式)强大的 Stream API便于并行(优化ForkJoin)//JDK8之前 需要自己实现计算过程,下面的省略部分代码public class ForkJoinCalculate extends RecursiveTask<Long> { private long start; private long end; @

iOS13 新特性简介

目录 一.Dark Mode 暗黑模式 二.Status Bar更新 三.UIActivityIndicatorView加载视图 四.总结 一.Dark Mode 暗黑模式 1.1 iOS13推出了Dark Mode Dark Mode 1.2 UIColor拥有了动态属性 iOS13之前只能表示一种颜色 iOS13以后能够表示两种模式下的不同颜色 1.3 图片也能在两种模式下自由切换 iOS13 两种模式下的图片资源 1.4 Dark Mode 模式适配 因为所涉及的内容较多,请参考以下文章i

EXTJS 6 新特性(译文)

Extjs 新特性 简介 使用extjs,sencha 团队开发一个简单的框架,可以为创建在任何类型设备上运行的应用,从手机端到平板电脑再到桌面应用,你将能够产生最佳的用户体验,编写更少的代码量,结合一个引人注目的更好的主题,extjs 拥有所有的资源能让你在任何设备上创建出惊人的用户体验. 1 extjs 和 sencha touch 的合并 在extjs5 中,已经将 extjs 和 sencha touch 合并了,合并的过程很长,sencha 将框架中的 ext.data, Ext.ap