-
字符串的扩展
-
字符的Unicode表示法
-
ES6使用大括号表示法表示字符
javascript"\u{20BB7}" // "𠮷" "\u{41}\u{42}\u{43}" // "ABC" let hello = 123; hell\u{6F} // 123 '\u{1F680}' === '\uD83D\uDE80' // true
-
JavaScript共有6种方法可以表示一个字符。个人感觉大括号表示法综合最好用。
javascript'\z' === 'z' // true '\172' === 'z' // true '\x7A' === 'z' // true '\u007A' === 'z' // true '\u{7A}' === 'z' // true
-
-
at()
-
ES5对字符串对象提供
charAt
方法,返回字符串给定位置的字符。该方法不能识别码点大于0xFFFF
的字符。javascript'abc'.charAt(0) // "a" '𠮷'.charAt(0) // "\uD842"
-
目前,有一个提案,提出字符串实例的
at
方法,可以识别Unicode编号大于0xFFFF
的字符,返回正确的字符。javascript'abc'.at(0) // "a" '𠮷'.at(0) // "𠮷"
-
-
includes(), startsWith(), endsWith()
-
传统上,JavaScript只有
indexOf
方法,可以用来确定一个字符串是否包含在另一个字符串中。ES6又提供了三种新方法。 -
includes():返回布尔值,表示是否找到了参数字符串。用法和indexOf方法类似
-
startsWith():返回布尔值,表示参数字符串是否在源字符串的头部。
-
endsWith():返回布尔值,表示参数字符串是否在源字符串的尾部。
-
示例:
javascriptvar s = 'Hello world!'; s.startsWith('Hello') // true s.endsWith('!') // true s.includes('o') // true var t = 'Hello world!'; t.includes('Hello', 6) // false t.startsWith('world', 6) // true t.endsWith('Hello', 5) // true
-
注意(searchString, position)
//startsWith和includes:从前向后position索引从0开始可以包括 position处信息//endsWith:从前向后position索引从0开始不包括position处信息
-
-
repeat()
-
repeat
方法返回一个新字符串,表示将原字符串重复n
次。javascript'x'.repeat(3) // "xxx" 'hello'.repeat(2) // "hellohello" 'na'.repeat(0) // ""
-
参数如果是小数,会被取整。
javascript'na'.repeat(2.9) // "nana"
-
如果
repeat
的参数是负数或者Infinity
,会报错。javascript'na'.repeat(Infinity) // RangeError 'na'.repeat(-1) // RangeError
-
但是,如果参数是0到-1之间的小数,则等同于0,这是因为会先进行取整运算。0到-1之间的小数,取整以后等于
-0
,repeat
视同为0。javascript'na'.repeat(-0.9) // ""
-
参数
NaN
等同于0。javascript'na'.repeat(NaN) // ""
-
如果
repeat
的参数是字符串,则会先转换成数字。javascript'na'.repeat('na') // "" 'na'.repeat('3') // "nanana"
-
-
padStart(),padEnd()
-
ES7推出了字符串补全长度的功能。如果某个字符串不够指定长度,会在头部或尾部补全。
padStart
用于头部补全,padEnd
用于尾部补全。javascript'x'.padStart(5, 'ab') // 'ababx' 'x'.padStart(4, 'ab') // 'abax' 'x'.padEnd(5, 'ab') // 'xabab' 'x'.padEnd(4, 'ab') // 'xaba'
-
上面代码中,
padStart
和padEnd
一共接受两个参数,第一个参数用来指定字符串的最小长度,第二个参数是用来补全的字符串。如果原字符串的长度,等于或大于指定的最小长度,则返回原字符串。javascript'xxx'.padStart(2, 'ab') // 'xxx' 'xxx'.padEnd(2, 'ab') // 'xxx'
-
如果用来补全的字符串与原字符串,两者的长度之和超过了指定的最小长度,则会截去超出位数的补全字符串。
javascript'abc'.padStart(10, '0123456789') // '0123456abc'
-
如果省略第二个参数,则会用空格补全长度。
javascript'x'.padStart(4) // ' x' 'x'.padEnd(4) // 'x '
-
padStart
的常见用途是为数值补全指定位数。下面代码生成10位的数值字符串。javascript'1'.padStart(10, '0') // "0000000001" '12'.padStart(10, '0') // "0000000012" '123456'.padStart(10, '0') // "0000123456"
另一个用途是提示字符串格式。
javascript'12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12" '09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"
-
-
模板字符串
-
模板字符串(template string)是增强版的字符串,用反引号(`)标识。它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。
javascript// 普通字符串 `In JavaScript '\n' is a line-feed.` // 多行字符串 `In JavaScript this is not legal.` console.log(`string text line 1 string text line 2`); // 字符串中嵌入变量 var name = "Bob", time = "today"; `Hello ${name}, how are you ${time}?`
-
上面代码中的模板字符串,都是用反引号表示。如果在模板字符串中需要使用反引号,则前面要用反斜杠转义。
javascript义。 var greeting = `\`Yo\` World!`;
-
模板字符串中嵌入变量,需要将变量名写在
${}
之中。javascriptfunction authorize(user, action) { if (!user.hasPrivilege(action)) { throw new Error( // 传统写法为 // 'User ' // + user.name // + ' is not authorized to do ' // + action // + '.' `User ${user.name} is not authorized to do ${action}.`); } }
大括号内部可以放入任意的JavaScript表达式,可以进行运算,以及引用对象属性。
javascriptvar x = 1; var y = 2; `${x} + ${y} = ${x + y}` // "1 + 2 = 3" `${x} + ${y * 2} = ${x + y * 2}` // "1 + 4 = 5" var obj = {x: 1, y: 2}; `${obj.x + obj.y}` // 3
模板字符串之中还能调用函数。
javascriptfunction fn() { return "Hello World"; } `foo ${fn()} bar` // foo Hello World bar
-
-
String.raw()
-
String.raw
方法,往往用来充当模板字符串的处理函数,返回一个斜杠都被转义(即斜杠前面再加一个斜杠)的字符串,对应于替换变量后的模板字符串。javascriptString.raw`Hi\n${2+3}!`; // "Hi\\n5!" String.raw`Hi\u000A!`; // 'Hi\\u000A!'
-
如果原字符串的斜杠已经转义,那么
String.raw
不会做任何处理。javascriptString.raw`Hi\\n` // "Hi\\n"
-
-
-
数组的扩展
-
Array.from()
-
Array.from
方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括ES6新增的数据结构Set和Map)。javascriptlet arrayLike = { '0': 'a', '1': 'b', '2': 'c', length: 3 }; // ES5的写法 var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c'] // ES6的写法 let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
实际应用中,常见的类似数组的对象是DOM操作返回的NodeList集合,以及函数内部的
arguments
对象。Array.from
都可以将它们转为真正的数组。javascript// NodeList对象 let ps = document.querySelectorAll('p'); Array.from(ps).forEach(function (p) { console.log(p); }); // arguments对象 function foo() { var args = Array.from(arguments); // ... }
上面代码中,
querySelectorAll
方法返回的是一个类似数组的对象,只有将这个对象转为真正的数组,才能使用forEach
方法。 -
只要是部署了Iterator接口的数据结构,
Array.from
都能将其转为数组。javascriptArray.from('hello') // ['h', 'e', 'l', 'l', 'o'] let namesSet = new Set(['a', 'b']) Array.from(namesSet) // ['a', 'b']
-
扩展运算符(
...
)也可以将某些数据结构转为数组。(不全面)javascript// arguments对象 function foo() { var args = [...arguments]; } // NodeList对象 [...document.querySelectorAll('div')]
扩展运算符 背后调用 的是遍历器接口 (
Symbol.iterator
),如果一个对象没有部署这个接口,就无法转换。Array.from
方法 则是还支持类似数组的对象 。所谓类似数组的对象,本质 特征只有一点,即必须有length
属性 。因此,任何有length
属性的对象,都可以通过Array.from
方法转为数组,而此时扩展运算符就无法转换。 -
Array.from
还可以接受第二个参数,作用类似于数组的map
方法,用来对每个元素进行处理,将处理后的值放入返回的数组。javascriptArray.from(arrayLike, x => x * x); // 等同于 Array.from(arrayLike).map(x => x * x); Array.from([1, 2, 3], (x) => x * x) // [1, 4, 9]
-
Array.from()
的另一个应用是,将字符串转为数组,然后返回字符串的长度。因为它能正确处理各种Unicode字符,可以避免JavaScript将大于\uFFFF
的Unicode字符,算作两个字符的bug。javascriptfunction countSymbols(string) { return Array.from(string).length; }
-
-
Array.of()
-
Array.of
方法用于将一组值,转换为数组。javascriptArray.of(3, 11, 8) // [3,11,8] Array.of(3) // [3] Array.of(3).length // 1
这个方法的主要目的,是弥补数组构造函数
Array()
的不足。因为参数个数的不同,会导致Array()
的行为有差异。javascriptArray() // [] Array(3) // [, , ,] Array(3, 11, 8) // [3, 11, 8]
上面代码中,
Array
方法没有参数 、一个参数 、三个参数 时,返回结果都不一样 。只有当参数个数不少于2个时,Array()
才会返回由参数组成的新数组。参数个数只有一个时,实际上是指定数组的长度。Array.of
基本上 可以用来替代Array()
或new Array()
,并且不存在由于参数不同而导致的重载。它的行为非常统一。
-
-
copyWithin()
-
数组实例的
copyWithin
方法,在当前数组内部,将指定位置的成员复制到其他位置(会覆盖原有成员),然后返回当前数组。也就是说,使用这个方法,会修改当前数组。javascriptArray.prototype.copyWithin(target, start = 0, end = this.length)
它接受三个参数。
-
target(必需):从该位置开始替换数据。
-
start(可选):从该位置开始读取数据,默认为0。如果为负值,表示倒数。
-
end(可选):到该位置前停止读取数据,默认等于数组长度。如果为负值,表示倒数。
-
这三个参数都应该是数值,如果不是,会自动转为数值。
javascript[1, 2, 3, 4, 5].copyWithin(0, 3) // [4, 5, 3, 4, 5]
上面代码表示将从3号位直到数组结束的成员(4和5),复制到从0号位开始的位置,结果覆盖了原来的1和2。下面是更多例子。
javascript// 将3号位复制到0号位 [1, 2, 3, 4, 5].copyWithin(0, 3, 4) // [4, 2, 3, 4, 5] // -2相当于3号位,-1相当于4号位 [1, 2, 3, 4, 5].copyWithin(0, -2, -1) // [4, 2, 3, 4, 5] // 将3号位复制到0号位 [].copyWithin.call({length: 5, 3: 1}, 0, 3) // {0: 1, 3: 1, length: 5} // 将2号位到数组结束,复制到0号位 var i32a = new Int32Array([1, 2, 3, 4, 5]); i32a.copyWithin(0, 2); // Int32Array [3, 4, 5, 4, 5] // 对于没有部署TypedArray的copyWithin方法的平台 // 需要采用下面的写法 [].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4); // Int32Array [4, 2, 3, 4, 5]
-
-
-
find()和findIndex()
-
数组实例的
find
方法,用于找出第一个符合条件的数组成员。它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true
的成员,然后返回该成员。如果没有符合条件的成员,则返回undefined
。javascript[1, 5, 10, 15].find(function(value, index, arr) { return value > 9; }) // 10
上面代码中,
find
方法的回调函数可以接受三个参数,依次为当前的值、当前的位置和原数组。 -
数组实例的
findIndex
方法的用法与find
方法非常类似,返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1
。javascript[1, 5, 10, 15].findIndex(function(value, index, arr) { return value > 9; }) // 2
-
-
fill()
-
fill
方法使用给定值,填充一个数组。javascript['a', 'b', 'c'].fill(7) // [7, 7, 7] new Array(3).fill(7) // [7, 7, 7]
上面代码表明,
fill
方法用于空数组的初始化非常方便。数组中已有的元素,会被全部抹去。fill
方法还可以接受第二个和第三个参数,用于指定填充的起始位置和结束位置。javascript['a', 'b', 'c'].fill(7, 1, 2) // ['a', 7, 'c']
-
-
entries(),keys()和values()
-
ES6提供三个新的方法------
entries()
,keys()
和values()
------用于遍历数组 。它们都返回 一个遍历器对象 (详见《Iterator》一章),可以用for...of
循环进行遍历 ,唯一的区别是keys()
是对键名的遍历、values()
是对键值的遍历,entries()
是对键值对的遍历。javascriptfor (let index of ['a', 'b'].keys()) { console.log(index); } // 0 // 1 for (let elem of ['a', 'b'].values()) { console.log(elem); } // 'a' // 'b' for (let [index, elem] of ['a', 'b'].entries()) { console.log(index, elem); } // 0 "a" // 1 "b"
-
-
includes()
-
Array.prototype.includes
方法返回一个布尔值,表示某个数组是否包含给定的值,与字符串的includes
方法类似。该方法属于ES7,但Babel转码器已经支持。javascript[1, 2, 3].includes(2); // true [1, 2, 3].includes(4); // false [1, 2, NaN].includes(NaN); // true
该方法的第二个参数表示搜索的起始位置,默认为0。如果第二个参数为负数,则表示倒数的位置,如果这时它大于数组长度(比如第二个参数为-4,但数组长度为3),则会重置为从0开始。
javascript[1, 2, 3].includes(3, 3); // false [1, 2, 3].includes(3, -1); // true
没有该方法之前,我们通常使用数组的
indexOf
方法,检查是否包含某个值。indexOf
方法有两个缺点,一是不够语义化,它的含义是找到参数值的第一个出现位置,所以要去比较是否不等于-1,表达起来不够直观。二是,它内部使用严格相当运算符(===)进行判断,这会导致对NaN
的误判。
-
-
空位
- 由于空位的处理规则非常不统一,所以建议避免出现空位。
-
ES6基础2
清风霁玥缘2024-03-14 9:25
相关推荐
酷酷的阿云4 分钟前
不用ECharts!从0到1徒手撸一个Vue3柱状图微信:137971205877 分钟前
web端手机录音齐 飞12 分钟前
MongoDB笔记01-概念与安装神仙别闹29 分钟前
基于tensorflow和flask的本地图片库web图片搜索引擎GIS程序媛—椰子1 小时前
【Vue 全家桶】7、Vue UI组件库(更新中)DogEgg_0011 小时前
前端八股文(一)HTML 持续更新中。。。ZL不懂前端2 小时前
Content Security Policy (CSP)木舟10092 小时前
ffmpeg重复回听音频流,时长叠加问题王大锤43912 小时前
golang通用后台管理系统07(后台与若依前端对接)我血条子呢2 小时前
[Vue]防止路由重复跳转