共计 4471 个字符,预计需要花费 12 分钟才能阅读完成。
目录
-
JSON
- stringify
-
Array
- flat
- flatMap
-
String
- trimStart(trimLeft) / trimEnd(trimRight)
-
matchAll
-
ES5
- 办法一:RegExp.prototype.exec() with /g
- 办法二:String.prototype.match() with /g
- 办法三:String.prototype.replace()
- ES10 的 matchAll
-
-
Object
-
fromEntries
- 例子一
- 例子二
-
- try.catch
-
Symbol
- Symbol.prototype.description
- BigInt
- ES6-ES10 学习幅员
因为 ES10
是对整体原型对象的加强和对语法进行了些修改,没有一块新的内容,是对原来的内容进行降级,轻微的货色比拟多,所以就写在一起了 …
JSON
stringify
JSON.stringify
在 ES10
修复了对于一些超出范围的 Unicode
展现谬误的问题。因为 JSON
都是被编码成 UTF-8
,所以遇到 0xD800–0xDFFF
之内的字符会因为无奈编码成 UTF-8
进而导致显示谬误。
降级之后:在 ES10
它会用转义字符的形式来解决这部分字符而 非编码的形式,这样就会失常显示了。
console.log(JSON.stringify('\u{D800}'))
//"\ud800"
JSON.stringify('\u{D800}') === '"\\ud800"' // true
Array
flat
- 将数组扁平化输入(降维解决)
- 作用:会依照一个可指定的深度递归遍历数组,并将所有的元素与遍历到的子数组合并成一个新数组返回
- 默认是一次,如果要递归深度要晋升,那么要在
flat
外面传参数arr.flat(depth)
let arr = [1, [2, 3], [4, 5, [6, 7]]]
console.log(arr.flat())
// [1, 2, 3, 4, 5, [6, 7]]
// 带参数,深度为 2
console.log(arr.flat(2))
// [1, 2, 3, 4, 5, 6, 7]
flatMap
首先什么是map
?
let array = [1, 2, 3]
console.log(array.map(item => item * 2))
// [2, 4, 6]
flatMap
相当于 map
+flat
,如果须要先对这个数组进行map
再进行 flat
操作,就能够间接应用flatMap
console.log(array.flatMap(item => [item * 2]))
// [2, 4, 6]
// 等价于上面
console.log(array.map(item => [item * 2]))
// [[2], [4], [6]]
console.log(array.map(item => [item * 2]).flat())
// [2, 4, 6]
MDN
下面有一个例子来阐明两者的不同
let arr = ['今天天气不错', '',' 早上好 ']
arr.map(s => s.split(''))
// [["今", "天", "天", "气", "不", "错"],[""],[" 早 "," 上 "," 好 "]]
arr.flatMap(s => s.split(''))
// ["今", "天", "天", "气", "不", "错", ""," 早 "," 上 "," 好 "]
String
trimStart(trimLeft) / trimEnd(trimRight)
trim
是字符串去空格办法,这里是管制从右边去空格还是左边去空格。
let str = 'foo'
ES5
// 首尾的空格都去掉
console.log(str.trim())
// 后面的空格进行去掉
console.log(str.replace(/^\s+/g, ''))
// 后面和前面的空格都去掉
console.log(str.replace(/^\s+|\s+$/g, ''))
ES10
// 去掉字符串后面的空格
console.log(str.trimStart())
// or
console.log(str.trimLeft())
// 去掉字符串前面的空格
console.log(str.trimEnd())
// or
console.log(str.trimRight())
matchAll
let str = `"foo" and "bar" and "baz"`
如何把 foo
,bar
,baz
提取进去?
ES5
办法一:RegExp.prototype.exec()
with /g
- 因为
match
办法只能匹配一个,所以要用一个while
循环 - 必须要进行全局匹配,不然每次都是从头开始匹配
function select(regExp, str) {const matches = []
// 因为 match 办法只能匹配一个,所以要用一个 while 循环
while(true){const match = regExp.exec(str)
if(match === null) break
// 将捕捉的第一个输出进数组
matches.push(match[1])
}
return matches
}
// 必须要进行全局匹配,不然每次都是从头开始匹配
// 小括号是捕捉,只有不是双引号,就捕捉进来
console.log(select(/"([^"]*)"/g, str))
// ["foo", "bar", "baz"]
这样写比拟繁琐,还有没有别的办法?
办法二:String.prototype.match()
with /g
console.log(str.match(/"([^"]*)"/g))
// [""foo"", ""bar"", ""baz""]
下面的办法会把所有的捕捉都扔掉,只取残缺的匹配,所以每个都多了双引号
办法三:String.prototype.replace()
function select (regExp, str) {const matches = []
// replace 的高级用法,第二个参数能够传一个函数
str.replace(regExp, function (all, first) {matches.push(first)
})
return matches
}
console.log(select(/"([^"]*)"/g, str))
// ["foo", "bar", "baz"]
ES10 的 matchAll
let str = `"foo" and "bar" and "baz"`
function select(regExp, str) {const matches = []
// matchAll 返回的是可遍历的所有匹配后果 RegExpStringIterator{}
// 咱们对所有的后果做遍历
for (const match of str.matchAll(regExp)) {matches.push(match[1])
}
return matches
}
console.log(select(/"([^"]*)"/g, str))
// ["foo", "bar", "baz"]
Object
fromEntries
对象和数组怎么相互转换?
- 对象转数组 ——
entries
- 数组转对象 ——
fromEntries
fromEntries
和 entries
是绝对的,并且须要遵循固定的格局。
// 数组转对象 —— entries
const obj = {'foo':'a','bar':'b'}
console.log(Object.entries(obj))
//[["foo", "a"],["bar", "b"]]
// 数组转对象 —— fromEntries
const array = ['foo','bar','baz']
console.log(Object.fromEntries(array)) // 这样会报错必须是固定格局
// 正确写法:const array = [["foo", "a"],["bar", "b"]]
console.log(Object.fromEntries(array))
// {foo: "a", bar: "b"}
例子一
如果要拜访 [['foo', 1], ['bar', 2]]
数组中 bar
的值怎么办?
ES5
const arr = [['foo', 1], ['bar', 2]]
console.log(arr[1][1])
// 2
ES10
const arr = [['foo', 1], ['bar', 2]]
const obj = Object.fromEntries(arr)
console.log(obj)
// {foo: 1, bar: 2}
console.log(obj.bar)
// 2
例子二
上面对象把键的字符串长度为 3 的内容保留下来,其余删除,怎么做?
const obj = {
abc: 1,
def: 2,
ghdsk: 3
}
// 而后将数组再转化成对象
let res = Object.fromEntries(
// entries 先把 object 对象变成数组,而后对数组进行过滤
Object.entries(obj).filter(([key,val]) => key.length === 3)
)
console.log(res)
// {abc: 1, def: 2}
try.catch
之前 catch
前面必须要有 e
异样变量这个参数,有时候并没有必要
try {...} catch (e) {...}
ES10
之后括号能够删掉
try {...} catch {...}
Symbol
Symbol.prototype.description
咱们晓得,Symbol
的形容只被存储在外部的 [[Description]]
,没有间接对外裸露,咱们只有调用 Symbol
的 toString()
时才能够读取这个属性:
const name = Symbol('My name is axuebin')
console.log(name.toString()) // Symbol(My name is axuebin)
console.log(name) // Symbol(My name is axuebin)
console.log(name === 'Symbol(My name is axuebin)') // false
console.log(name.toString() === 'Symbol(My name is axuebin)') // true
当初能够通过 description
办法获取 Symbol
的形容:
const name = Symbol('My name is axuebin')
console.log(name.description) // My name is axuebin
console.log(name.description === 'My name is axuebin') // My name is axuebin
BigInt
新增的第七种根本数据类型,用来解决超过 2
的53
次方以外的数
console.log(11n);
// 11n
const a = 11n
console.log(typeof a)
// bigint 是数字,能够进行运算
console.log(typeof 11)
// number
PS: 七种根本数据类型:
String、Number、Boolean、Null、Undefined、Symbol、BigInt
ES6-ES10 学习幅员