今天开始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 函数的使用示例
  1. var obj = {};
  2. Object.defineProperty(obj, 'val', {}); // 创建一个新属性,特性为默认值
  3. obj.val = 1;
  4.  
  5. Object.defineProperty(obj, 'CONSTANT', {value : 32, writable : false}); // 创建一个只读属性
  6. obj.CONSTANT = 16; // 对属性的修改是无效的,但是不会抛出错误
  7.  
  8. Object.defineProperty(obj, "newVal", {enumerable: true});
  9. for (var key in obj) {
  10. console.log(key); // 可以枚举出 newVal
  11. }
  12.  
  13. var initValue = 0;
  14. Object.defineProperty(obj, "initValue", {
  15. get : function() {
  16. return initValue;
  17. },
  18. set : function(val) {
  19. if (val > 0) {
  20. initValue = val;
  21. }
  22. }
  23. });

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

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

5、函数

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

6、构造函数案例

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

7、构造函数案例  

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

8、bind函数的使用

  
  1. var obj = {
  2. name : "alex"
  3. };
  4.  
  5. function func() {
  6. console.log(this.name);
  7. }
  8.  
  9. var func1 = func.bind(obj);
  10. func1(); // 输出 alex
  11.  
  12. function add(a, b) {
  13. return a + b;
  14. }
  15.  
  16. var addBy5 = add.bind(this, 5);
  17. addBy5(3); // 值为 8,只有一个形式参数

数组

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

  1. var array = [1, 2, 3, 4, 5];
  2. array.indexOf(3); // 值为 2
  3. array.lastIndexOf(4); // 值为 3
  4. array.every(function(value, index, arr) {
  5. return value % 2 === 0;
  6. }); // 值为 false
  7. array.some(function(value, index, arr) {
  8. return value % 2 === 0;
  9. }); // 值为 true
  10. array.forEach(function(value, index, arr) {
  11. console.log(value);
  12. });
  13. array.map(function(value, index, arr) {
  14. return value * 2;
  15. }); // 值为 [2, 4, 6, 8, 10]
  16. array.filter(function(value, index, arr) {
  17. return value % 2 === 0;
  18. }); // 值为 [2, 4]
  19. array.reduce(function(preValue, value, index, arr) {
  20. return preValue + value;
  21. }); // 值为 15
  22. array.reduceRight(function(preValue, value, index, arr) {
  23. return preValue * value;
  24. }); // 值为 120

JSON

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

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

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

  1. var user = {
  2. name : 'Alex',
  3. password : 'password',
  4. email : 'alex@example.org'
  5. };
  6.  
  7. JSON.stringify(user);
  8. JSON.stringify(user, ['name']); // 输出结果为“{"name":"Alex"}”
  9. JSON.stringify(user, function(key, value) {
  10. if (key === 'email') {
  11. return '******';
  12. }
  13. if (key === 'password') {
  14. return undefined;
  15. }
  16. return value;
  17. }); // 输出结果为“{"name":"Alex","email":"******"}”
  18. JSON.stringify(user, null, 4);

严格模式

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

12、严格模式下 this 的值

  1. "use strict";
  2. function func() {
  3. console.debug(typeof this); // 输出为 number
  4. }
  5.  
  6. 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. 14.Scrapy Shell

    Scrapy终端是一个交互终端,我们可以在未启动spider的情况下尝试及调试代码,也可以用来测试XPath或CSS表达式,查看他们的工作方式,方便我们爬取的网页中提取的数据. 如果安装了 IPyth ...

  2. 【VS2015】链接器错误link2001

    昨天的D3d第一章代码自己打了一遍结果运行报错LINK2001,无法解析外部的MinMain. 解决方法: 项目[属性]→[链接器]→[系统]→[子系统(subsystem)]改为控制台或者留空也可以 ...

  3. PHP调用API接口实现天气查询功能

    天气预报查询接口API,在这里我使用的是国家气象局天气预报接口 使用较多的还有:新浪天气预报接口.百度天气预报接口.google天气接口.Yahoo天气接口等等. 1.查询方式 根据地名查询各城市天气 ...

  4. /*+ hint*/用法,该如何解决

    /*+ use_hash(b, a)*/用法SELECT /*+ use_hash(b, a)*/  1,  NVL(b.AgentWorkGroup, ' '),  ................ ...

  5. luogu P2553 [AHOI2001]多项式乘法

    传送门 这题就是普及暴力模拟板子FFT板子,只要把多项式读入进来FFT一下就好了(不会的右转P3803) 重点是读入,我本以为这个字符串里到处都有空格,这里提供一种简单思路: 因为里面可能有空格,所以 ...

  6. Ubuntu 使用 Android Studio 编译 TensorFlow android demo

    https://www.cnblogs.com/dyufei/p/8028218.html https://www.myboxlab.com/topic/detail/714ca2d405414f13 ...

  7. Mybatis(二)入门程序-通过id查找用户、模糊查找用户、添加用户、删除用户

    根据下图myBatis的架构,创建一个使用MyBatis的工程.       一.配置MyBatis 环境(如图) 1.sqlMapConfig.xml 首先,导入jar包(上图右边)并加载路径,然后 ...

  8. Maven 分模块,启动父工程时异常

    1.1 运行方式 Maven方式:命令的 方式1:运行父工程.父工程将各个子模块聚合到一起.将ssh-web打war包发布到tomcat 方式2:直接运行web工程 其他方式:传统的,   部署到to ...

  9. 人人项目renren-security\git\renren-security的目录下的文件列表

    \.git\config; \.git\FETCH_HEAD; \.git\HEAD; \.git\index; \.git\logs\HEAD; \.git\logs\refs\heads\mast ...

  10. gitlab的配置

    一. 管理员配置 gitlab 1. 登录 gitlab 等待 docker 容器启动完成后, 登陆 http://localhost:8080 第一次访问是让我们修改管理员密码.如下所示 初始化 g ...