概念

建構函式 ：是一種特殊的函式，主要用來初始化物件

使用場景：常規的 {...} 語法允許建立一個物件。比如我們建立了佩奇的物件，繼續建立喬治的物件還需要重新寫一

遍，此時可以通過建構函式來快速建立多個類似的物件

注意

1. 建構函式在技術上是常規函式。
2. 它們的命名以大寫字母開頭。
3. 它們只能由 "new" 操作符來執行。

建立

建構函式語法：大寫字母開頭的函式

function Person (uname, gender, age) {
  // 設定屬性
  // this呼叫者
  this.uname = uname
  this.gender = gender
  this.age = age 
}

// 例項化物件
const obj1 = new Person('小明', 'man', 22)
console.log(obj1)
 

說明：

1. 使用 new 關鍵字呼叫函式的行為被稱為例項化
2. 例項化建構函式時沒有引數時可以省略 ()
3. 建構函式內部無需寫return，返回值即為新建立的物件
4. 建構函式內部的 return 返回的值無效，所以不要寫return
5. new Object（） new Date（） 也是例項化建構函式

例項化執行過程

1. 建立新物件
2. 建構函式this指向新物件
3. 執行建構函式程式碼，修改this，新增新的屬性
4. 返回新物件

例項成員&靜態成員

例項成員

通過建構函式建立的物件稱為例項物件，例項物件中的屬性和方法稱為例項成員。

• 為建構函式傳入引數，動態建立結構相同但值不同的物件
• 建構函式建立的例項物件彼此獨立互不影響。

靜態成員

建構函式的屬性和方法被稱為靜態成員

• 一般公共特徵的屬性或方法設定為靜態成員
• 靜態成員方法中的 this 指向建構函式本身

// 建構函式：呼叫者是：例項化物件
function Person (uname, gender, age) {
  // 設定屬性
  // this是指呼叫者
  this.uname = uname
  this.gender = gender
  this.age = age 
  this.say = function () {
    console.log('say')
  }
}

// 例項化物件
// 例項化物件擁有的屬性和方法叫做例項成員
// 只有例項化物件才能使用例項成員（例項屬性，例項方法）

const obj = new Person('小明', 'man', 22)
console.log(obj)

// 建構函式的屬性和方法稱為靜態成員
// 只有建構函式才能使用靜態成員(靜態屬性，靜態方法)
Person.eye = 2
Person.arms = 2
Person.eat = function () {
  console.log('eat方法')
}

// 一個物件訪問成員，如果找不到，返回undefined
 

內建建構函式

瞭解

在 JavaScript 中最主要的資料型別有 6 種：

基本資料型別：

字串、數值、布林、undefined、null

引用型別:

物件

但是，我們會發現有些特殊情況：

const str = 'string'
console.log(str.length)

其實字串、數值、布林、等基本型別也都有專門的建構函式，這些我們稱為包裝型別。

JS中幾乎所有的資料都可以基於構成函式建立。

引用型別

Object，Array，RegExp，Date 等

包裝型別

String，Number，Boolean 等

const str = 'asdasfafad'
console.log(str)

// 物件.屬性
// 物件.方法()
// str.length
// str.trim()

// String:建構函式
// 包裝型別
const str1 = new String('asdasfafad')
console.log(str1)

const num = new Number(2222)
console.log(num)

const bool = new Boolean(true)
console.log(bool)

Object

Object 是內建的建構函式，用於建立普通物件。

三個常用靜態方法（靜態方法就是隻有建構函式Object可以呼叫的方法）

1. Object.keys(例項物件) 靜態方法獲取物件中所有屬性（鍵）
2. Object.values(例項物件) 靜態方法獲取物件中所有屬性值
3. Object. assign(新建立例項物件，要拷貝的例項物件) 靜態方法常用於物件拷貝

let obj = {
  name : '小明',
  gender : 'man',
  age : 18,
  index : 3,
  score : 1,
  eat : function () {
    console.log('eat')
  }

}

let o = {}


// Object: values 獲取物件所有值，返回陣列
console.log(Object.values(obj))

