JavaScript ES6+

// 解构赋值 - 数据提取利器
const user = { name: '张三', age: 28, address: { city: '北京' } };
const { name, age, address: { city } } = user;
console.log(name, city); // 张三 北京

// 数组解构 + 默认值 + 跳过
const [first, , third = '默认'] = ['a', 'b', 'c'];

// 展开运算符
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5]; // 浅拷贝 + 合并
const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3, b: 99 }; // b被覆盖为99

// 箭头函数与this
const team = {
  name: '前端组',
  members: ['Alice', 'Bob'],
  listMembers() {
    // 箭头函数继承外层this
    this.members.forEach(member => {
      console.log(\`\${member} 属于 \${this.name}\`);
    });
  }
};

// Map与Set
const cache = new Map();
cache.set('key', { data: 123 });
cache.has('key'); // true
const unique = [...new Set([1, 1, 2, 2, 3])]; // [1,2,3]

// 可选链与空值合并
const config = { db: { host: 'localhost' } };
const port = config?.db?.port ?? 3306; // 3306
const name2 = config?.db?.name ?? 'default'; // 'default'

// 生成器函数 - 惰性求值
function* range(start, end, step = 1) {
  for (let i = start; i < end; i += step) {
    yield i;
  }
}
const numbers = range(0, 10, 2);
console.log([...numbers]); // [0, 2, 4, 6, 8]

// 无限序列
function* fibonacci() {
  let [a, b] = [0, 1];
  while (true) {
    yield a;
    [a, b] = [b, a + b];
  }
}
const fib = fibonacci();
console.log(fib.next().value); // 0
console.log(fib.next().value); // 1
console.log(fib.next().value); // 1
console.log(fib.next().value); // 2

// Proxy - 响应式数据基础
function reactive(target, onChange) {
  return new Proxy(target, {
    set(obj, key, value) {
      const old = obj[key];
      obj[key] = value;
      if (old !== value) onChange(key, value, old);
      return true;
    },
    get(obj, key) {
      console.log(\`读取属性: \${String(key)}\`);
      return obj[key];
    }
  });
}

const state = reactive({ count: 0 }, (key, val, old) => {
  console.log(\`\${key}: \${old} → \${val}\`);
});
state.count = 1; // count: 0 → 1

// 标签模板
function highlight(strings, ...values) {
  return strings.reduce((result, str, i) => {
    const val = values[i] ? \`<mark>\${values[i]}</mark>\` : '';
    return result + str + val;
  }, '');
}
const keyword = 'JavaScript';
const text = highlight\`学习\${keyword}让前端开发更强大\`;
// => 学习<mark>JavaScript</mark>让前端开发更强大

// 对象条件属性
const config = {
  host: 'localhost',
  ...(isDev && { debug: true }),
  ...(isProd && { secure: true }),
};

// 数组扁平与去重
const nested = [1, [2, [3, [4]]]];
nested.flat(Infinity); // [1, 2, 3, 4]
[...new Set(nested.flat(Infinity))]; // 去重

// Object.fromEntries 反转映射
const prices = Object.fromEntries(
  Object.entries({ apple: 5, banana: 3, orange: 4 })
    .filter(([_, price]) => price >= 4)
    .map(([fruit, price]) => [fruit, price * 1.1]) // 涨价10%
);

// Promise.allSettled 并行执行
const results = await Promise.allSettled([
  fetchUser(), fetchPosts(), fetchComments()
]);
const succeeded = results
  .filter(r => r.status === 'fulfilled')
  .map(r => r.value);

// 空值合并赋值运算符 ??=
let count = null;
count ??= 0; // count = 0 (只在null/undefined时赋值)

// 逻辑或赋值 ??= vs ||=
// ||= : 在falsy(0, '', false, null, undefined)时赋值
// ??= : 只在null/undefined时赋值
let items = 0;
items ||= 10; // items = 10 (0是falsy)
items ??= 10; // items = 0  (0不是null/undefined)

class Range {
  constructor(start, end, step = 1) {
    this.start = start;
    this.end = end;
    this.step = step;
  }
  
  [Symbol.iterator]() {
    let current = this.start;
    return {
      next: () => {
        if (current < this.end) {
          const value = current;
          current += this.step;
          return { value, done: false };
        }
        return { done: true };
      }
    };
  }
}

const range = new Range(0, 10, 2);
[...range]; // [0, 2, 4, 6, 8]
for (const n of range) console.log(n);