之前只有函數(shù)中存在局部作用域。
一、聲明變量與常量
1.let關(guān)鍵字
①let關(guān)鍵字用來聲明變量。
②if、for的大括號 { } 內(nèi)用 let 聲明的變量具有塊級作用域，只在當(dāng)前大括號內(nèi)起作用。
依然遵循作用域鏈:內(nèi)部可以訪問外部，外部不能訪問內(nèi)部
if (true) {
let b = 10;
if (true) {
console.log(b); //遵循作用域鏈：內(nèi)部可以訪問外部。10
}
}
if (true) {
let b = 10;
if (true) {
let b = 20;
}
console.log(b); //遵循作用域鏈：外部不能訪問內(nèi)如。10
}
③在 for 循環(huán)中，用 let 聲明的計(jì)數(shù)器 i 也具有塊級作用域，只在當(dāng)前大括號內(nèi)起作用。
④let 聲明的變量沒有變量提升（預(yù)解析），變量必須先聲明后使用。
⑤暫時(shí)性死區(qū)。塊級作用域內(nèi)部與全局聲明的同名變量沒有任何關(guān)系。
var a = 10; //全局變量
if (true) {
console.log(a); //錯(cuò)誤！a沒有定義
let a = 20;
}
2.每次循環(huán)都會產(chǎn)生一個(gè)新的塊級作用域，每個(gè)塊級作用域中的變量相互獨(dú)立的。
// 核心：循環(huán)是同步任務(wù)，調(diào)用函數(shù)是異步任務(wù)。所以函數(shù)被調(diào)用時(shí)循環(huán)已經(jīng)結(jié)束。
var arr1 = [];
for (var i = 0; i < 2; i++) {
arr1[i] = function () {
console.log(i);
};
}
arr1[0](); //2
arr1[1](); //2
// 核心：每次循環(huán)都會產(chǎn)生一個(gè)新的塊級作用域，每個(gè)塊級作用域中的變量相互獨(dú)立的。
// 函數(shù)執(zhí)行時(shí)輸出的是自己上一級（循環(huán)產(chǎn)生的塊級作用域）作用域下的i值。
let arr2 = [];
for (let i = 0; i < 2; i++) {
arr2[i] = function () {
console.log(i);
};
}
arr2[0](); //0
arr2[1](); //1
3.const關(guān)鍵字
①const關(guān)鍵字用來聲明常量。
②const關(guān)鍵字聲明的常量具有塊級作用域。
③const關(guān)鍵字聲明常量時(shí)必須賦值。
④const關(guān)鍵字聲明的常量不能重新賦值。
如果是基本數(shù)據(jù)類型，不能更改值；
如果是復(fù)雜數(shù)據(jù)類型，可以更該內(nèi)部的值，不能更改地址值，。如下：
const arr = [1,2];
arr[0] = 10;
arr[1] = 20;
console.log(arr); //結(jié)果為[10,20]
arr = [10,20]; //報(bào)錯(cuò)！不能更改復(fù)雜數(shù)據(jù)類型的地址值
二、解構(gòu)賦值
ES6中允許從數(shù)組中提取值，按照對應(yīng)位置，對變量賦值，對象也可以實(shí)現(xiàn)解構(gòu)
4.數(shù)組解構(gòu)
let [ 變量1，變量2...] = 數(shù)組
注意：如果變量的個(gè)數(shù)比數(shù)組元素多時(shí)，后面的變量賦值為underfined。
如果變量的個(gè)數(shù)比數(shù)組元素少，后面的數(shù)組元素被忽略。更多情況見文檔。
let [a, b, c] = [1, 2, 3];
console.log(a) //1
console.log(b) //2
console.log(c) //3
5.對象解構(gòu)
（1）let { 與屬性名同名變量1， 與屬性名同名變量2...} = 對象
// 聲明一個(gè)對象
let obj = { uname: '吳磊', age: '22' };
//(1) 對象解構(gòu)
let {uname, age} = obj;
console.log(uname); //吳磊
console.log(b); //22
（2）修改結(jié)構(gòu)出來的變量名稱
let { 屬性名1：自定義名1，屬性名2：自定義名2...} = 對象
// 聲明一個(gè)對象
let obj = { uname: '吳磊', age: '22' };
//(2)對象解構(gòu)
let { uname: a, age: b } = obj;
console.log(a); //吳磊
console.log(b); //22
（3）結(jié)構(gòu)賦值時(shí)，給結(jié)構(gòu)出來的變量添加默認(rèn)值。
let { 變量名 = 默認(rèn)值 } = 對象 （ 如果對象中沒有要結(jié)構(gòu)的這個(gè)變量，則該變量取默認(rèn)值。）
（4）防止被結(jié)構(gòu)的對象出錯(cuò)，結(jié)構(gòu)時(shí)預(yù)處理
let { 變量名 } = 對象 || {}
//如果被解構(gòu)的對象為null或者undefined時(shí)，結(jié)構(gòu)賦值會報(bào)錯(cuò)。
const obj = null
const {data} = obj || {}
三、箭頭函數(shù)
1.格式
const 變量名 = 參數(shù) => 函數(shù)體
①箭頭函數(shù)的函數(shù)體只有一句代碼，并且這句代碼的結(jié)果就是函數(shù)返回值的話，可以省略大括號和return。
②箭頭函數(shù)只有一個(gè)參數(shù)，可以省略小括號。
// 下面兩個(gè)函數(shù)時(shí)等價(jià)的
function sum(num1, num2) {
return num1 + num2;
}
const sum = (num1, num2) => num1 + num2;
2.箭頭函數(shù)中的this
箭頭函數(shù)中不綁定this，箭頭函數(shù)中的this指向是它所定義的位置的this。
也就是，定義箭頭函數(shù)中的作用域的this指向誰，它就指向誰。
// 箭頭函數(shù)的this指向所在作用域的this.但是obj對象不產(chǎn)生作用域，所以箭頭函數(shù)的this指向window。
var age = 100;
var obj = {
age: 22,
say: () => {
console.log(this.age);
},
};
obj.say();
四、剩余參數(shù)
1.剩余參數(shù)與箭頭函數(shù)搭配
箭頭函數(shù)里沒有arguments內(nèi)置對象，所以參數(shù)個(gè)數(shù)不確定時(shí)可以用"...參數(shù)名"接收剩余所有參數(shù)，存儲到一個(gè)數(shù)組中。
const sum = (...args) => {
let total = 0;
args.forEach(value => total += value); //遍歷參數(shù)數(shù)組，實(shí)現(xiàn)求和
console.log(total);
};
sum(21,34,64)
2.剩余參數(shù)可以和解構(gòu)一起使用。
當(dāng)變量個(gè)數(shù)小于數(shù)組元素個(gè)數(shù)時(shí)（對象屬性個(gè)數(shù)），用剩余參數(shù)接收剩下的所有數(shù)組元素（對象屬性），存儲到一個(gè)新數(shù)組中。
let [...變量名] = 數(shù)組
let arr = [1, 2, 3, 4];
let [a, ...b] = arr;
console.log(a); // 1
console.log(b); // [2,3,4]
let obj = {uname: '吳磊',age: 22}
let{...c} = obj;
console.log(c); //object{uname: '吳磊',age: 22}
五、數(shù)組的擴(kuò)展方法
1.數(shù)組的擴(kuò)展運(yùn)算符...（對象也有）
格式：...數(shù)組名
①擴(kuò)展運(yùn)算符可以將數(shù)組或者對象轉(zhuǎn)為用逗號分隔的參數(shù)序列。
②console.log打印時(shí)，會把逗號當(dāng)做分隔符自動抹去。
let arr = [1,2,3,4];
// ...arr //相當(dāng)于1,2,3,4
console.log(...arr); //輸出結(jié)果為：1 2 3 4
2.數(shù)組擴(kuò)展運(yùn)算符的應(yīng)用----合并數(shù)組
（1）let arr3 = [ ...arr1 , ...arr2 ]
（2）arr1.push( ...arr2 )
// 合并數(shù)組方法1
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr3 = [...arr1, ...arr2];
console.log(arr3);
//合并數(shù)組方法2
let arr4 = [10,20,30];
let arr5 = [40,50,60];
arr4.push(...arr5);
console.log(arr4);
3.數(shù)組擴(kuò)展運(yùn)算符的應(yīng)用----偽數(shù)組轉(zhuǎn)換成數(shù)組
let 數(shù)組名 =[ ...偽數(shù)組]
//偽數(shù)組轉(zhuǎn)換成數(shù)組
var lis = document.querySelectorAll('li');
lis = [...lis];
4.數(shù)組的Array.from( )方法 （人資項(xiàng)目的日歷會用到）
Array.from ( 偽數(shù)組，處理函數(shù) ）
（1）Array.from( )方法可以將偽數(shù)組轉(zhuǎn)換成數(shù)組，返回值是新數(shù)組。
（2）第一個(gè)參數(shù)是待轉(zhuǎn)化的偽數(shù)組。
（3）第二個(gè)參數(shù)是一個(gè)函數(shù)，可以對每一個(gè)偽數(shù)組元素進(jìn)行處理并返回到新數(shù)組中。
// 定義一個(gè)偽數(shù)組
var arrayLike = {
"0": 1,
"1": 2,
"length": 2,
};
// 將偽數(shù)組轉(zhuǎn)換成真數(shù)組，并把每一個(gè)元素乘以2
var newarr = Array.from(arrayLike, (value,index) => value * 2);
console.log(newarr);
5.數(shù)組的find( )方法 （重點(diǎn)）-------------------->數(shù)組的some( )方法
數(shù)組名.find( function( item , index ）)
（1）find( )方法可以查找數(shù)組中【第一個(gè)】滿足條件的元素。
（2）方法的返回值是第一個(gè)滿足條件的數(shù)組元素。
（3）方法的參數(shù)是一個(gè)處理函數(shù)。方法會遍歷數(shù)組，每個(gè)元素都會調(diào)用處理函數(shù)。
（4）處理函數(shù)有兩個(gè)參數(shù)，當(dāng)前數(shù)組元素item，當(dāng)前數(shù)組元素的索引號index。
（5） 結(jié)果一定要 return 出去。
var arr = [{ id: 1 }, { id: 2 }];
var ele = arr.find(function (item, index) {
return item.id == 2;
});
console.log(ele); // {id: 2}
6.findIndex( )方法
數(shù)組名.findIndex( function( item ,index ) )
（1）與find( )方法用法完全相同。只不過findIndex( )方法查找的是索引號。
（2）findIndex( )方法的返回值是第一個(gè)滿足條件的元素的索引號。找不到則返回-1。
var arr2 = [10, 20, 30, 40];
var i = arr2.findIndex((item) => item > 20);
console.log(i); // 第一個(gè)大于20的元素的索引號是2
7.includes( )方法
數(shù)組.includes( 元素 )
includes( )方法可以查找數(shù)組中是否包含某個(gè)元素。返回值是布爾值。
some( )方法可以查找數(shù)組中是否有 符合條件的元素。找到一個(gè)，則不再遍歷剩余元素。
includes( )方法可以查找數(shù)組中是否有 某個(gè)元素。
map( ) 和 filter( )
六、字符串的擴(kuò)展方法
1.模板字符串
2.startsWidth( )方法和endsWidth( )方法
原字符串.startsWith(參數(shù)字符串)：表示參數(shù)字符串是否在原字符串的頭部，返回布爾值
原字符串.endsWith(參數(shù)字符串)：表示參數(shù)字符串是否在原字符串的尾部，返回布爾值
3.repeat( )方法
var 新字符串 = 原字符串.repeat( 次數(shù) ）
repeat( )方法可以將字符串重復(fù)n次。參數(shù)表示重復(fù)的次數(shù)，返回值是一個(gè)新字符串。
3.Set數(shù)據(jù)結(jié)構(gòu)
- Set本身是一個(gè)構(gòu)造函數(shù)，用來生成 Set 數(shù)據(jù)結(jié)構(gòu)。
- Set類似于數(shù)組Array，但是成員的值都是唯一的，沒有重復(fù)的值。
①參數(shù)是一個(gè)數(shù)組。
②返回值是一個(gè)Set數(shù)據(jù)結(jié)構(gòu)。
var 變量名 = new Set( [... ] )
const set = new Set([1,1,2,2]);
console.log(set.size); //返回Set數(shù)據(jù)結(jié)構(gòu)的長度
console.log(set); //返回Set數(shù)據(jù)結(jié)構(gòu)本身 {1, 2}
var arr = [...set]; //數(shù)組去重
console.log(arr);
4.利用Set數(shù)據(jù)結(jié)構(gòu)、解構(gòu) 進(jìn)行數(shù)組去重
var Set數(shù)據(jù)名稱 = new Set(數(shù)組)
數(shù)組 = Array.from(Set數(shù)據(jù)名稱）
5.Set結(jié)構(gòu)的方法
- add(value)：添加某個(gè)值，返回 Set 結(jié)構(gòu)本身
- delete(value)：刪除某個(gè)值，返回一個(gè)布爾值，表示刪除是否成功
- has(value)：返回一個(gè)布爾值，表示該值是否為 Set 的成員
- clear()：清除所有成員，沒有返回值
const set = new Set(["a","b"]);
//添加值。可以連寫。
set.add('C').add("D");
// 刪除值，返回一個(gè)布爾值，表示是否刪除成功。
const result = set.delete('C');
console.log(result);
// 判斷Set中是否存在該參數(shù)。返回一個(gè)布爾值。
const result2 = set.has('a')
console.log(result2);
// 清除Set結(jié)構(gòu)中的所有值。
set.clear();
6.遍歷Set結(jié)構(gòu)
Set 結(jié)構(gòu)名.forEach( function( value ) { } )
Set結(jié)構(gòu)也有forEach( )方法，但參數(shù)只有一個(gè)，表示當(dāng)前元素。