// Object: keys 獲取物件所有屬性和方法，返回陣列
console.log(Object.keys(obj))

// Object.assign(新物件，就物件)實現淺拷貝，屬性：新物件中有則替換，沒有則新增
Object.assign(o, obj)
console.log(o, obj)


let newObj = {
  name : '123',
  lanhuge : 'chinese',
  skin : 'yellow',
}

Object.assign(newObj, obj)
console.log(newObj, obj)

Array

Array 是內建的建構函式，用於建立陣列

陣列常見例項方法-核心方法

1. reduce

   語法：陣列.reduce(function(累計值, 當前元素, 索引號, 源陣列 ){}, 起始值)

   引數：起始值可以省略，如果寫就作為第一次累計的起始值

   作用：返回函式累計處理的結果，經常用於求和等

   返回值：函式累計處理的結果

   累計值引數：

   1. 如果有起始值，則以起始值為準開始累計，初始： 累計值 = 起始值
   2. 如果沒有起始值， 則累計值以陣列的第一個陣列元素作為起始值開始累計，初始：累計值 = arr[0]
   3. 後面每次遍歷就會用後面的陣列元素 累計到 累計值 裡面 （類似求和裡面的 sum ）

   const arr = [1, 3, 4, 6]
   const re = arr.reduce( (prev, item) => prev + item)
   console.log(re)
   
   // ①：給員工每人漲薪 30%
   // ②：然後計算需要額外支出的費用
   
   const array = [{
     name: '張三',
     salary: 10000
     },
     {
     name: '李四',
     salary: 10000
     }, 
     {
     name: '王五',
     salary: 10000
     },
   ]
   //不能省略初始值，因為如果沒有起始值，初始：累計值 = array[0],是一個物件
   const total = array.reduce((prev, item) => prev + item.salary * .3, 0)
   
   console.log(total)
   

2. forEach

   語法：arr.forEach(callback(currentValue [, index [, array]])[, thisArg])

   作用：forEach() 方法對陣列的每個元素執行一次給定的函式。無返回值

   const arr = [4, 6, 7, 8, 10]
   let sum = 0
   arr.forEach(item => sum += item )
   console.log(sum)//35
   

3. filter

   語法：var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])

   作用：filter()方法建立一個新陣列, 其包含符合函式條件的所有元素

   console.log(arr.filter(item => item >7))//[8, 10]
   

