JavaScript ES5


目录

    显示目录

ECMAScript 2009,也称为 ES5,是 JavaScript 的第一个重大修订版。

本章介绍 ES5 最重要的特性。

ES5 特性

  • “严格使用”

  • 字符串[数字]访问

  • 多行字符串

  • 字符串.trim()

  • Array.isArray()

  • 数组 forEach()

  • 数组映射()

  • 数组过滤器()

  • 数组减少()

  • 数组reduceRight()

  • 数组每个()

  • 数组一些()

  • 数组索引()

  • 数组的最后索引()

  • JSON.parse()

  • JSON.stringify()

  • 日期.now()

  • 日期到ISOString()

  • 日期 toJSON()

  • 属性获取者和设置者

  • 作为属性名称的保留字

  • 对象方法

  • 对象定义属性()

  • 函数绑定()

  • 尾随逗号


浏览器支持

所有现代浏览器均完全支持 ES5

Chrome IE Edge Firefox Safari Opera
Yes 9.0 Yes Yes Yes Yes

“使用严格”指令

"use strict" 定义 JavaScript 代码应在“严格模式”下执行。

例如,使用严格模式,您可以不使用未声明的变量。

您可以在所有程序中使用严格模式。它可以帮助您编写更清晰的代码, 就像阻止您使用未声明的变量一样。

"use strict" 只是一个字符串表达式。旧的浏览器如果不理解的话不会抛出错误。

阅读 JS 严格模式了解更多内容。


字符串的属性访问

charAt() 方法返回指定位置处的字符 字符串中的索引(位置):

例子

var str = "HELLO WORLD";
str.charAt(0);            // returns H

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript String Methods</h2>

<p>The charAt() method returns the character at a given position in a string:</p>

<p id="demo"></p>

<script>
var str = "HELLO WORLD";
document.getElementById("demo").innerHTML = str.charAt(0);
</script>
</body>
</html>

ES5 允许对字符串进行属性访问:

例子

var str = "HELLO WORLD";
str[0];                   // returns H

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript String Methods</h2>

<p>ECMAScript 5 allows property acces on strings:</p>

<p id="demo"></p>

<script>
var str = "HELLO WORLD";
document.getElementById("demo").innerHTML = str[0];
</script>
</body>
</html>

字符串上的属性访问可能有点难以预测。

阅读 JS 字符串方法了解更多内容。


多行字符串

例子

 "Hello \
Dolly!";

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>

<p>
You can break a code line within a text string with a backslash.
</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "Hello \
Dolly!";
</script>

</body>
</html>

\ 方法可能没有普遍支持。
较旧的浏览器可能会处理 反斜杠周围的空格不同。
一些较旧的浏览器会这样做 \ 字符后面不允许有空格。

分解字符串文字的更安全方法是使用 string 添加:

例子

 "Hello " + 
"Dolly!";

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>

<p>The safest way to break a code line in a string is using string addition.</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "Hello " +
"Dolly!";
</script>

</body>
</html>

保留字作为属性名称

ES5 允许保留字作为属性名称:

对象示例

 var obj = {name: "John", new: "yes"}

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>
<h1>ECMAScript 5</h1>

<p>ECMAScript 5 allows reserved words as property names.</p>
<p id="demo"></p>

<script>
var obj = {name: "John", new: "yes"};
document.getElementById("demo").innerHTML = obj.new;
</script>

</body>
</html>



字符串trim()

trim() 方法删除字符串两侧的空格。

例子

var str = "       Hello World!        ";
alert(str.trim());

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The trim() Method</h2>

<p id="demo"></p>

<script>
let text1 = "     Hello World!     ";
let text2 = text1.trim();

document.getElementById("demo").innerHTML =
"Length text1 = " + text1.length + "<br>Length text2 = " + text2.length;
</script>

</body>
</html>

阅读 JS 字符串方法了解更多内容。



Array.isArray()

isArray() 方法检查对象是否为数组。

例子

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

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The isArray() Method</h2>

<p>Click the button to check if "fruits" is an array.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

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

</body>
</html>

阅读 JS 数组了解更多内容。


数组forEach()

