ES5与ES6的研究
今天开始ES5与ES6的研究。
1、什么是ES5与ES6?
就是ECMAScript的第五个版本与第六个版本,那么问题来了,什么是ECMAScript?首先它是一种由Ecma国际通过ECMA-262标准化的脚本程序设计语言,又被称为JavaScript,但其实JavaScript是ECMA-262标准的实现与扩展(说了那么多其实它就是JavaScript的核心语言标准),具体的名字由来及历史可以参照ECMAScript百度百科。学习ECMAScript可以对JavaScript语言中的复杂特性有比较深入的了解。
2、ECMAScript 语言中的实际类型共有六种。
分别为Undefined
、Null
、Boolean
、Number
、String
和 Object
。
Undefined:它只有一个值Undefined,如果一个变量没有通过赋值操作指定一个值,那么该变量的值是 undefined
。
Null
:也只有一个值 null
。
Boolean
:有两个值 true
和 false
。
Number
:始终使用 64 位双精度浮点数来表示数值,Number
类型的值的个数是 264-253+3。个数后面的“+3”表示的是 Number
类型的 3 个特殊值,分别是NAN、+Infinity
和 -Infinity
。NaN
的含义是“不是一个数字(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
”表达式的值是function
。Object
函数既可以直接调用,也可以作为构造函数来创建新的对象。
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的研究的更多相关文章
- React入门 (1)—使用指南(包括ES5和ES6对比)
前言 本篇会简明扼要的介绍一下React的使用方法.代码会用JSX+ES5和JSX+ES6两种方式实现. React简介 React来自Facebook,于2013年开源.至今不断修改完善,现在已经到 ...
- ES5和ES6中对于继承的实现方法
在ES5继承的实现非常有趣的,由于没有传统面向对象类的概念,Javascript利用原型链的特性来实现继承,这其中有很多的属性指向和需要注意的地方. 原型链的特点和实现已经在之前的一篇整理说过了,就是 ...
- JavaScript面向对象轻松入门之概述(demo by ES5、ES6、TypeScript)
写在前面的话 这是一个JavaScript面向对象系列的文章,本篇文章主要讲概述,介绍面向对象,后面计划还会有5篇文章,讲抽象.封装.继承.多态,最后再来一个综合. 说实话,写JavaScript面向 ...
- JavaScript面向对象轻松入门之封装(demo by ES5、ES6、TypeScript)
本章默认大家已经看过作者的前一篇文章 <JavaScript面向对象轻松入门之抽象> 为什么要封装? 封装(Encapsulation)就是把对象的内部属性和方法隐藏起来,外部代码访问该对 ...
- JavaScript面向对象轻松入门之多态(demo by ES5、ES6、TypeScript)
多态(Polymorphism)按字面的意思就是"多种状态",同样的行为(方法)在不同对象上有不同的状态. 在OOP中很多地方都要用到多态的特性,比如同样是点击鼠标右键,点击快捷方 ...
- JavaScript、ES5和ES6的介绍和区别
JavaScript由三部分组成: ECMAScript(核心) DOM(文档对象模型) BOM (浏览器对象模型) ES5(ECMAScript第五个版本) strict模式 严格模式,限制一些用法 ...
- ES5和ES6那些你必须知道的事儿(三)
ES5和ES6那些你必须知道的事儿 ES6新增的东西 一.块级作用域:关键字let,常量const let与var的区别: a.不会进行变量声明提升 b.变量不允许被重复定义 c.变量不允许被删除 d ...
- ES5与ES6的小差异
ES5与ES6的小差异 变量的定义 ES6与ES5的区别 ES5: <script> console.log(username); var username; var username = ...
- 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- ...
随机推荐
- 14.Scrapy Shell
Scrapy终端是一个交互终端,我们可以在未启动spider的情况下尝试及调试代码,也可以用来测试XPath或CSS表达式,查看他们的工作方式,方便我们爬取的网页中提取的数据. 如果安装了 IPyth ...
- 【VS2015】链接器错误link2001
昨天的D3d第一章代码自己打了一遍结果运行报错LINK2001,无法解析外部的MinMain. 解决方法: 项目[属性]→[链接器]→[系统]→[子系统(subsystem)]改为控制台或者留空也可以 ...
- PHP调用API接口实现天气查询功能
天气预报查询接口API,在这里我使用的是国家气象局天气预报接口 使用较多的还有:新浪天气预报接口.百度天气预报接口.google天气接口.Yahoo天气接口等等. 1.查询方式 根据地名查询各城市天气 ...
- /*+ hint*/用法,该如何解决
/*+ use_hash(b, a)*/用法SELECT /*+ use_hash(b, a)*/ 1, NVL(b.AgentWorkGroup, ' '), ................ ...
- luogu P2553 [AHOI2001]多项式乘法
传送门 这题就是普及暴力模拟板子FFT板子,只要把多项式读入进来FFT一下就好了(不会的右转P3803) 重点是读入,我本以为这个字符串里到处都有空格,这里提供一种简单思路: 因为里面可能有空格,所以 ...
- Ubuntu 使用 Android Studio 编译 TensorFlow android demo
https://www.cnblogs.com/dyufei/p/8028218.html https://www.myboxlab.com/topic/detail/714ca2d405414f13 ...
- Mybatis(二)入门程序-通过id查找用户、模糊查找用户、添加用户、删除用户
根据下图myBatis的架构,创建一个使用MyBatis的工程. 一.配置MyBatis 环境(如图) 1.sqlMapConfig.xml 首先,导入jar包(上图右边)并加载路径,然后 ...
- Maven 分模块,启动父工程时异常
1.1 运行方式 Maven方式:命令的 方式1:运行父工程.父工程将各个子模块聚合到一起.将ssh-web打war包发布到tomcat 方式2:直接运行web工程 其他方式:传统的, 部署到to ...
- 人人项目renren-security\git\renren-security的目录下的文件列表
\.git\config; \.git\FETCH_HEAD; \.git\HEAD; \.git\index; \.git\logs\HEAD; \.git\logs\refs\heads\mast ...
- gitlab的配置
一. 管理员配置 gitlab 1. 登录 gitlab 等待 docker 容器启动完成后, 登陆 http://localhost:8080 第一次访问是让我们修改管理员密码.如下所示 初始化 g ...