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);  

猜你喜欢

转载自blog.csdn.net/chy_18883701161/article/details/106177130