forEach() 方法为每个数组元素调用一次函数。

例子

var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);

function myFunction(value) {
   
txt = txt + value + "<br>"; 
}

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array.forEach()</h2>

<p>Calls a function once for each array element.</p>

<p id="demo"></p>

<script>
var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
document.getElementById("demo").innerHTML = txt;

function myFunction(value) {
  txt = txt + value + "<br>"; 
}
</script>

</body>
</html>

在 JS 数组迭代方法中了解更多信息。


数组map()

此示例将每个数组值乘以 2:

例子

var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);
  
function myFunction(value) {
  return value * 2;
}

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array.map()</h2>

<p>Creates a new array by performing a function on each array element.</p>

<p id="demo"></p>

<script>
var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);

document.getElementById("demo").innerHTML = numbers2;

function myFunction(value, index, array) {
  return value * 2;
}
</script>

</body>
</html>

在 JS 数组迭代方法中了解更多信息。


数组filter()

此示例根据值大于 18 的元素创建一个新数组:

例子

 var numbers = [45, 4, 9, 16, 25];
var over18 = 
  numbers.filter(myFunction);
function myFunction(value) {
  return value > 18;
} 

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array.filter()</h2>

<p>Creates a new array with all array elements that passes a test.</p>

<p id="demo"></p>

<script>
var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);

document.getElementById("demo").innerHTML = over18;

function myFunction(value, index, array) {
  return value > 18;
}
</script>

</body>
</html>

在 JS 数组迭代方法中了解更多信息。


数组reduce()

此示例查找数组中所有数字的总和:

例子

 var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);
  
function myFunction(total, value) {
  
  return total + value;
} 

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array.reduce()</h2>

<p>This example finds the sum of all numbers in an array:</p>

<p id="demo"></p>

<script>
var numbers = [45, 4, 9, 16, 25];
var sum = numbers.reduce(myFunction);

document.getElementById("demo").innerHTML = "The sum is " + sum;

function myFunction(total, value, index, array) {
  return total + value;
}
</script>

</body>
</html>

在 JS 数组迭代方法中了解更多信息。


数组reduceRight()

此示例还查找数组中所有数字的总和:

例子

 var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction);
  
function myFunction(total, value) {
  return total + value;
} 

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array.reduceRight()</h2>

<p>This example finds the sum of all numbers in an array:</p>

<p id="demo"></p>

<script>
var numbers = [45, 4, 9, 16, 25];
var sum = numbers.reduceRight(myFunction);

document.getElementById("demo").innerHTML = "The sum is " + sum;

function myFunction(total, value) {
  return total + value;
}
</script>

</body>
</html>

在 JS 数组迭代方法中了解更多信息。


数组 every()

此示例检查所有值是否超过 18:

例子

 var numbers = [45, 4, 9, 16, 25];
var allOver18 = 
  numbers.every(myFunction);
function myFunction(value) {
  return 
  value > 18;
} 

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array.every()</h2>

<p>The every() method checks if all array values pass a test.</p>

<p id="demo"></p>

<script>
var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);

document.getElementById("demo").innerHTML = "All over 18 is " + allOver18;

function myFunction(value, index, array) {
  return value > 18;
}
</script>

</body>
</html>

在 JS 数组迭代方法中了解更多信息。


数组some()

此示例检查某些值是否超过 18:

例子

 var numbers = [45, 4, 9, 16, 25];
var allOver18 = 
  numbers.some(myFunction);
function myFunction(value) {
  return 
  value > 18;
} 

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array.some()</h2>

<p>The some() method checks if some array values pass a test.</p>

<p id="demo"></p>

<script>
var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.some(myFunction);

document.getElementById("demo").innerHTML = "Some over 18 is " + allOver18;

function myFunction(value) {
  return value > 18;
}
</script>

</body>
</html>

在 JS 数组迭代方法中了解更多信息。


数组indexOf()

在数组中搜索元素值并返回其位置。

例子

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The indexOf() Method</h2>

<p id="demo"></p>

<script>
const fruits = ["Apple", "Orange", "Apple", "Mango"];
let position = fruits.indexOf("Apple") + 1;

