ES6新特性(基础常用)

导读:本篇文章讲解 ES6新特性(基础常用),希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

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

在这里插入图片描述

————————————————–未完待续————————————————–

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/105192.html

(0)
小半的头像小半

相关推荐

极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!