ECMAScript5

最新推荐文章于 2022-05-05 16:36:31 发布
最新推荐文章于 2022-05-05 16:36:31 发布
阅读量664 收藏 2
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/IMCLT/article/details/105722776
版权

ECMAScript5

1.什么是ES5

作为ECMAScript第五个版本（第四版因为过于复杂废弃了），浏览器支持情况可看图，增加特性如下。
浏览器支持情况

2.strict模式

严格模式，限制一些用法，‘use strict’;
“use strict” 指令在 JavaScript 1.8.5 (ECMAScript5) 中新增。
它不是一条语句，但是是一个字面量表达式，在 JavaScript 旧版本中会被忽略。
“use strict” 的目的是指定代码在严格条件下执行。
严格模式下你不能使用未声明的变量。

支持严格模式的浏览器:
Internet Explorer 10 +、 Firefox 4+ Chrome 13+、 Safari 5.1+、 Opera 12+。

实例1

"use strict";
myFunction();
function myFunction() {
    y = 3.14;   // 报错 (y 未定义)
}

实例2

x = 3.14;       // 不报错
myFunction();

function myFunction() {
   "use strict";
    y = 3.14;   // 报错 (y 未定义)
}

2.1为什么使用严格模式

消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;

  • 消除代码运行的一些不安全之处，保证代码运行的安全
  • 提高编译器效率，增加运行速度
  • 为未来新版本的Javascript做好铺垫
    "严格模式"体现了Javascript更合理、更安全、更严谨的发展方向，包括IE 10在内的主流浏览器，都已经支持它，许多大项目已经开始全面拥抱它。

另一方面，同样的代码，在"严格模式"中，可能会有不一样的运行结果；一些在"正常模式"下可以运行的语句，在"严格模式"下将不能运行。掌握这些内容，有助于更细致深入地理解Javascript，让你变成一个更好的程序员

2.2严格模式的限制

2.2.1 不允许使用未声明的变量

"use strict";
x = 3.14;                // 报错 (x 未定义)

2.2.2 对象也是一个变量

"use strict";
x = {p1:10, p2:20};      // 报错 (x 未定义)

2.2.3 不允许删除变量或对象

"use strict";
var x = 3.14;
delete x;                // 报错

2.2.4 不允许删除函数

"use strict";
function x(p1, p2) {};
delete x;                // 报错

2.2.5 不允许变量重名

"use strict";
function x(p1, p1) {};   // 报错

2.2.6 不允许使用八进制

"use strict";
var x = 010;             // 报错

2.2.7 不允许使用转义字符

"use strict";
var x = \010;            // 报错

2.2.8 不允许使用转义字符

"use strict";
var x = \010;            // 报错

2.2.9 不允许对只读属性赋值

"use strict";
var obj = {};
Object.defineProperty(obj, "x", {value:0, writable:false});
obj.x = 3.14;            // 报错

2.2.10 不允许对一个使用getter方法读取的属性进行赋值

"use strict";
var obj = {get x() {return 0} };
obj.x = 3.14;            // 报错

2.2.11 不允许删除一个不允许删除的属性

"use strict";
delete Object.prototype; // 报错

2.2.12 变量名不能使用 “eval” 字符串

"use strict";
var eval = 3.14;         // 报错

2.2.13 变量名不能使用 “arguments” 字符串

"use strict";
var arguments = 3.14;    // 报错

2.2.14 禁止this关键字指向全局对象

function f(){
    return !this;
} 
// 返回false，因为"this"指向全局对象，"!this"就是false
function f(){ 
    "use strict";
    return !this;
} 
// 返回true，因为严格模式下，this的值为undefined，所以"!this"为true。

3. Array增加方法

3.1 every

定义和用法

every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）
every() 方法使用指定函数检测数组中的所有元素

  • 如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测
  • 如果所有元素都满足条件，则返回 true
  • every() 不会对空数组进行检测
  • every() 不会改变原始数组

语法

array.every(function(currentValue,index,arr), thisValue)

参数说明

在这里插入图片描述

实例

var ages = [32, 33, 16, 40];
function checkAdult(age) {
    return age >= 18;
}
function myFunction() {
    document.getElementById("demo").innerHTML = ages.every(checkAdult);
}

输出结果为 false

3.2 some

定义和用法

some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。
some() 方法会依次执行数组的每个元素：

  • 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测
  • 如果没有满足条件的元素，则返回false
  • some() 不会对空数组进行检测
  • some() 不会改变原始数组

语法

array.some(function(currentValue,index,arr),thisValue)

参数说明

在这里插入图片描述

实例

检测数组中是否有元素大于 18

var ages = [3, 10, 18, 20];

function checkAdult(age) {
    return age >= 18;
}

function myFunction() {
    document.getElementById("demo").innerHTML = ages.some(checkAdult);
}