document.getElementById("demo").innerHTML = "Apple is found in position " + position;
</script>

</body>
</html>

在 JS 数组迭代方法中了解更多信息。


数组lastIndexOf()

lastIndexOf()indexOf() 相同,但从数组末尾开始搜索。

例子

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.lastIndexOf("Apple");

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The lastIndexOf() Method</h2>

<p id="demo"></p>

<script>
const fruits = ["Apple", "Orange", "Apple", "Mango"];
let position = fruits.lastIndexOf("Apple") + 1;

document.getElementById("demo").innerHTML = "Apple is found in position " + position;
</script>

</body>
</html>

在 JS 数组迭代方法中了解更多信息。


JSON.parse()

JSON 的常见用途是从 Web 服务器接收数据。

假设您从 Web 服务器收到了以下文本字符串:

'{"name":"John", "age":30, "city":"New York"}'

JavaScript 函数 JSON.parse() 用于将文本转换为 JavaScript 对象:

var obj = JSON.parse('{"name":"John", "age":30, "city":"New 
  York"}');

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>Creating an Object from a JSON String</h2>

<p id="demo"></p>

<script>
const txt = '{"name":"John", "age":30, "city":"New York"}'
const obj = JSON.parse(txt);
document.getElementById("demo").innerHTML = obj.name + ", " + obj.age;
</script>

</body>
</html>

请阅读我们的 JSON 教程了解更多信息。


JSON.stringify()

JSON 的常见用途是将数据发送到 Web 服务器。

当向网络服务器发送数据时,数据必须是 一个字符串。

假设我们在 JavaScript 中有这个对象:

var obj = {name:"John", age:30, city:"New York"};

使用 JavaScript 函数 JSON.stringify() 将其转换为字符串。

var myJSON = JSON.stringify(obj);

结果将是一个遵循 JSON 符号的字符串。

myJSON 现在是一个字符串,可以发送到服务器:

例子

var obj = {name:"John", age:30, city:"New York"};
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>Create a JSON string from a JavaScript object.</h2>
<p id="demo"></p>

<script>
const obj = {name: "John", age: 30, city: "New York"};
const myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;
</script>

</body>
</html>

请阅读我们的 JSON 教程了解更多信息。


Date.now()

Date.now() 返回自零日期(1 月 1 日)以来的毫秒数。 1970 年 00:00:00 世界标准时间)。

例子

var timInMSs = Date.now();

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Date.now()</h2>

<p>Date.now() is new in ECMAScript 5 (2009):</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
document.getElementById("demo1").innerHTML = Date.now();
var d = new Date();
document.getElementById("demo2").innerHTML = d.getTime();
</script>
</body>
</html>

Date.now() 返回的结果与对 Date 对象执行的 getTime() 相同。

在 JS 日期中了解更多信息。


日期 toISOString()

toISOString() 方法使用 ISO 标准格式将 Date 对象转换为字符串:

例子

const d = new Date();
document.getElementById("demo").innerHTML = d.toISOString();

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Dates</h1>
<h2>The toISOString() Method</h2>

<p>Convert a date to a string using the ISO standard:</p>
<p id="demo"></p>

<script>
const d = new Date();
document.getElementById("demo").innerHTML = d.toISOString();
</script>

</body>
</html>

日期toJSON()

toJSON() 将 Date 对象转换为字符串,格式为 JSON 日期。

JSON 日期的格式与 ISO-8601 标准相同:YYYY-MM-DDTHH:mm:ss.sssZ:

例子

d = new Date();
document.getElementById("demo").innerHTML = d.toJSON();

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Date.toJSON()</h2>

<p id="demo"></p>

<script>
d = new Date();
document.getElementById("demo").innerHTML = d.toJSON();
</script>

</body>
</html>

属性获取器和设置器

ES5 允许您使用类似于获取或设置的语法来定义对象方法 一个财产。

此示例为名为 fullName 的属性创建一个 getter

例子

 // Create an object:
var person = {
  firstName: 
  "John",
  lastName : "Doe",
  get 
  fullName() {
    
  return this.firstName + " " + this.lastName;
  }
};
// Display data from the 
  object using a getter:
