ES6基础

一、let和var的区别

1、作用域只局限于当前模块

let声明变量
var是全局作用域变量，在代码块中和代码块外面都有效果

2、使用let声明的变量作用域不会被提升

{
let str1=‘var1‘;
var str2= ‘var2‘;
}

console.log(str2);//undefined,var方式声明
console.log(str1);//报错，let方式声明

var str1 = ‘var1‘
分解为两步：
var str1;
console.log(str1);
str1=‘var1‘
而let则不会将作用域提升，直接报错。

3、在相同的作用域下不能重复声明

{
var str1 = ‘var1‘;
var str1 = ‘var2‘; //最终为var2

let str2 = ‘var3‘;
let str2 = ‘var4‘;//会报错，重复定义
}

4、for循环体现let的父子作用域

<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>

var btns = document.querySelectorAll(‘button‘);
    for(var i=0; i<btns.length; i++){
        btns[i].onclick = function () {
            alert(‘点击了第‘ + i + ‘个按钮‘); //都是第5个按钮
        }
    }


let btns = document.querySelectorAll(‘button‘);
    for(let i=0; i<btns.length; i++){
        btns[i].onclick = function () {
            alert(‘点击了第‘ + i + ‘个按钮‘); //0-4个按钮，是我们所需要的
        }

二、const声明的变量

1、只有在当前代码块中才有效。
{
const a = ‘zhangsan‘
console.log(a);
}
console.log(a);//错误

2、作用域不会提升
{
const a = ‘zhangsan‘
}
console.log(a);//错误

3、不能重复声明
{
const a = ‘zhangsan‘
const a = ‘lisi‘ //错误
}

4、声明的常量一开始就必须赋值，否则会报错
{
const a;
a=‘zhangsan‘; //语法错误
}

三、解构赋值

ES6允许按照一定模式从数组或对象中提取值，对变量进行赋值，被称之为解构赋值。类似python的解包。可迭代类型都可以解包。

数组解构：要一一对应
let [name, age, sex] =[‘李四‘, 20, ‘女‘];
let [arr1, [arr2, arr3, [arr4, arr5]]] = [1, [2, 3, [4, 5]]];

对象解构：key的解包
let {name, age, sex} = {name: ‘张三‘, age: 55, sex: ‘男‘};
let {name: str} = {name: ‘张三‘};

字符串解构：可迭代对象才能解构
let [a, b, c, d, e] = ‘我是中国人‘;
一一对应即可。

四、集合set

目的是去重，和python里面的集合是一样。

let set = new Set([‘张三‘, ‘李四‘, ‘王五‘, ‘张三‘, ‘李四‘]);

集合1个属性，4个方法

属性：set.size

方法：add、delete、clear、has

set.has
set.add()
set.delete()
set.clear()

五、集合map

// 1. 创建一个Map，类似python中的字典，但是可以去重，且key可以为非哈希类型，比如key可以是对象、列表。
let obj1 = {a: 1}, obj2 = {b: 2};
const map = new Map([
　　[‘name‘, ‘张三‘],
　　[‘age‘, 18],
　　[‘sex‘, ‘男‘],
　　[obj1, ‘今天天气很好‘],
　　[obj2, ‘适合敲代码‘],
　　[[1,2], ‘hhh‘]
　　]);

2、方法：set、get、has、clear、keys()、values()、entries()

3、遍历

map.forEach(function (value, index) {
    console.log(index + ‘:‘ + value);
})

ES6基础

原文：https://www.cnblogs.com/skyflask/p/10894406.html