JavaScript - ES5：初学者全面指南
你好，有抱负的JavaScript开发者们！我很高兴能成为你们在这激动人心的JavaScript ES5世界中的向导。作为一名有着多年经验的计算机科学教师，我见证了无数学生从完全的初学者变成了自信的程序开发者。所以，如果你是从零开始，不用担心——我们会一步一步来，很快你就能像专业人士一样编写JavaScript！
JavaScript ES5新增特性
JavaScript ES5，在2009年发布，为这门语言带来了许多酷炫的新特性。这就好比你最喜欢的视频游戏得到了一个令人兴奋的更新——突然之间，你有了新的工具和能力，让一切都变得更加有趣和高效！让我们深入这些特性，看看它们如何让我们的编程生活变得更加轻松。
JavaScript数组方法
数组就像是JavaScript的瑞士军刀——它们极其多功能，能够处理各种类型的数据。ES5引入了几个新的方法，让处理数组变得轻而易举。我们逐一来看：
JavaScript Array every()
every()方法就像一个严格的老师，检查班上的所有学生是否都完成了作业。它测试数组中的所有元素是否都满足某个条件。
let numbers = [2, 4, 6, 8, 10];
let allEven = numbers.every(function(num) {
return num % 2 === 0;
});
console.log(allEven); // 输出：true在这个例子中，every()检查数组中的所有数字是否都是偶数。因为它们是，所以它返回true。
JavaScript Array filter()
filter()就像一个俱乐部的保镖，只允许符合某些条件的元素进入。它创建一个新数组，包含所有通过测试的元素。
let fruits = ['apple', 'banana', 'cherry', 'date', 'elderberry'];
let longFruits = fruits.filter(function(fruit) {
return fruit.length > 5;
});
console.log(longFruits); // 输出：['banana', 'cherry', 'elderberry']在这里，filter()创建了一个包含名字长度超过5个字符的水果的新数组。
JavaScript Array forEach()
forEach()就像一个导游，带你逐个浏览数组的每个元素。它为每个数组元素执行一次提供的函数。
let colors = ['red', 'green', 'blue'];
colors.forEach(function(color, index) {
console.log(`位置${index}的颜色是${color}`);
});
// 输出：
// 位置0的颜色是red
// 位置1的颜色是green
// 位置2的颜色是blue这个方法非常适合在不创建新数组的情况下对数组的每个元素执行操作。
JavaScript Array isArray()
isArray()就像一名侦探，判断一个对象是否是数组。如果对象是数组，它返回true，如果不是，返回false。
console.log(Array.isArray([1, 2, 3])); // 输出：true
console.log(Array.isArray('Hello')); // 输出：false这个方法在需要检查变量是否为数组再执行特定操作时特别有用。
JavaScript Array indexOf()
indexOf()就像一个搜索队，寻找数组中的特定元素，并告诉你它在哪里。它返回数组中可以找到给定元素的第一个索引，如果不存在，则返回-1。
let fruits = ['apple', 'banana', 'cherry', 'date'];
console.log(fruits.indexOf('cherry')); // 输出：2
console.log(fruits.indexOf('grape')); // 输出：-1这个方法在需要找到数组中元素的位置时很方便。
JavaScript Array lastIndexOf()
lastIndexOf()与indexOf()类似，但它从数组的末尾开始搜索。它返回数组中可以找到给定元素的最后一个索引，如果不存在，则返回-1。
let numbers = [1, 2, 3, 2, 1];
console.log(numbers.lastIndexOf(2)); // 输出：3
console.log(numbers.lastIndexOf(4)); // 输出：-1这个方法在想要找到数组中元素的最后一次出现时很有用。
JavaScript Array map()
map()就像一根魔杖，转换数组的每个元素。它创建一个新数组，包含对原数组中每个元素调用提供的函数的结果。
let numbers = [1, 2, 3, 4, 5];
let squared = numbers.map(function(num) {
return num * num;
});
console.log(squared); // 输出：[1, 4, 9, 16, 25]在这个例子中，map()创建了一个新数组，其中每个数字都被平方了。
JavaScript Array reduce()
reduce()就像一个滚下山的雪球，沿途累积值。它对数组的每个元素执行一个累加器函数，最终得到一个单一的输出值。
let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce(function(accumulator, currentValue) {
return accumulator + currentValue;
}, 0);
console.log(sum); // 输出：15在这里，reduce()用于计算数组中所有数字的总和。
JavaScript Array reduceRight()
reduceRight()与reduce()类似，但它从右到左处理数组。
let numbers = [1, 2, 3, 4, 5];
let result = numbers.reduceRight(function(accumulator, currentValue) {
return accumulator - currentValue;
});
console.log(result); // 输出：-5 (5 - 4 - 3 - 2 - 1)这个方法在处理顺序很重要且你想从数组末尾开始时很有用。
JavaScript Array some()
some()就像一个宽容的老师，只要至少有一个学生完成了作业，他就很高兴。它测试数组中至少有一个元素是否满足提供的函数的测试。
let numbers = [1, 3, 5, 7, 8, 9];
let hasEven = numbers.some(function(num) {
return num % 2 === 0;
});
console.log(hasEven); // 输出：true在这个例子中，some()检查数组中是否至少有一个偶数。
JavaScript日期方法
ES5还引入了一些处理日期的便捷方法：
JavaScript Date now()
Date.now()返回自1970年1月1日00:00:00 UTC以来经过的毫秒数。
console.log(Date.now()); // 输出：当前的毫秒时间戳这个方法在测量时间间隔或生成唯一标识符时很有用。
JavaScript Date toJSON()
toJSON()返回Date对象的JSON格式字符串表示。
let date = new Date();
console.log(date.toJSON()); // 输出："2023-06-08T12:34:56.789Z"这个方法在需要将Date对象序列化为JSON时很有用。
JavaScript Date toISOString()
toISOString()将Date对象转换为ISO 8601格式的字符串。
let date = new Date();
console.log(date.toISOString()); // 输出："2023-06-08T12:34:56.789Z"这个方法在国际环境中进行标准化日期格式化时很有用。
JavaScript Function bind()
bind()创建一个新的函数，当调用时，其this关键字被设置为提供的值。它就像给函数一个特定的上下文来工作。
let person = {
name: 'John',
greet: function() {
console.log(`你好，我的名字是${this.name}`);
}
};
let greetFunction = person.greet.bind(person);
greetFunction(); // 输出："你好，我的名字是John"这个方法在事件处理和面向对象的JavaScript编程中特别有用。
JavaScript JSON方法
ES5引入了对JSON的内置支持：
JavaScript JSON parse()
JSON.parse()解析一个JSON字符串，构造由字符串描述的JavaScript值或对象。
let jsonString = '{"name":"John", "age":30, "city":"New York"}';
let obj = JSON.parse(jsonString);
console.log(obj.name); // 输出："John"这个方法在处理来自API的数据或将复杂数据结构存储为字符串时非常重要。
JavaScript JSON stringify()
JSON.stringify()将JavaScript对象或值转换为JSON字符串。
let obj = {name: "John", age: 30, city: "New York"};
let jsonString = JSON.stringify(obj);
console.log(jsonString); // 输出："{'name':'John','age':30,'city':'New York'}"这个方法在需要将数据发送到服务器或存储复杂对象为字符串时很有用。
JavaScript多行字符串
ES5引入了一种使用反斜杠字符创建多行字符串的方法：
let multiline = "This is a \
multiline string \
in JavaScript.";
console.log(multiline);
// 输出：
// This is a multiline string in JavaScript.这个特性使得在代码中编写长文本字符串变得更加容易。
JavaScript对象方法
ES5引入了几种用于处理对象的新方法：
JavaScript Object defineProperty()
Object.defineProperty()允许你直接在对象上定义新的或修改现有的属性，具有对那些属性的细粒度控制。
let obj = {};
Object.defineProperty(obj, 'name', {
value: 'John',
writable: false,
enumerable: true,
configurable: true
});
console.log(obj.name); // 输出："John"
obj.name = 'Jane'; // 这不会改变值，因为writable是false
console.log(obj.name); // 输出："John"这个方法用于创建具有特定行为和特征的对象非常强大。
JavaScript属性getter和setter
ES5引入了getter和setter方法，允许你定义如何访问或修改属性：
let person = {
firstName: 'John',
lastName: 'Doe',
get fullName() {
return `${this.firstName} ${this.lastName}`;
},
set fullName(name) {
let parts = name.split(' ');
this.firstName = parts[0];
this.lastName = parts[1];
}
};
console.log(person.fullName); // 输出："John Doe"
person.fullName = 'Jane Smith';
console.log(person.firstName); // 输出："Jane"
console.log(person.lastName); // 输出："Smith"Getters和setters允许你定义计算属性和在获取或设置值时添加逻辑。
JavaScript保留字作为属性名
ES5允许在对象字面量中使用保留字作为属性名：
let obj = {
class: 'JavaScript',
for: 'beginners',
if: true
};
console.log(obj.class); // 输出："JavaScript"这个特性在命名对象属性时提供了更多的灵活性。
JavaScript "use strict"
ES5引入了"use strict"指令，它启用了JavaScript的严格模式。严格模式捕获常见的编码错误，抛出异常并阻止或抛出错误，当执行相对“不安全”的操作时。
"use strict";
x = 3.14; // 这将导致错误，因为x没有声明使用严格模式有助于及早捕获错误，并促进更好的编码实践。
JavaScript字符串[number]访问
ES5允许使用方括号表示法访问字符串中的单个字符：
let str = "Hello";
console.log(str[0]); // 输出："H"
console.log(str[1]); // 输出："e"这个特性使得处理字符串中的单个字符变得更加容易。
JavaScript String trim()
trim()方法从字符串的两端删除空白字符：
let str = " Hello, World! ";
console.log(str.trim()); // 输出："Hello, World!"这个方法在清理用户输入或格式化字符串时很有用。
JavaScript trailing commas
ES5允许在对象和数组字面量中使用尾随逗号：
let obj = {
name: "John",
age: 30,
}; // 没有错误
let arr = [1, 2, 3,]; // 没有错误这个特性使得添加或删除对象和数组中的项目时不必担心逗号的位置。
结论
哇！我们在本教程中涵盖了大量的内容。ES5为JavaScript带来了许多至今仍广泛使用的强大特性。记住，学习编码就像学习一门新语言——它需要练习和耐心。如果你一开始不理解所有内容，不要气馁。继续编码，继续尝试，最重要的是，享受乐趣！
以下是我们讨论过的方法的总结表格：
| 方法 | 描述 |
|---|---|
| Array.every() | 测试数组中的所有元素是否都通过提供的函数测试 |
| Array.filter() | 创建一个新数组，包含所有通过提供函数测试的元素 |
| Array.forEach() | 为数组的每个元素执行一次提供的函数 |
| Array.isArray() | 判断一个值是否为数组 |
| Array.indexOf() | 返回数组中可以找到给定元素的第一个索引，如果不存在则返回-1 |
| Array.lastIndexOf() | 返回数组中可以找到给定元素的最后一个索引，如果不存在则返回-1 |
| Array.map() | 创建一个新数组，其结果是调用数组每个元素的函数 |
| Array.reduce() | 对数组的每个元素执行一个累加器函数，得到一个单一的输出值 |
| Array.reduceRight() | 从右到左对数组的每个元素执行一个累加器函数 |
| Array.some() | 测试数组中是否至少有一个元素通过提供的函数测试 |
| Date.now() | 返回自1970年1月1日00:00:00 UTC以来经过的毫秒数 |
| Date.toJSON() | 返回Date对象的JSON格式字符串表示 |
| Date.toISOString() | 将Date对象转换为ISO 8601格式的字符串 |
| Function.bind() | 创建一个新函数，调用时其this关键字被设置为提供的值 |
| JSON.parse() | 解析一个JSON字符串，构造由字符串描述的JavaScript值或对象 |
| JSON.stringify() | 将JavaScript对象或值转换为JSON字符串 |
| Object.defineProperty() | 直接在对象上定义一个新的或修改现有的属性 |
| String.trim() | 从字符串的两端删除空白字符 |
将这个表格保留 handy 作为编码时的快速参考。快乐编程！
Credits: Image by storyset