• 深入對象
• 內置構造函數

一. 深入對象

• 創建對象三種方式
• 構造函數
• 實例成員&靜態成員

1.1 創建對象三種方式

① 利用對象字面量創建對象

const o = {'name': '哈哈'
}

② 利用new Object 創建對象

const o = new Object({ name: '哈哈' })

③ 構造函數創建對象

1.2 構造函數

① 構造函數：是一種特殊的函數，主要用來初始化對象

② 使用場景：常規的{...} 語法允許創建一個對象，可以使用構造函數快速創建多個類似的對象

③ 約定：

• 命名以大寫字母開頭
• 只能由 new 操作符來執行

④ 寫法：

• 使用new關鍵詞調用函數的行為被稱為實例化
• 實例化構造函數沒有參數時可以省略（）
• 構造函數內部無需寫return，返回值即為新創建的對象
• 構造函數內部的return返回的值無效，所以不要寫return
• new Object（）? new Date() 也是實例化構造函數

function Pig (uname, age) {this.name = unamethis.age = age
}
const p = new Pig('佩奇', 6)
const q = new Pig('喬治', 3)

⑤ 實例化執行過程

• 創建新的空對象
• 構造函數this指向新對象
• 執行構造函數代碼，修改this, 添加新的屬性
• 返回新對象

?1.3 實例成員&靜態成員

?①?實例成員

• 通過構造函數創建的對象稱為實例對象，實例對象中的屬性和方法稱為實例成員
• 為構造函數傳入參數，創建結構相同但值不同的對象
• 構造函數創建的實例對象彼此獨立互不影響

function Pig (name) {this.name = name
}
const peiqi = new Pig('佩奇')
// 1.實例對象上的屬性和方法稱為實例成員
peiqi.sayHi = () => {console.log('hi')
}
console.log(peiqi)

② 靜態成員

• 構造函數的屬性和方法被稱為靜態成員（靜態屬性和靜態方法）
• 靜態成員只能構造函數來訪問
• 靜態方法中的this指向構造函數

Pig.eyes = 2
console.log(Pig.eyes)Pig.sayHi = function () {console.log(this)
}
// 靜態成員調用
Pig.sayHi()

二.內置構造函數

• Object
• Array
• String
• Number

?① 基本數據類型：字符串，數值，布爾，undefined, null

?②? 引用類型：對象

?③? 字符串，數值，布爾等基本類型也都有專門的構造函數，這些我們稱為包裝類型

?④ 引用類型：Object， Array, RegExp, Date等

?⑤ 包裝類型：String, Number, Boolean 等

2.1 Object

① Object 是內置的構造函數，用于創建普通對象

const o = new Object({ name: '哈哈' })

② 三個靜態方法

（1）獲取所有屬性名：Object.keys， 返回的是一個數組

const o = {uname:'pink', age: 18}
// 1.獲取所有屬性名
console.log(Object.keys(o))

（2）獲取所有的屬性值：Object.values

console.log(Object.values(o))

（3）拷貝對象：?Object.assign(目標，拷貝對象)

? ? ? ? ?使用場景：經常給對象添加屬性

const oo = {}
Object.assign(oo, o)
console.log(oo)// 追加一個新的屬性
Object.assign(o, {gender: '女'})

?2.2 Array

?Array是內置的構造函數，用于創建數組，?建議使用字面量創建，不用Array構造函數創建

1. 實例方法

• ?reduce 返回累計處理的結果，經常用于求和
• 基本語法

arr.reduce(function(){}, 起始值)
arr.reduce(function(上一次值, 當前值){}, 初始值)

• 參數

? ? ?① 沒有初始值

const total = arr.reduce(function (pre, current) {return pre + current
})

? ? ?②? 有初始值

const total = arr.reduce(function (pre, current) {return pre + current
}, 10)

? ? ③ 箭頭函數寫法

const total = arr.reduce((pre, current) => pre + current, 10)
console.log(total)

? ?④ reduce的執行過程

• 如果沒有初始值，則上一次值是數組的第一個元素
• 每一次循環，把返回值給作為下一次循環的上一次值
• 如果有起始值，則起始值作為上一次值?

2.其他方法

編號	方法	含義
1	join	數組元素拼接為字符串，返回字符串
2	find	查找元素，返回符合測試條件的第一個數組值，如果沒有符合條件的就返回undefined
3	every	檢測數組所有元素是否都符合指定條件，如果所有元素都通過檢測返回true, 否則返回false
4	some	檢測數組中的元素是否滿足指定條件，如果數組中有元素滿足條件返回true
5	concat	合并兩個數組，返回生成新數組
6	sort	對原數組單元值排序
7	splice	刪除或替換原數組單元
8	reverse	反轉數組
9	findIndex	查找元素的索引值

• find方法使用舉例：

const arr = ['red', 'blue', 'green']
const re = arr.find(function (item) {return item === 'blue'
})
console.log(re)const arr = [
{name: '小米',price: 1999
},
{name: '華為',price: 3999
}
]const re = arr.find(item => item.name === '小米')
console.log(re)

• ?every方法：每一個是否都符合條件，如果都符合，返回true, 如果有一個不符合，返回false

const arr1 = [10, 20, 30]
const flag = arr1.every(item => item >= 20)
console.log(flag)

• some方法

const arr1 = [10, 20, 30]
const flag = arr1.some(item => item >= 40)
console.log(flag)

3.數組靜態方法

• 把偽數組轉換為真數組

const lis = document.querySelectorAll('ul li')
// lis.pop()   // 偽數組無法使用數組的方法
const liss = Array.from(lis)
liss.pop()
console.log(liss)

2.3 String

編號	方法	含義
1	length	實例屬性，用來獲取字符串的長度
2	split(’分隔符‘)	用來將字符串拆分成數組
3	substring(需要截取的第一個字符的索引，[, 結束的索引號)	用于字符串截取
4	startswith(檢測字符串[, 檢測位置索引號])?	檢測是否以某字符開頭
5	includes(搜索的字符串[, 檢測位置索引號])	判斷一個字符串是否包含在另一個字符串中，根據情況返回true或false
6	toUpperCase?	將字母轉換成大寫
7	toLowerCase	用于將字母轉換成小寫
8	indexOf	檢測是否包含某字符
9	endsWith	檢測是否以某字符結尾
10	replace	用于替換字符串，支持正則匹配
11	match	用于查找字符串，支持正則匹配

// 1.split 字符串轉換為數組和join相反
const str = 'pink,red'
const arr = str.split(',')
console.log(arr)// 2.字符串截取
const str = 'hello'
// 不包含結束的索引號
console.log(str.substring(2, 3))