之前只有函數(shù)中存在局部作用域汗贫。
一、聲明變量與常量
1.let關(guān)鍵字
①let關(guān)鍵字用來聲明變量另患。
②if纽乱、for的大括號(hào) { } 內(nèi)用 let 聲明的變量具有塊級(jí)作用域蛾绎,只在當(dāng)前大括號(hào)內(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 也具有塊級(jí)作用域顽爹,只在當(dāng)前大括號(hào)內(nèi)起作用纤泵。
④let 聲明的變量沒有變量提升(預(yù)解析),變量必須先聲明后使用镜粤。
⑤暫時(shí)性死區(qū)捏题。塊級(jí)作用域內(nèi)部與全局聲明的同名變量沒有任何關(guān)系。
var a = 10; //全局變量
if (true) {
console.log(a); //錯(cuò)誤肉渴!a沒有定義
let a = 20;
}
2.每次循環(huán)都會(huì)產(chǎn)生一個(gè)新的塊級(jí)作用域公荧,每個(gè)塊級(jí)作用域中的變量相互獨(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)都會(huì)產(chǎn)生一個(gè)新的塊級(jí)作用域券勺,每個(gè)塊級(jí)作用域中的變量相互獨(dú)立的绪钥。
// 函數(shù)執(zhí)行時(shí)輸出的是自己上一級(jí)(循環(huán)產(chǎn)生的塊級(jí)作用域)作用域下的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)鍵字聲明的常量具有塊級(jí)作用域程腹。
③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ù)組中提取值,按照對(duì)應(yīng)位置校焦,對(duì)變量賦值赊抖,對(duì)象也可以實(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.對(duì)象解構(gòu)
(1)let { 與屬性名同名變量1, 與屬性名同名變量2...} = 對(duì)象
// 聲明一個(gè)對(duì)象
let obj = { uname: '吳磊', age: '22' };
//(1) 對(duì)象解構(gòu)
let {uname, age} = obj;
console.log(uname); //吳磊
console.log(b); //22
(2)修改結(jié)構(gòu)出來的變量名稱
let { 屬性名1:自定義名1井氢,屬性名2:自定義名2...} = 對(duì)象
// 聲明一個(gè)對(duì)象
let obj = { uname: '吳磊', age: '22' };
//(2)對(duì)象解構(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)值 } = 對(duì)象 ( 如果對(duì)象中沒有要結(jié)構(gòu)的這個(gè)變量花竞,則該變量取默認(rèn)值劲件。)
(4)防止被結(jié)構(gòu)的對(duì)象出錯(cuò),結(jié)構(gòu)時(shí)預(yù)處理
let { 變量名 } = 對(duì)象 || {}
//如果被解構(gòu)的對(duì)象為null或者undefined時(shí)约急,結(jié)構(gòu)賦值會(huì)報(bào)錯(cuò)零远。
const obj = null
const {data} = obj || {}
三、箭頭函數(shù)
1.格式
const 變量名 = 參數(shù) => 函數(shù)體
①箭頭函數(shù)的函數(shù)體只有一句代碼厌蔽,并且這句代碼的結(jié)果就是函數(shù)返回值的話牵辣,可以省略大括號(hào)和return。
②箭頭函數(shù)只有一個(gè)參數(shù)躺枕,可以省略小括號(hào)服猪。
// 下面兩個(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對(duì)象不產(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)置對(duì)象危彩,所以參數(shù)個(gè)數(shù)不確定時(shí)可以用"...參數(shù)名"接收剩余所有參數(shù)攒磨,存儲(chǔ)到一個(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í)(對(duì)象屬性個(gè)數(shù)),用剩余參數(shù)接收剩下的所有數(shù)組元素(對(duì)象屬性)谒府,存儲(chǔ)到一個(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)算符...(對(duì)象也有)
格式:...數(shù)組名
①擴(kuò)展運(yùn)算符可以將數(shù)組或者對(duì)象轉(zhuǎn)為用逗號(hào)分隔的參數(shù)序列完疫。
②console.log打印時(shí)泰鸡,會(huì)把逗號(hào)當(dāng)做分隔符自動(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)目的日歷會(huì)用到)
Array.from ( 偽數(shù)組壳鹤,處理函數(shù) )
(1)Array.from( )方法可以將偽數(shù)組轉(zhuǎn)換成數(shù)組盛龄,返回值是新數(shù)組。
(2)第一個(gè)參數(shù)是待轉(zhuǎn)化的偽數(shù)組芳誓。
(3)第二個(gè)參數(shù)是一個(gè)函數(shù)余舶,可以對(duì)每一個(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ù)葛圃。方法會(huì)遍歷數(shù)組,每個(gè)元素都會(huì)調(diào)用處理函數(shù)憎妙。
(4)處理函數(shù)有兩個(gè)參數(shù)库正,當(dāng)前數(shù)組元素item,當(dāng)前數(shù)組元素的索引號(hào)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( )方法查找的是索引號(hào)抚垃。
(2)findIndex( )方法的返回值是第一個(gè)滿足條件的元素的索引號(hào)喷楣。找不到則返回-1。
var arr2 = [10, 20, 30, 40];
var i = arr2.findIndex((item) => item > 20);
console.log(i); // 第一個(gè)大于20的元素的索引號(hào)是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)前元素。