<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>函數(shù)編程與面向?qū)ο缶幊虒?duì)比</title>
</head>
<body>
</body>
<script>
//傳統(tǒng)的函數(shù)編程
let name="hxj";
let grade=[
{name:"css",score:80},
{name:'js', score:85},
{name:'html',score:90}
];
function average(grade,name){
let total=grade.reduce(function(t,l){
return t+l.score;
},0);
return `${name}的平均成績(jī)是${total/grade.length}`
}
console.log(average(grade,name));
//以下是面向?qū)ο缶幊蹋? let user={
name:"hxj",
grade:[
{name:"css",score:80},
{name:'js', score:85},
{name:'html',score:90}
],
//對(duì)象內(nèi)定義的專(zhuān)門(mén)服務(wù)于該對(duì)象的稱(chēng)為方法，average(){}
//對(duì)象內(nèi)定義的方法可以不用傳參，直接用this.xxx
average:function(){
let total=this.grade.reduce(function(t,l){
return t+l.score;
},0);
return `${name}的平均成績(jī)是${total/grade.length}`
}
};
console.log(user);
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>操作對(duì)象屬性</title>
</head>
<body>
</body>
<script>
let user={
name:"hxj",
'my age':30
}
/* console.log(user.name);//hxj
console.log(user[name]);//undefined
console.log(user['name']);//hxj
console.log(user['my age']);//30 */
//遍歷對(duì)象屬性
for(let key in user){
console.log(`${key}是${user[key]}`);//hxj 30
}
//給對(duì)象添加屬性
user.job="front-end software";
console.log(user);//{name: "hxj", my age: 30, job: "front-end software"}
//刪除屬性
delete user.job;
console.log(user);//{name: "hxj", my age: 30}
//檢測(cè)當(dāng)前對(duì)象是否含有某個(gè)屬性
console.log(user.hasOwnProperty('job'));//false
console.log(user.hasOwnProperty('n. ame'));//true
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>對(duì)象的引用傳址</title>
</head>
<body>
</body>
<script>
let user={};
let hxj=user;//對(duì)象的賦值是傳址，hxj和user指向同一塊地址
user.name="haoxuejie";
console.log(hxj.name);//haoxuejie
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用展開(kāi)語(yǔ)法完成參數(shù)合并</title>
</head>
<body>
</body>
<script>
let arr=[1,2,3];
let a=[...arr,4,5];
console.log(a);//[1, 2, 3, 4, 5]
let user={
name:"haoxuejie",
age:30
};
let hxj={...user,address:"衡水"};
console.log(hxj);//{name: "haoxuejie", age: 30, address: "衡水"}
function upload(params){
let config={
type:"*.jpg,*png",
size:10000
};
//重點(diǎn)在這里，使用展開(kāi)語(yǔ)法把接收到的參數(shù)和默認(rèn)參數(shù)合并一下，后者放接收到的參數(shù)
config={...config,...params};
console.log(config);
}
console.log(upload())//{type: "*.jpg,*png", size: 10000}
console.log(upload({size:99}));//{type: "*.jpg,*png", size: 99}
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>嚴(yán)格模式中解構(gòu)的差異</title>
</head>
<body>
</body>
<script>
'use strict';
//({name,age}={name:"hxj",age:23});
//console.log(name,age);//非嚴(yán)格模式下，可以輸出，也不報(bào)錯(cuò)，但是嚴(yán)格模式下會(huì)報(bào)錯(cuò)
//建議在js中使用嚴(yán)格模式，這樣可以使代碼更健壯
let {name,age}={name:"hxj",age:23};
console.log(name,age);
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>解構(gòu)操作的簡(jiǎn)寫(xiě)形式與變量解構(gòu)</title>
</head>
<body>
</body>
<script>
//對(duì)象的解構(gòu)就是把一個(gè)對(duì)象的某些屬性和值，通過(guò)解構(gòu)，賦值給單獨(dú)的變量
let user={name:'hxj',age:30};
let {name,age}=user;
console.log(name);
console.log(age);
//數(shù)組的解構(gòu)
let arr=["hxj",30];
let [a,b]=arr;
console.log(a,b);//hxj 30
let [,c]=arr;
console.log(c);//30
let [d]=arr;
console.log(d);//hxj
//如果只想通過(guò)解構(gòu)獲得對(duì)象的某個(gè)屬性值
let user1={cname:'ydc',cage:28};
let {cage}=user1;
console.log(cage);//28
//如果想把各個(gè)單獨(dú)的變量組成一個(gè)對(duì)象
let dname="yangdingchuan";
let dage=28;
let ydc={dname,dage}
console.log(ydc);//{dname: "yangdingchuan", dage: 28}適用于組成參數(shù)對(duì)象
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>07多層對(duì)象的解構(gòu)操作</title>
</head>
<body>
</body>
<script>
let hd={
name:'houdunren',
lesson:{
title:'js',
click:30
}
};
//重點(diǎn)在這里，多層對(duì)象的解構(gòu)
let {
name,
lesson:{click}
}=hd;
console.log(click);//30
//逆向，將單獨(dú)的變量組成多層對(duì)象
let cname='ydc';
let ctitle='css';
let cclick=40;
let clesson={ctitle,cclick};
console.log(clesson);
let ydc={cname,clesson};
console.log(ydc);
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>07多層對(duì)象的解構(gòu)操作</title>
</head>
<body>
</body>
<script>
let hd={
name:'houdunren',
lesson:{
title:'js',
click:30
}
};
//重點(diǎn)在這里，多層對(duì)象的解構(gòu)
let {
name,
lesson:{click}
}=hd;
console.log(click);//30
//逆向，將單獨(dú)的變量組成多層對(duì)象
let cname='ydc';
let ctitle='css';
let cclick=40;
let clesson={ctitle,cclick};
console.log(clesson);
let ydc={cname,clesson};
console.log(ydc);
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>函數(shù)參數(shù)的解構(gòu)使用技巧</title>
</head>
<body>
</body>
<script>
//使用解構(gòu)給函數(shù)傳數(shù)組類(lèi)型參數(shù),
function hxj([name,age]){
console.log(name,age);
}
hxj(['郝雪潔',30]);
//使用解構(gòu)給函數(shù)傳對(duì)象類(lèi)型參數(shù)
function user({name,age}){
console.log(name,age);
}
user({name:'hxj',age:30});
//組合使用解構(gòu)和普通方式賦參數(shù)
function user0(name,{sex,age}){
console.log(name,sex,age);
}
function user1(name,{sex:a,age:b}){
console.log(name,a,b);
}
user0('hxj',{sex:'female',age:30});
user1('hxj',{sex:'female',age:30});
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>對(duì)象與原型鏈屬性檢測(cè)實(shí)例</title>
</head>
<body>
</body>
<script>
let user={
name:'hxj',
age:30
};
//console.log(user.hasOwnProperty('name'));//true
//console.log(user.hasOwnProperty('id'));//false
let arr=[1,2,3];
console.log(arr);
//arr.hasOwnProperty()只檢測(cè)當(dāng)前對(duì)象有沒(méi)有相應(yīng)屬性，不會(huì)檢測(cè)父級(jí)的屬性
//比如arr的父級(jí)是一個(gè)數(shù)組對(duì)象，該對(duì)象中有concat屬性，但是arr里檢測(cè)不到，如下
console.log(arr.hasOwnProperty('length'));//true
console.log(arr.hasOwnProperty('concat'));//false
//如果想要不僅檢測(cè)自己也檢測(cè)父級(jí)中是否含有某屬性
console.log('length' in arr);//true
console.log('concat' in arr);//true
//對(duì)象的屬性檢測(cè)
let hsuser={
address:'衡水'
};
let hxj={
name:'hxj',
age:30
};
//把hsuser設(shè)置為hxj的父級(jí)/原型
Object.setPrototypeOf(hxj,hsuser);
console.log(hxj);
console.log(hxj.hasOwnProperty('address'));//false
console.log('address' in hxj);//true
//檢測(cè)對(duì)象屬性的應(yīng)用
//自己寫(xiě)了一個(gè)庫(kù)，需要設(shè)置一些配置項(xiàng)，用戶(hù)再調(diào)用這個(gè)庫(kù)的時(shí)候要傳相應(yīng)的配置項(xiàng)，
//如果不傳（用屬性檢測(cè)是否傳來(lái)的對(duì)象有該屬性）提示報(bào)異常錯(cuò)誤
//如寫(xiě)一個(gè)上傳的函數(shù)
function oss(option){
if(!option.hasOwnProperty('url')){
throw new Error('必須上傳主機(jī)地址');
}
}
oss({user:'admin'});//這時(shí)就會(huì)拋出異常 Uncaught Error: 必須上傳主機(jī)地址
</script>
</html>
