function calculate(x, y) {
  const result = x + y;  // 函數(shù)作用域內(nèi)的變量
  console.log(result);
  return result;
}
calculate(10, 5);  // 15
// console.log(result); // 報(bào)錯(cuò)：result未定義

{
  let blockScoped = "我在塊作用域內(nèi)";
  const constantValue = "我也是";
  console.log(blockScoped); // 正常訪問(wèn)
}
// console.log(blockScoped); // 報(bào)錯(cuò)
// console.log(constantValue); // 報(bào)錯(cuò)

// var 沒(méi)有塊作用域
if (true) {
  var globalLike = "我實(shí)際上在全局作用域";
  let trulyBlocked = "我確實(shí)在塊作用域";
}
console.log(globalLike); // 正常訪問(wèn)
// console.log(trulyBlocked); // 報(bào)錯(cuò)

const globalVar = "我是全局變量";

function accessGlobal() {
  console.log(globalVar); // 可以訪問(wèn)
  innerGlobal = "危險(xiǎn)！隱式全局變量"; // 沒(méi)有聲明關(guān)鍵字，成為全局變量
}

accessGlobal();
console.log(innerGlobal); // 可以訪問(wèn)，但不推薦這種寫(xiě)法

let outer = "全局變量";

function outerFunction() {
  let middle = "外層函數(shù)變量";
  
  function innerFunction() {
    let inner = "內(nèi)層函數(shù)變量";
    console.log(inner);    // 1. 優(yōu)先查找當(dāng)前作用域
    console.log(middle);   // 2. 查找父級(jí)作用域
    console.log(outer);    // 3. 查找全局作用域
    // console.log(notExist); // 報(bào)錯(cuò)：所有作用域都找不到
  }
  
  innerFunction();
  // console.log(inner); // 報(bào)錯(cuò)：父作用域不能訪問(wèn)子作用域
}

outerFunction();

// 棧內(nèi)存 - 存儲(chǔ)基本類型和引用地址
let num = 10;      // 棧內(nèi)存
let str = "hello"; // 棧內(nèi)存

// 堆內(nèi)存 - 存儲(chǔ)復(fù)雜類型
let obj = {        // obj在棧，{name: "John"}在堆
  name: "John",
  age: 30
};

let arr = [1, 2, 3]; // arr在棧，[1,2,3]在堆

// 嵌套引用問(wèn)題
function problem() {
  let objA = {};
  let objB = {};
  
  objA.ref = objB;  // objB引用次數(shù): 1
  objB.ref = objA;  // objA引用次數(shù): 1
  
  // 即使離開(kāi)作用域，引用計(jì)數(shù)不為0，無(wú)法回收
}

// 基本閉包格式
function outer() {
  let a = 100
  function fn() {
    console.log(a)
  }
  return fn
}
const fun = outer()
fun()

// 1. 數(shù)據(jù)私有化
// 統(tǒng)計(jì)函數(shù)調(diào)用次數(shù)
function count() {
  let i = 0;
  function fn() {
    i++;
    console.log(`函數(shù)被調(diào)用了${i}次`);
  }
  return fn;
}
const fun = count();
fun(); // 函數(shù)被調(diào)用了1次
fun(); // 函數(shù)被調(diào)用了2次

// 可能造成內(nèi)存泄漏的示例
function leakyFunction() {
  const largeData = new Array(1000000).fill("data");
  
  return function() {
    console.log("我持有l(wèi)argeData的引用");
    // 即使largeData不再需要，由于閉包引用，無(wú)法被回收
  };
}

// 解決方法：及時(shí)釋放引用
function safeFunction() {
  const largeData = new Array(1000000).fill("data");
  
  const innerFunction = function() {
    console.log("使用數(shù)據(jù)");
  };
  
  // 使用后手動(dòng)解除引用
  largeData = null;
  
  return innerFunction;
}

// 變量提升示例
// 把所有var聲明的變量提升到當(dāng)前作用域的最前面
// 只提升聲明，不提升賦值
function fn() {
  console.log(num); // undefined
  var num = 10;
}
// 相當(dāng)于
function fn() {
  var num;
  console.log(num);
  num = 10;
}

// 函數(shù)聲明會(huì)提升
// 會(huì)把所有函數(shù)聲明提升到當(dāng)前作用域的最前面
// 只提升函數(shù)聲明，不提升函數(shù)調(diào)用
fn(); // 函數(shù)提升
function fn() {
  console.log('函數(shù)提升');
}

// 函數(shù)表達(dá)式不會(huì)提升
fun(); // 錯(cuò)誤
var fun = function() {
  console.log('函數(shù)表達(dá)式');
};