document.getElementById("demo").innerHTML = 
  person.fullName; 

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Getters and Setters</h2>

<p>Getters and setters allow you to get and set properties via methods.</p>

<p>This example creates a getter for a property called fullName.</p>

<p id="demo"></p>

<script>
// Create an object:
var person = {
  firstName: "John",
  lastName : "Doe",
  get fullName() {
    return this.firstName + " " + this.lastName;
  }
};
// Display data from the object using a getter:
document.getElementById("demo").innerHTML = person.fullName;
</script>

</body>
</html>

此示例为语言属性创建一个 setter 和一个 getter

例子

 var person = {
  firstName: "John",
  
  lastName : "Doe",
  language : "NO",
  
  get lang() {
    return this.language;
  },
  set lang(value) {
    
  this.language = value;
  }
};
// Set an object 
  property using a setter:
person.lang = "en";
// Display data from the 
  object using a getter:
document.getElementById("demo").innerHTML = 
  person.lang;
 

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Getters and Setters</h2>

<p>Getters and setters allow you to get and set properties via methods.</p>

<p>This example creates a setter and a getter for the language property.</p>

<p id="demo"></p>

<script>
// Create an object:
var person = {
  firstName: "John",
  lastName : "Doe",
  language : "NO",
  get lang() {
    return this.language;
  },
  set lang(value) {
    this.language = value;
  }
};
// Set an object property using a setter:
person.lang = "en";
// Display data from the object using a getter:
document.getElementById("demo").innerHTML = person.lang;
</script>

</body>
</html>

此示例使用 setter 来保护语言的大写更新:

例子

 var person = {
  firstName: "John",
  
  lastName : "Doe",
  language : "NO",
  set lang(value) {
    
  this.language = value.toUpperCase();
  }
};
// Set an object 
  property using a setter:
person.lang = "en";
// Display data from the 
  object:
document.getElementById("demo").innerHTML = 
  person.language;
 

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Getters and Setters</h2>

<p>Getters and setters allow you to get and set properties via methods.</p>

<p>This example has a modified setter to secure upper case uppdates of language.</p>

<p id="demo"></p>

<script>
// Create an object:
var person = {
  firstName: "John",
  lastName : "Doe",
  language : "",
  set lang(value) {
     this.language = value.toUpperCase();
  }
};
// Set an object property using a setter:
person.lang = "en";
// Display data from the object:
document.getElementById("demo").innerHTML = person.language;
</script>

</body>
</html>

了解有关 JS 对象访问器中的 Gettes 和 Setters 的更多信息


Object.defineProperty()

Object.defineProperty() 是 ES5 中新的 Object 方法。

它允许您定义对象属性和/或更改属性的值和/或 元数据。

例子

 // Create an Object:
var person = {
  firstName: 
  "John",
  lastName : "Doe",
  language : "NO", 
};

  // Change a Property:
Object.defineProperty(person, "language", {
    
  value: "EN",
  writable : true,
  enumerable : true,
  configurable : true
});
// 
  Enumerate Properties
