码农教程 - 一技在手,衣食无忧! tools

目录

JavaScript ES5

❮ 上一节 下一节 ❯

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

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

ES5 特性

浏览器支持

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

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

"use strict" 指令

"use strict"定义 JavaScript 代码应在 "strict mode" 中执行。

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

您可以在所有程序中使用严格模式。它可以帮助您编写更清晰的代码，例如防止您使用未声明的变量。

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

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

字符串的属性访问

这个charAt()方法返回字符串中指定索引（位置）处的字符：

示例

var str = "HELLO WORLD";
str.charAt(0);            // returns H
亲自试一试 »

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

示例

var str = "HELLO WORLD";
str[0];                   // returns H
亲自试一试 »

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

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

多行字符串

示例

"Hello \
Dolly!";
亲自试一试 »

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

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

示例

"Hello " +
"Dolly!";
亲自试一试 »

保留字作为属性名称

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

对象示例

var obj = {name: "John", new: "yes"}
亲自试一试 »

字符串修剪()

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

示例

var str = "       Hello World!        ";
alert(str.trim());
亲自试一试 »

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

Array.isArray()

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

示例

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

阅读更多内容JS 数组。

数组 forEach()

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

示例

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

function myFunction(value) {
  txt = txt + value + "<br>";
}
亲自试一试 »

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

数组映射()

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

示例

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

function myFunction(value) {
  return value * 2;
}
亲自试一试 »

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

数组过滤器()

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

示例

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

function myFunction(value) {
  return value > 18;
}
亲自试一试 »

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

数组减少()

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

示例

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);

function myFunction(total, value) {
  return total + value;
}
亲自试一试 »

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

数组reduceRight()

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

示例

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction);

function myFunction(total, value) {
  return total + value;
}
亲自试一试 »

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

数组每个()

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

示例

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

function myFunction(value) {
  return value > 18;
}
亲自试一试 »

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

数组一些()

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

示例

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

function myFunction(value) {
  return value > 18;
}
亲自试一试 »

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

数组索引()

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

示例

var fruits = ["Apple", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");
亲自试一试 »

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

数组的最后索引()

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

示例

var fruits = ["Apple", "Orange", "Apple", "Mango"];
var a = fruits.lastIndexOf("Apple");
亲自试一试 »

了解更多信息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"}');
亲自试一试 »

阅读我们的更多内容JSON教程。

JSON.stringify()

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

向 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;
亲自试一试 »

阅读我们的更多内容JSON教程。

日期.now()

Date.now()返回自零日期（1970 年 1 月 1 日 00:00:00 UTC）以来的毫秒数。

示例

var timInMSs = Date.now();
亲自试一试 »

Date.now()返回与在 a 上执行的 getTime() 相同的结果Date目的。

了解更多信息JS 日期。

日期到ISOString()

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

示例

const d = new Date();
document.getElementById("demo").innerHTML = d.toISOString();
亲自试一试 »

日期 toJSON()

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

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

示例

d = new Date();
document.getElementById("demo").innerHTML = d.toJSON();
亲自试一试 »

属性获取器和设置器

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

这个例子创建了一个吸气剂对于名为 fullName 的属性：

示例

// 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;
亲自试一试 »

这个例子创建了一个二传手和一个吸气剂对于语言属性：

示例

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;
亲自试一试 »

此示例使用 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;
亲自试一试 »

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

对象.defineProperty()

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

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

示例

// 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;
亲自试一试 »

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

示例

// 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;
亲自试一试 »

此示例创建一个 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;
亲自试一试 »

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()方法，一个对象可以借用另一个对象的方法。

此示例创建 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);
亲自试一试 »

了解更多信息函数绑定()。

尾随逗号

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,]

❮ 上一节 下一节 ❯