ES6新特性(基础常用)

1.let const

let 声明的变量只在 let 命令所在的代码块内有效。

  //var 会造成变量穿透,如下
  for(var i = 0;i<10;i++){
      console.log(i);
  }
  console.log(i);//打印输出 i = 10,而原本在上面的循环中i只能到9

  for(let j = 0;j<10;j++){
      console.log(j);// 0-9
  }
  console.log(j);// ReferenceError: j is not defined

const 声明一个只读的常量,一旦声明,常量的值就不能改变。

 let a = "小明";
console.log(a);
 const PI = 3.14159;
 PI = 2.3;
 console.log(PI);//报错,常量不能修改 TypeError: Assignment to constant variable.

2.对象解构赋值

解构模型:解构源,解构目标
解构的源,解构赋值表达式的右边部分。
解构的目标,解构赋值表达式的左边部分。
var [ 目标 ] = { 源 }
数组解构

    //一维数组解构
    let nums = [1, 2, 3];
    let [a, b, c] = nums;
    console.log(a);//1
    console.log(b);//2
    console.log(c);//3
    //二维数组解构,嵌套解构,使用...rest相当于可变参数,解构剩下的
    let tNums = [[9, 8, 7], [6, 5, 4], [3, 2, 1]];
    let [[a00, a01, a02], ...rest] = tNums;
    console.log(a00);//9
    console.log(a01);//8
    console.log(a02);//7
    console.log(...rest);//[6, 5, 4] , [3, 2, 1]

字符串解构

	//字符串解构
	let str = "hello!";
	let [h,i,j,k,l,m] = str;
	console.log(h);//h
	console.log(i);//e
	console.log(j);//l
	console.log(k);//l
	console.log(l);//o
	console.log(m);//!
	
	//使用部分解构
	let [n,...rest2] = str;
	console.log(n); //h
	console.log(rest2); //['e', 'l', 'l', 'o', '!']

对象解构

	var name = "小白";
	var sex  ="男";
	var age =21;
	let person = {
	    name,
	    sex,
	    age,
	};
	
	//传统取元素的方法 . 和 []
	console.log(person.name);    //小白    
	console.log(person.sex);     //男 
	console.log(person.age);    //21
	//es6的对象解构
	var {name,sex,age} =person;
	console.log(name); //小白
	console.log(sex); //男
	console.log(age); //21
	
	//对象解构例子
	let peoples = {p1:{name:"张三",age:34},p2:{name:"李四",age:33},p3:{name:"白云飞",age:18}};
	let { p1,p2,p3} = peoples;
	console.log(p1); //{name: '张三', age: 34}
	console.log(p2); //{name: '李四', age: 33}
	console.log(p3); //{name: '白云飞', age: 18}
	
	
	let {p: [x, { y }] }  = {p: ['hello', {y: 'world'}] };
	console.log(x);//hello
	console.log(y);//world

3.模板字符串

传统字符串拼接 ,首先字符串由 ""或者''包裹,然后用+来拼接。
es6提供的新的拼接方式 ,字符串由 ``来包裹,然后只需要使用${}来提取你所要的值进行拼接即可。

	//传统字符串拼接 
	var p1 = {name:"白云飞",age:18,id:"2020040411"};
	let str = "今天上课"+p1.name+"听的很认真!";
	console.log(str);
	//es6模板字符串拼接 
	let str2 = `今天上课${p1.name}听的很认真!`;
	console.log(str2);
	//在es6中模板字符串,回车换行也会被记录进去
	let str3 = `今天上课
	            ${p1.name}
	             听的很认真!`;
	console.log(str3);

在这里插入图片描述

4.Map Set

Map对象

Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。
Map 中的键值是有序的(FIFO 原则)先进先出==>队列,Map 的键值对个数可以从 size 属性获取。

map的set 和遍历

    let p1 = {name:"白云菲",age:20,sid:"040416"};
    let p2 = {name:"叶子君",age:21,sid:"040417"};
    let p3 = {name:"张三",age:22,sid:"040418"};
    let mapList = new Map();
    //以学号为key,学生信息为value压入map中
    mapList.set(p1.sid,p1);
    mapList.set(p2.sid,p2);
    mapList.set(p3.sid,p3);
    //Map迭代遍历
    // 1. for of
    for (let mapListElement of mapList) {
        console.log(mapListElement);
    };
    // 2.for each
    mapList.forEach(function (value, key) {
        console.log(key+"--");
        for (let e in value) {
            console.log(e+":"+value[e]);
        };
    });

for of遍历结果
在这里插入图片描述
for each遍历结果
在这里插入图片描述

map的合并和复制

map复制

//map的复制
 var map1 = new Map([["200102", "春"], ["200106", "夏"]]);
 var map2 = new Map(map1);
 for (let map2Element of map2) {
     console.log(map2Element);
 }

在这里插入图片描述
map合并

	var map1 = new Map([["200102", "春"], ["200106", "夏"]]);
	var map2 = new Map([["030311", "小白"], ["030316", "小飞"],["200106","小云"]]);
	var mapUnion = new  Map([...map2,...map1]);
	for (let mapUnionElement of mapUnion) {
	    console.log(mapUnionElement);
	}
//注意合并时如果有重复的键,那么后面的会覆盖前面的 夏 覆盖 小云

在这里插入图片描述

Map和数组的转换

Map 构造函数可以将一个 二维 键值对数组转换成一个 Map 对象。
使用 Array.from 函数可以将一个 Map 对象转换成一个二维键值对数组。

 var arr1 = [["key1", "value1"], ["key2", "value2"]];
 // Map 构造函数可以将一个 二维 键值对数组转换成一个 Map 对象
 var map1= new Map(arr1);
 for (let map1Element of map1) {
     console.log(map1Element);
 }
 // 使用 Array.from 函数可以将一个 Map 对象转换成一个二维键值对数组
 var arr2 = Array.from(map1);
 console.log(arr2);

在这里插入图片描述

Set对象

Set 对象,不重复且无序,常用于数组的去重,取交集并集差集(和数学中的概念是一样的)。

set的去重,取并交差集

	var a = new Set([1,2,3,4,1,2]);
    console.log(a);// 1,2,3,4
    var b = new Set([5,6,7,8]);
    //将a,b两个一维数组合并为一个二维数组
    var union =new Set([...a,...b]);
    console.log(union);// 1, 2, 3, 4, 5, 6, 7, 8
    //取a,c的交集
    var c = new Set([1,2,6,4]);
    var interSet = new Set([...a].filter(x => c.has(x)));
    console.log(interSet);// 1 ,2 ,4
    //取a,c的差集
    var diffSet = new Set([...a].filter(x => !c.has(x)));
    console.log(diffSet);// 3
    //取c,a的差集
    var diffSet2 = new Set([...c].filter(x => !a.has(x)));
    console.log(diffSet2);// 6

在这里插入图片描述

--------------------------------------------------未完待续--------------------------------------------------

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

杀死一只知更鸟debug

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值