函数06（函数参数）
2020-04-26 本文已影响0人
小雪洁
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>函数参数</title>
</head>
<body>
<button id="hxj">haoxuejie</button>
<button id="ydc">yangdingchuan</button>
</body>
<script>
//函数可以作为另一个函数的参数
let arr=[1,2,3,4,5,6];
//filter()里面可以是匿名函数，
let newarr= arr.filter(function(item){
return item>2;
});
console.log(newarr);//[3, 4, 5, 6]
function bg(a){
return a>3;
}
let arr0=arr.filter(bg);//bg是函数，filter()的参数也可以是已经定义好的函数
console.log(arr0);//[4, 5, 6]
//定时器函数
let i=0;
/* setInterval(function(){
console.log(++i);
},1000); */
//也可以如下
function cl(){
console.log(++i);
}
//setInterval(cl,1000); 这样也会不间断的每秒输出自增的i
//dom操作的监听事件函数
document.getElementById("hxj").addEventListener("click",function(e){
console.log(e);//输出鼠标事件对象MouseEvent {isTrusted: true, screenX: 1136, screenY: 174, clientX: 78, clientY: 28, …}
console.log(e.target);//<button id="hxj">haoxuejie</button>
console.log(this);//<button id="hxj">haoxuejie</button>
console.log(e.target.innerHTML);//haoxuejie
console.log(this.innerHTML);//haoxuejie
});
document.getElementById("ydc").addEventListener("click",event);
function event(){
console.log(this);//<button id="ydc">yangdingchuan</button>
console.log(this.innerHTML);//yangdingchuan
}
//旧版js中求和函数，函数的参数是一串数字不知道其长度
function sum(){
//arguments是一个对象，里面含着传进来的参数，也有一个length属性获取参数个数
//console.log(arguments);//Arguments(5) [1, 2, 3, 4, 5, callee: ƒ, Symbol(Symbol.iterator): ƒ]
let sum=0;
for(let i=0;i<arguments.length;i++){
sum+=arguments[i];
}
return sum;
}
console.log(sum(1,2,3,4,5));//15
//或者使用展开语法和reduce方法
function sum0(){
return [...arguments].reduce(function(sum,a){
/* sum+=a;
return sum; */
//等同于
return sum+a;
},0);
}
console.log(sum0(1,2,3,4,5));//15
//进一步简化使用箭头函数
function sum1(){
return [...arguments].reduce((sum,a)=>sum+a);
}
console.log(sum1(1,2,3,4,5));//15
//使用展开语法接收参数
//点语法的作用是释放和收集
//此处是收集的作用，使用点语法把参数全部收集到args里
function sum2(...args){
//注意arguments和args的区别
//console.log(arguments);//Arguments(4) [1, 2, 3, 4, callee: (...), Symbol(Symbol.iterator): ƒ]
//console.log(args);//[1, 2, 3, 4]
return args.reduce((sum,a)=>sum+a);
}
console.log(sum2(1,2,3,4));//10
</script>
</html>
