简化的对象写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>05_简化的对象写法</title>
</head>
<body>
<!--
简化的对象写法
* 省略同名的属性值
* 省略方法的function
* 例如:
let x = 1;
let y = 2;
let point = {
x,
y,
setX (x) {this.x = x}
};
-->
<script type="text/javascript">
let username = 'kobe';//
let age = 40;//
let obj = {
//username : username,
username,//同名的属性可以省略不写
// age : age,
age,
// getName:function(){
getName(){//可以省略函数的function
return this.username;
}
};
console.log(obj);
console.log(obj.getName());
</script>
</body>
</html>
箭头函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>06_箭头函数</title>
</head>
<body>
<button id="btn1">测试箭头函数this_1</button>
<button id="btn2">测试箭头函数this_2</button>
<!--
* 作用: 定义匿名函数
* 基本语法:
* 没有参数: () => console.log('xxxx')
* 一个参数: i => i+2
* 大于一个参数: (i,j) => i+j
* 函数体不用大括号: 默认返回结果
* 函数体如果有多个语句, 需要用{}包围，若有需要返回的内容，需要手动返回
* 使用场景: 多用来定义回调函数
* 箭头函数的特点：
1、简洁
2、箭头函数没有自己的this，箭头函数的this不是调用的时候决定的，而是在定义的时候所处的对象就是它的this
3、扩展理解： 箭头函数的this看外层的是否有函数，
如果有，外层函数的this就是内部箭头函数的this，
如果没有，则this是window。
-->
<script type="text/javascript">
/*let fun= function(){
console.log('我是函数');
}*/
//形参的情况
let fun = () => console.log('我是箭头函数');
fun();
//1、没有形参的时候
let fun1 = () => console.log('我是箭头函数');
fun1();
//2、只有一个形参的时候()可以省略
let fun2 = a => console.log(a);
fun2('aaa');
//3、两个及两个以上的形参的时候()不能省略
let fun3 = (x,y) => console.log(x,y);
fun3(25,36);
//函数体的情况
// 1、函数体只有一条语句或者是表达式的时候{}可以省略-->会自动返回语句执行的结果，或者是表达式的结果
// let fun4 = (x,y) => {return x + y};//新人常用
let fun4 = (x,y) => x + y;
console.log(fun4(34,26));//60
//2、函数体不止一条语句或者表达式的情况
let fun5 = (x,y) => {
console.log(x,y);
return x + y;
}
console.log(fun5(35,49));//84
let btn1 = document.getElementById('btn1');
let btn2 = document.getElementById('btn2');
btn1.onclick = function(){
alert(this);//[object HTMLButtonElement]
console.log(this);
}
// btn2.onclick = () => {
// alert(this);//[object Window]
// }
// let obj = {
// name: '箭头函数',
// getName: function () {
// btn2.onclick = () => {
// alert(this);//[object Window]
// console.log(this);//{name:"箭头函数"，getName:f}
// }
// }
// }
let obj = {
name: '箭头函数',
getName: () => {
btn2.onclick = () => {
alert(this);//[object Window]
console.log(this);//Window
}
}
}
// 本质是 obj.getName = () => {};
obj.getName();
</script>
</body>
</html>
三点运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>07_三点运算符</title>
</head>
<body>
<!--
* 用途
1. rest(可变)参数
* 用来取代arguments 但比 arguments 灵活,只能是最后部分形参参数
function fun(...values) {
console.log(arguments);
arguments.forEach(function (item, index) {
console.log(item, index);
});
console.log(values);
values.forEach(function (item, index) {
console.log(item, index);
})
}
fun(1,2,3);
2. 扩展运算符
let arr1 = [1,3,5];
let arr2 = [2,...arr1,6];
arr2.push(...arr1);
-->
<script type="text/javascript">
function foo(a,...value) {
console.log(arguments);
// arguments.callee();//递归 慎用！！！
console.log(value);
// arguments.forEach(function (item,index) {
// console.log(item,index);
// })
value.forEach(function (item,index) {
console.log(item,index);
})
}
foo(2,65,33,44);
let arr = [1,6];
let arr1 = [2,3,4,5];
arr = [1,...arr1,6];
console.log(arr);//[1,2,3,4,5,6]
console.log(...arr);//1 2 3 4 5 6
</script>
</body>
</html>