<script>
  // 設(shè)置參數(shù)默認(rèn)值
  function sayHi(name="小明", age=18) {
    document.write(`<p>大家好，我叫${name}，我今年${age}歲了。</p>`);
  }
  // 調(diào)用函數(shù)
  sayHi();
  sayHi('小紅');
  sayHi('小剛', 21);
</script>

function getSum() {
  let sum = 0;
  for (let i = 0; i < arguments.length; i++) {
    sum += arguments[i];
  }
  console.log(sum);
}
getSum(2, 3, 4); // 9

function getSum(a, b, ...arr) {
  let sum = 0;
  for (let i = 0; i < arr.length; i++) {
    sum += arr[i];
  }
  console.log(sum);
}
getSum(1, 2, 3, 4, 5); // 12

// 展開(kāi)數(shù)組
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
// 1. 求最大（?。┲?
console.log(Math.max(...arr1)); // 3
console.log(Math.min(...arr1)); // 1

// 2. 合并數(shù)組
const arr = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]

// 復(fù)制數(shù)組（淺拷貝）
const arrCopy = [...arr1];

// 展開(kāi)對(duì)象
const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 }; // {a:1, b:2, c:3}

// 基本語(yǔ)法
const fn1 = () => {
  console.log(123);
};

// 有參數(shù)的箭頭函數(shù)（單個(gè)參數(shù)可省略括號(hào)）
const fn2 = x => {
  console.log(x);
};

// 只有一行代碼時(shí)，可省略大括號(hào)和return
const fn3 = x => x + x;

// 直接返回對(duì)象（需要用括號(hào)包裹）
const fn4 = (uname) => ({ uname: uname });

<script>
    // 以前this的指向：  誰(shuí)調(diào)用的這個(gè)函數(shù)，this 就指向誰(shuí)
    // console.log(this)  // window
    // // 普通函數(shù)
    // function fn() {
    //   console.log(this)  // window
    // }
    // window.fn()
    // // 對(duì)象方法里面的this
    // const obj = {
    //   name: 'andy',
    //   sayHi: function () {
    //     console.log(this)  // obj
    //   }
    // }
    // obj.sayHi()

    // 2. 箭頭函數(shù)的this  是上一層作用域的this 指向
    // const fn = () => {
    //   console.log(this)  // window
    // }
    // fn()
    // 對(duì)象方法箭頭函數(shù) this
    // const obj = {
    //   uname: 'pink老師',
    //   sayHi: () => {
    //     console.log(this)  // this 指向誰(shuí)？ window
    //   }
    // }
    // obj.sayHi()

    const obj = {
      uname: 'pink老師',
      sayHi: function () {
        console.log(this)  // obj
        let i = 10
        const count = () => {
          console.log(this)  // obj 
        }
        count()
      }
    }
    obj.sayHi()

  </script>

const getSum = (...arr) => {
  let sum = 0;
  for (let i = 0; i < arr.length; i++) {
    sum += arr[i];
  }
  return sum;
};
console.log(getSum(2, 3, 5)); // 10

// 基本用法
const [max, min, avg] = [100, 60, 80];
console.log(max); // 100

// 變量交換
let a = 1, b = 2;
[b, a] = [a, b];
console.log(a, b); // 2 1

// 1. 變量多，單元值少（未匹配的變量為undefined）
const [a, b, c, d] = [1, 2, 3];
console.log(d); // undefined

// 2. 變量少，單元值多（忽略多余的值）
const [x, y] = [1, 2, 3];

// 3. 使用剩余參數(shù)收集多余的值
const [i, j, ...k] = [1, 2, 3, 4];
console.log(k); // [3, 4]

// 4. 設(shè)置默認(rèn)值
const [o = 0, p = 0] = [];
console.log(o, p); // 0 0

// 5. 跳過(guò)某些值
const [e, f, , h] = [1, 2, 3, 4];
console.log(e, f, h); // 1 2 4

// 6. 多維數(shù)組解構(gòu)
const [l, m, [n, g]] = [1, 2, [3, 4]];

// 基本用法
const { uname, age } = { uname: 'pink老師', age: 18 };

// 變量重命名
const { uname: username, age } = { uname: 'pink老師', age: 18 };

// 解構(gòu)數(shù)組中的對(duì)象
const pig = [
  {
    name: '佩奇',
    age: 6
  }
];
const [{ name: uname, age }] = pig;

