目錄
00閉包
01函數進階
02解構賦值
03通過forEach方法遍歷數組
04深入對象
05內置構造函數
06原型
00閉包
<!-- 閉包 --><html><body><script>// 定義：閉包=內層函數（匿名函數）+外層函數的變量（s）// 作用：封閉數據，提供操作，外部可以訪問函數內部變量function fun() {let s = 'Hello World'return function () {document.write(s)}}let f = fun()f()</script>
</body></html>01函數進階
1>函數參數
????????1.動態參數
????????????????arguments是函數內置的偽數組，包含傳入的所有實參（函數聲明時形參列表為空）
????????2.剩余參數
????????????????將不定數量的剩余參數表示為數組
????????????????形參列表形如(形參列表 , ...剩余參數數組名)
????????3.展開運算符（...）
<!-- 展開運算符 --><html><body><script>let arr = [1, 2, 3]console.log(...arr) // 1 2 3// 不改變原數組</script>
</body></html>2>箭頭函數
????????1.基本語法：
????????????????function(){} 等效于 () => {}
????????????????只有一個形參，小括號可省略
????????????????只有一行函數體，大括號可省略
????????2.箭頭函數參數：
????????????????無動態參數，有剩余參數
02解構賦值
<!-- 數組解構 --><html><body><script>// 定義：將數組各值快速批量賦值給一系列變量let arr = [1, 2, 3]let [a, b, c] = arrconsole.log(a) // 1console.log(b) // 2console.log(c) // 3</script>
</body></html><!-- 對象解構 --><html><body><script>// 定義：將對象屬性和方法快速批量賦值給一系列變量// 注意：新變量名和對應的屬性名要相同let obj = { myname: 'Tian', age: 20 }let { myname, age } = objconsole.log(myname) // Tianconsole.log(age) // 20</script>
</body></html>03通過forEach方法遍歷數組
<!-- 通過forEach方法遍歷數組 --><html><body><script>let arr = ['one', 'two', 'three']arr.forEach(function (item, index) {console.log(item) // 數組元素console.log(index) //索引號})// one// 0// two// 1// three// 2</script>
</body></html>04深入對象
1>構造函數
<!-- 構造函數 --><html><body><script>function Std(uname, age) { // 約定：函數名首字母大寫this.uname = unamethis.age = age}console.log(new Std('羅哲秀', 20))console.log(new Std('雷淇', 19))</script>
</body></html>?2>實例成員&靜態成員
????????實例成員：實例對象的屬性和方法（實例屬性和實例方法）
????????靜態成員：構造函數的屬性和方法（靜態屬性和靜態方法）
05內置構造函數
1>Object常用靜態方法
????????Object.keys(obj)【返回對象obj的鍵（數組）】
????????Object.values(obj)【返回對象obj的值（數組）】
????????Object.assign(obj1,obj2)【obj2拷貝給obj1，追加不覆蓋】
2>Array常用方法
<!-- reduce方法 --><html><body><script>let arr = [1, 2, 3]// reduce的參數為回調函數和初始值let ans1 = arr.reduce((pre, cur) => pre + cur) // 箭頭函數為回調函數console.log(ans1) // 6let ans2 = arr.reduce((pre, cur) => pre + cur, 60) // 60為初始值console.log(ans2) // 66</script>
</body></html><!-- find方法 --><html><body><script>// 以對象數組為例--------------------let arr1 = [{ uname: '羅哲秀', age: 20 }, { uname: '雷淇', age: 19 }]console.log(arr1.find(array => array.age === 19))// 以字符串數組為例--------------------let arr2 = ['羅哲秀', '雷淇']console.log(arr2.find(uname => uname === '雷淇'))// 箭頭函數 uname => uname === '雷淇'// 等價于// function myfind(uname) {return uname === '雷淇'}</script>
</body></html><!-- every和some方法 --><html><body><script>let arr = [{ uname: '羅哲秀', age: 20 }, { uname: '雷淇', age: 19 }]// every方法--------------------// 全部的元素符合條件let flag = arr.every(array => array.age >= 18)console.log(flag) // true// some方法--------------------// 存在符合條件的元素flag = arr.some(array => array.age >= 20)console.log(flag) // true</script>
</body></html>3>String常用屬性和方法
????????實例屬性：length
????????實例方法：
????????????????1.split(分隔符)【將字符串分割為數組】
????????????????2.substring(indexStart[, indexEnd])【截取字符串，不包括indexEnd】
????????????????3.startsWith(Str[, pos]【檢測字符串是否以Str開頭，從pos開始檢測，不寫默認為0】
????????????????4.includes(Str[, pos])【檢測字符串是否含有Str，從pos開始檢測，不寫默認為0】
06原型
<!-- 利用原型對象實現方法共享 --><html><body><script>// 構造函數function Stu(uname, age) {this.uname = unamethis.age = age}// 通過原型prototype，向構造函數添加方法共享Stu.prototype.say = function () {console.log(`我叫${this.uname}，今年${this.age}歲`);};//實例化，并調用共享函數 let LQ = new Stu('雷淇', 19)let QQ = new Stu('清淺', 20)LQ.say()QQ.say()</script>
</body></html><!-- 原型繼承 --><html><body><script>// 父親"人"function people() {this.hair_color = '黑'this.leg_number = '兩'this.say = function () {console.log(`我有${this.hair_color}色的頭發和${this.leg_number}條腿`)}}// 孩子"LQ"function LQ() {this.dance = () => console.log('跳舞')}LQ.prototype = new peoplelet lq = new LQ// 孩子"QQ"function QQ() {this.sing = () => console.log('唱歌')}QQ.prototype = new peoplelet qq = new QQ// 調用共享方法和私有方法，驗證原型繼承lq.say() // 我有黑色的頭發和兩條腿lq.dance() // 跳舞qq.say() // 我有黑色的頭發和兩條腿qq.sing() // 唱歌</script>
</body></html>
)
