ECMAScript 2009(ES5)

2025-02-20 20:00
2025-02-21 18:16
1378

核心特性

1. 严格模式（Strict Mode）

ES5 引入了严格模式，这是一种通过在脚本或函数的开头添加 "use strict"; 声明来选择采用更严格的解析和错误处理的方式。严格模式下，某些不安全或不合理的语法将被禁止，从而提高代码的健壮性和安全性。常见入下：

  • 1 变量必须声明
javascript
      "use strict";
x = 10; // 报错：x 未声明
  • 2 禁止删除变量或函数
javascript
      "use strict";
var a = 1;
delete a; // 报错：无法删除变量
  • 3 函数参数不可重复
javascript
      "use strict";
function sum(a, a) {} // 报错：参数名重复
  • 4 this 行为变化
javascript
      "use strict";
//普通函数调用时，this 为 undefined（非严格模式下指向全局对象）。
function test() {
  console.log(this);
} // 输出 undefined

2. 原生 JSON 支持

提供了原生的 JSON 对象，用于解析和字符串化 JSON 数据。这使得处理 JSON 数据更加方便和高效。

  • 1 JSON.parse() 方法 对象>JSON
javascript
      const jsonString = '{"name": "星泪", "age": 18}';
const obj = JSON.parse(jsonString);
console.log(obj.name); // 输出: 星泪
  • 2 JSON.stringify() 方法 JSON>对象
javascript
      const obj = { name: "星泪", age: 18 };
const newJsonString = JSON.stringify(obj);
console.log(newJsonString); // 输出: "{"name":"星泪","age":18}"

3. 对象属性的增强

ES5 引入了多种方法来增强对对象属性的操作：

  • Object.defineProperty() 和 Object.defineProperties()：用于精确添加或修改对象的属性。
  • Object.getOwnPropertyDescriptor()：获取对象属性的描述符。
javascript
      const obj = {};
Object.defineProperty(obj, "name", {
  value: "星泪",
  writable: false, // 是否可修改
  enumerable: true, // 是否可枚举
  configurable: false // 是否可删除
});

console.log(obj.name); // 输出: 星泪
obj.name = "Bob";
console.log(obj.name); // 输出: 星泪（因为 writable: false）
const descriptor = Object.getOwnPropertyDescriptor(obj, "name");
console.log(descriptor);
// 输出: {
//   value: '星泪',
//   writable: false,
//   enumerable: true,
//   configurable: false
// }
  • Object.keys()：返回对象自身可枚举属性的数组。
javascript
      // 创建一个对象
const obj = {
  name: "星泪",
  age: 18,
  city: "潮州"
};
const keys = Object.keys(obj);
console.log(keys); // 输出: ["name", "age", "city"]

4. 数组方法的扩展

ES5 为数组引入了多个新的方法，增强了数组操作的能力：

  • forEach()：对数组的每个元素执行一次提供的函数。
javascript
      const arr = [1, 2, 3, 4, 5];
//接受三个参数，分别是当前元素的值、索引和数组本身。
arr.forEach((item, index, array) => {
  console.log(item, index, array);
});
  • map()：创建一个新数组，其结果是对原数组的每个元素调用一个提供的函数后的返回值。
javascript
      const arr = [1, 2, 3, 4, 5];
//接受三个参数，分别是当前元素的值、索引和数组本身
const newArr = arr.map((item, index, array) => {
  console.log(item, index, array);
  return item * 2;
});
console.log(newArr); // [2, 4, 6, 8, 10]
  • filter()：创建一个新数组，其包含通过所提供函数实现的测试的所有元素
javascript
      const numbers = [10, 15, 20, 25, 30];
const filteredArr = numbers.filter((num, index, array) => {
  console.log(`元素:${num}，索引:${index}，原数组:${array}`);
  return num > 20; // 筛选大于20的元素
});
console.log(filteredArr); // [25, 30]
  • reduce()：对数组的每个元素执行一个提供的函数，将其结果汇总为单个值
  • reduceRight()：从右到左执行回调函数，返回一个值
