现代JavaScript特性全解析

### 现代 JavaScript 特性全解析 #### 1. 函数参数处理：ES5 与 ES6 的对比 在处理函数参数时，ES5 和 ES6 有着不同的方式。以计算税收的函数为例，ES5 版本的 `calcTaxES5` 函数在处理不定数量的客户参数时，由于 `arguments` 对象不是真正的数组，需要使用 `slice()` 和 `call()` 方法来提取客户名称。以下是示例代码： ```javascript function calcTaxES5(income) { console.log("ES5. Calculating tax for customers with the income " + income); var customers = Array.prototype.slice.call(arguments, 1); customers.forEach(function (customer) { console.log("Processing ", customer); }); } calcTaxES5(50000, "Smith", "Johnson", "McDonald"); calcTaxES5(750000, "Olson", "Clinton"); ``` 而 ES6 引入了剩余参数（rest operator），可以将不定数量的参数转换为一个数组，代码更加简洁易读： ```javascript function calcTaxES6(income, ...customers) { console.log(`ES6. Calculating tax for customers with the income ${income}`); customers.forEach((customer) => console.log(`Processing ${customer}`)); } calcTaxES6(50000, "Smith", "Johnson", "McDonald"); calcTaxES6(750000, "Olson", "Clinton"); ``` 这两个函数的输出结果是相同的，但 ES6 的实现方式避免了复杂的数组转换操作。 #### 2. 扩展运算符（Spread Operator） ES6 的扩展运算符同样使用三个点（`...`）表示，但它的作用与剩余参数相反，它可以将数组转换为值列表或函数参数。以下是一些常见的应用场景： - **合并数组**： ```javascript let array1 = [1, 2, 3]; let array2 = [4, 5, 6]; let combinedArray = [...array1, ...array2]; console.log(combinedArray); // [1, 2, 3, 4, 5, 6] ``` - **复制数组**： ```javascript let originalArray = [1, 2, 3]; let copiedArray = [...originalArray]; console.log(copiedArray); // [1, 2, 3] ``` - **求数组最大值**： ```javascript const myArray = [1, 5, 3, 9, 2]; const maxValue = Math.max(...myArray); console.log(maxValue); // 9 ``` - **对象克隆**： 使用 `Object.assign()` 方法克隆对象： ```javascript const myObject = { name: "Mary", lastName: "Smith" }; const clone = Object.assign({}, myObject); console.log(clone); const cloneModified = Object.assign({}, myObject, { lastName: "Lee" }); console.log(cloneModified); ``` 使用扩展运算符克隆对象： ```javascript const myObject = { name: "Mary", lastName: "Smith" }; const cloneSpread = { ...myObject }; console.log(cloneSpread); const cloneSpreadModified = { ...myObject, lastName: "Lee" }; console.log(cloneSpreadModified); ``` 需要注意的是，使用 `Object.assign()` 或扩展运算符进行克隆时，创建的是对象的浅拷贝。如果对象的属性也是对象，只会复制其引用。例如： ```javascript const myObject = { name: 'Mary', lastName: 'Smith', birth: { date: '18 Jan 2019' } }; const clone = { ...myObject }; console.log(clone.birth.date); // 18 Jan 2019 myObject.birth.date = '20 Jan 2019'; console.log(clone.birth.date); // 20 Jan 2019 ``` #### 3. 解构赋值（Destructuring） 解构赋值是 ES6 引入的一种语法，它允许我们通过指定匹配模式，从对象的属性或数组中提取数据。 - **对象解构**： 在 ES5 中，如果要将 `Stock` 对象的 `symbol` 和 `price` 属性赋值给单独的变量，需要分两步进行： ```javascript var stock = getStock(); var symbol = stock.symbol; var price = stock.price; ``` 而在 ES6 中，可以使用解构赋值语法： ```javascript function getStock() { return { symbol: "IBM", price: 100.00 }; } let { symbol, price } = getStock(); console.log(`The price of ${symbol} is ${price}`); ``` 还可以对嵌套对象进行解构： ```javascript const msft = { symbol: "MSFT", lastPrice: 50.00, exchange: { name: "NASDAQ", tradingHours: "9:30am - 4pm" } }; function printStockInfo(stock) { let { symbol, exchange: { name } } = stock; console.log(`The ${symbol} stock is traded at ${name}`); } printStockInfo(msft); ``` - **数组解构**： 数组解构与对象解构类似，但使用方括号。以下是一些示例