// ES5变量声明和提升示例
console.log(x); // 输出: undefined (变量提升，但值未定义)
var x = 1;
var x = 2; // 允许重复声明
console.log(x); // 输出: 2
// ES6变量声明
// console.log(y); // 错误：暂时性死区，不能在声明前访问
let y = 1;
// let y = 2; // 错误：不能重复声明
console.log(y); // 输出: 1
// 块级作用域示例
{
let blockScoped = 'only available in this block';
const CONSTANT = 'cannot be reassigned';
console.log(blockScoped); // 输出: "only available in this block"
console.log(CONSTANT); // 输出: "cannot be reassigned"
}
// console.log(blockScoped); // 错误：blockScoped未定义
// console.log(CONSTANT); // 错误：CONSTANT未定义
// const声明后不能修改引用，但可以修改对象属性
const person = { name: 'John' };
person.name = 'Jane'; // 允许
console.log(person.name); // 输出: "Jane"
// person = {}; // 错误：不能重新赋值

// ES5默认参数
function greetES5(name) {
// 使用逻辑或运算符设置默认值
name = name || 'Guest';
return 'Hello ' + name;
}
console.log(greetES5()); // 输出: "Hello Guest"
console.log(greetES5('John')); // 输出: "Hello John"
// ES6默认参数和箭头函数
const greetES6 = (name = 'Guest') => `Hello ${name}`;
console.log(greetES6()); // 输出: "Hello Guest"
console.log(greetES6('Jane')); // 输出: "Hello Jane"
// ES5 this绑定问题示例
function Counter() {
var self = this; // 保存this引用
this.count = 0;
setInterval(function() {
self.count++;
console.log(self.count); // 每秒输出递增的数字
}, 1000);
}
// ES6箭头函数自动绑定this
class CounterES6 {
constructor() {
this.count = 0;
setInterval(() => {
this.count++;
console.log(this.count); // 每秒输出递增的数字
}, 1000);
}
}
// 剩余参数示例
// ES5使用arguments
function sumES5() {
var args = Array.prototype.slice.call(arguments);
return args.reduce(function(sum, num) {
return sum + num;
}, 0);
}
console.log(sumES5(1, 2, 3)); // 输出: 6
// ES6使用剩余参数
const sumES6 = (...numbers) => numbers.reduce((sum, num) => sum + num, 0);
console.log(sumES6(1, 2, 3)); // 输出: 6

// ES5 (CommonJS)
// math.js
module.exports = {
add: function(a, b) {
return a + b;
}
};
// main.js
var math = require('./math');
// ES6
// math.js
export const add = (a, b) => a + b;
export default class Calculator {};
// main.js
import { add } from './math';
import Calculator from './math';

// 数组解构
const [a, b, ...rest] = [1, 2, 3, 4, 5];
console.log(a); // 输出: 1
console.log(b); // 输出: 2
console.log(rest); // 输出: [3, 4, 5]
// 对象解构
const person = { name: 'John', age: 30, city: 'New York' };
const { name, age, city: location = 'Unknown' } = person;
console.log(name); // 输出: "John"
console.log(age); // 输出: 30
console.log(location); // 输出: "New York"
// 展开运算符 - 数组
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];
console.log(arr2); // 输出: [1, 2, 3, 4, 5]
// 展开运算符 - 对象
const obj1 = { foo: 'bar', x: 42 };
const obj2 = { foo: 'baz', y: 13 };
const clonedObj = { ...obj1 };
const mergedObj = { ...obj1, ...obj2 };
console.log(clonedObj); // 输出: { foo: 'bar', x: 42 }
console.log(mergedObj); // 输出: { foo: 'baz', x: 42, y: 13 }
// 函数参数中使用展开
const numbers = [1, 2, 3];
console.log(Math.max(...numbers)); // 输出: 3

