今天开始ES5与ES6的研究。

1、什么是ES5与ES6?

  就是ECMAScript的第五个版本与第六个版本,那么问题来了,什么是ECMAScript?首先它是一种由Ecma国际通过ECMA-262标准化的脚本程序设计语言,又被称为JavaScript,但其实JavaScript是ECMA-262标准的实现与扩展(说了那么多其实它就是JavaScript的核心语言标准),具体的名字由来及历史可以参照ECMAScript百度百科。学习ECMAScript可以对JavaScript语言中的复杂特性有比较深入的了解。

2、ECMAScript 语言中的实际类型共有六种。

  分别为UndefinedNullBooleanNumberString 和 Object

  Undefined:它只有一个值Undefined,如果一个变量没有通过赋值操作指定一个值,那么该变量的值是 undefined

  Null :也只有一个值 null

  Boolean有两个值 true 和 false

  Number始终使用 64 位双精度浮点数来表示数值,Number 类型的值的个数是 264-253+3。个数后面的“+3”表示的是 Number 类型的 3 个特殊值,分别是NAN、+Infinity  -InfinityNaN 的含义是“不是一个数字(Not-A-Number)”。在代码中可以直接通过“NaN”的方式来引用这个值。代码中与数值相关的计算的结果也可能是 NaN。一般来说,对于 ECMAScript 语言中的操作符,如果其中一个操作数为 NaN,那么计算结果为NaN。当需要判断一个变量引用 a 是否为 NaN 时,只需要判断 a !== a 是否为 true 即可。+Infinity 和 -Infinity 分别表示正无穷大和负无穷大,可以在代码中直接引用,也可能是某些数值运算的结果。如运算“3 / 0”的结果是 Infinity。除了这 3 个特殊值之外,剩下的数值中一半是正数,一半是负数。数值 0 也有正数和负数两种形式,称为正 0 和负 0,分别用 +0 和 -0 来表示。

   String :它的处理也比较简单。任何有限长度的 16 位无符号整数的有序序列都是 String 类型的值。当 String 类型对象中包含的是文本数据时,序列中的每个元素的值是 UTF-16 格式的代码单元的值,对应于 Unicode 中的代码点。

  Object:是一个对象,本身是一个函数,因此“typeof Object”表达式的值是functionObject 函数既可以直接调用,也可以作为构造函数来创建新的对象。  

3、 Object.defineProperty 函数的使用示例
var obj = {};
Object.defineProperty(obj, 'val', {}); // 创建一个新属性,特性为默认值
obj.val = 1; Object.defineProperty(obj, 'CONSTANT', {value : 32, writable : false}); // 创建一个只读属性
obj.CONSTANT = 16; // 对属性的修改是无效的,但是不会抛出错误 Object.defineProperty(obj, "newVal", {enumerable: true});
for (var key in obj) {
console.log(key); // 可以枚举出 newVal
} var initValue = 0;
Object.defineProperty(obj, "initValue", {
get : function() {
return initValue;
},
set : function(val) {
if (val > 0) {
initValue = val;
}
}
});

4、通过赋值操作创建新属性

var obj = {val : 1};
obj.newVal = "Hello"; Object.seal(obj);
Object.defineProperty(obj, 'anotherVal', {}); // 抛出 TypeError 错误

5、函数

  函数在ES中有着特殊的地位,很多功能都是基于函数实现的,可谓是无所不能,函数可以通过三种方式来创建:第一种是使用构造函数 Function,第二种是使用函数声明,第三种是使用函数表达式。

6、构造函数案例

 function calculate(expr) {
return new Function("return " + expr).apply();
} calculate("3 * (2 + 4)");

7、构造函数案例  

function calculate(expr) {
return new Function("return " + expr).apply();
} calculate("3 * (2 + 4)");

8、bind函数的使用

  
var obj = {
name : "alex"
}; function func() {
console.log(this.name);
} var func1 = func.bind(obj);
func1(); // 输出 alex function add(a, b) {
return a + b;
} var addBy5 = add.bind(this, 5);
addBy5(3); // 值为 8,只有一个形式参数

