es6划重点
1.作用域变量
1.1.let和var对比
1.变量不提升
var 可能会造成变量提升
a然后打印再赋值,结果是undefined console.log(a);//undefinedvar a = 1;//相当于var a;console.log(a);a = 1;复制代码
let的话，变量不会提升，打印的时候，会报错，因为还没声明
console.log(a);//a is not definedlet a = 1;复制代码
2.不能重复定义
var 可能会被重新赋值, let不能重复声明一个变量
var a = 1;var a = 2;console.log(a);//2复制代码
let a = 1;let a = 2;//Identifier 'a' has already been declared 这里是说它已经被声明了，不能重复声明console.log(a);复制代码
3.暂存死区
var的作用域问题 (函数作用域 全局作用域) (let 暂存死区)
只要块级作用域内存在let命令，它所声明的变量就“绑定”（binding）这个区域，不再受外部的影响。 { let a = 1;}console.log(a);//a is not defined复制代码 { var a = 1;}console.log(a)//1复制代码 4.闭包新写法
以前
;(function () {})();复制代码 现在
{}复制代码 2.const(常量)
const声明一个只读的常量。一旦声明，常量的值就不能改变。
const命令声明的常量也是不提升，同样存在暂时性死区，只能在声明的位置后面使用。 const PI = 3.141593PI > 3.0复制代码
es5写法
Object.defineProperty(typeof global === "object" ? global : window, "PI", { value: 3.141593, enumerable: true,//对象属性是否可通过for-in循环，flase为不可循环，默认值为true writable: false,//对象属性是否可修改,flase为不可修改，默认值为true configurable: false//能否使用delete、能否需改属性特性、或能否修改访问器属性})PI > 3.0;复制代码 3.解构
1.数组解构
let [,b,c,d=100] = [1,2,3];console.log(b,d);复制代码
2.对象解构
let obj = {name:'cjw',age:18};//这里重新命名了let {name:Name,age,address="默认"} = obj;console.log(Name, age, address)复制代码 3.混合解构
let [{name}] = [{name:'cjw'}];复制代码 4.传递参数，结果解构
Promise.all(['cjw','9']).then(([name,age])=>{ console.log(name, age);});复制代码 4.拷贝
4.1.浅拷贝
let arr1 = [1,2,3,[1,2,3]];let arr2 = [1,2,3];let arr = [...arr1,...arr2];console.log(arr)arr1[3][0] = 100;复制代码
4.2.对象合并
let school = {name:'zfpx',a:{a:1}};let my = {age:18};let newObj = {...school,a:{...school.a},...my}; console.log(newObj)复制代码 4.3.JSON.parse(JSON.stringify())
这个只能拷贝普通对象，new Date之类不能拷贝
let school = { name: 'zfpx', a: { a: 1 } ,date:new Date(),reg:new RegExp(/\d+/),fn:function(){}};let s = JSON.parse(JSON.stringify(school));复制代码 4.4.深拷贝（递归拷贝）
function deepClone(obj) { // 递归拷贝 深拷贝 if(obj == null) return null; if (obj instanceof Date) return new Date(obj); if(obj instanceof RegExp) return new RegExp(obj); if(typeof obj !== 'object') return obj; let t = new obj.constructor for(let key in obj ){ t[key] = deepClone(obj[key]) } return t;}let o = { a: [1, 2, 3] }let r = deepClone(o);o.a[1] = 1000复制代码 4.5.展开运算符
// 剩余运算符只能用在最后一个参数function test(a, b,...c) { // c = [5,6,7] // 将类数组转化成数组 let d = Array.prototype.slice.call(arguments,2) // a,b,...c let e = Array.from(arguments).slice(2); let arr = [...arguments].slice(2); console.log(e);}test(1,2,3,5,6,7);复制代码 把多个对象的属性复制到一个对象中,第一个参数是复制的对象,从第二个参数开始往后,都是复制的源对象
// Object.assign {...} let name ={name:'zfpx'}let age = {age:9}let obj = Object.assign(name,age); // {...}console.log(obj);复制代码 5. 代理proxy
5.1.普通函数（defineProperty）
Object.defineProperty(obj, 'PI', { enumerable: true, configurable: false, get(){ console.log('get'); }, set(){ console.log('set'); val = v; }})obj.PI = 3.15;复制代码 5.2.mvvm
let obj = {name: {name: 'cjw'}, age: 18};function observer(obj){ if(typeof obj != 'object') return obj; for(let key in obj){ defineReactive(obj, key, obj[key]); }}function defineReactive(obj, key, value){ observer(value); Object.defineProperty(obj, key, { get(){ return value; }, set(){ console.log('update'); } })}observer(obj);obj.name.name = 'cjw';复制代码 5.3 普通代理
let proxy = new Proxy(obj, { set(target, key, value){ if(key === 'length') return true; console.log('update'); return Reflect.set(target, key, value); }, get(target, key){ return Reflect.get(target, key); }})proxy.push('123');console.log(proxy.length);复制代码 5.4 多层代理
let obj = {name: {name: 'cjw'}, age : 18};function set(obj, callback){ let proxy = new Proxy(obj, { set(target, key ,value){ if(key === 'length') return true; console.log('更新'); return Reflect.set(target, key, value); }, get(target, key){ return Reflect.get(target, key); } }) callback(proxy);}set(obj, function(proxy){ proxy.age = '100'; console.log(proxy);})复制代码 6.箭头函数
this 指向
function 关键字 去掉return 和 {} 6.1 普通剪头函数
function a(a) { return function (b) { return a + b; }}let a = a => b => a + b;console.log(a(1)(2));复制代码 6.2 类数组
let a = (...arguments) => { console.log(arguments)}a(1, 2, 3);复制代码 6.3 this指向问题
// this指向问题let obj = { a: 1, b() { // obj = this console.log(this); setTimeout(() => { // 箭头函数中没有this指向 从而解决了this的问题 this.a = 100; }, 1000); }}obj.b();setTimeout(() => { console.log(obj.a)}, 2000);复制代码 6.4 let不会将变量放在window上
let a = 1000; // let不会将变量放在window上let obj = { a: 1, b: () => { this.a = 100; // window }}obj.b();console.log(obj.a,a);复制代码 7.arr(数组新方法)
filter过滤 forEach 循环 map 映射 reduce 收敛 some every 反义
7.1 reduce(收敛)
原生写法
let arr = [1,2,3,4,5];Array.prototype.myReduce = function (callback,prev) { for(let i = 0 ; i { return prev+next},100)复制代码 7.2 filter(过滤)
let arr = [1,2,3]let arr1 = arr.filter(item=>item<=2);console.log(arr1);复制代码
7.3 map
let arr =[1,2,3];let arr1 = arr.map(item=>item*2);复制代码
7.3 every
let arr = [1,2,3];let flag = arr.every(item=>item==3);console.log(arr.includes(3)); //es7复制代码
7.4 findIndex
let arr = [1, 2, 3];let item = arr.find(item => item == 4);console.log(item); //es7复制代码
7.5 Array.from
将一个数组或者类数组变成数组,会复制一份
let newArr = Array.from(oldArr);复制代码
7.6 Array.of()
of是为了将一组数值,转换为数组
console.log(Array(3), Array(3).length);console.log(Array.of(3), Array.of(3).length);复制代码
7.7 copyWithin
Array.prototype.copyWithin(target, start = 0, end = this.length) 覆盖目标的下标 开始的下标 结束的后一个的下标
[1, 2, 3, 4, 5].copyWithin(0, 1, 2)//[ 2, 2, 3, 4, 5 ]复制代码
7.8 Object.keys
Object.keys可以把对象取出来key组成数组 for of 可以迭代数组
for (var a of Object.values({ name: 'cjw', age: 9 }) ){ // forEach不能return console.log(a);}复制代码 8.Symbol
let s = Symbol();let q = Symbol();console.log(s === q);//falselet s = Symbol.for('cjw');let q = Symbol.for('cjw');console.log(s);//Symbol(cjw)console.log(q);//Symbol(cjw)console.log(Symbol.keyFor(q));console.log(s === q);//ture复制代码 9.template
9.1 模板字符串
let name = 'cjw';let age = 9;let str = `${name}今年${age}`;console.log(str);复制代码 9.2 模板字符串实现原理
let newStr = str.replace(/\$\{([\s\S])\}/g, function(){ return eval(arguments);})console.log(newStr);复制代码 10.集合
10.1 Set
set可以做去重 set不能放重复的
let set = new Set([1,2,3,3,2,1]);console.log([...set]);复制代码
10.2 Map
let map = new Map();map.set('js','123');map.set('node','456');map.forEach(item=>{ console.log(item);});复制代码 11 class
11.1 es5 实现的类
// call 构造函数里面的属性方法复制 // Object.crate 复制原型里面的属性和方法
function Animal(type) { this.type = { t: type};}Animal.prototype.eat = function () { console.log('eat');}function Cat(type) { Animal.call(this,type); // 让父类在子类中执行，并且this指向子类}// 原型上还有一个属性// 4.继承实例上和原型上的方法function create(proto) { let Fn = function () { } Fn.prototype = proto; return new Fn();}Cat.prototype = Object.create(Animal.prototype,{constructor:{value:Cat}});let cat = new Cat('哺乳类')console.log(cat.type);cat.eat();console.log(cat.constructor);复制代码 11.2 es6 写法
class Animal { constructor(type){ this.type = type; } static flag(){ return 'animal'; } eat(){ console.log('eat'); }}class Cat extends Animal{ constructor(type){ super(type); }}let cat = new Cat('哺乳类');console.log(cat.type);cat.eat();console.log(Cat.flag);复制代码 11.3 get 与 set
getter可以用来得获取属性，setter可以去设置属性
class Person { constructor(){ this.hobbies = []; } set hobby(hobby){ this.hobbies.push(hobby); } get hobby(){ return this.hobbies; }}let person = new Person();person.hobby = 'basketball';person.hobby = 'football';console.log(person.hobby);复制代码