ECMA6(掌握)

菜鸟教程：https://www.runoob.com/w3cnote/es6-tutorial.html

let和const

//let和const声明变量和常量 var

let

1-作用域只局限于当前代码块

{ var str1 = “Eden1”; console.log(str1);

let str2 = “Eden2”; console.log(str2); }

console.log(str1); console.log(str2);

输出 Eden1 Eden2 Eden1 error：str1 is not defined

var的声明方式，作用域在函数和全局上
let的声明方式，作用域在{}里面，不能重复声明

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

{ console.log(str1); var str1 = “Eden1”;

}

输出 undefined

3-在相同的作用域下不能重复声明相同的变量

{ var str1 = “Eden1”; var str1 = “Eden11”; console.log(str1);

let str2 = “Eden2”; let str2 = “Eden22”; console.log(str2); }

输出 ‘str2’ has already been declared

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

<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>

{

var buttons = document.querySelectorAll(“button”);> for(var i=0; i<buttons.length; i++){ buttons[i].onclick = function (){ alert(“点击第” + i); } }

结果 点击所有的按钮都为：点击第5

原因：
for循环为同步事件
里面的buttons的onclick为异步事件
解决办法1（使用闭包）

<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>

{

var buttons = document.querySelectorAll(“button”);> for(var i=0; i<buttons.length; i++){ (function (i) { buttons[i].onclick = function (){ alert(“点击第” + i); } })(i); }

解决办法2（使用let）

<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>

{

let buttons = document.querySelectorAll(“button”);> for(let i=0; i<buttons.length; i++){ buttons[i].onclick = function (){ alert(“点击第” + i); } }

const

1-只在当前的代码块中有效
2-作用域不会被提升
3-不能重复声明
4-声明的常量必须赋值

解析赋值

1-基本用法

let name = ‘Eden’, age = 24, sex = ‘男’; let [name,age,sex] = [“Eden”,24,”男”]

2-对象解构赋值

let {name,age,sex,friends} = {name=”Eden”,age=24,sex=”男”,friends=[“傻”,”白”,”甜”]}

数据集合-set

特点：不存在重复数据
1-基本用法

//创建一个集合 let set = new Set();

//不存在重复数据 let set = new Set([“傻”,”白”,”甜”,”傻”]); console.log(set); 输出 {“傻”,”白”,”甜”}

2-属性

let set = new Set([“傻”,”白”,”甜”,”傻”]); console.log(set.size); 输出 length:3

3-方法

//add let set = new Set([“傻”,”白”,”甜”]); set.add(“哈哈”);

console.log(set);

输出

{“傻”,”白”,”甜”,”哈哈”}

//delete let set = new Set([“傻”,”白”,”甜”]); console.log(set.delete(“甜”));

console.log(set); 输出 true {“傻”,”白”}

//has let set = new Set([“傻”,”白”,”甜”]);

console.log(set.has(“甜”)); console.log(set.has(“甜111”));

输出 true false

//clear let set = new Set([“傻”,”白”,”甜”]); set.clear();

console.log(set);

输出

{}

数据集合map

和java的hashmap基本一致，但它的key可以存放对象
1-基本使用

const map = new Map();
const obj = {p: 'Hello World'};
map.set(obj, 'OK')
map.get(obj) // "OK"
map.has(obj) // true
map.delete(obj) // true
map.has(obj) // false

2-属性
size
3-方法

//set和get //delete //has //clear //keys(),values(),entries()

symbol

Iterator

Class的基本运用

Class的运用-绚丽小球

内置对象拓展

函数拓展