let name = 'Jack';
name = 'Bit'; // 合法，變量值可修改
let age = 18;
age = 20; // 合法，數(shù)值類型可更新

const PI = 3.14;
// PI = 3.1415; // 非法，基本類型常量不可修改

// 引用類型（數(shù)組、對(duì)象）的特殊情況
const arr = [1, 2, 3];
arr.push(4); // 合法，數(shù)組元素可增刪
arr.shift(); // 合法，刪除數(shù)組第一個(gè)元素

const user = { name: 'vue3', age: 9 };
user.birth = 2015; // 合法，可添加屬性
user.age = 10; // 合法，可修改屬性值

// 傳統(tǒng)字符串（繁瑣）
const htmlStr = '<div class="hot-goods-box"><h1>熱門商品</h1><p>賣爆了賣爆了賣爆了</p></div>';

// 模版字符串（簡(jiǎn)潔）
const htmlStr = `<div class="hot-goods-box">
  <h1>熱門商品</h1>
  <p>賣爆了賣爆了賣爆了</p>
</div>`;

let name = 'Bit';
let age = 9;
// 模版字符串嵌入表達(dá)式
const str = `My name is ${name}, I am ${age} years old, ${age >= 18 ? '已成年' : '未成年'}`;
console.log(str); // 輸出：My name is Bit, I am 9 years old, 未成年

const obj = { name: 'vue3', age: 9 };
console.log(obj.name); // 輸出：vue3
console.log(obj.age); // 輸出：9

const obj = { name: 'vue3', age: 9 };
let key = 'name';
console.log(obj[key]); // 輸出：vue3（動(dòng)態(tài)獲取屬性值）
// 注意：obj.key 等價(jià)于 obj['key']，而非動(dòng)態(tài)變量key

// 屬性簡(jiǎn)寫（屬性名=變量名）
let min = 1;
let max = 99;
const obj = { min, max }; // 等價(jià)于 { min: min, max: max }

// 方法簡(jiǎn)寫（省略:function）
const obj = {
  fn() { // 等價(jià)于 fn: function() {}
    console.log('對(duì)象方法簡(jiǎn)寫');
  }
};

const arr = [11, 22, 33];
// 提取全部元素
let [a, b, c] = arr; // a=11, b=22, c=33
// 跳過第一個(gè)元素，提取后兩個(gè)
let [, b, c] = arr; // b=22, c=33
// 提取第一個(gè)元素，剩余元素收集到rest
let [a, ...rest] = arr; // a=11, rest=[22, 33]

const obj = {
  name: '比特教育科技',
  age: 9,
  address: '陜西省西安市高新區(qū)灃惠南路34號(hào)'
};
// 提取指定屬性
const { age, address } = obj; // age=9, address=對(duì)應(yīng)值
// 給屬性起別名（避免變量沖突）
const { name: uname } = obj; // uname='比特教育科技'
// 提取部分屬性，剩余屬性收集到rest
const { name, ...rest } = obj; // rest={age:9, address:...}

// 無參數(shù)函數(shù)
const fn = () => { console.log('無參數(shù)箭頭函數(shù)'); };

// 單個(gè)參數(shù)（可省略括號(hào)）
const log = arg => { console.log(arg); };

// 多個(gè)參數(shù)
const add = (x, y) => { return x + y; };

// 函數(shù)體只有一行（可省略大括號(hào)和return）
const add = (x, y) => x + y;

// 返回對(duì)象（需用小括號(hào)包裹，避免歧義）
const state = () => ({ token: 'xxxx', userInfo: { name: 'admin' } });

// 數(shù)組遍歷回調(diào)
const arr = [1, 2, 3];
arr.forEach(item => console.log(item));

// 定時(shí)器回調(diào)
setTimeout(() => {
  console.log('2秒后執(zhí)行');
}, 2000);

const goodsList = [
  { id: 1, name: '籃球', num: 1 },
  { id: 2, name: '玩具', num: 3 },
  { id: 3, name: '書籍', num: 2 }
];
// 統(tǒng)計(jì)商品總數(shù)量
const totalNum = goodsList.reduce((prev, item) => prev + item.num, 0);
console.log(totalNum); // 輸出：6

// 回調(diào)地獄示例
setTimeout(() => {
  console.log(1);
  setTimeout(() => {
    console.log(2);
    setTimeout(() => {
      console.log(3);
    }, 1000);
  }, 1000);
}, 2000);

// 封裝延遲函數(shù)
function delay(duration, n) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(n);
    }, duration);
  });
}

// 鏈?zhǔn)秸{(diào)用
delay(2000, 1)
  .then(n1 => {
    console.log(n1);
    return delay(1000, 2);
  })
  .then(n2 => {
    console.log(n2);
    return delay(1000, 3);
  })
  .then(n3 => {
    console.log(n3);
  });

async function log() {
  const n1 = await delay(2000, 1);
  console.log(n1); // 2秒后輸出1
  const n2 = await delay(1000, 2);
  console.log(n2); // 再1秒輸出2
  const n3 = await delay(1000, 3);
  console.log(n3); // 再1秒輸出3
}
log();

{
  "type": "module"
}

// utils/min.js
export default function min(m, n) {
  return m > n ? n : m;
}

// index.js 導(dǎo)入
import min from './utils/min.js';
console.log(min(12, 45)); // 輸出：12

// utils/math.js
export function add(x, y) { return x + y; }
export function sub(x, y) { return x - y; }

// index.js 導(dǎo)入
import { add, sub } from './utils/math.js';
console.log(add(33, 18)); // 輸出：51
console.log(sub(33, 18)); // 輸出：15