用户登录
用户注册

分享至

ES6中关于let,const,箭头函数,Set和Map的特性讲解

  • 作者: 太阳渡河而来
  • 来源: 51数据库
  • 2021-07-06

ES6中关于let,const,箭头函数,Set和Map的特性讲解

一.let和const

let和const都是用来声明变量,下面介绍一下它们和var的一些区别特性:

  • let与var的区别

  1. let 没有变量提升,var有变量提升
console.log(a); // undefined
var a = "a";
console.log(b);// error
let b = "b";
  1. 有严格的作用域 ,ES5中只有全局作用域和函数作用域 ,ES6新增块级作用域
function fun(){
    // var i = 1;
    let i = 1;
    if(true){
        // var i = 100;
        let i = 100;
    };
    console.log(i);
}
fun();// var 输出100/  let输出1
  1. 在同一个作用域下,不能使用let定义同一个变量(但是可以重新赋值)
let n = 1;
// let n = 100;// error 
n = 100;
consolelog(n);// 100
  • const

  1. const声明的是一个只读的常量,一旦声明之后,基本数据类型(string,number)不能再重新赋值。
const w = 100;
console.log(w);// 100
w = 200;// error
console.log(w);
  1. 引用数据类型可以修改(Object,Array)
const obj = {};
obj.name = "tom";
console.log(obj);// {"name":"tom"}
obj.name = "jerry";
console.log(obj);// {"name":"jerry"}
  1. const声明常量之后必须初始化,如果只进行声明,控制台会报出异常。
// 只对x进行声明,不进行初始化
const x;

二. 箭头函数–简化了函数的定义

// 函数只有一个参数时,可省略括号
let fn1 = v =>{return v}; //函数名 = 参数 =>返回值
/*
	// 相当于es5中的
	var f = function(){
	return v;
	}
*/
// 参数不止一个
let fn2 = (n1,n2)=>{};
// 解构参数
let fn3 = ({n1,n2})=>{};

箭头函数需要注意的几个细节:

  • 函数体内的this定义时所在的对象而不是使用时所在的对象
  • 可让this指向固定化,这种特性很有利于封装回调函数
  • 不可当作构造函数,因此箭头函数不可使用new命令
  • 不可使用yield命令,因此箭头函数不能用作Generator函数
  • 不可使用Arguments对象,此对象在函数体内不存在(可用rest/spread参数代替)
  • 返回对象时必须在对象外面加上括号

三.新增两种数据结构Set和Map

Set:类似数组,成员有唯一性

const s = new Set();
s.add(1);
s.add(2);
s.add(3).add(4).add(2);//支持链式操作
console.log(s);//Set(4) {1,2,3,4}元素唯一,重复的元素不再添加
// 利用Set实现数组去重
var arr2 = [1,2,4,3,2,1,4,3,5,7,4,9,4,5];
var arr3 = new Set(arr2);
console.log(arr3);//Set(7) {1, 2, 4, 3, 5, 7, 9}
// 得到的是set类型的数据,并不是数组
// 利用es6扩展运算符,对set数据进行序列化处理,转成数组
// 如果数组元素是对象  需要其他方式处理
var arr4 = [...new Set(arr2)];
console.log(arr4);// [1,2,4,3,5,7,9,]

Map: 类似对象,数据以键值对的形式存储,键可以是任意类型

const m = new Map();
m.set('name','Tom').set('age',19);
// for of // es6新增循环遍历方法
for(let [key,value] of m){
    console.log(key,value);
}

总结

关于ES6中let,const,箭头函数,Set和Map的特性就介绍就到这里,后续将对其他的一些ES6的新特性进行补充。

软件
前端设计
程序设计
Java相关