// 多級(jí)數(shù)組對(duì)象解構(gòu)
const pig = [
  {
    name: '佩奇',
    family: {
      mother: '豬媽媽',
      father: '豬爸爸',
      sister: '喬治'
    },
    age: 6
  }
];
const [{ name, family: { mother, father, sister }, age }] = pig;

<body>
  <script>
    // 1. 這是后臺(tái)傳遞過(guò)來(lái)的數(shù)據(jù)
    const msg = {
      "code": 200,
      "msg": "獲取新聞列表成功",
      "data": [
        {
          "id": 1,
          "title": "5G商用自己，三大運(yùn)用商收入下降",
          "count": 58
        },
        {
          "id": 2,
          "title": "國(guó)際媒體頭條速覽",
          "count": 56
        },
        {
          "id": 3,
          "title": "烏克蘭和俄羅斯持續(xù)沖突",
          "count": 1669
        },

      ]
    }

    // 需求1： 請(qǐng)將以上msg對(duì)象  采用對(duì)象解構(gòu)的方式 只選出  data 方面后面使用渲染頁(yè)面
    // const { data } = msg
    // console.log(data)
    // 需求2： 上面msg是后臺(tái)傳遞過(guò)來(lái)的數(shù)據(jù)，我們需要把data選出當(dāng)做參數(shù)傳遞給 函數(shù)
    // const { data } = msg
    // msg 雖然很多屬性，但是我們利用解構(gòu)只要 data值
    function render({ data }) {
      // const { data } = arr
      // 我們只要 data 數(shù)據(jù)
      // 內(nèi)部處理
      console.log(data)

    }
    render(msg)

    // 需求3， 為了防止msg里面的data名字混淆，要求渲染函數(shù)里面的數(shù)據(jù)名改為 myData
    function render({ data: myData }) {
      // 要求將 獲取過(guò)來(lái)的 data數(shù)據(jù) 更名為 myData
      // 內(nèi)部處理
      console.log(myData)

    }
    render(msg)

  </script>

const arr = ['red', 'green', 'pink'];
arr.forEach(function(item, index) {
  console.log(item); // 元素值
  console.log(index); // 索引
});

// 使用箭頭函數(shù)簡(jiǎn)寫(xiě)
arr.forEach((item, index) => {
  console.log(item, index);
});

const arr = [10, 20, 30];

// 使用函數(shù)表達(dá)式
const newArr1 = arr.filter(function(item) {
  return item >= 20;
});

// 使用箭頭函數(shù)簡(jiǎn)寫(xiě)
const newArr2 = arr.filter(item => item >= 20);
console.log(newArr2); // [20, 30]

// 必須加分號(hào)的情況

// 1. 立即執(zhí)行函數(shù)前
(function() {
  console.log("IIFE");
})();

// 安全寫(xiě)法：前面加分號(hào)
;(function() {
  console.log("安全的IIFE");
})();

// 2. 以數(shù)組開(kāi)頭的代碼前
const name = "JavaScript"
;[1, 2, 3].forEach(n => console.log(n))

// 3. 以模板字符串開(kāi)頭的代碼前
const greeting = "Hello"
`world`.toUpperCase() // 可能出錯(cuò)

// 1. 優(yōu)先使用const，其次是let
const PI = 3.14159;
let counter = 0;

// 2. 避免使用var
// ? 不好
var oldVar = "過(guò)時(shí)";

// ? 好
let modernLet = "現(xiàn)代";
const modernConst = "更現(xiàn)代";

// 3. 立即執(zhí)行函數(shù)創(chuàng)建私有作用域
(function() {
  const privateVar = "外部無(wú)法訪問(wèn)";
  // 模塊代碼
})();

// 4. 模塊化組織代碼
const Module = (function() {
  let privateData = "私有";
  
  return {
    publicMethod: function() {
      return privateData;
    }
  };
})();

// 1. 明確閉包的目的
function createCache() {
  const cache = new Map();
  
  return {
    set: (key, value) => cache.set(key, value),
    get: (key) => cache.get(key),
    has: (key) => cache.has(key)
  };
}

// 2. 避免不必要的閉包
function avoidClosure(arr) {
  // ? 不必要的閉包
  arr.forEach(function(item) {
    console.log(item);
  });
  
  // ? 更簡(jiǎn)潔
  arr.forEach(item => console.log(item));
}

// 3. 注意內(nèi)存管理
function createHeavyClosure() {
  const largeData = new Array(1000000);
  
  const useData = () => {
    // 使用數(shù)據(jù)
  };
  
  // 使用完畢后解除引用
  const cleanup = () => {
    largeData.length = 0;
  };
  
  return { useData, cleanup };
}