// ES5字符串拼接
var name = 'John';
var age = 30;
var message = 'My name is ' + name + ' and I am ' + age + ' years old.\n' +
'This is a multi-line string.';
console.log(message);
// ES6模板字符串
const name = 'John';
const age = 30;
const message = `My name is ${name} and I am ${age} years old.
This is a multi-line string.`;
console.log(message);
// 模板字符串中的表达式
const a = 10;
const b = 20;
console.log(`Sum is: ${a + b}`); // 输出: "Sum is: 30"
console.log(`${a} is ${a < b ? 'less than' : 'greater than'} ${b}`);
// 输出: "10 is less than 20"
// 带标签的模板字符串
function myTag(strings, ...values) {
let result = '';
strings.forEach((string, i) => {
result += string;
if (i < values.length) {
result += values[i].toUpperCase();
}
});
return result;
}
const name = 'john';
console.log(myTag`Hello ${name}!`); // 输出: "Hello JOHN!"

// Array.from() - 将类数组对象转换为数组
const arrayLike = { 0: 'a', 1: 'b', 2: 'c', length: 3 };
const arr = Array.from(arrayLike);
console.log(arr); // 输出: ['a', 'b', 'c']
// Array.of() - 创建新数组
console.log(Array.of(1, 2, 3)); // 输出: [1, 2, 3]
console.log(Array(3)); // 输出: [empty × 3]
// find() 和 findIndex()
const numbers = [1, 2, 3, 4, 5];
const found = numbers.find(num => num > 3);
const foundIndex = numbers.findIndex(num => num > 3);
console.log(found); // 输出: 4
console.log(foundIndex); // 输出: 3
// includes()
console.log(numbers.includes(3)); // 输出: true
console.log(numbers.includes(6)); // 输出: false
// keys(), values(), entries()
const obj = { a: 1, b: 2 };
console.log(Object.keys(obj)); // 输出: ['a', 'b']
console.log(Object.values(obj)); // 输出: [1, 2]
console.log(Object.entries(obj)); // 输出: [['a', 1], ['b', 2]]
// 数组遍历方法示例
const fruits = ['apple', 'banana', 'orange'];
// forEach
fruits.forEach((fruit, index) => {
console.log(`${index}: ${fruit}`);
});
// 输出:
// 0: apple
// 1: banana
// 2: orange
// map
const upperFruits = fruits.map(fruit => fruit.toUpperCase());
console.log(upperFruits); // 输出: ['APPLE', 'BANANA', 'ORANGE']

// 创建一个Promise
function delay(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
// 使用Promise
console.log('开始');
delay(2000)
.then(() => {
console.log('2秒后执行'); // 2秒后输出
return delay(1000);
})
.then(() => {
console.log('再过1秒执行'); // 再过1秒后输出
})
.catch(error => {
console.error('发生错误:', error);
});
// async/await语法（ES8引入，但常与Promise一起使用）
async function example() {
try {
console.log('开始');
await delay(2000);
console.log('2秒后执行');
await delay(1000);
console.log('再过1秒执行');
} catch (error) {
console.error('发生错误:', error);
}
}
// Promise.all()示例
Promise.all([
Promise.resolve(1),
Promise.resolve(2),
Promise.resolve(3)
])
.then(values => {
console.log(values); // 输出: [1, 2, 3]
});

// Set数据结构
const set = new Set([1, 2, 2, 3, 3]);
console.log(set.size); // 输出: 3
console.log([...set]); // 输出: [1, 2, 3]
set.add(4);
console.log(set.has(4)); // 输出: true
set.delete(4);
console.log(set.has(4)); // 输出: false
// Map数据结构
const map = new Map();
const key = { id: 1 };
map.set(key, 'value');
console.log(map.get(key)); // 输出: "value"
console.log(map.has(key)); // 输出: true
console.log(map.size); // 输出: 1
// Symbol
const symbol1 = Symbol('description');
const symbol2 = Symbol('description');
console.log(symbol1 === symbol2); // 输出: false
const obj = {
[symbol1]: 'Hello',
[symbol2]: 'World'
};
console.log(obj[symbol1]); // 输出: "Hello"
console.log(obj[symbol2]); // 输出: "World"
// 生成器函数
function* numberGenerator() {
yield 1;
yield 2;
yield 3;
}
const gen = numberGenerator();
console.log(gen.next().value); // 输出: 1
console.log(gen.next().value); // 输出: 2
console.log(gen.next().value); // 输出: 3
console.log(gen.next().done); // 输出: true