簡(jiǎn)化的對(duì)象寫法
<!DOCTYPE html>
<html lang="en">
<head>
? <meta charset="UTF-8">
? <title>05_簡(jiǎn)化的對(duì)象寫法</title>
</head>
<body>
<!--
簡(jiǎn)化的對(duì)象寫法
* 省略同名的屬性值
* 省略方法的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(){//可以省略函數(shù)的function
? ? return this.username;
? }
};
console.log(obj);
console.log(obj.getName());
</script>
</body>
</html>
箭頭函數(shù)
<!DOCTYPE html>
<html lang="en">
<head>
? <meta charset="UTF-8">
? <title>06_箭頭函數(shù)</title>
</head>
<body>
? ? <button id="btn1">測(cè)試箭頭函數(shù)this_1</button>
? ? <button id="btn2">測(cè)試箭頭函數(shù)this_2</button>
<!--
* 作用: 定義匿名函數(shù)
* 基本語(yǔ)法:
? * 沒有參數(shù): () => console.log('xxxx')
? * 一個(gè)參數(shù): i => i+2
? * 大于一個(gè)參數(shù): (i,j) => i+j
? * 函數(shù)體不用大括號(hào): 默認(rèn)返回結(jié)果
? * 函數(shù)體如果有多個(gè)語(yǔ)句, 需要用{}包圍，若有需要返回的內(nèi)容，需要手動(dòng)返回
* 使用場(chǎng)景: 多用來(lái)定義回調(diào)函數(shù)
* 箭頭函數(shù)的特點(diǎn)：
? ? 1、簡(jiǎn)潔
? ? 2、箭頭函數(shù)沒有自己的this，箭頭函數(shù)的this不是調(diào)用的時(shí)候決定的，而是在定義的時(shí)候所處的對(duì)象就是它的this
? ? 3、擴(kuò)展理解： 箭頭函數(shù)的this看外層的是否有函數(shù)，
? ? ? ? 如果有，外層函數(shù)的this就是內(nèi)部箭頭函數(shù)的this，
? ? ? ? 如果沒有，則this是window。
-->
<script type="text/javascript">
/*let fun= function(){
? ? console.log('我是函數(shù)');
}*/
//形參的情況
let fun = () => console.log('我是箭頭函數(shù)');
fun();
//1、沒有形參的時(shí)候
let fun1 = () => console.log('我是箭頭函數(shù)');
fun1();
//2、只有一個(gè)形參的時(shí)候()可以省略
let fun2 = a => console.log(a);
fun2('aaa');
//3、兩個(gè)及兩個(gè)以上的形參的時(shí)候()不能省略
let fun3 = (x,y) => console.log(x,y);
fun3(25,36);
//函數(shù)體的情況
// 1、函數(shù)體只有一條語(yǔ)句或者是表達(dá)式的時(shí)候{}可以省略-->會(huì)自動(dòng)返回語(yǔ)句執(zhí)行的結(jié)果，或者是表達(dá)式的結(jié)果
// let fun4 = (x,y) => {return x + y};//新人常用
let fun4 = (x,y) => x + y;
console.log(fun4(34,26));//60
//2、函數(shù)體不止一條語(yǔ)句或者表達(dá)式的情況
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: '箭頭函數(shù)',
//? ?? getName: function () {
//? ? ? ?? btn2.onclick = () => {
//? ? ? ? ? ?? alert(this);//[object Window]
//? ? ? ? ? ?? console.log(this);//{name:"箭頭函數(shù)"，getName:f}
//? ? ? ?? }
//? ?? }
// }
let obj = {
? ? name: '箭頭函數(shù)',
? ? getName: () => {
? ? ? ? btn2.onclick = () => {
? ? ? ? ? ? alert(this);//[object Window]
? ? ? ? ? ? console.log(this);//Window
? ? ? ? }
? ? }
}
// 本質(zhì)是 obj.getName = () => {};
obj.getName();
</script>
</body>
</html>
三點(diǎn)運(yùn)算符
<!DOCTYPE html>
<html lang="en">
<head>
? <meta charset="UTF-8">
? <title>07_三點(diǎn)運(yùn)算符</title>
</head>
<body>
<!--
* 用途
1. rest(可變)參數(shù)
? ? * 用來(lái)取代arguments 但比 arguments 靈活,只能是最后部分形參參數(shù)
? ? 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. 擴(kuò)展運(yùn)算符
? 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();//遞歸? 慎用?。。?/p>
? 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>