javascript
      const sum = [1, 2, 3, 4, 5].reduce(
  (acc, cur, index, array) => {
    console.log(`累积值:${acc}，当前值:${cur}，索引:${index}`);
    return acc + cur; // 累加所有元素
  },
  0 //初始值
);
console.log(sum); // 15
  • some()：测试数组中是否有元素通过函数的测试
javascript
      const hasEven = [1, 3, 5, 7, 8].some((num, index, array) => {
  console.log(`检测元素:${num}，索引:${index}`);
  return num % 2 === 0; // 检查是否存在偶数
});
console.log(hasEven); // true
  • every()：测试数组的所有元素是否都通过函数的测试
javascript
      const allEven = [2, 4, 6, 8, 10].every((num, index, array) => {
  console.log(`检测元素:${num}，索引:${index}`);
  return num % 2 === 0; // 检查是否全为偶数
});
console.log(allEven); // true
  • indexOf(): 返回数组中第一个与给定值相等的元素的索引，如果找不到则返回-1。
  • lastIndexOf(): 返回数组中最后一个与给定值相等的元素的索引，如果找不到则返回-1。
javascript
      const arr = [1, 2, 3, 4, 5];
console.log(arr.indexOf(3)); // 输出: 2
console.log(arr.indexOf(6)); // 输出: -1

5. 函数绑定：Function.prototype.bind()

bind() 方法创建一个新的函数，在调用时，其 this 值是提供的值，且在调用新函数时，提供的参数序列将作为新函数的前置参数。

javascript
      const module = {
  x: 42,
  getX: function () {
    return this.x;
  }
};

const retrieveX = module.getX;
console.log(retrieveX()); // 输出: undefined，因为函数的 this 值未绑定

const boundGetX = retrieveX.bind(module);
console.log(boundGetX()); // 输出: 42

6. 对象定义属性的 getter 和 setter

  • getter：用于读取属性值的方法。
javascript
      const obj = {
  log: ["a", "b", "c"],
  get latest() {
    return this.log[this.log.length - 1];
  }
};
console.log(obj.latest); //输出:c
  • setter：用于设置属性值的方法。
javascript
      const language = {
  set current(name) {
    this.log.push(name);
  },
  log: []
};

language.current = "EN";
language.current = "FA";

console.log(language.log); //输出:["EN","FA"]

7. Object.defineProperty:对象劫持,vue2 响应式原理

Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。详情请看以下链接：

javascript
      const obj = {
  foo: ""
};

function update() {
  console.log("obj.foo更新了", obj.foo);
}

function defineReactive(obj, key, val) {
  Object.defineProperty(obj, key, {
    get() {
      console.log(`get ${key}:${val}`);
      return val;
    },
    set(newVal) {
      if (newVal !== val) {
        val = newVal;
        update();
      }
    }
  });
}

需要注意的点

  • 作用域问题（仅全局/函数作用域，无块级作用域）
  • 严格模式（使用 "use strict"）
  • 异步回调嵌套导致“回调地狱”
  • 新增 JSON.parse()/JSON.stringify()
  • 数组方法：forEach、map、filter、indexOf 等

总结

ECMAScript 2009（ES5），是 JavaScript 语言的一个重要版本。ES5 引入了多项新特性和改进，旨在增强语言的功能性、可读性和安全性，为现代 JavaScript 奠定了基础。

评论区
评论区寄了

文章目录

核心特性
1. 严格模式（Strict Mode）
2. 原生 JSON 支持
3. 对象属性的增强
4. 数组方法的扩展
5. 函数绑定：Function.prototype.bind()
6. 对象定义属性的 getter 和 setter
7. Object.defineProperty:对象劫持,vue2 响应式原理
需要注意的点
总结