【ES5新特性一】 严格模式语法变化、全局的JSON对象、编码和解码的方法

前言

  1. ECMAScript 和 JavaScript 的关系

    一个常见的问题是,ECMAScript 和 JavaScript 到底是什么关系?

    要讲清楚这个问题,需要回顾历史。1996 年 11 月,JavaScript 的创造者 Netscape 公司,决定将 JavaScript 提交给标准化组织 ECMA,希望这种语言能够成为国际标准。次年,ECMA 发布 262 号标准文件(ECMA-262)的第一版,规定了浏览器脚本语言的标准,并将这种语言称为 ECMAScript,这个版本就是 1.0 版。

    该标准从一开始就是针对 JavaScript 语言制定的,但是之所以不叫 JavaScript,有两个原因。一是商标,Java 是 Sun 公司的商标,根据授权协议,只有 Netscape 公司可以合法地使用 JavaScript 这个名字,且 JavaScript 本身也已经被 Netscape 公司注册为商标。二是想体现这门语言的制定者是 ECMA,不是 Netscape,这样有利于保证这门语言的开放性和中立性。

    因此,ECMAScript 和 JavaScript 的关系是,前者是后者的规格,后者是前者的一种实现(另外的 ECMAScript 方言还有 JScript 和 ActionScript)。日常场合,这两个词是可以互换的。

    原生JavaScipt案例合集
    JavaScript +DOM基础
    JavaScript 基础到高级
    Canvas游戏开发

  2. JS中的三个部分

    • ECMAScript(核心)

    • 浏览器端拓展

      • BOM(浏览器对象模型)
      • DOM(文档对象模型)
    • 服务器端拓展

      • Node
  3. ES的几个重要版本

    • ES5 : 09年发布

    • ES6(ES2015) : 15年发布, 也称为ECMA2015

    • ES7(ES2016) : 16年发布, 也称为ECMA2016 (变化不大)

      ……

  4. ES5浏览器支持情况

    一般来说除了针对个别特性的特殊说明各大主流浏览器都支持es5包括

    Chrome 13+

    Firefox 4+

    Safari 5.1*

    IE 9*

    注:其中IE9不支持es的严格模式从IE10开始支持。Safari 5.1不支持Function.prototype.bind

一、严格模式下的语法变化

1.1 基本概述

  • 除了正常的运行模式(混杂模式),ES5中添加了第二种运行模式:“严格模式”(strict mode)
  • 顾名思义,这种模式,使得JavaScript在更严格的语法下运行
  • "严格模式"体现了Javascript更合理、更安全、更严谨的发展方向,包括 IE10 在内的主流浏览器,都已经支持它,许多大项目已经开始全面拥抱它。
  • 另一方面,同样的代码,在"严格模式"中,可能会有不一样的运行结果;一些在"正常模式"下可以运行的语句,在"严格模式"下将不能运行。掌握这些内容,有助于更细致深入地理解Javascript,让你变成一个更好的程序员

1.2 设置严格模式的目的

  • 消除JavaSript语法的一些不合理,不严谨之处,减少一些怪异的行为
  • 消除代码运行的一些不安全之处,为代码的安全运行保驾护航
  • 提高编译器效率,增加运行速度
  • 为未来新版本的JavaScript做好铺垫

1.3 如何使用

在全局 或 函数内部,第一条语句定义为

“use strict”; 

注:1. 如果浏览器不支持,只会解析为一条普通的字符串语句,加以忽略,不会有任何副作用

​ 2. 如果这行语句不在第一行,则无效,整个脚本以"正常模式"运行。

1.4 语法和行为改变

1.4.1 必须使用var声明变量

在正常模式中,如果一个变量没有声明就赋值,默认是全局变量。严格模式禁止这种用法,全局变量必须显式声明。

a = 100;
//非严格模式下,输出 a: 100
//严格模式下,a没有声明,抛出一个错误 Error: a is not defined
console.log("a:",a);  

1.4.2 禁止使用八进制数

var num4 = 076;//八进制标识 0
//非严格模式下,使用八进制没有任何位置
//严格模式下,不支持八进制 报错SyntaxError: Octal literals are not allowed in strict mode.

1.4.3 禁止使用arguments.callee

在函数内部,有两个特殊的对象:arguments 和 this。其中, arguments 的主要用途是保存函数参数,但这个对象还有一个名叫 callee 的属性,该属性是一个指针,指向拥有这个 arguments 对象的函数。但在严格模式下,arguments.callee是被禁止使用的。

如下,实现阶乘的递归调用

