深圳專業(yè)網(wǎng)站制作技術(shù)簡單的網(wǎng)站建設(shè)
目錄
一、構(gòu)造函數(shù)
? ?1、 創(chuàng)建對(duì)象
2、new執(zhí)行過程
?3、帶參數(shù)構(gòu)造函數(shù)
4、實(shí)例成員與靜態(tài)成員
二、內(nèi)置構(gòu)造函數(shù)
1、Object靜態(tài)方法
?2、包裝類型
3、Array
1、map方法??
2、find方法
3、findIndex( )?
4、some與every
5、reverse()
6、reduce方法 ? ??
7、forEach() 方法
8、filter( )
一、構(gòu)造函數(shù)
構(gòu)造函數(shù)是專門用于創(chuàng)建對(duì)象的函數(shù)，如果一個(gè)函數(shù)使用 new 關(guān)鍵字調(diào)用，那么這個(gè)函數(shù)就是構(gòu)造函數(shù)。
<script>// 定義函數(shù)function foo() {console.log('通過 new 也能調(diào)用函數(shù)...');}// 調(diào)用函數(shù)new foo;
</script>?
總結(jié)：
使用
new關(guān)鍵字調(diào)用函數(shù)的行為被稱為實(shí)例化實(shí)例化構(gòu)造函數(shù)時(shí)沒有參數(shù)時(shí)可以省略
()構(gòu)造函數(shù)的返回值即為新創(chuàng)建的對(duì)象
構(gòu)造函數(shù)內(nèi)部的
return返回的值無效！
? ?1、 創(chuàng)建對(duì)象
?? ?
?? ?1.字面量對(duì)象
?? ?const obj = { uname: 'John' , age: 20 }?? ?2.new Object
??
//?const obj = new 0bject({ uname: 'John' , age: 20 })const obj = new 0bject( )obj.uname = 'John'obj.age = 20console.log(obj)
?
?? ?3.通過構(gòu)造函數(shù)（自定義）創(chuàng)建
?? ?構(gòu)造函數(shù)--->1.構(gòu)造出對(duì)象的函數(shù)，
?? ??? ? ? ? 2.將來通過new調(diào)用
?? ??? ? ? ? 3.構(gòu)造函數(shù)名首字母建議大寫
?
內(nèi)置內(nèi)構(gòu)函數(shù)（Array,Date,Object)
?? ?自定義構(gòu)造函數(shù)
?? ?定義學(xué)生構(gòu)造函數(shù)
?? ?function Student( ) {
?? ?//添加屬性 ? ?this===創(chuàng)建出來的對(duì)象
?? ?this.屬性名=屬性值
?? ?this.方法名=funcion() { ?}?? ?//不需要寫return，默認(rèn)會(huì)返回this，假如顯示指定return
?? ?// return基本類型會(huì)被忽略, return引用類型將來new得到的也是該引用類型?
?? ?//return [ ?]
?? ?
?? ?}
?
// 定義學(xué)生構(gòu)造函數(shù)function Student() {// 添加屬性this.school = '大前端學(xué)院'this.age = 18}?// 基于Student構(gòu)造函數(shù)創(chuàng)建對(duì)象const s1 = new Student()const s2 = new Student()console.log(s1)console.log(s2)調(diào)用
?? ?const s1=new Student( )
?? ?無參數(shù)時(shí) ?小括號(hào)可以省略
?? ?const s1=new Student
2、new執(zhí)行過程
new 關(guān)鍵字來調(diào)用構(gòu)造函數(shù)-->得到一個(gè)對(duì)象
?? ?1.實(shí)際參數(shù)傳遞給形式參數(shù)
?? ?2.內(nèi)部先創(chuàng)建一個(gè)空對(duì)象 { ?}，并且讓this指向該空對(duì)象
?? ?3.執(zhí)行函數(shù)體
?? ?4.返回這個(gè)對(duì)象
// 定義學(xué)生構(gòu)造函數(shù)function Student() {this.school = '大前端學(xué)院'this.age = 18this.sayHi = function () {console.log('sayHi')}}const s1 = new Student()console.log(s1)s1.sayHi()const s2 = new Student // 無參數(shù) 小括號(hào)可省略console.log(s2)?3、帶參數(shù)構(gòu)造函數(shù)
function Student(age){this.name='張三'this.age=agethis.speek=function() {console.log('speek')}}const s1=new Student(20)console.log(s1)console.log(s1.age)4、實(shí)例成員與靜態(tài)成員
通過構(gòu)造函數(shù)創(chuàng)建的對(duì)象稱為實(shí)例對(duì)象，實(shí)例對(duì)象中的屬性和方法稱為實(shí)例成員。
實(shí)例(對(duì)象) ? new出來的對(duì)象叫實(shí)例對(duì)象 ? ?new過程即實(shí)例化對(duì)象過程
?? ?實(shí)例成員指的是new出來的對(duì)象中的屬性或方法
?? ?訪問：對(duì)象 . 屬性名
?? ? school age sayHi 都叫實(shí)例成員
?? ?const s1 = new Student( 19)
?? ?console.log(s1.school)?? ?靜態(tài)成員 ? 通過構(gòu)造函數(shù).屬性=值
?? ?通過構(gòu)造函數(shù).屬性去訪問?? ??? ?Student.nation = 'china'
???? ?console.log ( Student.nation)
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><script>// 實(shí)例(對(duì)象) new出來的對(duì)象叫實(shí)例對(duì)象 new過程即實(shí)例化對(duì)象過程// 實(shí)例成員指的是new出來的對(duì)象中的屬性或方法function Student(age) {// 添加屬性 this===創(chuàng)建出來的對(duì)象this.school = '大前端學(xué)院'this.age = agethis.sayHi = function () {console.log('sayHi')}}// school age sayHi 都叫實(shí)例成員const s1 = new Student(19)console.log(s1.school)// 靜態(tài)成員 通過構(gòu)造函數(shù).屬性 = 值// 通過構(gòu)造函數(shù).屬性去訪問 Student.nation = 'china'console.log(Student.nation)// Date.now() 靜態(tài)方法</script></body>
</html>
總結(jié)：
構(gòu)造函數(shù)內(nèi)部
this實(shí)際上就是實(shí)例對(duì)象，為其動(dòng)態(tài)添加的屬性和方法即為實(shí)例成員為構(gòu)造函數(shù)傳入?yún)?shù)，動(dòng)態(tài)創(chuàng)建結(jié)構(gòu)相同但值不同的對(duì)象
注：構(gòu)造函數(shù)創(chuàng)建的實(shí)例對(duì)象彼此獨(dú)立互不影響。
?
在 JavaScript 中底層函數(shù)本質(zhì)上也是對(duì)象類型，因此允許直接為函數(shù)動(dòng)態(tài)添加屬性或方法，構(gòu)造函數(shù)的屬性和方法被稱為靜態(tài)成員。
<script>// 構(gòu)造函數(shù)function Person(name, age) {// 省略實(shí)例成員}// 靜態(tài)屬性Person.eyes = 2Person.arms = 2// 靜態(tài)方法Person.walk = function () {console.log('^_^人都會(huì)走路...')// this 指向 Personconsole.log(this.eyes)}
</script>總結(jié)：
靜態(tài)成員指的是添加到構(gòu)造函數(shù)本身的屬性和方法
一般公共特征的屬性或方法靜態(tài)成員設(shè)置為靜態(tài)成員
靜態(tài)成員方法中的
this指向構(gòu)造函數(shù)本身?
?
二、內(nèi)置構(gòu)造函數(shù)
內(nèi)置的構(gòu)造函數(shù)：Array ? Object ? ?Date ? ?String ? ?Number
?? ?Function ?創(chuàng)建函數(shù)
靜態(tài)方法：Object.keys()
?? ?Object.values()
?? ?Object.assign()
?? ?Array.isArray()
?? ?Date.now()
?? ?Array.from()
1、Object靜態(tài)方法
Object.keys(obj) ?獲取所有屬性組成的數(shù)組
?0bject.values(obj)????????獲取所有屬性值組成的數(shù)組
?
?? ?Object.assign ->ES6新增方法
?? ?可以對(duì)多個(gè)元對(duì)象進(jìn)行復(fù)制?? ?Object.assign(復(fù)制的對(duì)象，復(fù)制的源對(duì)象...)
?
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><script>const obj = {name: '華為p60 pro',price: 6999,color: 'purple',}// ['name', 'price', 'color']// ['華為p60 pro',6999,'purple']// const keys = []// const values = []// for (let k in obj) {// keys.push(k)· // values.push(obj[k])// }// console.log(keys, values)const keys = Object.keys(obj) // 獲取所有屬性組成的數(shù)組const values = Object.values(obj) // 獲取所有屬性值組成的數(shù)組console.log(keys, values)console.log(values.join('-'))// Object.assign -> ES6新增方法const o = {}const o1 = { name: 'longge' }const o2 = { age: 18 }// o1 o2 源對(duì)象// assign實(shí)現(xiàn)對(duì)象的拷貝const r = Object.assign(o, o1, o2)console.log(o)</script></body>
</html>
總結(jié)：
推薦使用字面量方式聲明對(duì)象，而不是
Object構(gòu)造函數(shù)
Object.assign靜態(tài)方法創(chuàng)建新的對(duì)象
Object.keys靜態(tài)方法獲取對(duì)象中所有屬性
Object.values表態(tài)方法獲取對(duì)象中所有屬性值?
?2、包裝類型
const str = 'hello' //const str = new String( 'hello ')//[]-> new Array ( )const r = str.substring(1)// str.substring(1) str = nullconsole.log(r)3、Array
Array 是內(nèi)置的構(gòu)造函數(shù)，用于創(chuàng)建數(shù)組 ?
數(shù)組的方法
1、map方法??
?高階函數(shù)----函數(shù)的參數(shù)接受一個(gè)函數(shù)或返回值是函數(shù)的函數(shù)
?? ?arr.map(function( item,index, arr) {// item -數(shù)組每一個(gè)元素//index -數(shù)組元素的索引/ / arr-----原數(shù)組}) const arr=[10,20,30,40]const newArray=arr.map(function(item,index,arr){return item*2})console.log(newArray)//[20, 40, 60, 80]?
map ?映射 ??
?? ?變異方法
?? ? ?map對(duì)原數(shù)組循環(huán)，每次函數(shù)返回值會(huì)放入新數(shù)組中
?? ? ?map不影響原數(shù)組
2、find方法
?? ?find( ) 查找滿足條件的第一個(gè)元素， ?找到就返回該元素，找不到是undefined
?? ?返回的是滿足條件的元素
?? ?arr.find ( function ( item, index , arr) {}) const arr=[1,3,7,8,4,2,9,3,6,8]const ele=arr.find(function(item,index,arr){return item===3})console.log(ele)//3?
3、findIndex( )?
findIndex( ) ? 查找滿足條件的第一個(gè)元素的索引，找到就返回該元素的索引，找不到是-1
indexOf( ) 只能找具體的值
?? ?arr.findIndex ( function ( item, index , arr) {}) const arr=[22,34,66,22,6,7,9,0,6]const index=arr.findIndex(function(item,index,arr){return item===6})console.log(index)//4?
4、some與every
?? ?some對(duì)數(shù)組進(jìn)行循環(huán)，發(fā)現(xiàn)滿足條件的第一個(gè)元素則循環(huán)結(jié)束返回true, ?假如所有元素不滿足返回false
??
?const arr = [1,-3，20，9,11，12]//數(shù)組中是否含有偶數(shù)的元素const flag = arr.some(function (item) {return item % 2 === 0})console.log(flag)//true
every對(duì)數(shù)組進(jìn)行循環(huán)，所有元素都滿足返回true,假如遇到第一個(gè)不滿足的元素結(jié)束，返回false,
const arr=[3,6,8,9,-3,-6,9]const flag = arr.every(function (item) {console.log(item)return item > -9})console.log(flag)//true?
5、reverse()
?翻轉(zhuǎn)數(shù)組
?? ?對(duì)原數(shù)組進(jìn)行翻轉(zhuǎn)
const arr=[1,2,3,4,5,6]console.log(arr.reverse())//[6, 5, 4, 3, 2, 1]6、reduce方法 ? ??
?? ?const arr = [1,2，3，4]arr.reduce( function (prev,current,index, arr) {console.log( prev,current, index)return prev + current})?? ?第一次 prev指向第一個(gè)元素， current指向第二個(gè)元素， index是current指向的元素的下標(biāo)
?? ?第二次prev代表上一次函數(shù)返回值，current繼續(xù)指向下一個(gè)元素
?? ?... .
?? ?最后一次函數(shù)的返回值作為reduce最終的結(jié)果
?? ?/*
?? ?prev->1 current->2 return 3
?? ?prev->3 current->3 return 6
?? ?prev->6 current->4return 10
?? ?*/
arr.reduce(function(prev , current) { }，初始值）
記憶:指定初始值，prev第一次就指向該初始值，以后的prev是上一次函數(shù)返回值, current指向第一個(gè)元素
? ? ? 沒有指定初始值，prev第一次就指向數(shù)組第一個(gè)元素,current指向第二個(gè)元素,以后的prev是上一次函數(shù)返回值
7、forEach() 方法
?? ?forEach代替for循環(huán)
?
? ?arr.forEach(function (item,index, arr) {console.log(item)}) const arr=[2,4,6,8,9,44,22]let sum=0arr.forEach(function(item){sum+=item})console.log(sum)//95?
forEach沒有返回值 ? 影響原數(shù)組
8、filter( )
過濾 ?把符合條件的元素組成一個(gè)新數(shù)組
??
?const newArr = arr.filter(function (item,index) {return item > 9})console.log( newArr)
?