1.解構賦值(針對數組array,字符串String及對象object以)
結構賦值是一種特殊的語法,通過將各種結構中的元素復制到變量中達到"解構"的目的,但是數組本身沒有改變
1.1解構單層數組
<script>let arr = [1,2,3,4,5];//獲取數組中的第一個元素let ha = arr[0];//獲取數組中的每一個元素//將數組arr中的元素一次賦值給變量a,b,c,d,elet [a,b,c,d,e] = arr;console.log(a,b,c,d,e);//輸出1 2 3 4 5//取第3個值,數組中不想要的元素可以添加逗號把它丟棄let [a1,,c1] = arr;//等于let [,,c1] = arr;console.log(c1);//輸出3</script>
1.2解構多層次的數組
<script>let array = [[1,2,3],[4,5,6],[7,8,9]];//解構獲取數組第3個元素的第2個元素let [,,[,b]] = array;console.log(b);//輸出8</script>
1.3解構字符串類型String同上
<script>let string = 'xyz';let [a,b,c] = string;console.log(a,b,c);//輸出x y z[,,c] = string;console.log(c);//輸出z</script>
1.4解構賦值對象Object
按對象中的屬性名進行解構賦值,修改變量名
<script>let obj = {name:'張三',age:18,};//按屬性名進行解構let {name,age} = obj;console.log(name);//輸出張三//修改變量名let {name:aaa,age:bbb} = obj;console.log(bbb);//輸出18//aaa,bbb是重新聲明的變量名稱</script>
對已經存在的變量進行解構賦值
<script>let obj = {name:'張三',age:18,};let name,age;//{name,age} = obj;//報錯,語句被解析為對代碼塊進行賦值,代碼塊不允許被賦值({name,age} = obj);//解決辦法加一個()console.log(name,age);//輸出 張三 18</script>
默認值屬性值為undefined時默認值生效
<script>let obj = {name:'張三',age:18,};let {name,age,_sex:sex='男'} = obj;console.log(name,age,sex);//輸出 張三 18 男let abc = {name1:'李四',age1:'19',_sex1:'女',}let {name1,age1,_sex1:sex2='男'} = abcconsole.log(name1,age1,sex2);//輸出 李四 19 女//默認值被覆蓋</script>
嵌套解構賦值
<script>let obj = {name:'張三',age:18,hobby:['足球'],//hobby是數組用[],作用是定位};let {name,hobby:[a]} = obj;console.log(name,a);//輸出張三 足球</script>
2.迭代器
迭代器對象是由 可迭代協議([Symbol.iterator]方法)?和 迭代器協議(next方法)?構成
迭代器是一個對象,定義一個序列,并在終止時可能附帶一個返回值;
2.1枚舉for-in,會無序遍歷對象里面的屬性(沒有辦法自定義循環過程)
<body><script>let obj = {name:'zhangsan',age:19,};for(let index in obj){//index代表索引和屬性console.log(index,obj[index]);//index代表所有屬性名,obj[index]代表所有屬性值}</script>
2.2可迭代協議
有一個[Symbol.iterator]方法,需要返回一個迭代器對象,具有唯一性
2.3迭代器協議
迭代器通過使用 next() 方法實現了迭代器協議的任何一個對象,該方法返回具有兩個屬性對象
value:迭代的值;
done:是否迭代完完成;(ture迭代完成)(false迭代沒完成)
2.4迭代for-of,自定義遍歷過程?
<script>let obj = {//obj是一個迭代器對象,因為里面擁有一個next方法并且返回了一個值name: "zhangsan",age: 19,count: 5,//可迭代協議 條件1[Symbol.iterator]: function () { return this;//返回迭代器對象 條件2},//迭代器協議 條件1next() {if (this.count > 0) {return { value: this.count--, done: false };//迭代器協議 條件2}else{return{value:0,done:true};}},};//迭代for (let item of obj) {console.log(item);//輸出5 4 3 2 1//item拿到的是if里面value的值}</script>
3.生成器函數
生成器對象(generator)是由一個generator function返回的,它同時符合可迭代協議和迭代器協議
?生成器函數是一種特殊類型的函數,它返回一個生成器對象,這個對象可以用來實現可迭代對象。它可以使用特殊的語法來控制生成器對象的輸出,實現按需生成值序列,避免一次性生成大量的值,減少了內存的使用(都是為了構建可迭代對象,自定義迭代過程)
3.1生成器函數定義使用function*關鍵字,語法如下:
function* generator() {// 函數體
}
<script>function* generator(){console.log('run1');//return默認返回undefined}//調用生成器函數,返回生成器對象,--此時生成器函數的代碼塊并不執行let g = generator();//g是一個生成器對象console.log(g);g.next();//調用生成器函數當中的next()方法//此時生成器函數當中的代碼塊開始執行let r = g.next();console.log(r);//輸出結果如下</script>
?3.2yield關鍵字,暫停代碼執行,并將后面的值返回
function* generateSequence() {yield 1;yield 2;yield 3;
}const generator = generateSequence();console.log(generator.next().value); // 1
console.log(generator.next().value); // 2
console.log(generator.next().value); // 3
3.3結束迭代.return()
<script>function* generator(){yield 1;yield 2;yield 3;}let g = generator();let r1 = g.next();g.return();let r2 = g.next();let r3 = g.next();console.log(r1,r2,r3);//{value: 1, done: false}//{value: undefined, done: true}//{value: undefined, done: true}</script>