解构赋值 + 扩展运算符 + string新增方法 + Map + Set -- 暑假Day7

解构赋值

分解数据结构,一一赋值
es6中允许从数组中提取值,按照对应位置,给变量赋值,也可以对对象进行结构

let arr = [1, 2, 3];
let [a, b, c, d, e] = arr;
console.log(a);//1
console.log(b);//2
console.log(c);//3
console.log(d);//undefined
console.log(e);//undefined

对对象进行解构,就是将左边的名字和对象的属性值一一匹配

let person = {
    
    
    name : 'li',
    age : 19
}
let {
    
    name, age} = person;
console.log(name);//li
console.log(age);//19
let person = {
    
    
    name : 'li',
    age : 19
}
let {
    
    name : myname, age : myage} = person;
console.log(myname);//li
console.log(myage);//19

这种情况冒号左侧只用于属性匹配

var name = 'wang';
var obj = {
    
    
    name : 'li',
    say : ()=>{
    
    
        console.log(this.name);
    }
}
obj.say();//wang

因为对象obj并没有生成this,所以此时的this其实是指向window的,所以输出的是wang

扩展运算符

…,他的作用就是将数组拆分成由逗号分割的数,就像是直接将数组的中括号去掉一样

在函数中,如果实参大于形参,那么在最后一个形参的前面加上扩展运算符就会让最后一个形参成为一个数组,储存着其他数据

可以利用扩展运算符将伪数组转换为真正的数组

string的新增方法

startsWith() 和 endsWith()

startsWith判断参数是否在原字符串的头部,返回布尔值
endsWith判断参数是否在原字符串的尾部,返回布尔值

repeat()方法

表示将原字符串重复n次,返回新字符串

let str = 'bili';
console.log(str.repeat(3));//bilibilibili

Map

是一个带键的的数据项的集合,类似于object
Map允许任何类型的键

创建Map需要new一下

const mp = new Map([[1, 'ab'], ['x', 'xy'],['y', 'xyz']]);

Map的方法

  • set(key, value):根据键存储值
    和set的add差不多,可以连续调用

  • get(key):根据键返回值,如果不存在对应的key,返回undefined

  • has(key):判断key是否存在,返回布尔值

  • delete(key):删除指定键的值

  • clear():清空map

  • size:返回当前元素的个数

var mapp = new Map();

mapp.set(1, 'abb');
mapp.set('1', 'ab').set('xy', 'abc');
mapp.delete(1);
console.log(mapp.has('1'));
console.log(mapp);
console.log(mapp.get('1'));

对象也可以作为键
在这里插入图片描述

迭代

  • keys():遍历并返回所有键
  • values():遍历并返回所有的值
  • entries():遍历并返回所有的实体
var mapp = new Map();

mapp.set(1, 'abb');
mapp.set('1', 'ab').set('xy', 'abc');

console.log(mapp);
console.log(mapp.keys());
console.log(mapp.values());
console.log(mapp.entries());

在这里插入图片描述

  • for…of
    可以对map进行遍历,可以遍历键,可以遍历内容,也可以遍历实体
const mp = new Map([[1, 'ab'], ['x', 'xy'],['y', 'xyz']]);

for (const key of mp.keys()) {
    
    
    console.log(key);
}
for (const value of mp.values()) {
    
    
    console.log(value);
}
for (const item of mp) {
    
    
    console.log(item);
}
console.log(mp);

在这里插入图片描述

  • forEach()
    和数组的类似
mp.forEach((value, key, mp) => {
    
    
    console.log(key +'-'+ value);
})

第一个参数是值,第二个参数是键,第三个参数是map实体
在这里插入图片描述

  • Object.entires()
    利用对象创建map
let obj = {
    
    
    name: "li",
    age: 19
};
let map = new Map(Object.entries(obj));

console.log( map.get('name') ); // li
console.log(map);//返回了以name和age为键的map实体
  • Object.fromEntries()
    从map创建对象,和Object.entires()恰好相反
const mp = new Map([[1, 'ab'], ['x', 'xy'],['y', 'xyz']]);
let obj = Object.fromEntries(mp);

console.log(obj);

转换为对象后,键转换的属性名全是字符串类型的

Set

是一种数据结构,类似于数组,但所有成员的值都是唯一的,没有重复的值,准确来说set会自动把重复的数据结合为一个

实际上是一个构造函数

拥有size属性,会返回set里面数据的个数

const s = new Set(['a', 'b']);

console.log(s);
console.log(s.size);

在这里插入图片描述

set的方法

全部都只能传入一个参数

  • add(value):添加某个值,返回set结构本身
    可以连续调用
s.add('a').add('b');
  • delete(value):删除某个值,返回布尔值,表示删除是否成功

  • has(value):返回布尔值,表示该值是否是set的成员

  • clear():清除所有成员,没有返回值
    不传参

迭代

也拥有forEach方法和for …of
forEach里面的函数也是拥有三个参数

const set = new Set(['x', 'y', 'xy']);

set.forEach((value, valueAgain, set) => {
    
    
    console.log(value);
    console.log(valueAgain);
});

前两个参数都是set里面的值

for…of对于set来说,只会迭代set里面的值

其他的迭代和Map一样

猜你喜欢

转载自blog.csdn.net/weixin_50948265/article/details/118916035