输出结果为 true

3.3 forEach

定义和用法

forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数
forEach() 对于空数组是不会执行回调函数的

array.forEach(function(currentValue, index, arr), thisValue)

参数

在这里插入图片描述

实例

列出数组的每个元素

<button onclick="numbers.forEach(myFunction)">点我</button>
<p id="demo"></p>
<script>
demoP = document.getElementById("demo");
var numbers = [4, 9, 16, 25];
function myFunction(item, index) {
    demoP.innerHTML = demoP.innerHTML + "index[" + index + "]: " + item + "<br>"; 
}
</script>

输出结果

index[0]: 4
index[1]: 9
index[2]: 16
index[3]: 25

3.4 filter

定义和用法

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素
filter() 不会对空数组进行检测
filter() 不会改变原始数组

语法

array.filter(function(currentValue,index,arr), thisValue)

参数说明

在这里插入图片描述

实例

返回数组 ages 中所有元素都大于 18 的元素

var ages = [32, 33, 16, 40];
function checkAdult(age) {
    return age >= 18;
}
function myFunction() {
    document.getElementById("demo").innerHTML = ages.filter(checkAdult);
}

输出结果为 32,33,40

3.5 indexOf

定义和用法

indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置
indexOf() 方法对大小写敏感
如果要检索的字符串值没有出现，则该方法返回 -1

语法

stringObject.indexOf(searchvalue,fromindex)
在这里插入图片描述

实例

在本例中，我们将在 “Hello world!” 字符串内进行不同的检索

<script type="text/javascript">
var str="Hello world!"
document.write(str.indexOf("Hello") + "<br />")
document.write(str.indexOf("World") + "<br />")
document.write(str.indexOf("world"))
</script>

以上代码的输出 0 -1 6

3.6 lastIndexOf

定义和用法

lastIndexOf() 方法可返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索

语法

stringObject.lastIndexOf(searchvalue,fromindex)
在这里插入图片描述

实例

在本例中，我们将在 “Hello world!” 字符串内进行不同的检索

<script type="text/javascript">
var str="Hello world!"
document.write(str.lastIndexOf("Hello") + "<br />")
document.write(str.lastIndexOf("World") + "<br />")
document.write(str.lastIndexOf("world"))
</script>

以上代码的输出 0 -1 6

3.7 isArray

定义和用法

isArray() 方法用于判断一个对象是否为数组。
如果对象是数组返回 true，否则返回 false。

语法

Array.isArray(obj)
在这里插入图片描述

实例

判断对象是否为数组

function myFunction() {
    var fruits = ["Banana", "Orange", "Apple", "Mango"];
    var x = document.getElementById("demo");
    x.innerHTML = Array.isArray(fruits);
}

3.8 map

定义和用法

map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
map() 方法按照原始数组元素顺序依次处理元素。
注意： map() 不会对空数组进行检测。
注意： map() 不会改变原始数组。

语法

array.map(function(currentValue,index,arr), thisValue)

在这里插入图片描述

实例

返回一个数组，数组中元素为原始数组的平方根

var numbers = [4, 9, 16, 25];
function myFunction() {
    x = document.getElementById("demo")
    x.innerHTML = numbers.map(Math.sqrt);
}

输出结果为 2,3,4,5

3.9 reduce

定义和用法

reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。
reduce() 可以作为一个高阶函数，用于函数的 compose。
注意: reduce() 对于空数组是不会执行回调函数的。

语法

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

在这里插入图片描述

实例

计算数组元素相加后的总和

var numbers = [65, 44, 12, 4];
function getSum(total, num) {
    return total + num;
}
function myFunction(item) {
    document.getElementById("demo").innerHTML = numbers.reduce(getSum);
}

输出结果 125

3.10 reduceRight

定义和用法

reduceRight() 方法的功能和 reduce() 功能是一样的，不同的是 reduceRight() 从数组的末尾向前将数组中的数组项做累加。
注意: reduce() 对于空数组是不会执行回调函数的。

语法

array.reduceRight(function(total, currentValue, currentIndex, arr), initialValue)

在这里插入图片描述

实例

计算数组元素相加后的总和

var numbers = [65, 44, 12, 4];
function getSum(total, num) {
    return total + num;
}
function myFunction(item) {
    document.getElementById("demo").innerHTML = numbers.reduceRight(getSum);
}

输出结果 125

还有其他方法

Function.prototype.bind、String.prototype.trim、Date.now

4.Object方法

Object.getPrototypeOf
Object.create
Object.getOwnPropertyNames
Object.defineProperty
Object.getOwnPropertyDescriptor
Object.defineProperties
Object.keys
Object.preventExtensions / Object.isExtensible
Object.seal / Object.isSealed
Object.freeze / Object.isFrozen

