ES6新特性(下篇)
ES6新特性(下篇)主要内容讲解
- 字符串的扩展
- 数值的扩展
- 对象的扩展
- 深度克隆
- set和map数据结构
字符串的扩展
确定一个字符串是否包含在另一个字符串中，传统上javaScript是通过indexOf方法来判断。
在ES6中又提供了三种方法：
① includes();返回布尔值，表示是否找到参数字符串。
② startsWith();返回布尔值，表示参数字符串是否在原字符串的头部。
③ endsWith();返回布尔值，表示参数字符串是否在原字符串的尾部。
④ repeat();重复指定次数。
let str = 'abcdef';
console.log(str.includes('b'));//true
console.log(str.includes('z'));//false
//startsWith(str) : 判断是否以指定字符串开头
console.log(str.startsWith('ab'));//true console.log(str.startsWith('c'));//false
//endsWith(str) : 判断是否以指定字符串结尾
console.log(str.endsWith('ef'));//true
console.log(str.endsWith('d'));//false
//repeat(count) : 重复指定次数a
console.log(str.repeat(5));
数值的扩展
二进制与八进制数值表示法: 二进制用0b, 八进制用0o，十六进制用0x
● Number.isFinite(i) : 判断是否是有限大的数
● Number.isNaN(i) : 判断是否是NaN
● Number.isInteger(i) : 判断是否是整数
● Number.parseInt(str) : 将字符串转换为对应的数值
● Math.trunc(i) : 直接去除小数部分
如下示例：
console.log(0b1010);//10
console.log(0o56);//46
//Number.isFinite(i) : 判断是否是有限大的数
console.log(Number.isFinite(NaN));//false
console.log(Number.isFinite(5));//true
//Number.isNaN(i) : 判断是否是NaN
console.log(Number.isNaN(NaN));//true
console.log(Number.isNaN(5));//false
//Number.isInteger(i) : 判断是否是整数
console.log(Number.isInteger(5.23));//false
console.log(Number.isInteger(5.0));//true
console.log(Number.isInteger(5));//true
//Number.parseInt(str) : 将字符串转换为对应的数值
console.log(Number.parseInt('123abc'));//123
console.log(Number.parseInt('a123abc'));//NaN
// Math.trunc(i) : 直接去除小数部分
console.log(Math.trunc(13.123));//13
对象的扩展
Object.is(v1, v2);判断2个数据是否完全相等
● Object.assign(target, source1, source2…);将源对象的属性复制到目标对象上
● JSON.parse(JSON.stringify(arr/obj)); 数组或对象深拷贝, 但不能处理函数
如下示例：
console.log(Object.is('abc', 'abc'));//true
console.log(NaN == NaN);//false
console.log(Object.is(NaN, NaN));//true
console.log(0 == -0);//true
console.log(Object.is(0, -0));//false
//Object.assign(target, source1, source2..)
let obj = {name : '小明', age : 10, c: {d: 2}};
let obj1 = {};
Object.assign(obj1, obj);
console.log(obj1, obj1.name);
//直接操作 __proto__ 属性
let obj3 = {name : '小明', age : 20};
let obj4 = {};
obj4.__proto__ = obj3;
console.log(obj4, obj4.name, obj4.age);
深度克隆
浅拷贝只是复制了对象的引用地址，两个对象指向同一个内存地址，所以修改其中任意的值，另一个值都会随之变化，这就是浅拷贝（例：assign()）。深拷贝是将对象及值复制过来，两个对象修改其中任意的值另一个值不会改变，这就是深拷贝（例：JSON.parse()和JSON.stringify()，但是此方法无法复制函数类型）。最终的方案是：浅拷贝+递归实现深拷贝。
function deepCopy( obj ){
if( Object.prototype.toString.call( obj ).slice(8,-1) == 'Object' ){
var result = {}
}else if( Object.prototype.toString.call( obj ).slice(8,-1) == 'Array' ){
var result = []
}//判断数据类型类型 如果是数组则初始一个 [] 如果是一个Object则初始一个 {}
//浅拷贝，但是+ 递归思想，就实现了深拷贝
for( var attr in obj ){
if( typeof obj[attr] == 'object'){
result[attr] = deepCopy( obj[attr] )
}else{
result[attr] = obj[attr]
}
}
return result
}
set和map数据结构
set
ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。Set本身是一个构造函数，用来生成 Set 数据结构。
语法：
Let set = new Set(数组);
Set 实例提供的操作方法（用于操作数据）
● add(value)：添加某个值，返回 Set 结构本身。
● delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。
● has(value)：返回一个布尔值，表示该值是否为Set的成员。
● clear()：清除所有成员，没有返回值。
示例如下：
let set = new Set([1,3,3,2,3,4,1,5]);
console.log(set);
set.add('abc');
console.log(set, set.size);
//delete(value)
set.delete(2);
console.log(set);
//has(value)
console.log(set.has(2));//false
console.log(set.has(1));//true
//clear()
set.clear();
console.log(set);
map
JavaScript 的对象（Object），本质上是键值对的集合（Hash 结构），但是传统上只能用字符串当作键。这给它的使用带来了很大的限制。
const data = {};
const element = document.getElementById('myDiv');
data[element] = 'metadata';
data[’[object HTMLDivElement]’] // “metadata”
上面代码原意是将一个 DOM 节点作为对象data的键，但是由于对象只接受字符串作为键名，所以element被自动转为字符串[object HTMLDivElement]。
为了解决这个问题，ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。也就是说，Object 结构提供了“字符串—值”的对应，Map 结构提供了“值—值”的对应，是一种更完善的 Hash 结构实现。如果你需要“键值对”的数据结构，Map 比 Object 更合适。
作为构造函数，Map 也可以接受一个数组作为参数。该数组的成员是一个个表示键值对的数组。
let map = new Map([['bbcc', 12],[25, 'age']]);
console.log(map);
map.set('男', '性别');
console.log(map);
console.log(map.get(25));//age
//delete(key)
map.delete('男');
console.log(map);
console.log(map.has('男'));//false
console.log(map.has('bbcc'));//true
map.clear();
console.log(map);
以上是我对ES6新特性下部分的理解，欢迎大家互相交流！