数组

9、Array.prototype 中函数的使用示例

var array = [1, 2, 3, 4, 5];
array.indexOf(3); // 值为 2
array.lastIndexOf(4); // 值为 3
array.every(function(value, index, arr) {
return value % 2 === 0;
}); // 值为 false
array.some(function(value, index, arr) {
return value % 2 === 0;
}); // 值为 true
array.forEach(function(value, index, arr) {
console.log(value);
});
array.map(function(value, index, arr) {
return value * 2;
}); // 值为 [2, 4, 6, 8, 10]
array.filter(function(value, index, arr) {
return value % 2 === 0;
}); // 值为 [2, 4]
array.reduce(function(preValue, value, index, arr) {
return preValue + value;
}); // 值为 15
array.reduceRight(function(preValue, value, index, arr) {
return preValue * value;
}); // 值为 120

JSON

10、JSON 对象的 parse 函数的使用示例

var jsonStr = '{"a":1, "b":2, "c":3}';
JSON.parse(jsonStr); JSON.parse(jsonStr, function(key, value) {
return typeof value === 'number' ? value * 2 : value;
}); // 结果为 {a:2, b:4, c:6} JSON.parse(jsonStr, function(key, value) {
return typeof value === 'number' && value % 2 === 0 ? undefined : value;
}); // 结果为 {a:1, b:3}

11、JSON 对象中 stringify 函数的使用示例

var user = {
name : 'Alex',
password : 'password',
email : 'alex@example.org'
}; JSON.stringify(user);
JSON.stringify(user, ['name']); // 输出结果为“{"name":"Alex"}”
JSON.stringify(user, function(key, value) {
if (key === 'email') {
return '******';
}
if (key === 'password') {
return undefined;
}
return value;
}); // 输出结果为“{"name":"Alex","email":"******"}”
JSON.stringify(user, null, 4);

严格模式

ECMAScript 规范第五版的一个重要新特性是引入了代码执行时的严格模式。在严格模式下,对于 ECMAScript 代码执行时的限制更多。某些使用方式在严格模式下是不允许的。这有利于避免一些潜在的问题,提高代码的鲁棒性。一般来说,框架需要可以在严格模式下能正确运行,而一般的应用程序则可以选择是否使用严格模式。通过在 ECMAScript 代码的最开始使用 "use strict" 或 'use strict' 就可以声明这段代码需要运行在严格模式下

12、严格模式下 this 的值

"use strict";
function func() {
console.debug(typeof this); // 输出为 number
} func.apply(10);

ES6

 ES6是一次重大的版本升级,与此同时,由于ES6秉承着最大化兼容已有代码的设计理念,你过去编写的JS代码将继续正常运行。事实上,许多浏览器已经支持部分ES6特性,并将继续努力实现其余特性。这意味着,在一些已经实现部分特性的浏览器中,你的JS代码已经可以正常运行。如果到目前为止你尚未遇到任何兼容性问题,那么你很有可能将不会遇到这些问题,浏览器正飞速实现各种新特性。但是对于初学者来说,应该先学ES5标准,在这个基础上学习ES6,作为提升。

ES6增加了一些新特性,具体可以参照http://www.cnblogs.com/Wayou/p/es6_new_features.html

  