4. map

   語法：let new_array = arr.map(function callback(currentValue[, index[, array]]){//Return element for new_array}[, thisArg])

   作用：map() 方法建立一個新陣列，這個新陣列由原陣列中的每個元素都呼叫一次提供的函式後的返回值組成。

   console.log(arr.map(item => item * item))//[16, 36, 49, 64, 100]
   

陣列常見方法-其他方法

const arr = [4, 6, 7, 8, 10]

// [,]可選引數
// find：遍歷陣列查詢滿足條件的第一個元素並返回
// 遍歷陣列查詢大於7的第一個元素
// 執行次數：找到一個滿足條件的就停止
console.log(arr.find(item => item > 7))//8

// findIndex：遍歷陣列查詢滿足條件的第一個元素的索引值並返回
// 遍歷陣列查詢大於7的第一個元素的下標
// 執行次數：找到一個滿足條件的就停止
console.log(arr.findIndex(item => item > 7))//3

// every:遍歷陣列檢視每個元素是否滿足條件，如果都滿足，返回true，否則，返回false
// 遍歷陣列檢視是否每一個元素都大於7
// 執行次數：找到一個不滿足條件的就停止（false）或遍歷完整陣列
console.log(arr.every(item => item > 7))//false
// 若收到一個空陣列，此方法在任何情況下都會返回 true。
console.log([].every(item => item > 7))//true

// some:遍歷陣列檢視每個元素是否滿足條件，如果有一個滿足，返回true，都不滿足，返回false
// 執行次數：找到一個滿足條件的就停止
console.log(arr.some(item => item > 7))//true




// concat() 方法用於合併兩個或多個數組。此方法不會更改現有陣列，而是返回一個新陣列。
// 語法：let new_array = old_array.concat(value1[, value2[, ...[, valueN]]])
const array1 = ['a', 'b', 'c']
const array2 = ['e', 'f', 'g']
console.log(arr.concat(array1,array2))//[4, 6, 7, 8, 10, "a", "b", "c", "e", "f", "g"]

// copyWithin() 方法淺複製陣列的一部分到同一陣列中的另一個位置，並返回它，不會改變原陣列的長度。改變原陣列
// 語法：arr.copyWithin(target[, start[, end]])
// end省略，表示拷貝從起始索引到結尾的元素
// copy to index 0 the element at index 3
console.log(arr.copyWithin(0, 3, 4))//[8, 6, 7, 8, 10]
// copy to index 1 all elements from index 3 to the end
console.log(arr.copyWithin(1, 3))//[8, 8, 10, 8, 10]


// fill() 方法用一個固定值填充一個數組中從起始索引到終止索引內的全部元素。不包括終止索引。改變原陣列
// 語法：arr.fill(value[, start[, end]])
console.log(arr.fill('*',2,4))//[4, 6, "*", "*", 10]
console.log(arr.fill('*',2))//[4, 6, "*", "*", "*"]
console.log(arr.fill('*'))//["*", "*", "*", "*", "*"]


// filter() 方法建立一個新陣列, 其包含滿足函式條件的所有元素。
console.log(arr.filter(item => item >7))//[8, 10]

陣列常見方法- 偽陣列轉換為真陣列

靜態方法 Array.from()

<ui>
  <li></li>
  <li></li>
  <li></li>
</ui>

const lis = document.querySelectorAll('li')
// 偽陣列轉真陣列
const arr = Array.from(lis)
arr.pop()
console.log(lis,arr)


let o = {
  0 : 'a',
  1 : 'b',
  2 : 'c',
  3 : 'd',
  length : 4
}

// 在轉換偽陣列時，必須有length屬性
const array = Array.from(o)
console.log(array)

String

構建函式

1. 字面量構建函式
2. new String()

const str1 = 'abc'
const str2 = new String('abc')
console.log(str1,str2)

常見例項方法

const str = 'abcdsdfacfdsf'

// console.log(str.length)

// str.split('分隔符'):分割字串，返回陣列，與join作用相反
console.log(str.split('c'))
console.log(str.split(''))

// str.substring(indexStart[, indexEnd]):字串擷取
// 第一個引數：從哪個索引位置開始擷取
// 第二個引數：從哪個索引位置截止擷取（不包含）
// 如果只有一個引數，代表從該位置擷取到結尾
// 特別注意：起始位置可以擷取，結束位置擷取不到

console.log(str.substring(2,4))//cd
console.log(str.substring(2))//cdsdfacfdsf

// str.startsWith(searchString[, position])：檢測是否以某字串開頭
// 第一個引數：檢測字串，判斷是否以該字串開頭
// 第二個引數：從哪個索引位置開始檢測，不寫預設0
console.log(str.startsWith('ab'))//true
console.log(str.startsWith('ab',2))//false

// str.includes(searchString[, position])：判斷一個字串中是否包含另一個字串
// 第一個引數：檢測字串，判斷是否包含該字串
// 第二個引數：從哪個索引位置開始檢測，不寫預設0
console.log(str.includes('ab'))//true
console.log(str.includes('ab',10))//false


// str.indexOf(searchValue [, fromIndex])：物件中第一次出現的指定值的索引
// 第一個引數：檢測字串
// 第二個引數：從哪個索引位置開始檢測，不寫預設0
// 字串中沒有檢測字串返回-1
console.log(str.indexOf('fa'))//6
console.log(str.indexOf('fa',10))//-1

Number

Number 是內建的建構函式，用於建立數值

const num1 = 1
const num2 = new Number(2)
console.log(num1,num2)

常用方法：

toFixed() 設定保留小數位的長度

const price1 = 26.39656
const price2 = 26
// toFixed(n):四捨五入保留n位小數
// 整數在後面補上n位小數0
console.log(price1.toFixed(2),price2.toFixed(2))//26.40 26.00