ES6新特性(下篇)

ES6新特性(下篇)主要内容讲解

1. 字符串的扩展
2. 数值的扩展
3. 对象的扩展
4. 深度克隆
5. 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新特性下部分的理解，欢迎大家互相交流！