ES5与ES6的研究的更多相关文章

  1. React入门 (1)—使用指南(包括ES5和ES6对比)

    前言 本篇会简明扼要的介绍一下React的使用方法.代码会用JSX+ES5和JSX+ES6两种方式实现. React简介 React来自Facebook,于2013年开源.至今不断修改完善,现在已经到 ...

  2. ES5和ES6中对于继承的实现方法

    在ES5继承的实现非常有趣的,由于没有传统面向对象类的概念,Javascript利用原型链的特性来实现继承,这其中有很多的属性指向和需要注意的地方. 原型链的特点和实现已经在之前的一篇整理说过了,就是 ...

  3. JavaScript面向对象轻松入门之概述(demo by ES5、ES6、TypeScript)

    写在前面的话 这是一个JavaScript面向对象系列的文章,本篇文章主要讲概述,介绍面向对象,后面计划还会有5篇文章,讲抽象.封装.继承.多态,最后再来一个综合. 说实话,写JavaScript面向 ...

  4. JavaScript面向对象轻松入门之封装(demo by ES5、ES6、TypeScript)

    本章默认大家已经看过作者的前一篇文章 <JavaScript面向对象轻松入门之抽象> 为什么要封装? 封装(Encapsulation)就是把对象的内部属性和方法隐藏起来,外部代码访问该对 ...

  5. JavaScript面向对象轻松入门之多态(demo by ES5、ES6、TypeScript)

    多态(Polymorphism)按字面的意思就是"多种状态",同样的行为(方法)在不同对象上有不同的状态. 在OOP中很多地方都要用到多态的特性,比如同样是点击鼠标右键,点击快捷方 ...

  6. JavaScript、ES5和ES6的介绍和区别

    JavaScript由三部分组成: ECMAScript(核心) DOM(文档对象模型) BOM (浏览器对象模型) ES5(ECMAScript第五个版本) strict模式 严格模式,限制一些用法 ...

  7. ES5和ES6那些你必须知道的事儿(三)

    ES5和ES6那些你必须知道的事儿 ES6新增的东西 一.块级作用域:关键字let,常量const let与var的区别: a.不会进行变量声明提升 b.变量不允许被重复定义 c.变量不允许被删除 d ...

  8. ES5与ES6的小差异

    ES5与ES6的小差异 变量的定义 ES6与ES5的区别 ES5: <script> console.log(username); var username; var username = ...

  9. React Native的语法之ES5和ES6

    原文地址:http://www.devio.org/2016/08/11/React-Native%E4%B9%8BReact%E9%80%9F%E5%AD%A6%E6%95%99%E7%A8%8B- ...

随机推荐

  1. Learn jQuery in y seconds

    [兼容IE8以下没办法][虽不是Modern Web(不建议直接操作DOM)但也是一大利器] 个人推荐书[CSS 网站实录][JavaScript Dom 编程艺术][刚开始学不能太纠结机制机理原理因 ...

  2. Docker(三)Docker是如何工作的

    摘自 https://mp.weixin.qq.com/s/SsXIuDqeze_et8vWQ8fr3g 一.Docker Client 也称为Docker客户端.其实就是Docker提供命令行界面工 ...

  3. luogu P3297 [SDOI2013]逃考

    传送门 gugugu 首先每个人管理的区域是一个多边形,并且整个矩形是被这样的多边形填满的.现在的问题是求一条经过多边形最少的路径到达边界,这个可以最短路. 现在的问题是建图,显然我们应该给相邻的多边 ...

  4. java 通过域名获取ip

    1. java InetAddress[] allByName = InetAddress.getAllByName("www.baidu.com"); 2. nslookup

  5. CDH安装报错 Monitor-HostMonitor throttling_logger ERROR ntpq: ntpq -np: not synchronized to any server

    1 没有安装ntp同步服务 所有机器统一时区,确认所有机器配置一致  vim /etc/sysconfig/clock ntp服务器配置 ln -sf /usr/share/zoneinfo/Asia ...

  6. CentOS7.2通过Yum安装MySQL5.7

    1 下载源 wget http://dev.mysql.com/get/mysql57-community-release-el7-8.noarch.rpm 2安装源 yum localinstall ...

  7. tarjan算法(求强连通子块,缩点)

    tarjan算法求图中的强连通子图的个数. #include<iostream> #include<stack> #include<queue> #include& ...

  8. LightOJ - 1245 Harmonic Number (II) 求同值区间的和

    题目大意:对下列代码进行优化 long long H( int n ) {    long long res = 0;    for( int i = 1; i <= n; i++ )      ...

  9. apache基础学习

    1,apache是什么? 目前最主流的三个Web服务器是Apache Nginx IIS 2,环境搭建 linux系统安装xampp: 先下载xampp for linux,放在/opt文件夹下,程序 ...

  10. css3 特效拓展 画个安卓机器人

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...