IMCLT
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript权威指南-ECMAScript5.pdf
04-24
本书适合那些希望学习Web编程语言的初、中级程序员和希望精通JavaScript的JavaScript程序员阅读。
ECMAScript 5 - JavaScript 5
吴钦飞
06-17 718
ECMAScript 5 - JavaScript 5 1. ECMAScript 5 是什么 ECMAScript 5 也被称为 ES5 和 ECMAScript 2009。 本章介绍 ES5 的一些最重要的特性。 2. ECMAScript 5 的新特性 “use strict” 指令 String.prototype.trim() Array.isArray() Array.prototype.forEach() Array.prototype.map() Array.prototype.filte
ECMAScript5(ES5)
katsuki_chan的博客
12-15 1198
加载事件、严格模式、JSON对象方法、获取元素节点、Function方法bind、class列表属性、data自定义属性
wps js宏二维数组去重
Ghostacer的博客
05-05 2051
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 前言 总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码如下（示例）： .
es5:ecmascript 5 中文版 + es合集
05-18
es5 ecmascript 5 中文版 + es合集 关于部分不是规范的一部分，而是我补充的，有一些话需要说在前面，本规范原出处为
ECMAScript 5中的属性描述符详解
09-03
主要介绍了ECMAScript 5中的属性描述符详解,本文讲解了Object.defineProperty、数据描述符、存取描述符、获取属性描述符、对象控制等内容,需要的朋友可以参考下
ECMAScript5(ES5)中bind方法使用小结
09-03
主要介绍了ECMAScript5(ES5)中bind方法使用小结,bind和call以及apply一样,都是可以改变上下文的this指向的,需要的朋友可以参考下
JS模拟实现ECMAScript5新增的数组方法
12-11
ECMAScript5 新增了十个数组方法，这些方法只有在ie9及以上浏览器中可以被使用，下面是对于这些方法的模拟实现。 一、Array.isArray(element) 　该方法用于判断传入的对象是否为数组类型，返回true和false。 Array....
ecmascript5.1标准-中文版
12-06
ecmascript 5.1版本标准（中文版），详细规定了JavaScript的各种标准
ECMAScript5.1中文版
10-10
js 学习必备。 ECMAScript5.1中文版
ECMAScript 5.1中文版
01-22
ECMAScript 5.1 中文版，内容来自ecmascript.cn，做成的单文件版本。
ECMAScript5.1规范中文版
02-14
ECMAScript5.1规范中文版
js数组输出表单
仨胖的博客
11-17 2265
暂放
第23章　ECMAScript 5
唯美清泠
11-17 212
第23章　ECMAScript 5 ECMAScript 5.1（或ECMAScript 5）是ECMAScript标准最新修正。与HTML5规范进程本质类似，ECMAScript 5通过对现有JavaScript方法添加语句和原生ECMAScript对象做合并实现标准化。ECMAScript 5还引入了一个语法的严格变种，被称为严格模式（strict mode）。本章将介绍ECMAScript 5有用的改变和新特性。 ECMAScript 5完整列表可以参考：官方ECMAScript语言规范附录D和E
ECMAScript5基础知识梳理
刘鹏的个人博客
08-28 552
Javascript介绍 浏览器（网页） 手机号 email 固定电话 地址 身份证 xxx … | 提交 | 后台（校验）跳转（jsp） IE chrome safari firefox Java 语法 sun 解释器 jdk sun Javascript 网景 firefox script 解释器 语法 IE script 解释器 语法 … 网易严选 脚本 校...
Js数组详解
qq_38256266的博客
06-15 305
数组1、概念2、数组的定义3、数组元素的获取4、数组的遍历5、数组的常见函数6、二维数组 1、概念 一组数据的有序的集合 (可以存储任意数据类型的值)。 2、数组的定义 直接定义 //直接用[]创建 var arr = [12,34,1,43,12,3] console.log(arr); //[]里可以不带参数 var a4=[]; a4[0] = 1; a4[1] = 5; console.log(a4); 通过构造函数来创建 //通过new Array()来创建 var arr1 =
TS错误信息列表
热门推荐
Jinmy的博客
07-11 9万+
错误信息列表code类型英文描述中文描述1002错误Unterminated string literal.未终止的字符串文本。1003错误Identifier expected.应为标识符。1005错误'{0}' expected.应为“{0}”。1006错误A file cannot have a reference to itself.文件不能引用自身。1009错误Trailing comm...
JS 编写inherit()函数，它返回了一个继承自原型对象p的属性的新对象，这里使用ECMAScript 5中的Object.create()函数(如果存在的话)，如果不存在Object.create()，则退化使用其他方法
最新发布
05-02
```javascript function inherit(p) { if (p == null) throw TypeError(); // p不能为空 // 如果Object.create()存在，则使用它 if (Object.create) return Object.create(p); // 否则，使用其他方法 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值