1、对象
第一：字面量对象的方法，支持缩写形式
方法缩写规则： 在原来的基础上去掉 冒号 和 function关键字
第二：对象中的属性与变量名或者参数 同名的时候， 可以省略赋值的操作
//对象方法的缩写
var obj={
uName:'aaa',
// showUserName:function(){
// console.log(this.uName)
// }
showUserName(){
console.log(this.uName)
}
}
obj.showUserName();
//函数返回对象
var show=function(name,age){//形参相当于var name var age
var name="abc" ;//就近原则查找 ,name='abc'
// let name="abc" //报错 不能重定义
// return{
// name:name,
// age,age
// }
//当对象属性省略了赋值操作，他会在作用域中查找同名的形参或者变量
//省略中，确保有同名的形参
return{
name,
age,
//email 报错
}
}
var oUser=show('aaa',20);
console.log(oUser.name,oUser.age)2、对象的计算属性
var lastName="last name";
var obj={};
obj[lastName]="aaa"; //给对象添加属性
console.log(obj['lastName']) //undefined 要用 obj[lastName]
console.log(obj['last name'])
var lastName="last name";
var first="first name";
var obj={
[lastName]:'aaa', //中括号里面的属性会被解释出来
[firstName]:'20'
}
console.log(obj['lastName'],obj['firstName']) //undefined
//字符串拼接
var suffix=" name"; //注意前面空格
var obj={
['first'+suffix]:'aaa',
['last'+suffix]:'20'
}
console.log(obj['first name'],obj['last name'])3、函数的默认参数
function show(a,b){
var a=a||20; //如果有没有值false就用20
var b=b||30;
console.log(a,b)
}
show(100) //100 30
show(0,0) //20 30 注意:0转成布尔类型为false 有漏洞
//解决漏洞
function show(a,b){
var a=typeof a === 'undefined'?20:a;
var b=typeof b === 'undefined'?30:b;
console.log(a,b)
}
show(0,0) //0 0
//es6可以设置默认参数
function show(a = 20,b = 30){
console.log(a,b)
}
show(); //20 30
show(undefined ,undefined); //20 30 undefined相当没有传值
show(undefined ,NaN); //20 NaN
show(0,0);//0 04、默认参数与严格模式
//形参改，arguments也会跟着改变
function show(name,age){
console.log(name,age); //aaa 20
console.log(arguments); //["aaa", 20]
console.log(arguments[0] == name,arguments[1] == age); //true true
name="abc";
age=100;
console.log(arguments); //["abc", 100]
console.log(arguments[0] == name,arguments[1] == age); //true true
}
show('aaa',20);
//加了严格模式 arguments不会跟着变量的修改而修改
"use strict"
function show(name,age){
console.log(name,age); //aaa 20
console.log(arguments); //["aaa", 20]
console.log(arguments[0] == name,arguments[1] == age); //true true
name="abc";
age=100;
console.log(arguments); //["abc", 100]
console.log(arguments[0] == name,arguments[1] == age); //false false
}
show('aaa',20);
//形参被修改时，arguments不会跟着形参的改变而改变 arguments保存的值是最开始传进来的值
function show(name,age=22){
console.log(name,age); //aaa 20
console.log(arguments); //["aaa", 20]
console.log(arguments[0] == name,arguments[1] == age); //true true
name="abc";
age=100;
console.log(arguments); //["abc", 100]
console.log(arguments[0] == name,arguments[1] == age); //false false
}
show('aaa',20);5、默认参数中的表达式
//默认参数的表达式
function getVal(){
return 10;
}
function add(a,b = getVal()){
return a+b
}
console.log(add(10)); //20 b启用默认值
console.log(add(10,100));//110
-----------------------------------------------
let count=10;
function getVal(){
return count++;
}
function add(a,b = getVal()){
return a+b
}
console.log(add(100));//110 执行函数后count=11
console.log(add(200));//211
-----------------------------------------------
//不能把后面的形参当成表达式赋给前面的参数，只能把前面的形参赋给后面
function add(a,b = a){ //不能a=b,b
return a+b
}
console.log(add(10)); //20
console.log(add(10,100));//110
function getVal(n){
return n+10;
}
function add(a,b = getVal(a)){
return a+b
}
console.log(add(10));//306、对象简写和单例模式修改隔行变色
<style>
div{
width: 100%;
height: 30px;
border: 1px solid #666;
}
</style>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
//单例模式
var oBg={
ele:[], //定义一个属性保存隔行变色的颜色
init(selector="div"){ //默认选中div
this.ele=document.querySelectorAll(selector)
},
//设置背景模式
setBgColor(even='even-color',odd='odd-color'){ //偶数行给偶数颜色，基数行给基数颜色
this.ele.forEach((cur,i)=>{
cur.className= i%2 == 0? even:odd; //i%2=0为偶数，否则为基数，在给cur设置className
})
},
hover(){
this.ele.forEach((cur)=>{
cur.onmouseover =this.fnOver ;//移上去时触发一个fnOver事件
cur.onmouseout =this.fnOut ;//移出去时触发一个fnOut事件
})
},
//鼠标移上去时触发
fnOver(){
this.classList.add('active');
},
//鼠标移出去时触发
fnOut(){
this.classList.remove('active');
}
};
oBg.init();//调用，把div选中，保存在ele里面
oBg.setBgColor();
oBg.hover();7、对象简写和单例模式修改时钟
<span>1</span>
<span>1</span>
<em>:</em>
<span>1</span>
<span>1</span>
<em>:</em>
<span>1</span>
<span>1</span>
var oTick={
ele:[],
init(selector='span'){
this.ele=document.querySelectorAll(selector)
},
toDouble(n){
return n<10 ? ('0'+n):(''+n); //小于10前面要加0，否则保持不动
},
getCurTime(){
let oDate=new Date(),
hour=oDate.getHours(),
min=oDate.getMinutes(),
sec=oDate.getSeconds();
return this.toDouble(hour)+this.toDouble(min)+this.toDouble(sec)
// console.log(hour+min+sec)
},
//设置到页面上
setTime(){
//实时获取当前的时间
let cTime=this.getCurTime();
this.ele.forEach((cur,i)=>{
cur.innerHTML=cTime.charAt(i)
})
},
//每秒钟调用
tick(){
setInterval(this.setTime.bind(this),1000);//setInterval里面的this指向window,所以要bind
}
}
oTick.init();
oTick.getCurTime();
oTick.setTime();
oTick.tick();
console.log(oTick.getCurTime())8、不定参数，三个点(...)
含义：
①用在形参中， 表示传递给他的参数集合， 类似于arguments, 叫不定参数.
语法格式: 在形参面前加三个点( ... )
②用在数组前面，可以把数组的值全部打散，展开，叫展开运算符.
语法格式: 在数组面前加三个点( ... )
在形参中：
//es5求和
function add(){
var res=0;
for(var i=0;i<arguments.length;i++){
res+=arguments[i]
}
return res
}
console.log(add(10,20,30))
//不定参数
function add(...val){
console.log(val); //[10, 20, 30]
console.log(typeof val); //object
}
add(10,20,30)
//es6的不定参数 修改求和
function add(...val){
var res=0;
for(var i=0;i<val.length;i++){
res+=val[i]
}
return res
}
console.log(add(10,20,30))
---------------------------------------------
//注意
function(...val,res){} //报错，不定参数要放形参后面
function(...v,...v){} //报错，不能出现多个不定参数
function add(res,...val){
console.log(res); //10
console.log(val); //[20, 30, 40, Array[2]]
}
add(10,20,30,40,[100,200])
---------------------------------------------
//有选择性拷贝对象 ,只要其中两个
var oUser={
name:'aaa',
age:22,
sex:'man'
}
/*
function copyObj(src){//src原对象
var target=Object.create(null);//创建一个目标对象
for(var i=1;i<arguments.length;i++){//从1开始才是拷贝属性
target[arguments[i]]=src[arguments[i]]
}
return target
}
*/
//es6修改
function copyObj(src,...attr){//src原对象
var target=Object.create(null);//创建一个目标对象
for(var i=0;i<attr.length;i++){//从1开始才是拷贝属性
target[attr[i]]=src[attr[i]]
}
return target
}
var oUser2 = copyObj(oUser,'name','sex');
console.log(oUser2); //Object {name: "aaa", sex: "man"}//不定参不会影响grguments
function show(...val){
console.log(val.length); //3
console.log(arguments.length); //3
val[0]=100;
console.log(val[0],val[1],val[2]); //[100 10 30]
console.log(arguments[0],arguments[1],arguments[2]); //[4 10 30]
}
show(4,10,30)在数组中（展开运算符）：
//求变量和数组的最大值
let a=10,b=20;
console.log(Math.max(a,b))
let arr=[10,200,300,3]
//console.log(Math.max(arr)); //Math.max()不能求数组
//es5做法
console.log(Math.max.apply(Math,arr)); //300
//es6的数组的三个点 ，展开运算符
console.log(Math.max(...arr,4,30,40));