var txt = "";
for (var x in person) {
    
  txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML = 
  txt;
 

自己尝试一下 →

<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=iso-8859-2" http-equiv="Content-Type">
</head>

<body>

<h2>JavaScript defineProperty()</h2>

<p id="demo"></p>

<script>
// Create an Object:
var person = {
  firstName: "John",
  lastName : "Doe",
  language : "NO", 
};
// Change a Property:
Object.defineProperty(person, "language", {
  value: "EN",
  writable : true,
  enumerable : true,
  configurable : true
});
// Enumerate Properties
txt = "";
for (var x in person) {
  txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;
</script>

</body>
</html>

下一个示例是相同的代码,只不过它隐藏了枚举的语言属性:

例子

 // Create an Object:
var person = {
  firstName: 
  "John",
  lastName : "Doe",
  language : "NO", 
};

  // Change a Property:
Object.defineProperty(person, "language", {
    
  value: "EN",
  writable : true,
  enumerable : false,
  configurable : true
});
// 
  Enumerate Properties
var txt = "";
for (var x in person) {
    
  txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML = 
  txt;
 

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript defineProperty()</h2>

<p id="demo"></p>

<script>
// Create an Object:
var person = {
  firstName: "John",
  lastName : "Doe",
  language : "NO", 
};
// Change a Property:
Object.defineProperty(person, "language", {
  value: "EN",
  writable : true,
  enumerable : false,
  configurable : true
});
// Enumerate Properties
txt = "";
for (var x in person) {
  txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;
</script>

</body>
</html>

此示例创建一个 setter 和一个 getter 来确保语言的大写更新:

例子

 // Create an Object:
var person = {
  firstName: "John",
    lastName : 
  "Doe",
  language : "NO"
};
// Change a Property:
  Object.defineProperty(person, "language", {
  get : function() { return 
  language },
  set : function(value) { language = value.toUpperCase()}
});

  // Change Language
person.language = "en";
// Display Language
  document.getElementById("demo").innerHTML = person.language;

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript defineProperty()</h2>

<p id="demo"></p>

<script>
// Create an Object:
var person = {
  firstName: "John",
  lastName : "Doe",
  language : "NO"
};
// Change a Property:
Object.defineProperty(person, "language", {
  get : function() { return language },
  set : function(value) { language = value.toUpperCase()}
});
// Change language
person.language = "en";
// Display language
document.getElementById("demo").innerHTML = person.language;
</script>

</body>
</html>

E5 对象方法

ES5 为 JavaScript 添加了很多新的对象方法:

管理对象

// Create object with an existing object as prototype
Object.create(parent, donor)

// Adding or changing an object property
Object.defineProperty(object, property, descriptor)

// Adding or changing object properties
Object.defineProperties(object, descriptors)

// Accessing Properties
Object.getOwnPropertyDescriptor(object, property)

// Returns all properties as an array
Object.getOwnPropertyNames(object)

// Accessing the prototype
Object.getPrototypeOf(object)

// Returns enumerable properties as an array
Object.keys(object)

保护物体

// Prevents adding properties to an object
Object.preventExtensions(object)

// Returns true if properties can be added to an object
Object.isExtensible(object)

// Prevents changes of object properties (not values)
Object.seal(object)

// Returns true if object is sealed
Object.isSealed(object)

// Prevents any changes to an object
Object.freeze(object)

// Returns true if object is frozen
Object.isFrozen(object)

在对象 ECMAScript5 中了解更多信息。


函数Bind()

通过 bind() 方法,一个对象可以借用另一个对象的方法。

此示例创建 2 个对象(人员和成员)。

成员对象借用了 person 对象的 fullname 方法:

例子

const person = {
  firstName:"John",
  lastName: "Doe",
    fullName: function () {
    return this.firstName + " " + this.lastName;
    }
}

const member = {
  firstName:"Hege",
  lastName: "Nilsen",
}

let fullName = person.fullName.bind(member);

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Function bind()</h1>

<p>This example creates 2 objects (person and member).</p>
<p>The member object borrows the fullname method from person:</p> 

<p id="demo"></p>

<script>
const person = {
  firstName:"John",
  lastName: "Doe",
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}

const member = {
  firstName:"Hege",
  lastName: "Nilsen",
}

let fullName = person.fullName.bind(member);

document.getElementById("demo").innerHTML = fullName();
</script>

</body>
</html>

在函数bind() 中了解更多信息。


尾随逗号

ES5 允许在对象和数组定义中使用尾随逗号:

对象示例

person = {
  firstName: "John",
  lastName: "
Doe",
	age: 46,
}

数组示例

points = [
  1,
  5,
  10,
  25,
  40,
  100,
];

警告 !!!

JSON 不允许尾随逗号。

JSON 对象:

 //
  Allowed:
var person = '{"firstName":"John", "lastName":"Doe", 
  "age":46}'
JSON.parse(person)
// Not allowed:
var person = '{"firstName":"John", 
  "lastName":"Doe", "age":46,}'
JSON.parse(person)

JSON 数组:

   //
    Allowed:
points = [40, 100, 1, 5, 25, 10]
// Not allowed:
points = 
    [40, 100, 1, 5, 25, 10,]