1.封装逻辑
<script>
function max(x,y){
return x>y?x:y;
}
console.log(max(1,2));
console.log(max(3,4))
</script>
2.事件处理
<body>
<input type="button" value="点击" onclick="doClick()">
<script>
function doClick(){
alert("gogo");
}
</script>
</body>
3.新类型构建-this-circle
详细参考JavaScript面积求解-构造函数和普通函数的区别
4.参数默认值(ES6有关)
<script>
function fn(x,y=10,z=100){
console.log(x);
console.log(y);
console.log(z);
}
fn(1,100,2000);
</script>
<script>
function fn(x,y=10,z=100){
console.log(x);
console.log(y);
console.log(z);
}
fn(1,100);
</script>
<script>
function fn(x,y=10,z=100){
console.log(x);
console.log(y);
console.log(z);
}
fn(1,100,50,20,30);
</script>
5.剩余参数(ES6)
我们知道JS函数内部有个arguments对象,可以拿到全部实参。现在ES6给我们带来了一个新的对象,可以拿到除开始参数外的参数,即剩余参数。(这个新的对象和arguments不一样,它是程序员自定义的一个普通标识符,只是需要在前面加上三个点:…)
<script>
function fn(x,y,...z){
console.log(x);
console.log(y);
console.log(z);
}
fn(1,3,4,5);
</script>
<script>
function func(a, ...rest) {
console.log(a)
console.log(rest)
}
func(1)
func(1, 2, 3, 4)
</script>
//注意func的第二个参数rest,前面有三个点。定义好后调用了两次,结果分别如下:
可以看到第一次调用时,rest为一个空数组,第二次为[2, 3, 4]
<script>
function func(a, b, ...rest) {
console.log(a, b)
console.log(rest)
}
func(1, 2)
func(1, 2, 3, 4)
</script>
proto
proto: Array(0)
concat: ƒ concat()
constructor: ƒ Array()
copyWithin: ƒ copyWithin()
entries: ƒ entries()
every: ƒ every()
fill: ƒ fill()
filter: ƒ filter()
find: ƒ find()
findIndex: ƒ findIndex()
flat: ƒ flat()
flatMap: ƒ flatMap()
forEach: ƒ forEach()
includes: ƒ includes()
indexOf: ƒ indexOf()
join: ƒ join()
keys: ƒ keys()
lastIndexOf: ƒ lastIndexOf()
length: 0
map: ƒ map()
pop: ƒ pop()
push: ƒ push()
reduce: ƒ reduce()
reduceRight: ƒ reduceRight()
reverse: ƒ reverse()
shift: ƒ shift()
slice: ƒ slice()
some: ƒ some()
sort: ƒ sort()
splice: ƒ splice()
toLocaleString: ƒ toLocaleString()
toString: ƒ toString()
unshift: ƒ unshift()
values: ƒ values()
Symbol(Symbol.iterator): ƒ values()
Symbol(Symbol.unscopables): {copyWithin: true, entries: true, fill: true, find: true, findIndex: true, …}
proto: Object
6.传值还是传引用(还是有点懵!!!)
function fn(name){
console.log(name);
name="Jason";
return name;
}
var name="ChenJunSheng";
var back=fn(name);
console.log(back);
console.log(name);
function fn1(obj){
var name=obj.name;
console.log(obj.name);
obj.name="Jason";
// return obj;
}
var person={name:"ChenJunsheng"};
fn1(person);
console.log(person.name);
function fn2(obj){
console.log(obj.name);
obj={name:"Jason"};
return obj;
}
var person1={name:"chenjunsheng"};
var back2=fn2(person1);
console.log(back2.name);
console.log(persion1.name);
7.作为参数的函数
function hd(){
alert("loaded");
}
// ===
// let hd=function(){
// console.log("loaded");
// }
window.addEventListener("load",hd);
和下面的效果是一样的
window.addEventListener("load",function(){
alert("load");
});
function makeRequest(url,cb) {
setTimeout(function () {
cb();
},3000);
}
makeRequest("sina",function () {
alert("back");
});
在打开浏览器之后3s出现弹框
8.全局变量和局部变量
js中全局变量和局部变量的区别