15年發(fā)布的 ES6
新增的 數(shù)組方法
// 判定 目標(biāo)數(shù)組中 是否至少有一個(gè)元素滿足 指定條件 --- 返回布爾值
// 數(shù)組.some(function(參1,參2,參3)
var arr = [70, 27, 67, 89]
var bool = arr.some(function (v, i, a) {
// 本質(zhì)為封裝的循環(huán)遍歷函數(shù)
console.log(v); // 當(dāng)前遍歷的值
console.log(i); // 當(dāng)前遍歷的值的下標(biāo) --- 可選參
console.log(a); // 當(dāng)前遍歷的目標(biāo)數(shù)組 --- 可選參
return v > 90 // 判斷條件
})
console.log(bool); // false 沒有元素滿足條件
// 判定 目標(biāo)數(shù)組中 是否所有元素 都滿足 指定條件 --- 返回布爾值
// 數(shù)組.every(function(參1,參2,參3)
var arr = [70, 27, 67, 89]
var bool = arr.every(function (v, i, a) {
return v > 60 // 判斷條件
})
console.log(bool); // false 27不滿足條件 提前結(jié)束
// 判定 目標(biāo)數(shù)組中 第一個(gè) 滿足條件的值 --- 返回目標(biāo)值 否則返回undefined
// 數(shù)組.find(function(參1,參2,參3)
var arr = [70, 27, 67, 89]
var bool = arr.find(function (v, i, a) {
return v < 60 // 判斷條件
})
console.log(bool); // 27
// 判定 目標(biāo)數(shù)組中 第一個(gè) 滿足條件的值 的下標(biāo) --- 返回目標(biāo)值的下標(biāo) 否則返回-1
// 數(shù)組.findIndex(function(參1,參2,參3)
var arr = [70, 27, 67, 89]
var bool = arr.findIndex(function (v, i, a) {
return v < 60 // 判斷條件
})
console.log(bool); // 1
新增的 定義變量關(guān)鍵字
let
對(duì)比var 區(qū)別：
1. let定義的變量 沒有 預(yù)解析
console.log(a);
let a = 10
預(yù)解析案例-圖示
2.
let定義的全局變量 不存在于window中
let a = 10
var b = 5
console.log(window);
全局變量檢測(cè)-圖示
3.
let碰到 大括號(hào) 時(shí) 會(huì)產(chǎn)生獨(dú)立的作用域 --- 塊級(jí)作用域
if (true) {
var a = 10
}
if (true) {
let b = 5
}
console.log(a);
console.log(b);
let作用域測(cè)試-圖示
常用場(chǎng)景：解決循環(huán)中的異步操作調(diào)用變量問題
window.onclick = () => {
for (let i = 1; i <= 3; i++) {
setInterval(function () {
console.log(i);
}, 1000)
}
}
let解決異步問題-圖示
4. 不允許對(duì) 同一變量 重復(fù)定義
let a = 10
let a = 5
console.log(a);
let重復(fù)定義測(cè)試-圖示
--------------------------------------------------
const對(duì)比
var 區(qū)別 --- 基本同let對(duì)比
let 區(qū)別：定義的值為常量 --- 不能改變
const a = 5;
a = 10
console.log(a);
改變const常量測(cè)試-圖示
新增的 函數(shù)定義方式 --- 箭頭函數(shù)
// 1. 只針對(duì) 匿名函數(shù) 的簡(jiǎn)寫
// 2. 省略關(guān)鍵字function 小括號(hào)()后添加箭頭=>
var a = () => {console.log(213);}
a()
// 3. 只有一個(gè)形參時(shí) 小括號(hào)可省略
var a = i => {console.log(i);}
a(213)
// 4. 當(dāng)大括號(hào)內(nèi)只有一行代碼時(shí) 大括號(hào)可省略 若代碼只有return 則省略大括號(hào)時(shí) return關(guān)鍵字一定要一起省略
var a = i => i
console.log(a(213));
新增的 字符串方法
var str = 'http://www.baidu.com'
// 1. 字符串是否以某子串 開頭 --- 返回布爾值
// 字符串.startsWith('檢測(cè)子串')
console.log(str.startsWith('http'));
// 2. 字符串是否以某子串 結(jié)尾 --- 返回布爾值
// 字符串.endsWith('檢測(cè)子串')
console.log(str.endsWith('.com'));
// 3. 字符串或數(shù)組 是否 包含 某個(gè)子串或值 --- 返回布爾值
// 字符串|數(shù)組.includes('檢測(cè)子串|值')
var arr = ['ab', 'bb', 'cd']
console.log(str.includes('baidu'));
console.log(arr.includes('bb'));
函數(shù)默認(rèn)值
允許賦予形參默認(rèn)值
// 有實(shí)參傳入時(shí) 實(shí)參覆蓋默認(rèn)值
// 無(wú)實(shí)參傳入時(shí) 使用默認(rèn)值
function add(a, b = 2) {
return a + b;
}
console.log(add(5, 1)); // 6
// 帶默認(rèn)值的形參變可選項(xiàng)
console.log(add(5)); // 7
// 帶默認(rèn)值的形參只能放在其他形參后面
模板字符串
// 反引號(hào) ``
// 1. 字符串可以換行書寫 且保留換行符和空格
var str1 = `
1 2 3
4 5 6
`
console.log(str1);
// 2. 字符串中可以直接使用 美元符+大括號(hào) 識(shí)別變量 不用再拼接字符串 且不能拼接字符串
var a = 213
var str2 = `abc${a}def`
console.log(str2);
模板字符串功能展示-圖示
解構(gòu)賦值
本質(zhì)：一種快速賦值的方法
數(shù)組解構(gòu)
var arr = [1, 2, 3]
// 1.1 數(shù)組解構(gòu)
// 通過中括號(hào)裝載變量的形式 對(duì)目標(biāo)數(shù)組中"對(duì)應(yīng)下標(biāo)"的數(shù)據(jù)進(jìn)行
var [a, b, c] = arr
console.log(a, b, c); // 1 2 3
var [d, e] = arr
console.log(d, e); // 1 2
var [f, _, g] = arr
console.log(f, g); // 1 3
// 可以使用下劃線作為無(wú)意義變量 接受不需要的數(shù)據(jù) 進(jìn)行跳過
var [h, i, j, k] = arr
console.log(h, i, j, k); // 1 2 3 undefined
var brr = [1, [2, 3], 4]
// 1.2 數(shù)組的多重解構(gòu)
var [a, b, c] = brr
console.log(a, b, c); // 1 [2,3] 4
var [d, [_, e]] = brr
console.log(d, e); // 1 3
// 通過嵌套中括號(hào)來(lái)提取多重?cái)?shù)組中的數(shù)據(jù)
// 1.3 延展：交換兩個(gè)變量的值
var a = 5
var b = 10
console.log(a, b); // 5 10
var [b, a] = [a, b]
console.log(a, b); // 10 5
對(duì)象解構(gòu)
// 2.1 對(duì)象解構(gòu)
var date = {
year: 2022,
month: 3,
day: 29,
}
var {month,day} = date
// 定義的變量名需要跟對(duì)象中的鍵名保持一致
console.log(month,day); // 3 29
// 解構(gòu)對(duì)象并取別名
var {month: m,day: d} = date
// 可以在定義時(shí)通過冒號(hào)連接原鍵名的新變量名
console.log(m, d); // 3 29
console.log(month, day); // 報(bào)錯(cuò)
// 改名后 原鍵名的變量無(wú)法再輸出
// 2.2 對(duì)象的多重解構(gòu)
var date = {
year: 2022,
month: 3,
day: 29,
time:{
hour:17,
min:30
}
}
var {time:{hour}} = date
// 先提取外層鍵名 通過冒號(hào)連接大括號(hào) 再填寫下一層需要提取的鍵名
console.log(hour); // 17
展開 / 合并運(yùn)算符 (點(diǎn)點(diǎn)點(diǎn)運(yùn)算符)
// 1. 展開運(yùn)算符
// 1.1 展開數(shù)組
var arr = [1, 2, 3, 4]
console.log(arr); // [1,2,3,4]
console.log(Object.prototype.toString.call(arr)); // [object Array]
console.log(...arr); // 1 2 3 4
// 數(shù)組被展開成數(shù)字
console.log(Object.prototype.toString.call(...arr)); // [object Number]
// 1.2 展開對(duì)象
var time = {
month: 3,
day: 29,
}
var date = {
year: 2022,
...time
}
console.log(date); // {year: 2022, month: 3, day: 29}
// 對(duì)象time被展開成多個(gè)鍵值對(duì)
// 2. 合并運(yùn)算符用法
var arr
function fn(...a) {
arr = a
}
fn(6, 7, 8, 9)
// 該組數(shù)據(jù)在傳入時(shí) 被合并為數(shù)組
console.log(arr); // [6,7,8,9]
console.log(Object.prototype.toString.call(arr)); // [object Array]
對(duì)象的簡(jiǎn)寫
// 允許對(duì)象外的變量 作為同名鍵值對(duì) 填充進(jìn)對(duì)象
var str = 'abc';
var arr = [1, 2, 3];
var fn = () => 0
var obj = {
str,
arr,
fn
}
console.log(obj); // {str: 'abc', arr: Array(3), fn: ?}
新增的 檢測(cè)數(shù)據(jù)類型 的方法
// Object.prototype.toString.call()
// 可用于引用類型數(shù)據(jù)的檢測(cè) 可返回更加明確的數(shù)據(jù)類型
console.log( Object.prototype.toString.call([]) ); // [object Array]
console.log( Object.prototype.toString.call({}) ); // [object Object]
console.log( Object.prototype.toString.call(Math) ); // [object Math]
console.log( Object.prototype.toString.call(new Date()) ); // [object Date]
console.log(Object.prototype.toString.call(function(){})); // [object Function]
console.log(Object.prototype.toString.call(/^abc$/)); // [object RegExp]
上下文調(diào)用模式 --- 借用模式 --- 借用函數(shù)
// 函數(shù).call(this的新指向,實(shí)參1,實(shí)參2...)
// 1.1 調(diào)用函數(shù)
function fn() {console.log(123);}
fn.call() // 等效于fn()
// 1.2.1 改變函數(shù)this的指向
function fn() {console.log(this);}
var obj = {year : 2022}
fn()
fn.call(obj)
// 1.2.2 只調(diào)用函數(shù) 但是不改變函數(shù)this的指向
function fn(a, b) {console.log(a + b);}
fn.call(null, 10, 5) // 15
// call方法中 第一個(gè)參數(shù)為原函數(shù)this的新指向 填null即不改變 后續(xù)實(shí)參可以正常傳參
// 但null不能省略 且只能在第一位
1.2 call方法改變函數(shù)this-圖示
// 函數(shù).apply(this的新指向,由實(shí)參組成的數(shù)組)
// 用法與call大致相同
// call可傳入多個(gè)實(shí)參
// apply一般只有兩個(gè)參數(shù) 第二個(gè)參數(shù)為數(shù)組
function fn(a, b) {console.log(a + b);}
fn.apply(null, [10, 5]) // 15
// 函數(shù).bind(this的新指向)
// 復(fù)制函數(shù) 且改變新函數(shù)this的指向
function fn() {console.log(123);}
var fun = fn.bind()
fun() // 123
借用函數(shù)
原理：利用某方法的 原型 調(diào)用該方法 再用call改變方法的 this的指向
// 場(chǎng)景1 偽數(shù)組轉(zhuǎn)數(shù)組
var lis = document.querySelectorAll('li')
console.log(lis); // NodeList(3) [li, li, li]
console.log(Object.prototype.toString.call(lis)); // [object NodeList]
console.log([].slice.call(lis, 0)); // [li, li, li]
// 過程：調(diào)用本屬于數(shù)組的slice方法 將slice的this指向改為變量lis 再傳入?yún)?shù)0 從下標(biāo)0開始截取 返回新數(shù)組
console.log(Object.prototype.toString.call([].slice.call(lis, 0))); // [object Array]
偽數(shù)組
可以遍歷 但不能使用數(shù)組方法
