JavaScript ES6 字符串、数组、Map、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个

 

新增的方法

let arr=[1,2,3,4];

// 元素替换，数组改变
arr.fill(10);  //元素全部替换为10
arr.fill(10,1,3);  //只替换[1,3)上的元素

let arr1=[...arr].fill(10);  //如果不想改变原数组，可以使用copy的


// 返回数组中第一次出现该元素的下标，没有出现则返回-1
arr.indexOf(10)

// 判断数组中是否包含指定元素，返回布尔值
arr.includes(10)



// map()可以在已有数组的基础上，创建一个新的数组
// 比如后台返回json数组，gender用0、1表示，需要我们先转换为男、女
let jsonArr=[{
     "name":"范蠡","gender":0},{
     "name":"西施","age":1}];

// 以新数组的形式返回，原数组不变
let data=jsonArr.map(function(item){
       //item表示数组中的一个元素
    return {
     
        "username":item.name, //可以修改key的名称
        "gender":item.gender==0?'男':'女',
    }
});


// 将伪数组切割为数组。伪数组指的是：不是数组，但具有length属性、可迭代
let str="hello";
let arr=Array.from(str);  // 将字符串切割为字符数组

 

对象

扩展运算符…

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

let user={
     "name":"chy","age":20};

// 拷贝对象，返回对象副本。如果对象嵌套对象（value是对象），则value拷贝的是只是嵌套对象的引用
let user1={
     ...user};   


// 修改|增加键值对，key已存在则为修改，不存在则为添加
let user2={
     ...user,"name":"chy111","gender":"男"};  


// 合并对象（的键值对），如果有相同的key，只保留第二个参数的 
let user3={
     ...user1,...user2};  

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

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

然后在.babelrc中配置插件

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

重新转译已经可以了

 

新的定义方式

let name="chy";
let age=20;


// ES5的对象定义
let user1={
     
    name:name, //key都是字符串，值会取变量的值，=> "name":"chy"
    age:age,
    info:function(){
     
        console.log(`姓名：${
       name}，年龄：${
       age}`);
    }
}

user1.info();


// ES6的对象定义
let user2={
     
    name, //key、value相同时可简写，key认为是字符串，value认为是变量
    age,
    info(){
       //函数也可简写
        console.log(`姓名：${
       name}，年龄：${
       age}`);
    }
}

user1.info();

 

新增的方法

let user1={
     "name":"chy","age":20};

let user2={
     };
// 对象的拷贝，参数：目标对象、源对象。目标对象必须先声明为对象
// 如果源对象嵌套对象（key-value的value是对象），则拷贝的value只是引用
Object.assign(user2,user1);



// 获取对象中所有的key、value、key-value，返回数组
let keys=Object.keys(user1);
let values=Object.values(user1);
let items=Object.entries(user1);

// 可以使用for of循环迭代
for(let key of keys){
     
    console.log(key);
}

 

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只能是对象

let map1=new Map();

// key只能是对象
map1.set({
     "name":"chy","age":20},"user");  


// 参数是数组，[[key1,value1],[key2,value2],...]，一个小数组表示一个key-value，key只能是对象
let map2=new Map([[{
     "name":"chy","age":20},"user1"],[{
     "name":"chy111","age":21},"user2"]]);  

对象就算没有被引用，也不会触发垃圾回收机制，不会被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);