在ES5中我们知道JavaScript 允许采用\uxxxx形式表示一个字符，其中xxxx表示字符的 Unicode 码点。这种表示法只限于码点在\u0000~\uFFFF之间的字符。超出这个范围的字符，必须用两个双字节的形式表示，但是ES5却无法正确的识别这个有两个字节组成的字符。ES6中，JavaScript增加了对超出\u0000~\uFFFF范围的Unicode的字符支持。
ES6的方案：将超过两个字节的组成的字符的码点放在一对花括号里就可以正确的识别。
// es5
var str = '\u20bb7'
console.log(str);//₻7
// es6
let str = '\u{20bb7}'
console.log(str);//字符串的遍历接口 for of
// 传统for循环处理不了超出范围的字符，但是for of可以
const str = '\u{20bb7}'
for(let i=0;i<str.length;i++){
console.log('for',str[i]);//�
}
for (let item of str){
console.log('for-of',item);//
}ES6扩展的API
| 方法 |
描述 |
| includes(string, position) |
判断字符串中是否包含指定字符串，返回值是布尔值 |
| startsWith(string, position) |
判断字符串的开头是否包含指定字符串，返回值是布尔值 |
| endsWith(string, position) |
判断字符串的尾部是否包含指定字符串，返回值是布尔值 |
| repeat(n) |
repeat() 方法返回一个新字符串，表示将原字符串重复n 次。 |
// includes startsWith endsWith repeat
let str = '123gsfhigdgggsi321'
console.log('includes',str.includes('hig'));
console.log('startsWith',str.startsWith('123'));
console.log('endsWith',str.endsWith('123'));
let str2 = 'abc'
str2 = str2.repeat(3)
console.log(str2);| 字符串补全 |
第一个参数是补全后的字符串长度，第二个参数是用于补全的字符串 |
| padStart(length, str) |
用于头部补全 |
| padEnd(length, str) |
用于尾部补全 |
let str = 'Apple'//5
str = str.padStart(9,'1234')
console.log('9',str);//1234Apple
str = str.padStart(7,'1234')
console.log('7',str);//12Apple
str = str.padStart(3,'1234')
console.log('3',str);//Apple
str = str.padStart(20,'1234')
console.log('20',str);//123412341234123Apple
//尾部补全同理模板字符串
const name = 'xiaoming';
const age = 19;
const hobbies = 'eat,drink,sleep'
// es5
const str = '我的名字：'+name+',我今年'+age+'岁，我喜欢'+hobbies
console.log(str);
// es6
const es6str = `我的名字：${name},我今年${age}岁，我喜欢${hobbies}`
console.log(es6str);使⽤用模板字符串的注意事项：
在模板字符串串中如需使⽤用反引号，反引号前要⽤用反斜杠转义
使用模板字符串表示多行字符串时，所有的空格和缩进都会被保留在输出之中
模板字符串中引入变量，要用 ${变量名} 这样的形式引入才可以
大括号中的值不是字符串时，将按照一般的规则转为字符串。比如，大括号中是一个对象， 将默认调用对象的toString方法
模板字符串中的${. .. } 大括号内部可以放入任意的 JavaScript 表达式，可以进行运算、可以引用对象属性、可以调用函数、可以甚至还能嵌套，甚至还能调用自己本身
ES6和ES7提供的新的数组方法及扩展运算符的使用
扩展运算符的使用：复制数组、分割数组、将数组转化成参数传递给函数
// 扩展运算符
// 复制数组
let arr1 = [1,2,3]
let arr2 =arr1
console.log(arr2);//[1, 2, 3]
let arr2 = [...arr1]
arr1.push(4)
console.log(arr2);//[1, 2, 3]
// 分割数组
let arr = [1,2,3,4]
let [,...arr2] = arr
console.log(arr2);//[2, 3, 4]
// 给函数传参
function fn(x,y) {
return x+y
}
let arr = [1,2]
console.log(...arr);//1 2
console.log(fn(...arr));//3新增的常用方法
fill
arr.fill(value, start, end)
value：填充值。
start：填充起始位置，可以省略。
end：填充结束位置，可以省略，实际结束位置是end-1。
// fill 替换数组中元素
const arr = ['a','b','c','d','e']
// // 全部替换为数字3
let arr1 = arr.fill(3)
console.log(arr1);//[3, 3, 3, 3, 3]
// // 部分替换
let arr2 = arr.fill(3,1,4)
console.log(arr2);//["a", 3, 3, 3,'e'] find
findIndex
// find findIndex
const arr = [{title:'es6'},{title:'node',id:2},{title:'vue',id:3}]
let result =arr.find(function (item) {
return item.title === 'es6'
})
console.log(result);//{title: "es6"}
let result2 = arr.findIndex(function (item) {
return item.id === 3
})
console.log(result2);//2Includes
// includes 判断当前数组是否存在某个值，返回布尔型
// indexOf 判断某个值在当前数组中的index值，如果该值不存在返回-1
const arr = [1,2,3,4]
let result = arr.includes(2)
console.log(result);//true
let index = arr.indexOf(5)
console.log(index);//-1flat（多维数组转为一维数组）
// flat 展开多维数组
let arr = [1,2,3,['2nd',3,4,5,['3rd',6,7]]]
let flatArr = [].concat(...arr)
// console.log(flatArr);//[1, 2, 3, "2nd", 3, 4, 5, Array(3)]
let arr2 = arr.flat()
console.log(arr2);//[1, 2, 3, "2nd", 3, 4, 5, Array(3)]
let arr3 = arr.flat(3)
console.log(arr3);//[1, 2, 3, "2nd", 3, 4, 5, "3rd", 6, 7]ES6数组中map及reduce方法
map数据映射
{
// map 数据映射（不能动态更新）
const arr = [1,2,3]
const arr2 = arr.map(function (item) {
return item*2
})
console.log(arr2);//[2, 4, 6]
const json = [{title:'es6',status:1},{title:'node',status:0},{title:'vue',status:1}]
let video = json.map(function(item){
return {
name:item.title,
statusText: item.status?'已上线':'未上线'
}
})
// console.log('json',json);
// console.log('video',video);
json[0].status = 0;
console.log('json',json);
console.log('video',video);
}reduce对数组中的每一个元素进行一次回调，升序执行将回调值汇总一个返回值
// reduce(function(acc,currentValue,currentIndex){},{})
// 对数组中的每一个元素进行一次回调，升序执行将回调汇总一个返回值
// 1.回调函数其中有三个参数
// 1）acc：每次回调之后返回值汇总
// 2）currentValue：数组当前进行回调的值
// 3）currentIndex：数组当前进行回调的值的index
// 2.可选参数
// 如果传入acc就是这个值，不传acc就是数组中的第一项
const str = 'gdishfisgfusg'
const result = str.split('').reduce(function (acc, curVal, curInd) {
acc[curVal]?acc[curVal]++:acc[curVal]=1
return acc
// console.log('acc',acc);
// console.log('curVal',curVal);
// console.log('curInx',curInd);
// if (!acc[curVal]) {
// acc[curVal] = 1
// } else {
// acc[curVal]++
// }
// return acc
}, {})
console.log(result);//{g: 3, d: 1, i: 2, s: 3, h: 1, …}ES6提供的新的特性及对象方法
//1.npm 安装依赖
npm i babel-plugin-transform-object-rest-spread
//2.添加配置 .babelrc中添加
"plugins": [
"transform-object-rest-spread" ]
扩展运算符的使用：复制对象、给对象设置默认值、合并对象
{
// 对象中扩展运算符的使用
// 复制对象
const obj = { name: 'xiaoming', age: 19 }
const objA = { color: 'red' }
let obj2 = { ...obj }
console.log('obj2', obj2);//{name: "xiaoming", age: 19}
// 设置默认值
let obj3 = { ...obj, name: 'Jim' }
console.log(obj3);//{name: "Jim", age: 19}
// 合并对象
let obj4 = {...obj,...objA}
console.log(obj4);//{name: "xiaoming", age: 19, color: "red"}
}属性初始化的简写、对象方法的简写、可计算的属性名 Object[key]
{
let name = 'aaa'
let age = 19
let es5obj={
name:name,
age:age,
say:function(){
console.log('es5obj');
}
}
let es6obj = {
name,
age,
say(){
console.log('es6obj');
}
}
let key = 'gender'
es5obj[key] = 'man'
console.log('es5obj',es5obj);
es6obj={
[key]:'women'
}
console.log(es6obj);
}新增方法
Object.is判断两个值是否相同（+0不等于-0；NaN等于自身）
Object.assign 对象合并
// Object.is() 判断是否相同
// NaN与任何值都不相等，包括它自己本身，在Object.is中没有这个特性
let result = Object.is(NaN,NaN)
console.log(result,NaN===NaN);//true false
// Object.assign 复制合并对象,如果对象中还包含对象，复制的是指针
let person = {name:'xiaoming',age:12,info:{height:180}}
let person2 = {color:'red'}
Object.assign(person2,person)//写入第一个里
console.log(person2);//{color: "red", name: "xiaoming", age: 12, info: {…}}
person.info.height = 160
console.log(person2);Object.keys 遍历对象中的key，返回数组
Object.values 遍历对象中的values，返回数组
Object.entries遍历键值对，返回数组
const json = {name:'Jim',age:19}
console.log(Object.keys(json));//["name", "age"]
console.log(Object.values(json));//["Jim", 19]
console.log(Object.entries(json));// [Array(2), Array(2)]
let obj = {}
for(let key of Object.keys(json)){
obj[key]=json[key]
}
console.log(obj);Map与WeakMap结构的特点
JavaScript中的对象，实质就是键值对的集合(Hash结构)，但是在对象里却只能用字符串作为键名。
Map对象
用于保存键值对，任何值(对象或者原始值)都可以作为一个键或一个值。可传入二维数组，其中一维数组的第一个值为key，第二个值为value
内置API
//通过构造函数创建⼀个Map
var m = new Map();
| size |
返回键值对的数量 |
m.size |
| clear() |
清除所有键值对 |
m.clear() |
| has(key) |
判断键值对中是否有指定的键名，返回值是布尔值 |
m.has(key) |
| get(key) |
获取指定键名的键值，如不存在则返回 undefined |
m.get(key) |
| set(key, value) |
添加键值对，如键名已存在，则更新键值对 |
m.set(key, value) |
| delete(key) |
删除指定键名的键值对 |
m.delete(key) |
// Map
// let obj = {
// [1,2,3]:'a'
// }
// console.log(obj);
let map = new Map();
map.set([1, 2, 3], 'abc')
console.log(map);//Map(1) {Array(3) => "abc"}
let map2 = new Map([[{aaa:'xxxx'},'bbb'],['qwe','wqeqw']])
console.log(map2);//Map(2) {
{…} => "bbb", "qwe" => "wqeqw"}
console.log(map2.size);//2 获取长度
console.log(map2.get('qwe'));//wqeqw 获取value
console.log(map2.has('dgag'));//false 判断key是否存在
map2.delete('qwe')
console.log(map2);//Map(1) {
{…} => "bbb"}
map2.clear()
console.log(map2);//Map(0) {}遍历器生成函数
keys返回keys数组
values 返回values数组
entries 每一对都以数组形式返回
遍历方法
forEach
// key value entry
let map = new Map([
['name','xiaoming'],
['age',19]
])
// for(let entry of map){
// console.log(entry);//返回组成键值对的一维数组
// }
console.log(map);
map.forEach((value,key)=>{
console.log(`${key}:${value}`);
})weakmap
只接受对象作为键名 不接受任何其他类型
键名所指对象可以触发垃圾回收机制 自动回收
没有clear size方法 无法遍历
// WeakMap
let weakmap = new WeakMap([
[{name:'aaa'},'bbb'],
[{name:'xxx'},'yyy']
])
console.log(weakmap);Set与WeakSet结构的特点
Set是ES6给开发者提供的一种类似数组的数据结构，可以理解为值的集合。它和数组的最大的区别就在于: 它的值不会有重复项。
| 属性/方法 |
作用 |
例子 |
| size |
返回成员个数 |
s.size |
| clear() |
清除所有成员 |
s.clear() |
| add（） |
像Set中添加元素 |
s.add() |
| has(value) |
判断键值对中是否有指定的值，返回值是布尔值 |
s.has(key) |
| delete(value) |
删除指定值 |
s.delete(key) |
// set
let set2 = new Set(['1',2,3,4])
set2.add(1)
console.log('set2',set2);//Set(5) {"1", 2, 3, 4, 1}
console.log('size',set2.size);//5
let item = {fruit:'apple'}
let set = new Set()
set.add({fruit:'apple'})
console.log('set',set);//Set(1) {
{…}}
console.log('has',set.has({fruit:'apple'}));//false
set2.add(item)
console.log('has-set2',set2.has(item));//trueKey value entry
// key value entry
let set = new Set(['a','b','c','d'])
for(let key of set.keys()){
console.log('key',key);
}
for(let value of set.values()){
console.log('value',value);
}
for(let entry of set.entries()){
console.log('entry',entry);
}用途
// 使用场景：数组去重
let arr = [1, 1, 2, 2, 3, 3, 4, 4]
let set = new Set(arr)
console.log(set);//Set(4) {1, 2, 3, 4}
let arr2 = Array.from(set)//将类数组转化为真数组
console.log(arr2);// [1, 2, 3, 4]WeakSet
数组成员必须是对象
WeakSet结构也提供了add( ) 方法，delete( ) 方法，has( )方法给开发者使用，作用与用法跟Set结构完全一致。
WeakSet 结构不可遍历。因为它的成员都是对象的弱引用，随时被回收机制回收，成员消失。所以WeakSet 结构不会有keys( )，values( )，entries( )，forEach( )等方法和size属性。
// WeakSet
let obj = {name:'xiaoming'}
let weakset = new WeakSet()
weakset.add(obj)
console.log(weakset);