面向对象01
2020-04-27 本文已影响0人
小雪洁
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>函数编程与面向对象编程对比</title>
</head>
<body>
</body>
<script>
//传统的函数编程
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}的平均成绩是${total/grade.length}`
}
console.log(average(grade,name));
//以下是面向对象编程，
let user={
name:"hxj",
grade:[
{name:"css",score:80},
{name:'js', score:85},
{name:'html',score:90}
],
//对象内定义的专门服务于该对象的称为方法，average(){}
//对象内定义的方法可以不用传参，直接用this.xxx
average:function(){
let total=this.grade.reduce(function(t,l){
return t+l.score;
},0);
return `${name}的平均成绩是${total/grade.length}`
}
};
console.log(user);
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>操作对象属性</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 */
//遍历对象属性
for(let key in user){
console.log(`${key}是${user[key]}`);//hxj 30
}
//给对象添加属性
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}
//检测当前对象是否含有某个属性
console.log(user.hasOwnProperty('job'));//false
console.log(user.hasOwnProperty('n. ame'));//true
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>对象的引用传址</title>
</head>
<body>
</body>
<script>
let user={};
let hxj=user;//对象的赋值是传址，hxj和user指向同一块地址
user.name="haoxuejie";
console.log(hxj.name);//haoxuejie
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用展开语法完成参数合并</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
};
//重点在这里，使用展开语法把接收到的参数和默认参数合并一下，后者放接收到的参数
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>严格模式中解构的差异</title>
</head>
<body>
</body>
<script>
'use strict';
//({name,age}={name:"hxj",age:23});
//console.log(name,age);//非严格模式下，可以输出，也不报错，但是严格模式下会报错
//建议在js中使用严格模式，这样可以使代码更健壮
let {name,age}={name:"hxj",age:23};
console.log(name,age);
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>解构操作的简写形式与变量解构</title>
</head>
<body>
</body>
<script>
//对象的解构就是把一个对象的某些属性和值，通过解构，赋值给单独的变量
let user={name:'hxj',age:30};
let {name,age}=user;
console.log(name);
console.log(age);
//数组的解构
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
//如果只想通过解构获得对象的某个属性值
let user1={cname:'ydc',cage:28};
let {cage}=user1;
console.log(cage);//28
//如果想把各个单独的变量组成一个对象
let dname="yangdingchuan";
let dage=28;
let ydc={dname,dage}
console.log(ydc);//{dname: "yangdingchuan", dage: 28}适用于组成参数对象
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>07多层对象的解构操作</title>
</head>
<body>
</body>
<script>
let hd={
name:'houdunren',
lesson:{
title:'js',
click:30
}
};
//重点在这里，多层对象的解构
let {
name,
lesson:{click}
}=hd;
console.log(click);//30
//逆向，将单独的变量组成多层对象
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多层对象的解构操作</title>
</head>
<body>
</body>
<script>
let hd={
name:'houdunren',
lesson:{
title:'js',
click:30
}
};
//重点在这里，多层对象的解构
let {
name,
lesson:{click}
}=hd;
console.log(click);//30
//逆向，将单独的变量组成多层对象
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>函数参数的解构使用技巧</title>
</head>
<body>
</body>
<script>
//使用解构给函数传数组类型参数,
function hxj([name,age]){
console.log(name,age);
}
hxj(['郝雪洁',30]);
//使用解构给函数传对象类型参数
function user({name,age}){
console.log(name,age);
}
user({name:'hxj',age:30});
//组合使用解构和普通方式赋参数
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>对象与原型链属性检测实例</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()只检测当前对象有没有相应属性，不会检测父级的属性
//比如arr的父级是一个数组对象，该对象中有concat属性，但是arr里检测不到，如下
console.log(arr.hasOwnProperty('length'));//true
console.log(arr.hasOwnProperty('concat'));//false
//如果想要不仅检测自己也检测父级中是否含有某属性
console.log('length' in arr);//true
console.log('concat' in arr);//true
//对象的属性检测
let hsuser={
address:'衡水'
};
let hxj={
name:'hxj',
age:30
};
//把hsuser设置为hxj的父级/原型
Object.setPrototypeOf(hxj,hsuser);
console.log(hxj);
console.log(hxj.hasOwnProperty('address'));//false
console.log('address' in hxj);//true
//检测对象属性的应用
//自己写了一个库，需要设置一些配置项，用户再调用这个库的时候要传相应的配置项，
//如果不传（用属性检测是否传来的对象有该属性）提示报异常错误
//如写一个上传的函数
function oss(option){
if(!option.hasOwnProperty('url')){
throw new Error('必须上传主机地址');
}
}
oss({user:'admin'});//这时就会抛出异常 Uncaught Error: 必须上传主机地址
</script>
</html>
