Javascript 简明教程
JavaScript - ES5
JavaScript ES5 ，也称为 ECMAScript 5，于 2009 年发布。它是 JavaScript 的首次重大修订。它引入了许多新功能，包括 getters 和 setters ，以及“ use strict ”指令。ES5 已经比以前的 JavaScript 版本有了显著的改进。ES5 中引入的新功能使代码更强大、更简洁，更易于维护。
New Added Features in JavaScript ES5
以下是 JavaScript ES5 版本中添加的新方法、功能等。
-
Array every()
-
Array filter()
-
Array forEach()
-
Array isArray()
-
Array indexOf()
-
Array lastIndexOf()
-
Array map()
-
Array reduce()
-
Array reduceRight()
-
Array some()
-
Date now()
-
Date toJSON()
-
Date toISOString()
-
Function bind()
-
JSON parse()
-
JSON stringify()
-
Multiline strings
-
Object methods
-
Object defineProperty()
-
Property getters and setters
-
保留字作为属性名
-
"use strict"
-
String[number] access
-
String trim()
-
Trailing commas
这里，我们详细解释了每项特性。
JavaScript Array every()
array.every() 方法检查数组的每个元素是否遵循特定条件。
Example
在下面的代码中，我们使用 array.every() 方法来检查数组的每个元素是否是偶数。
<html>
<body>
<div id = "output"> All elements of the array are even? </div>
<script>
const arr = [10, 20, 30, 40, 2, 6];
function even(element) {
return element % 2 == 0;
}
document.getElementById("output").innerHTML += arr.every(even);
</script>
</body>
</html>All elements of the array are even? trueJavaScript Array filter()
array.filter() 过滤数组元素并在新数组中获取过滤元素。
Example
在下面的代码中，我们过滤可被 10 整除的数组元素。
<html>
<body>
<div id = "output"> Elements divisible by 10 are </div>
<script>
const arr = [10, 20, 8, 30, 40, 2, 6];
function divide(element) {
return element % 10 == 0;
}
document.getElementById("output").innerHTML += arr.filter(divide);
</script>
</body>
</html>Elements divisible by 10 are 10,20,30,40JavaScript Array forEach()
array.forEach() 遍历数组元素。它类似于 JavaScript 中的循环。
Example
下面的代码使用 array.forEach() 方法遍历数组并在新行中打印每个数组元素。
<html>
<body>
<div id="output"> </div>
<script>
const arr = ["TATA", "Honda", "Toyota", "Maruti"];
arr.forEach(traverse); // Using the array.forEach() method
function traverse(element) {
document.getElementById("output").innerHTML += element + "<br>";
}
</script>
</body>
</html>TATA
Honda
Toyota
MarutiJavaScript Array map()
array.map() 方法返回一个新的数组，其中映射了当前的数组元素与新的数组元素。
Example
下面的代码使用 map() 方法创建一个新数组，该数组中的元素是原数组元素的两倍。
<html>
<body>
<div id = "output"> The new array is </div>
<script>
const arr = [1, 2, 3, 4, 5];
function doubleEle(element) {
return element * 2;
}
document.getElementById("output").innerHTML += arr.map(doubleEle);
</script>
</body>
</html>The new array is 2,4,6,8,10JavaScript Array reduce()
array.reduce() 方法将数组简化为一个值。
Example
下面的代码使用 array.reduce() 方法将数组所有元素相乘。
<html>
<body>
<div id = "output">The multiplication result of the array elements is </div>
<script>
const arr = [1, 2, 3, 4, 5];
function multiplier(multiplication, element) {
return multiplication * 2;
}
document.getElementById("output").innerHTML += arr.reduce(multiplier);
</script>
</body>
</html>The multiplication result of the array elements is 16JavaScript Array reduceRight()
array.reduceRight() 方法不是从左到右，而是从右到左简化数组。
Example
<html>
<body>
<div id = "output">The merged array elements in the reverse order is: </div>
<script>
const arr = ["How", "are", "you", "doing?"];
function merge(res, element) {
return res += element + " ";
}
document.getElementById("output").innerHTML += arr.reduceRight(merge);
</script>
</body>
</html>The merged array elements in the reverse order is: doing?you are HowJavaScript Array some()
array.some() 方法用于检查数组中是否有一些元素遵循特定条件。
Example
下面的代码检查数组是否包含一个或多个长度大于 3 的字符串。
<html>
<body>
<div id = "output">Array contains one or more strings with lengths greater than 3? </div>
<script>
const arr = ["How", "are", "you", "doing?"];
function func_len(element) {
return element.length > 3;
}
document.getElementById("output").innerHTML += arr.some(func_len);
</script>
</body>
</html>Array contains one or more strings with lengths greater than 3? trueJavaScript Date toJSON()
date.toJSON() 方法将日期转换为 JSON 日期格式。JSON 日期格式与 ISO 格式相同。ISO 格式为 YYYY-MM-DDTHH:mm:ss.sssZ。
JavaScript Date toISOString()
date.toISOString() 方法用于将日期转换为 ISO 标准格式。
Example
下面的代码以标准 ISO 字符串格式打印当前日期。
<html>
<body>
<div id = "output">The current date in ISO string format is: </div>
<script>
const date = new Date();
document.getElementById("output").innerHTML += date.toISOString();
</script>
</body>
</html>The current date in ISO string format is: 2023-12-18T06:13:50.159ZJavaScript Function bind()
bind() 方法用于从另一个对象借用方法。
Example
以下代码中，bird 对象包含 printInfo() 方法和属性。animal 对象仅包含 name 和 category 属性。
我们使用 bind() 方法为 animal 对象从 bird 对象借用 printInfo() 方法。在输出中，printInfo() 方法打印 animal 对象的信息。
<html>
<body>
<div id = "result"> </div>
<script>
const output = document.getElementById("result");
const bird = {
name: "Parrot",
category: "Bird",
printInfo() {
return "The name of the " + this.category + " is - " + this.name;
}
}
const animal = {
name: "Lion",
category: "Animal",
}
const animalInfo = bird.printInfo.bind(animal);
output.innerHTML += animalInfo();
</script>
</body>
</html>The name of the Animal is - LionJavaScript JSON parse()
JSON.parse() 方法用于将字符串转换为 JSON 对象。
Example
下面给出的代码将字符串转换为对象。此外，我们还在输出中打印了对象属性的值。
<html>
<body>
<div id = "demo"> </div>
<script>
const output = document.getElementById("demo");
const objStr = '{"name":"Sam", "age":40, "city":"Delhi"}';
const obj = JSON.parse(objStr);
output.innerHTML += "The parsed JSON object values are - <br>";
output.innerHTML += "name : " + obj.name + "<br>";
output.innerHTML += "age : " + obj.age + "<br>";
output.innerHTML += "city: " + obj.city + "<br>";
</script>
</body>
</html>The parsed JSON object values are -
name : Sam
age : 40
city: DelhiJavaScript JSON stringify()
JSON.stringify() 方法将对象转换为字符串。
Example
下面的代码使用 JSON.stringify() 方法将 obj 对象转换为字符串。
<html>
<body>
<div id = "output">The object in the string format is - </div>
<script>
const obj = {
message: "Hello World!",
messageType: "Welcome!",
}
document.getElementById("output").innerHTML += JSON.stringify(obj);
</script>
</body>
</html>The object in the string format is - {"message":"Hello World!","messageType":"Welcome!"}JavaScript Object Methods
在 ES5 中，对象相关的方法被添加进来，用于操作和保护对象。
Methods to Manipulate the Object
Sr.No. |
Method |
Description |
1 |
create() |
要创建一个新对象，使用现有对象作为原型。 |
2 |
defineProperty() |
克隆对象以将与它相关的属性新添到其原型中。 |
3 |
defineProperties() |
将属性定义到某个特定对象并获取更新后的对象。 |
4 |
getOwnPropertyDescriptor() |
获取对象特性的属性描述符。 |
5 |
getOwnPropertyNames() |
To get object properties. |
6 |
getPrototypeOf() |
获取对象的原型。 |
7 |
keys() |
以数组格式获取对象的所有键。 |
JavaScript Object defineProperty()
可以使用 Object.defineProperty() 方法来定义对象的单个属性，或更新属性值和元数据。
Example
下面代码包含汽车对象的品牌、车型和价格属性。我们使用 defineProperty() 方法来定义对象中的 gears 属性。
<html>
<body>
<div id = "output">The obj object is - </div>
<script>
const car = {
brand: "Tata",
model: "Nexon",
price: 1000000,
}
Object.defineProperty(car, "gears", {
value: 6,
writable: true,
enumerable: true,
configurable: true
})
document.getElementById("output").innerHTML += JSON.stringify(car);
</script>
</body>
</html>The obj object is - {"brand":"Tata","model":"Nexon","price":1000000,"gears":6}JavaScript Property getters and setters
getters 和 setters 用于安全地访问和更新对象属性。
Example
在下面的代码中，watch 对象包含品牌和表盘属性。我们已经使用 get 关键字定义了 getter 来访问品牌属性值。
此外，我们还使用 set 关键字定义了 setter，以将表盘属性值设定为大写。
通过这种方式，可以保护更新后的对象属性值。
<html>
<body>
<div id = "demo"> </div>
<script>
const output = document.getElementById("demo");
const watch = {
brand: "Titan",
dial: "ROUND",
// Getter to get brand property
get watchBrand() {
return this.brand;
},
// Setter to set Watch dial
set watchDial(dial) {
this.dial = dial.toUpperCase();
}
}
output.innerHTML = "The Watch brand is - " + watch.watchBrand + "<br>";
watch.watchDial = "square";
output.innerHTML += "The Watch dial is - " + watch.dial;
</script>
</body>
</html>The Watch brand is - Titan
The Watch dial is - SQUAREJavaScript "use strict"
ES5 还引入了严格模式。
严格模式允许你克服错误并编写清晰的代码。你可以使用“use strict”指令来声明严格模式。
Example
在下面的代码中，你可以取消对“num = 43”行的注释并观察该错误。严格模式不允许开发者在不使用 var、let 或 const 关键字的情况下定义变量。
<html>
<body>
<div id = "output">The value of num is: </div>
<script>
"use strict";
let num = 43; // This is valid
// num = 43; // This is invalid
document.getElementById("output").innerHTML += num + "<br>";
</script>
</body>
</html>The value of num is: 43JavaScript String[number] access
在 ES5 之前，charAt() 方法被用于从特定索引访问字符串字符。
在 ES5 之后，你可以将字符串视为一个字符数组，并像访问数组元素一样从特定索引访问字符串字符。
Example
<html>
<body>
<div id = "output1">The first character in the string is: </div>
<div id = "output2">The third character in the string is: </div>
<script>
let str = "Apple";
document.getElementById("output1").innerHTML += str[0];
document.getElementById("output2").innerHTML += str[2];
</script>
</body>
</html>The first character in the string is: A
The third character in the string is: pJavaScript Trailing commas
你可以在数组和对象中添加尾部逗号（在最后一个元素后面加逗号）。
Example
在下面的代码中，我们在最后一个对象属性和数组元素之后添加了尾部逗号。该代码在没有错误的情况下运行并打印输出。
<html>
<body>
<div id = "demo1"> </div>
<div id = "demo2"> </div>
<script>
const obj = {
name: "Pinku",
profession: "Student",
}
document.getElementById("demo1").innerHTML =JSON.stringify(obj);
let strs = ["Hello", "world!",];
document.getElementById("demo2").innerHTML = strs;
</script>
</body>
</html>{"name":"John","profession":"Student"}
Hello,world!注意 - JSON 字符串不允许尾部逗号。
例如，
let numbers = '{"num1": 10,"num2": 20,}';
JSON.parse(numbers); // Invalid
numbers ='{"num1": 10,"num2": 20}';
JSON.parse(numbers); // Valid在 ES5 中，主要是引入了数组和对象相关的方法。