ES6部分特性集合
let&const
console.log(a); //error
let a='xx';
- 变量不会提升
- a具有块级作用域
- 不能通过window.a变量进行访问
- 使用let的循环中每次的变量都是新生成的 如：for(let a=0;a<len;a++)
- 不管是引用类型还是数值类型都可以改变
const a='xx',b={name:'xx'};
- 变量不会提升
- a为数值类型，不能够重新赋值
- b为引用类型，可以改变对象里边的属性值 如b.name='xxx' 但无法重写 如b={age:18}会引起error
Map&Set
let s=new Set([2,1,3,5,4]);
s.size // 5
s.has(1) // true
s.delete(2); //{1,3,5,4}
s.has(2) // false
s.add(2).add(1) //{1,3,5,4,2}
- set类似于集合 元素有序(按添加的顺序)且唯一 key与value相同 由此可以引出两种数组去重方法 ps:两种方式都会改变s
var s=new Set([2,1,3,3,1,2,4]); [...s] //[2,1,3,4] Array.from(s) //[2,1,3,4]
- 可以链式调用 如上方代码所示s.add(2).add(1)
- 使用for...of & for...in的遍历结果是相同的 不过最好还是使用forEach遍历
- 可以使用filter和map方法
let set = new Set([1, 2, 3, 4, 5]); set = new Set([...set].map(x => x * 2)); //{2,4,6,8,10} set = new Set([...set].filter(x => (x % 2) == 0)); //{2,4}
- 可以实现集合的操作 如并集、交集
let a = new Set([1, 2, 3]); let b = new Set([4, 3, 2]); // 并集 let union = new Set([...a, ...b]); // Set {1, 2, 3, 4} // 交集 let intersect = new Set([...a].filter(x => b.has(x))); // set {2, 3} // 差集 let difference = new Set([...a].filter(x => !b.has(x))); // Set {1}
let m=new Map([['age',18],['sex','male']]);
m.size // 2
m.has('sex') // true
m.get('sex') // "male"
- map类似于哈斯表 是键值对的集合 遍历顺序即为插入的顺序
- map内部原理
let map = new Map(); array.forEach(([key, value]) => map.set(key, value));
- map的key是严格匹配的 除NaN外所有 如false、'false' 视为不同键值
let map = new Map(); map.set(-0, 1); map.get(+0) // 1 map.set(true, 1); map.set('true', 2); map.get(true) // 1 map.set(NaN, 1); map.get(NaN) // 1
Map&Set都有四个遍历属性：
-
keys()：返回key的遍历器
-
values()：返value的遍历器
-
entries()：返回所有元素的遍历器
-
forEach()：遍历所有元素
let map=new Map([['name':'xx'],['age':18],['sex':'male']]) [...map.keys()] // ['name', 'age', 'sex'] [...map.values()] // ['xx', 18, 'male'] [...map.entries()] // [['name':'xx'],['age':18],['sex':'male']] [...map] // [['name':'xx'],['age':18],['sex':'male']]
set同上
箭头函数
- this的指向是定义时所在的对象 而不是使用时所在的对象
- 不能用作构造函数 即不能使用new 否则error
- 不能使用arguments
rest参数&扩展运算符&解构赋值
-
rest参数 用扩展运算符接收函数的多余参数，组成一个数组，放在形参的最后，形式如下：
function foo(a, b, ...args) { // TODO }
- rest参数只包括那些没有给出名称的参数，arguments包含所有参数；
- arguments对象不是真正的array，而rest参数是Array的实例，可以直接应用sort, map, forEach, pop等方法；
- arguments对象拥有一些自己额外的功能。
-
扩展运算符 将可遍历对象的每一项都展开表示
console.log(...[1, 2, 3]) // 1 2 3 console.log(1, ...[2, 3, 4], 5) // 1 2 3 4 5
-
解构赋值 更加方便的声明变量
let node = { type: "Identifier", name: "foo" }; let { type, name } = node;
cosnt[a, b, c, d, e] = 'hello';
a // h
b // e
c // l
d // l
e // o
console.log(type); // "Identifier" console.log(name); // "foo"
模板
使用反引号包裹内容 即键盘上的波浪号
-
模板字符串 使用${变量名} 来拼接字符串 功能上类似于vue的{{}}
const word = 'world'; console.log(`hello ${word}`); //hello word -
模板语法 使用反引号 即键盘上的波浪号
document.body.innerHTML=` <select> <option>语文</option> <option>数学</option> <option>英语</option> </select>`
Proxy代理
-
使用proxy代替defineProperty进行数据拦截 实现双向绑定
var data = {}, res = document.getElementById('res'), input = document.getElementById('input') var dataProxy = new Proxy(data, { set(target, prop, newValue) { //target：data对象,prop：修改的属性值,newValue：传入的参数值 if (prop === 'text') { target[prop] = newValue res.innerHTML = newValue return true } return false } }) input.oninput = e => { dataProxy.text = e.target.value }
