JavaScript ES6 字符串、数组、Map、Set

逃离我推掉我的手 2023-03-14 10:49 131阅读 0赞

### 目录 ###

*   *   *  字符串
         *   *  对Unicode的支持
             *  字符串新增的方法
             *  模板字符串
         *  数组
         *   *  扩展运算符...
             *  新增方法
         *  对象
         *   *  扩展运算符...
             *  新的定义方式
             *  新增的方法
         *  Map、WeakMap
         *   *  Map
             *  WeakMap
         *  Set

### 字符串 ###

#### 对Unicode的支持 ####

ES5可以使用\\uxxxx形式表示⼀个字符，xxxx是字符的Unicode码，但只能表示\\u0000~\\uFFFF之间的字符，超出这个范围就不能正确识别。

ES6增加了对超出\\u0000~\\uFFFF范围的Unicode字符的⽀持

let str="\u20bb7";
    console.log(str);  //识别不了
    
    str="\u{20bb7}";  //超出范围的字符码放在{ }中即能正确识别
    console.log(str);

#### 字符串新增的方法 ####

let str="hello js";
    
    str.includes("js")  //是否包含指定字符串，返回布尔值
    
    str.startsWith("hello")  //是否以指定的字符串开头，返回布尔值
    str.endsWith("js")  
    
    str.repeat(4);  //字符串重复，返会*4后的字符串，以新串形式返回，原串不变

#### 模板字符串 ####

经常要拼接字符串，以前只能用+或者concat()，ES6提供了模板字符串来实现字符串的拼接

let name="chy";
    let age=20;
    
    let info=`我是${ name}，我今年${ age}岁`;  //模板字符串
    console.log(info);

模板字符串放在反引号中，里面的内容（包括换行、空格）会保持原样。  
$\{ \}中可以访问变量、数组、对象，可以写js表达式，进行数学运算。

### 数组 ###

#### 扩展运算符… ####

let arr1=[1,2,3,4];
    
    // 数组复制
    let arr2=[...arr1];  //深拷贝，返回arr1的副本
    let arr3=[0,...arr1,5];  //...arr1是arr1的元素副本，还可以添加其他元素
    
    
    // 数组提取
    let [,...arr4]=arr1;  //不要arr1的第一个元素，把剩下的元素拷贝到arr4中。...要是左边数组的最后一个元素
    
    
    // 函数传参、展开数组
    function sum(x,y){ 
        console.log(x+y);
    }
    sum(...[1,2]);  //会把数组展开，一个元素作为一个参数传入
    sum(...arr1);  //如果数组元素个数大于所需参数个数，只取前n个

#### 新增方法 ####

### 对象 ###

#### 扩展运算符… ####

对象中也可以使用扩展运行符

对象的扩展运算符是ES8的语法，使用ES6（ES2015）的转译规则识别不了，需要安装babel的插件transform-object-rest-spread

npm install babel-plugin-transform-object-rest-spread

然后在.babelrc中配置插件

{ 
        "presets": ["es2015"],
        "plugins": ["transform-object-rest-spread"]  //配置插件
    }

重新转译已经可以了

#### 新的定义方式 ####

#### 新增的方法 ####

### Map、WeakMap ###

#### Map ####

对象的key必须是string，map和对象差不多，但map的key可以是任意类型

let map1=new Map();
    map1.set([1,2,3],"number");  //key是数组，value是字符串
    
    
    let map2=new Map([["name","chy"],["age",20]]);  //参数是数组，[[key1,value1],[key2,value2],...]，一个小数组表示一个key-value
    
    
    map2.size  //获取map的键值对个数
    
    
    map2.set("name","zhangsan");  //添加|更新键值对。key不存在是添加，已存在是更新
    map2.get("name")  //获取对应的value。如果没有这个键值对，返回undefined
    
    
    map2.has("name");  //检测map中是否有指定的键值对
    
    
    map2.delete("name")  //删除键值对
    map2.clear();  //清空map，删除所有键值对
    
    
    // 获取所有的key、value、key-value，返回数组
    let keys=map2.keys();
    let values=map2.values();
    let items=map2.entries();
    
    
    // 可以使用for of 循环遍历
    for(let key of keys){ 
    
    }
    
    // 可以直接写map名称，直接写map名时默认取entries()
    for(let item of map2){ 
    
    }

#### WeakMap ####

WeakMap和Map差不多，但WeakMap的key只能是对象

对象就算没有被引用，也不会触发垃圾回收机制，不会被gc回收，需要手动把对象赋值为null才会被gc回收，很麻烦。

使用WeakMap中有个好处：如果WeakMap中的key（对象）在WeakMap外没被引用，会自动触发gc回收该对象（删除WeakMap中对应的键值对）。

但这也造成了WeakMap中的键值对数量不确定，不能使用size、clear()，不能进行遍历操作。

### Set ###

set无序、元素不可重复，好处：可以去重

let set=new Set();
    
    // 添加元素，元素类型可以不同，可以是任何类型
    set.add("c");
    set.add(1);
    
    //检测是否含有指定元素
    set.has("c") 
    
    // 遍历
    set.forEach(function(item){ 
        console.log(item);
    })
    
    // 删除元素
    set.delete("c")  
    
    // 从数组创建set
    let arr=[1,2,3,4];
    set=new Set(arr); 
    
    // 从set创建数组
    arr=Array.from(set);