深入理解es6
ES6 第五章:數(shù)組的空位
- 數(shù)組的空位利朵,數(shù)組的某個(gè)索引位置沒有任何值诡必,undefined不是空位
- 判斷一個(gè)數(shù)組中某一個(gè)位置是不是空位 in
- in:判斷索引位置上有沒有值
let arr = [,,,,,]
console.log(arr.length)
輸出: 5
let arr = [,undefined,,,]
console.log(1 in arr)
輸出: true
console.log(0 in arr)
輸出: false
- 在ES5中數(shù)組方法對(duì)空位的處理不一致,會(huì)跳過空位
let arr = [1,2,,,3]
arr.filter(function(item){
console.log(item)
})
輸出: 1 2 3
let arr = [1,2,,,3]
for (let key in arr) {
console.log(key)
}
輸出: 1 2 3
- 在ES6中數(shù)組方法將空位處理為undefined
let arr = [1,2,,,3]
arr.find(function(item){
console.log(item)
})
輸出: 1 2 undefined undefined 3
let arr = [1,2,,,3]
for (let item of arr) {
console.log(item)
}
輸出: 1 2 undefined undefined 3
- 得到一個(gè)有7個(gè)1的數(shù)組
console.log(Array(7).fill(1))
輸出:[1,1,1,1,1,1,1]
ES6 第六章:函數(shù)的擴(kuò)展
函數(shù)參數(shù)
參數(shù)默認(rèn)值
function fn(x='張三', y='Es6'){
console.log(x, y)
}
fn(0)
輸出: 0 'Es6'
參數(shù)使用解構(gòu)賦值
function fn({name='張三', age=20}={}){
console.log(name, age)
}
fn()
輸出: '張三' 20
fn({})
輸出: '張三' 20
function fn({name,age}={name:'張三',age:20}) {
console.log(name, age)
}
fn()
輸出: '張三' 20
fn({})
輸出: undefined undefined
length屬性
// 形參的個(gè)數(shù)真仲,如果形參有默認(rèn)值length就會(huì)失真變成沒有默認(rèn)值形參的個(gè)數(shù)
function fn(x,y){
}
fn(1,2)
console.log(fn.length)
輸出: 2
function fn(x=1,y=2){
}
fn(1,2)
console.log(fn.length)
輸出: 0
參數(shù)默認(rèn)位置
// 參數(shù)默認(rèn)值一般放最后面
function fn(x,y=10){
console.log(x,y)
}
fn(1)
輸出: 1 10
arguments類數(shù)組
function fn() {
console.log(arguments)
}
fn(1,2,3,4,5)
輸出: Arguments(5) [1, 2, 3, 4, 5, callee: (...), Symbol(Symbol.iterator): ?]
// 一般使用解構(gòu)賦值拿到參數(shù)
// 數(shù)組不定參數(shù)解構(gòu)賦值
function fn(...args) {
console.log(args)
}
fn(1,2,3,4,5)
輸出: [1, 2, 3, 4, 5]
函數(shù)NAME
函數(shù)的名稱
function fn() {
}
console.log(fn.name)
輸出: fn
// 通過bind方法得到一個(gè)新的函數(shù),name是"bound 原來函數(shù)的名字"
function fn() {
}
let fn1 = fn.bind(null)
console.log(fn1.name)
輸出: bound fn
// 通過構(gòu)造函數(shù)方式創(chuàng)建一個(gè)函數(shù)逮诲,name是"anonymous"
// new Function("形參","函數(shù)體")
// new Function("函數(shù)體")
let fn = new Function('x,y','console.log(x,y)')
fn(10, 100)
輸出: 10 100
console.log(fn.name)
輸出: anonymous
// 將JSON字符串轉(zhuǎn)成數(shù)組
let str = '[{"name":"張三", age:100}]'
console.log(eval(str))
輸出: [{"name":"張三", age:100}]
let str = '[{"name":"張三", age:100}]'
let arr = (new Function(`return ${str}`))()
console.log(arr)
輸出: [{"name":"張三", age:100}]
參數(shù)作用域
函數(shù)執(zhí)行的時(shí)候先給形參賦值婉刀,形參也是私有變量吟温,如果給形參的默認(rèn)值是一個(gè)變量,先看是不是自己的私有變量突颊,不是自己的私有變量就會(huì)在找全局中是否有這個(gè)變量鲁豪,沒有就報(bào)錯(cuò)
// 參數(shù)賦值時(shí)私有作用域沒有就會(huì)網(wǎng)上查詢,查找全局作用域中有沒有律秃,有就會(huì)賦值爬橡,沒有會(huì)報(bào)錯(cuò)
let m=10,n=100
function fn(x=m, y=n) {
// 私有作用域:私有變量x,y,m,n
console.log(x, y)
let m='張三'
let n='ES6'
}
fn()
輸出: 10 100
// 有參數(shù)時(shí)會(huì)替換等號(hào)右邊的值
fn(1)
輸出: 1 100
// 傳參后先給x賦值,私有變量x被賦值后友绝,y賦值的時(shí)候x已經(jīng)有值就不會(huì)向上查找
let x=100
function fn(x,y=x) {
console.log(x, y)
let m='張三'
let n='ES6'
}
fn(1)
輸出: 1 1
ES6 第七章:擴(kuò)展運(yùn)算符和箭頭函數(shù)
擴(kuò)展運(yùn)算符 ...
將非數(shù)組變成數(shù)組(類數(shù)組 length)
let str = '123'
console.log([...str])
輸出: 1 2 3
將數(shù)組變成非數(shù)組
let arr1 = [1,2,3,4]
let arr2 = [10,20,30,40]
console.log(arr1.concat((arr2))
console.log([...arr1,...arr2])
輸出: [1,2,3,4,10,20,30,40]
找出數(shù)組中最大值
let arr = [1,24,124,122,366,1,5,7]
console.log(Math.max.apply(null,arr))
console.log(eval(`Math.max(${arr})`))
console.log(Math.max(...arr))
輸出: 366
箭頭函數(shù)
匿名函數(shù)
let fn = (形參) => {函數(shù)體}
// 假如函數(shù)體只有一行代碼return 可以省略{}和return
let fn = x => x + 1
console.log(fn(1))
輸出: 2
let fn = x => {return x+1}
console.log(fn(2))
輸出: 3
// 通常函數(shù)當(dāng)做參數(shù)的時(shí)候使用箭頭函數(shù)
let arr = ['張三',1,2,3]
arr.filter(item => typeof item === 'number')
輸出: [1,2,3]
總結(jié)
- 箭頭函數(shù)沒有this指向,里面的this是上一級(jí)作用域下的this
let obj = {
fn: function() {
console.log(this)
let f = () => {
console.log(this)
}
f()
}
}
obj.fn()
輸出: {fn: ?}
- 箭頭函數(shù)沒有arguments肝劲,如果要拿到參數(shù)可以使用擴(kuò)展運(yùn)算符
let fn = (...args) => {
console.log(args)
}
fn(1,2,3,4,5)
輸出: [1,2,3,4,5]
- 箭頭函數(shù)不可以用作構(gòu)造函數(shù)迁客,因?yàn)椴豢梢允褂胣ew執(zhí)行
let F = () => {}
console.log(new F)
輸出: F is not a constructor
ES6 第八章:對(duì)象的擴(kuò)展
對(duì)象的簡潔方式
let name='張三',age=100
// let obj={name:name,age:age}
let obj={name,age}
// 屬性名是字符串,屬性名使用[]辞槐,里面可以寫變量
let name='張三',age=100,str='name'
let obj={
// fn: function(){}
fn(){},
// 'name': name
[str]:name
}
Object的方法擴(kuò)展
// Object() 將參數(shù)變成對(duì)象
console.log(Object(1))
輸出: Number {1}
console.log(Object(true))
輸出: Boolean {true}
Object.is()
說明:
判斷兩個(gè)值是否是相同的值
語法:
Object.is(value1, value2)
返回值<Boolean>:
表示兩個(gè)參數(shù)是否相同的Boolean
參數(shù):
名稱 | 類型 | 必選 | 描述 |
---|---|---|---|
value1 | Any | Y | 需要比較的第一個(gè)值 |
value2 | Any | Y | 需要比較的第二個(gè)值 |
// === 比較時(shí)掷漱,NaN不等于NaN -0等于0
// Object.is()比較后的結(jié)果除了NaN === NaN 和 -0 === 0 之間的比較不一樣,其它的跟 === 一致
console.log(NaN === NaN)
輸出: fasle
console.log(-0 === 0)
輸出: true
console.log(Object.is(NaN,NaN))
輸出: true
console.log(Object.is(0,-0))
輸出: false
Object.assgin()
說明:
將所有可枚舉屬性的值從一個(gè)或多個(gè)源對(duì)象復(fù)制到目標(biāo)對(duì)象榄檬。它將返回目標(biāo)對(duì)象
語法:
Object.assign(target, ...sources)
返回值<Object>:
目標(biāo)對(duì)象
參數(shù):
名稱 | 類型 | 必選 | 描述 |
---|---|---|---|
target | Object | Y | 目標(biāo)對(duì)象 |
sources | Object | Y | 源對(duì)象 |
let obj = {name:'張三'}
let obj1 = {age:100}
Object.assign(obj,obj1)
console.log(obj)
輸出: {name: "張三", age: 100}
擴(kuò)展運(yùn)算符合并對(duì)象
- ==ES7==中提供了對(duì)象的擴(kuò)展運(yùn)算符 ...
let obj1 = {name:'張三'}
let obj2 = {age:100}
let obj = {...obj1,...obj2}
console.log(obj)
輸出: {name: "張三", age: 100}
<font color='red'>Object.getOwnPropertyDescriptor()</font>
說明:
返回指定對(duì)象上一個(gè)自有屬性對(duì)應(yīng)的屬性描述符卜范。(自有屬性指的是直接賦予該對(duì)象的屬性,不需要從原型鏈上進(jìn)行查找的屬性)
語法:
Object.getOwnPropertyDescriptor(obj, prop)
返回值<Object>:
如果指定的屬性存在于對(duì)象上鹿榜,則返回其屬性描述符對(duì)象(property descriptor)海雪,否則返回 undefined
參數(shù):
名稱 | 類型 | 必選 | 描述 |
---|---|---|---|
obj | Object | Y | 需要查找的目標(biāo)對(duì)象 |
prop | String | Y | 目標(biāo)對(duì)象內(nèi)屬性名稱(String類型) |
/*
* configurable: false 是否可配置 可以刪除這個(gè)屬性
* enumerable: false 是否可枚舉
* value: 3
* writable: false 是否可修改
**/
console.log(Object.getOwnPropertyDescriptor('123','length'))
輸出: {value: 3, writable: false, enumerable: false, configurable: false}
Object.keys()
說明:
返回一個(gè)由一個(gè)給定對(duì)象的自身可枚舉屬性組成的數(shù)組,數(shù)組中屬性名的排列順序和使用 for...in 循環(huán)遍歷該對(duì)象時(shí)返回的順序一致
語法:
Object.keys(obj)
返回值<Array>:
一個(gè)表示給定對(duì)象的所有可枚舉屬性的字符串?dāng)?shù)組
參數(shù):
名稱 | 類型 | 必選 | 描述 |
---|---|---|---|
obj | Object | Y | 要返回其枚舉自身屬性的對(duì)象 |
let obj = {name:'張三',age:100}
console.log(Object.keys(obj))
輸出: ["name", "age"]
Object.values()
說明:
返回一個(gè)給定對(duì)象自身的所有可枚舉屬性值的數(shù)組舱殿,值的順序與使用for...in循環(huán)的順序相同 ( 區(qū)別在于 for-in 循環(huán)枚舉原型鏈中的屬性 )
語法:
Object.values(obj)
返回值<Array>:
一個(gè)包含對(duì)象自身的所有可枚舉屬性值的數(shù)組
參數(shù):
名稱 | 類型 | 必選 | 描述 |
---|---|---|---|
obj | Object | Y | 被返回可枚舉屬性值的對(duì)象 |
let obj = {name:'張三',age:100}
console.log(Object.values(obj))
輸出: ["張三", 100]
Object.entries()
說明:
返回一個(gè)給定對(duì)象自身可枚舉屬性的鍵值對(duì)數(shù)組奥裸,其排列與使用 for...in 循環(huán)遍歷該對(duì)象時(shí)返回的順序一致(區(qū)別在于 for-in 循環(huán)也枚舉原型鏈中的屬性)
語法:
Object.entries(obj)
返回值<Array>:
給定對(duì)象自身可枚舉屬性的鍵值對(duì)數(shù)組
參數(shù):
名稱 | 類型 | 必選 | 描述 |
---|---|---|---|
obj | Object | Y | 可以返回其可枚舉屬性的鍵值對(duì)的對(duì)象 |
let obj = {name:'張三',age:100}
console.log(Object.entries(obj))
輸出: [["name", "張三"],["age", 100]]
對(duì)象的Set和Get
let obj = {
_name: '張三',
set name(val) {
return this._name = val
},
get name() {
return this._name
}
}
console.log(obj.name)
輸出: '張三'
obj.name = '李四'
console.log(obj.name)
輸出: '李四'
ES6 第九章:Symbol
基礎(chǔ)用法
Symbol是一個(gè)新的基本數(shù)據(jù)類型,而且是一個(gè)值類型沪袭。使用Symbol函數(shù)執(zhí)行得到一個(gè)Symbol數(shù)據(jù)類型
Symbol跟字符串差不多湾宙,但是使用Symbol得到一個(gè)數(shù)據(jù),每一個(gè)是完全不同的
Symbol可以接受一個(gè)參數(shù)()冈绊,是對(duì)這個(gè)symbol數(shù)據(jù)的描述侠鳄,即使描述一樣,但是值也是不同
一般當(dāng)做對(duì)象的屬性死宣,任意一個(gè)Symbol()得到的值都是不同的
// 數(shù)據(jù)類型
let sym = Symbol()
console.log(typeof sym)
輸出: symbol
// 邏輯比較
let sym1 = Symbol()
let sym2 = Symbol()
console.log(sym1 == sym2)
輸出: false
// 賦值
let sym1 = Symbol()
let sym2 = Symbol()
let obj = {
sym1: '張三',
[sym1]: '張三李四'
}
console.log(obj)
輸出: {sym1: "張三", Symbol(): "張三李四"}
obj[sym2]='張三'
console.log(obj)
輸出: {sym1: "張三", Symbol(): "張三李四", Symbol(): "張三"}
// Symbol值不能跟其他值計(jì)算
// Symbol不能轉(zhuǎn)數(shù)字伟恶,不能和字符串相加
// Symbol可以轉(zhuǎn)為Boolean值
console.log(!Symbol(1))
輸出: false
// Symbol可以使用toString轉(zhuǎn)成顯示字符串
console.log(Symbol(1).toString())
輸出: 'Symbol(1)'
// Symbol.for() 如果之前有相同的參數(shù)的Symbol值,找到這個(gè)值返回毅该,如果沒有就創(chuàng)建一個(gè)新的Symbol值
// 使用Symbol.for() 參數(shù)相同值就是相同
let sym1=Symbol.for('張三')
let sym2=Symbol.for('張三')
console.log(sym1 == sym2)
輸出: true
// Symbol.keyFor(symbol值) 找到使用Symbol.for創(chuàng)建的值的描述
// 如果使用的是Symbol創(chuàng)建的是獲取不到的
let sym=Symbol.for('張三')
console.log(Symbol.keyFor(sym))
輸出: '張三'
ES6 第十章:Set
類似數(shù)組知押,只有value沒有鍵key
通過構(gòu)造函數(shù)方式創(chuàng)建一個(gè)Set實(shí)例時(shí)叹螟,參數(shù)是一個(gè)數(shù)組或者有iterable接口的類似數(shù)組
有iterable接口:數(shù)組,arguments台盯,元素集合罢绽,Set,Map静盅,字符串
console.log(new Set([1,2,3,4]))
輸出: Set(4) {1, 2, 3, 4}
console.log(new Set('1234'))
輸出: Set(4) {"1", "2", "3", "4"}
function fn() {
console.log(new Set(arguments))
}
fn(1,2,3,4)
輸出: Set(4) {1, 2, 3, 4}
去重
- 默認(rèn)會(huì)去重
例一:
let arr = [1,1,2,2,3,3,4,4]
console.log(new Set(arr))
輸出: Set(4) {1, 2, 3, 4}
例二:
let str = '12341234'
console.log(new Set(str))
輸出: Set(4) {"1", "2", "3", "4"}
例三:
function fn() {
console.log(new Set(arguments))
}
fn(1,2,3,4,1,2,3,4)
輸出: Set(4) {1, 2, 3, 4}
Set原型上擴(kuò)展的方法
add
說明:
向一個(gè) Set 對(duì)象的末尾添加一個(gè)指定的值
語法:
set.add(value)
返回值<Set>:
Set 對(duì)象本身
參數(shù):
名稱 | 類型 | 必選 | 描述 |
---|---|---|---|
value | Any | Y | 需要添加到 Set 對(duì)象的元素的值,不能添加重復(fù)的值 |
// add增加時(shí)良价,如果set中沒有就加到末尾,如果有就加不上蒿叠,返回值增加后的Set實(shí)例
let set = new Set([1,'張三',null,NaN,true])
console.log(set.add(10))
輸出: Set(6) {1, "張三", null, NaN, true, 10}
// 鏈?zhǔn)綄懛?let set = new Set([])
console.log(set.add(1).add(2).add('3').add('4'))
輸出: Set(4) {1, 2, "3", "4"}
delete
說明:
從一個(gè) Set 對(duì)象中刪除指定的元素
語法:
set.delete(value)
返回值<Boolean>:
成功刪除返回 true明垢,否則返回 false
參數(shù):
名稱 | 類型 | 必選 | 描述 |
---|---|---|---|
value | Any | Y | 將要?jiǎng)h除的元素 |
// 刪除Set中的某一項(xiàng)
let set = new Set([1,'張三',null,NaN,true])
console.log(set.delete(1))
輸出: true
clear
說明:
清空一個(gè) Set 對(duì)象中的所有元素
語法:
set.clear()
返回值<Undefined>:
undefined
// 清空Set
let set = new Set([1,'張三',null,NaN,true])
set.clear()
console.log(set)
輸出: Set(0) {}
has
說明:
檢查值value是否存在Set對(duì)象中
語法:
set.has(value)
返回值<Boolean>:
如果指定的值(value)存在于Set對(duì)象當(dāng)中,返回true; 否則返回 false
參數(shù):
名稱 | 類型 | 必選 | 描述 |
---|---|---|---|
value | Any | Y | 是否存在于Set的值 |
// 檢查值是否存在于Set中
let set = new Set([1,'張三',null,NaN,true])
console.log(set.has(1))
輸出: true
forEach
說明:
根據(jù)集合中元素的順序市咽,對(duì)每個(gè)元素都執(zhí)行提供的 callback 函數(shù)一次
語法:
set.forEach(callback[, thisArg])
參數(shù):
名稱 | 類型 | 必選 | 描述 |
---|---|---|---|
callback | Function | Y | 每個(gè)元素都會(huì)執(zhí)行的函數(shù) |
thisArg | Object | N | 當(dāng)執(zhí)行callback函數(shù)時(shí)候痊银,可以當(dāng)作this來使用 |
// 遍歷forEach:keys values entries
let set = new Set([1,'張三',null,NaN,true])
set.forEach((item, index, input) => {
// Set實(shí)例只有value沒有key
// item,index: 當(dāng)前想value
// input: 當(dāng)前Set實(shí)例
})
keys
說明:
返回一個(gè)新的 Iterator 對(duì)象。它包含按照順序插入Set對(duì)象中每個(gè)元素的key值
語法:
set.keys()
返回值<SetIterator>:
返回一個(gè)新的 Iterator 對(duì)象施绎。它包含按照順序插入Set對(duì)象中每個(gè)元素的key值
// key仍然為value
let set = new Set([1,'張三',null,NaN,true])
for(let key of set.keys()) {
console.log(key)
}
輸出: 1 "張三" null NaN true
values
說明:
返回一個(gè)新的Iterator對(duì)象溯革。它包含按順序插入Map對(duì)象中每個(gè)元素的value值
語法:
set.values()
返回值<SetIterator>:
返回一個(gè)新的Iterator對(duì)象。它包含按順序插入Map對(duì)象中每個(gè)元素的value值
// val是value值
let set = new Set([1,'張三',null,NaN,true])
for(let val of set.values()) {
console.log(val)
}
輸出: 1 "張三" null NaN true
entries
說明:
返回一個(gè)新的迭代器對(duì)象 谷醉,這個(gè)對(duì)象的元素是類似 [value, value] 形式的數(shù)組致稀,value 是集合對(duì)象中的每個(gè)元素,迭代器對(duì)象元素的順序即集合對(duì)象中元素插入的順序俱尼。由于集合對(duì)象不像 Map 對(duì)象那樣擁有 key抖单,然而,為了與 Map 對(duì)象的 API 形式保持一致遇八,故使得每一個(gè) entry 的 key 和 value 都擁有相同的值矛绘,因而最終返回一個(gè) [value, value] 形式的數(shù)組
語法:
set.entries()
返回值<SetIterator>:
一個(gè)新的包含 [value, value] 形式的數(shù)組迭代器對(duì)象,value 是給定集合中的每個(gè)元素刃永,迭代器 對(duì)象元素的順序即集合對(duì)象中元素插入的順序
// item,val全是values
let set = new Set([1,'張三',null,NaN,true])
for(let [item,val] of set.entries()) {
console.log(item,val)
}
輸出: [1,1] ["張三","張三"] [null,null] [NaN,NaN] [true,true]