function factorial(num){if(num == 1){return 1;}else{// return num * factorial(num - 1);//原来阶乘方式//非严格模式下,使用arguments.callee()指向拥有这个arguments对象的函数//严格模式下禁止使用 报错TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to themreturn num * arguments.callee(num - 1);}  
}

1.4.4 禁止使用 delete 删除变量

delete常用于删除对象中的属性;如果使用delete删除一个变量,在正常模式下可以执行通过,但不会删除成功;在严格模式下是禁止这样使用的

// 定义变量a
var a = 100;
// 定义window全局对象的变量b
window.b = 200;
// 以上两个都属于全局变量// 删除操作
// 非严格模式下,可以删除window对象的全局变量b,但是不能删除使用var声明的全局变量a,不会报错
// 严格模式下,禁止使用delete删除变量,一旦使用就会报错:SyntaxError: Delete of an unqualified identifier in strict mode
delete a;
delete b;

1.4.5 禁止自定义函数中的this指向window

(function fn(){//非严格模式下,普通函数中的this指向window//严格模式下,普通函数中的this不再指向window  返回undefinedconsole.log(this);
})();

1.4.6 创建 eval 作用域,即:块级作用域

正常模式下,Javascript语言有两种变量作用域(scope):全局作用域和函数作用域。严格模式创设了第三种作用域:eval作用域。

正常模式下,eval语句的作用域,取决于它处于全局作用域,还是处于函数作用域。严格模式下,eval语句本身就是一个作用域,不再能够生成全局变量了,它所生成的变量只能用于eval内部使用

eval("var x = 10;");  // 非严格模式下,x为10  
// 严格模式下,x没有声明,抛出一个错误  Error: s is not defined
alert(x); 

任意由eval()创建的变量或函数仍呆在eval()里。然而,你可以通过从eval()中返回一个值的方式实现值的传递:

var result = eval("var a = 10,b = 20;a + b");
// 严格模式与非严格模式下都能正常工作(得到30)
console.log("result:",result);//result: 30

1.4.7 width作用域

with(target){}方法:

​ 正常模式下:如果添加了tatget对象,它会把这个对象,当作with要执行的代码体的作用域的最顶端,也就是with会改变作用域链。

​ 作用域链是经过很复杂的情况生成的结构,作用域链改了之后,系统内核会消耗大量的效率去更改作用域链,是会把程序变得非常慢的。

​ 所以,在ES5严格模式下,with方法就不可以再使用了。

"use strict";var num = 10;
var obj = {name:"张三",num:100
}
fn()
function fn(){var num = 1000;// console.log(num);//1000// with(window){//     console.log(num);//10// }with(obj){console.log(num);//100var score = 99;console.log(score);//99}console.log(score);//99
}
// console.log(score);//Error: score is not defined  width(){}中声明的不存在的变量的作用域由它所在的那个作用域决定// 严格模式下不支持 width(){}  报错  SyntaxError: Strict mode code may not include a with statement 

1.4.8 对象不能有重名的属性

正常模式下,如果对象有多个重名属性,最后赋值的那个属性会覆盖前面的值。严格模式下,这属于语法错误**(但是程序目前检测不出来)**

var obj = {a:10,a:100}

1.4.9 函数不能有重名的参数

正常模式下,如果函数有多个重名的参数,可以用arguments[i]读取。严格模式下,这属于语法错误。

"use strict";
//严格模式下报错 Error: Duplicate parameter name not allowed in this context
function fn(a,a,b){return;
}

1.4.10 保留字

为了向将来Javascript的新版本过渡,严格模式新增了一些保留字:implements, interface, let, package, private, protected, public, static, yield。

使用这些词作为变量名将会报错。

//非严格模式下不会报错
//严格模式下报错 Error: Unexpected strict mode reserved word
var let = 10;      

此外,ECMAscript第五版本身还规定了另一些保留字(class, enum, export, extends, import, super),以及各大浏览器自行增加的const保留字,也是不能作为变量名的。

注意:经过测试 IE6,7,8,9 均不支持严格模式

二、提供全局的JSON对象

2.1 JSON 数据格式概念介绍

  • JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于 ECMAScript(欧洲计算机协会制定的 JS 规范)的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。

  • JSON 键值对是用来保存 JS 对象的一种方式,和 JS 对象的写法也大同小异,键/值对组合中的键名写在前面并用双引号 “” 包裹,使用冒号 : 分隔,然后紧接着值:

    {"pId":"0001","pName":"花木扶疏","pAge":"23"
    }
    
  • JSON 与 JS 对象的关系:JSON 是 JS 对象的字符串表示法,它使用文本表示一个 JS 对象的信息,本质是一个字符串。如

    var obj = {a: 'Hello', b: 'World'}; //这是一个对象,注意键名也是可以使用引号包裹的
    var json = '{"a": "Hello", "b": "World"}'; //这是一个 JSON 字符串,本质是一个字符串
    
  • JSON字符串与对象之间的转换方法:

    JSON.stringfy(obj) 将一个对象转换成字符串形式

    JSON.parse(str) 将一个字符串转换成对象

    var json = JSON.stringify({a: 'Hello', b: 'World'}); //结果是 '{"a": "Hello", "b": "World"}'
    var obj = JSON.parse('{"a": "Hello", "b": "World"}'); //结果是 {a: 'Hello', b: 'World'}
    
  • 在 JS 语言中,一切都是对象。因此,任何支持的类型都可以通过 JSON 来表示,例如字符串、数字、对象、数组等。但是对象和数组是比较特殊且常用的两种类型。

    • 对象:对象在 JS 中是使用花括号包裹 {} 起来的内容,数据结构为 {key1:value1, key2:value2, …} 的键值对结构。在面向对象的语言中,key 为对象的属性,value 为对应的值。键名可以使用整数和字符串来表示。值的类型可以是任意类型。
    • 数组:数组在 JS 中是方括号 [] 包裹起来的内容,数据结构为 [“java”, “javascript”, “vb”, …] 的索引结构。在 JS 中,数组是一种比较特殊的数据类型,它也可以像对象那样使用键值对,但还是索引使用得多。同样,值的类型可以是任意类型。

2.2 序列化和反序列化

2.2.1 序列化

  • 概述:将内存中的对象转化为字节序列,用于持久化到磁盘中或者通过网络传输。对象序列化的最主要的用处就是传递和保存对象,保证对象的完整性和可传递性。序列化是把对象转换成有序字节流,以便在网络上传输或者保存在本地文件中。序列化后的字节流保存了对象的状态以及相关的描述信息。序列化机制的核心作用就是对象状态的保存与重建。

  • 语法格式:JSON.stringify(obj/arr,callbackfn) 对象的序列化,js对象(数组)转换为json对象(数组)

  • 参数

    obj 必需;要处理的对象

​ callbackfn 可选;回调函数,函数中有两个参数如下:

​ 第一个参数:属性名

​ 第二个参数:属性值

需求:对象转JSON串的过程中,将 数字字符串 作为 数字保留

2.2.2 反序列化

  • 概述:从字节序列创建对象的过程称为反序列化。序列化对象和平台无关,序列化得到的字节流可以在任何平台反序列化。从文件中或网络上获得序列化的字节流后,根据字节流中所保存的对象状态及描述信息,通过反序列化重建对象。

  • 语法格式:JSON.parse(json,callbackfn) 对象的反序列化,json对象(数组)转换为js对象(数组)

  • 参数

    str 必需;要处理的json字符串

    callbackfn 可选;回调函数,函数中有两个参数如下:

    ​ 第一个参数:属性名

    ​ 第二个参数:属性值

需求:JSON串转对象过程中,将 数字字符串 转为 数字

2.3 编码和解码的方法

2.3.1 概念

函数描述
escape()对字符串进行编码
unescape()对由 escape() 编码的字符串进行解码
encodeURI()把字符串编码为 URI
decodeURI()解码某个编码的 URI
encodeURIComponent()把字符串编码为 URI 组件
decodeURIComponent()解码一个编码的 URI 组件
  1. URI:Uniform Resource Identifiers,通用资源标识符。是一个用于标识某一互联网资源名称的字符串。该种标识允许用户对任何(包括本地和互联网)的资源通过特定的协议进行交互操作。URI由包括确定语法和相关协议的方案所定义。

  2. URL:Uniform Resource Locator,统一资源定位器。它是WWW的统一资源定位标志,就是指网络地址。

    URL由三部分组成:资源类型、存放资源的主机域名、资源文件名。也可认为由4部分组成:协议、主机、端口、路径。

    格式:protocol 😕/ hostname[:port] / path / [;parameters][?query]#fragment ( []为可选项 )

  3. 统一资源定位符(Uniform Resource Locator,URL),统一资源名称(Uniform Resource Name,URN)是URI的子集

    Web上地址的基本形式是URI,它有两种形式:

    • 一种是URL,这是目前URI的最普遍形式。
    • 另一种就是URN,这是URL的一种更新形式,URN不依赖于位置,并且有可能减少失效连接的个数。但是其流行还需假以时日,因为它需要更精密软件的支持。

2.3.2 方法详述

  • escape()

    escape() 是 js 编码函数中最古老的一个。实际上,escape() 不能直接用于 URL 编码,它的真正作用是返回一个字符的 Unicode 编码值。比如“你好”的返回结果是"%u4F60%u597D"。无论网页的原始编码是什么,一旦被 Javascript 编码,就都变为 unicode 字符。也就是说,Javascipt 函数的输入和输出,默认都是Unicode字符。

    javascript:escape("你好");
    //输出 "%u4F60%u597D"
    解码
    javascript:unescape("%u4F60%u597D");
    //输出 "你好"
    
  • encodeURI()

    encodeURI是对整个URL进行编码,因此除了常见的符号以外,对其他一些在网址中有特殊含义的符号“; / ? : @ & = + $ , #”,也不进行编码。编码后,它输出符号的utf-8形式,并且在每个字节前加上%,需要注意的是,它不对单引号’编码。

    encodeURI("https://mp.csdn.net?=k=hello world");
    //输出 "https://mp.csdn.net?=k=hello%20world"
    

    它对应的解码函数是decodeURI()

    decodeURI("https%3A//mp.csdn.net/mdeditor%23Markdown_2");
    //输出 "https://mp.csdn.net?=k=hello world"
    
  • encodeURIComponent()

    与encodeURI()的区别是,它用于对URL的组成部分进行个别编码,而不用于对整个URL进行编码。因此,“; / ? : @ & = + $ , #”,这些在encodeURI()中不被编码的符号,在encodeURIComponent()中统统会被编码,所以encodeURIComponent()相比encodeURI()要更加彻底。至于具体的编码方法,两者是一样。

    encodeURIComponent("https://mp.csdn.net?=k=hello world");
    //输出 "https%3A%2F%2Fmp.csdn.net%3F%3Dk%3Dhello%20world"
    

    它对应的解码函数是decodeURIComponent()

    decodeURIComponent("https%3A%2F%2Fmp.csdn.net%3F%3Dk%3Dhello%20world");
    //输出 "https://mp.csdn.net?=k=hello world"
    

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/60343.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

微服务dubbo和nexus

微服务是一种软件开发架构风格,它将一个应用程序拆分成一组小型、独立的服务,每个服务都可以独立部署、管理和扩展。每个服务都可以通过轻量级的通信机制(通常是 HTTP/REST 或消息队列)相互通信。微服务架构追求高内聚、低耦合&am…

系列十五、Spring5编程式事务

一、业务代码 1.1、pom <dependencies><!-- https://mvnrepository.com/artifact/mysql/mysql-connector-java --><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>8.0.26<…

Linux--VMware的安装和Centos

一、VMware和Linux的关系 二、VMware的安装 VM_ware桌面虚拟机 最新中文版 软件下载 (weizhen66.cn) VMware-Workstation-Lite-16.2.2-19200509-精简安装注册版.7z - 蓝奏云 如果安装不成功&#xff0c;则设置BIOS 三、在VMware中加入Centos 下载地址&#xff1a; CentOS-…

Linux 忘记密码解决方法

很多朋友经常会忘记Linux系统的root密码&#xff0c;linux系统忘记root密码的情况该怎么办呢&#xff1f;重新安装系统吗&#xff1f;答案是不需要进入单用户模式更改一下root密码即可。 步骤如下&#xff1a; 重启linux系统 3 秒之内要按一下回车&#xff0c;出现如下界面 …

unity-AI自动导航

unity-AI自动导航 给人物导航 一.地形创建 1.首先我们在Hierarchy面板中创建一个地形对象terrian&#xff0c;自行设定地形外貌&#xff0c;此时我们设置一个如下的地形外观。 二.创建导航系统 1.在主人公的Inspector、面板中添加Nav Mesh Agent &#xff08;导航网格代理&…

Linux操作系统--linux概述

1.Linux概述 Linux&#xff0c;全称GNU/Linux&#xff0c;是一种免费使用和自由传播的类UNIX操作系统&#xff08;OS&#xff09;。简单的说就是一种操作系统。在日常中常见的操作系统有一下三种: 2.linux起源和背景 (1).linux的诞生 linux操作系统是由李纳斯托瓦兹&#xf…

C++ 多重继承

所谓多重继承就是一个儿子有好几个爹&#xff0c;然后一个人继承了这几个爹的财产。只需注意构造顺序即可&#xff0c;反正析构的顺序也是一样的。 #include <iostream> #include <string.h> using namespace std;class base_a { public:base_a(const char *str){…

二十、观察者模式

一、什么是观察者模式 观察者&#xff08;Observer&#xff09;模式的定义&#xff1a;指多个对象间存在一对多的依赖关系&#xff0c;当一个对象的状态发生改变时&#xff0c;所有依赖于它的对象都得到通知并被自动更新。这种模式有时又称作发布-订阅模式、模型-视图模式&…

2007-2022年上市公司污染排放数据/2007-2022年上市公司污染排放水平、污染排放量数据

2007-2022年上市公司污染排放数据/2007-2022年上市公司污染排放水平、污染排放量数据 1、时间&#xff1a;2007-2022年 2、指标&#xff1a;证券代码、year、化学需氧量、氨氮排放量、总氮、总磷、水体综合污染当量对数、二氧化硫、氮氧化物、烟尘、空气综合污染当量对数、总…

代码中的3种错误-思考及应对方法

我们聊到了代码中的3中错误。今天我想在具体的代码上讨论如何应对这3中错误。 这段代码很普通&#xff0c;就是在浏览器中自动下载文件&#xff0c;代码如下&#xff1a; const link document.createElement(a) link.href dataUrl link.download output.png link.click()这…

静态类方法的同步

由于在调用静态方法时&#xff0c;对象实例不一定被创建。因此&#xff0c;就不能使用this来同步静态方法&#xff0c;而必须使用Class对象来同步静态方法。代码如下&#xff1a; 通过synchronized块同步静态方法 public class StaticSyncBlock { public static void…

还只是听说过Generator函数?那就来全面了解它吧

Generator函数 基本概念 Generator函数时ES6提供的一种异步编程解决方案&#xff1b; 一、语法上&#xff1a; 可以理解为一个状态机&#xff0c;封装了多个内部状态执行Generator函数会返回一个遍历器对象 二、形式上的特点&#xff1a; function命令和函数名之间有一个…

word表格左侧边线明明有,但却不显示

如题&#xff0c;解决方法&#xff1a; 方案一&#xff1a; 1&#xff09;选中表格 2&#xff09;布局菜单--->自动调整 3&#xff09;自动调整中&#xff0c;选择“根据窗口自动调整表格” 4&#xff09;表格左侧边线就显示出来了。 方案二&#xff1a;把表格粘贴到新…

Kubernetes技术--Kubernetes架构组件以及核心概念

1.Kubernetes集群架构组件 搭建一个Kubernetes环境集群,其架构如下所示: 内容详解: Master:控制节点,指派任务、决策 Node:工作节点,实际干活的。 Master组件内容:

国产芯片设备达到3纳米,还打入台积电,美日荷被彻底赶出市场

由于众所周知的原因&#xff0c;荷兰和日本的光刻机对中国供应面临限制&#xff0c;其他芯片设备和材料也受到很大的限制&#xff0c;这促使国产芯片产业链积极完善&#xff0c;以实现纯国产芯片工艺&#xff0c;虽然在光刻机方面还稍微落后&#xff0c;不过有一项国产芯片设备…

day-03 基于TCP的服务器端/客户端

一.理解TCP和UDP TCP&#xff08;Transmission Control Protocol&#xff09;和UDP&#xff08;User Datagram Protocol&#xff09;是两种常见的传输层协议&#xff0c;用于在计算机网络中提供可靠的数据传输。 1.TCP&#xff1a; 连接导向&#xff1a;TCP是一种面向连接的…

Android深思如何防止快速点击

前言 其实快速点击是个很好解决的问题&#xff0c;但是如何优雅的去解决确是一个难题&#xff0c;本文主要是记录一些本人通过解决快速点击的过程中脑海里浮现的一些对这个问题的深思。 作者&#xff1a;流浪汉kylin 链接&#xff1a;https://juejin.cn/post/7197337416096055…

Cookie中的SameSite标示是什么

目录 背景介绍 原理 MDN上有比较完整的描述 如何确定cookie是否已经设置相关属性 背景介绍 SameSit

Numerical Calculation 数值计算

Numerical Calculation 数值计算 数值计算第一次实验(C语言版) C语言编程常用数值计算的高性能实现 /* 高位全0&#xff0c;低N位全1 */ #define Low_N_Bits_One(N) ((1<<N) -1)/* 高位全1&#xff0c;低N位全0 */ #define Low_N_Bits_Zero(N) (~((1<<N)…

Mac 卸载 PyCharm 方法

Mac 系统下 PyCharm 没有一键卸载程序&#xff0c;也没有完全卸载的插件&#xff0c;若要彻底删除&#xff0c;除了在应用&#xff08;Application&#xff09;里删除 PyCharm 到垃圾桶外&#xff0c;还需要在终端&#xff08;Terminal&#xff09;执行删除相应的文件及文件夹。…