ES6视频学习

什么是ECMA？

一个组织，不过多写了。

let声明变量 let特性

let同一个作用域下不能重复声明块级作用域，let声明的变量是在块级作用域的，块级作用域通常是一个{}没有变量提升不影响作用域链，同样满足向上查找该变量。

const声明常量

常量就是不能改变的量。一定要赋初始值。一般常量使用大写常量的值不能修改块级作用域没有变量提升一旦声明一个常量就不允许改变，但是只是不能改变栈中，即不能修改基础类型，可以对数组和对象中的元素进行修改，可以改变堆内存中的。 const arr = [1,2,3]; arr.push(4) //不会报错

变量的解构赋值

ES6允许按照一定模式从数组和对象中提取值，对变量进行赋值，这被称为解构赋值。 //数组的解构赋值 const f4 = ['小沈阳', '刘能']; let [xiao, liu] = f4; console.log(xiao); // 小沈阳 // 对象的解构 常用的 方法的解构 const zhao = { name:'赵本山', age:'65', xiaopin: function() { console.log('昨天今天明天'); } } let {name, age, xiaopin} = zhao; console.log(name); //赵本山 xiaopin(); // 昨天今天明天 不用像之前一样zhao.xiaopin() 这样重复调用

模板字符串

// es6引入新的声明字符串的方式 和 ‘’ “”差别不大 let str = `我也是一个字符串`; console.log(str); 使用模板字符串在内容中可以直接出现换行直接进行变量的拼接 let a = 'bob'; let b = `${bob}是优秀的前端工程师！！` console.log(b)

对象的简化写法

let name = 'bob'; let change = function() { console.log('改变自己'); } const school = { name, change, fn() { console.log('方法简化'); } } console.log(school); // {name: 'bob', change: f()}

箭头函数

没有自己的this没有arguments，arguments是用来保存实参的。没办法new实例化箭头函数的简写适合与this无关的问题， 定时器，数组的方法回调 // 箭头函数的省略 // 省略小括号，---只有一个形参 let add = n => { return n+n; } // 省略花括号，----只有一条语句，return 也必须省略，结构是函数执行后的返回值 let pow = (n) => n*n; // 箭头函数的this始终指向函数声明时所在作用域下的this的值 function getName() { csonsole.log(this.name); } let getName2 = () => { console.log(this.name); } window.name = 'aaaa'; const school = { name: 'bbbb' } getName(); //aaa this指向window getName2(); // aaaa this 指向window getName.call(school); // bbb getName2.call(school); // aaaa 箭头函数this始终指向 getName2声明时this 的值 箭头函数的例子 const arr = [1,6,8,7]; cosnt result = arr.filter(function(item) { if(item % 2 === 0) { return true; } else { return false; } }); console.log(result); // 6 8 // 箭头 const result arr.filter(item => item % 2 === 0); console.log(result); //6 8

参数形参赋初始值

// 给形参赋初始值 默认不传c时，c为10 function add (a,b c=10) { return a+b+c; } let result = add(1,2); // 与解构赋值结合 function connect(host, username) { console.log(host); // aa console.log(username); //bb } connnect({ host: 'aa', username: 'bb' })

rest参数

rest(…)参数，用于获取函数的实参，用来代替arguments

// es5获取实参的方式 function date() { console.log(arguments); // ["aa", "bb", "cc", callee: function, Symbol(Symbol.iterator): function] 类数组 是一个对象 } date('aa', 'bb', 'cc'); // es6 获取实参的方式 rest参数必须放在参数的最后 function date(...args) { // 形参 console.log(args); // 数组 ["aa", "bb", "cc"] } date('aa', 'bb', 'cc');

扩展运算符…

将一个数组转化成逗号分隔的参数序列

const arr = [aa, bb, cc] function fn() { console.log(arguments); // aa,bb,cc } fn(...arr); // 作为函数的实参传递

用处：

数组的合并 […arr, …arr1]数组克隆 […arr] 浅拷贝将伪数组转换成真正的数组。 [… arguments]

symbol

symbol的值是唯一的不能进行运算不能for in 循环 // 1.创建symbol let s = Symbol(); console.log(s, typeof s);

使用： 给对象添加属性和方法

// 给game对象添加方法，为了不和game中的属性起冲突，可以使用symbol，不用另外起名字 let game = {up:..,...} let method = { up: Symbol(), down: Symbol() } game[method.up] = function() { } game[methos.down] = function() {...} console.log(game)

symbol的内置值

迭代器

概念：是一种接口，（就是对象里面的一个属性）为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署iterator接口，就可以完成遍历的操作。（调用next方法，不断调用下一个函数，直到done的状态变为true，结束遍历） 具有iterator接口的数据：

arrayargumentssetmapstringtypedArraynodelist const arr = [aa,bb,cc]; for(let v of arr) { console.log(v); // aa bb cc 打印的键值 for in 是健名 }

迭代器的应用

const obj = { name: 'aaa', stus: [ 'aa', 'bb', 'cc' ], [Symbol.iterator]() { let index = 0; let _this = this; return { next: function() { if (index < _this.stus.length) { const result = {value: _this.stus[i], done: false}; index++; return result; } else { {value: undefined, done: true}; } } } } } // 使用for of遍历，返回的结果是stus数组的成员 aa bb cc for(let v of obj) { console.log(v); // 通过自定义iterator 实现 for of 循环 }

生成器

生成器就是一个特殊的函数，进行异步编程，之前是纯回调函数

function * fn() { console.log('111'); yield '一只耳朵'; console.log('222') yield '一只尾巴'; console.log('333') } let iterator = fn(); console.log(iterator.next()) // 通过next来执行 111 console.log(iterator.next()); // 222 //遍历 for(let v of fn()) { console.log(v); // value done }

生成器函数参数

function * gen(arg) { console.log(arg); let one = yield 111; console.log(one);// BBB yield 222; } let iterator = gen('AAA'); // 整体传参 console.log(iterator.next()); //AAA console.log(iterator.next('BBB')); // 实参作为第一个yield语句的返回结果

异步编程，生成器解决回调地狱

function one () { setTimeout(() => { console.log('111'); iterator.next(); }, 1000) } function two () { setTimeout(() => { console.log('222'); iterator.next(); }, 2000) } function three () { setTimeout(() => { console.log('333'); iterator.next(); // value done: false }, 3000) } function * gen() { yield one(); yield two(); yield three(); } let iterator = gen(); iterator.next(); // 111

生成器函数实例

// 获取用户数据 ===》 获取订单数据 ===》之后再获取商品数据 function getUser() { setTimeout(() => { const data = '用户数据'; // 调用next的方法 实参作为第一个yield的返回结果 iterator.next(data); },1000) } function getOrder() { setTimeout(() => { const data = '订单数据'; // 调用next的方法 实参作为第二个yield的返回结果 iterator.next(data); },1000) } function getGood() { setTimeout(() => { const data = '商品数据'; // 调用next的方法 实参作为第三个yield的返回结果 iterator.next(data); },1000) } //getUser(); 不满足先获取用户数据后再获取订单数据 //getOrder(); //getGood(); function * gen() { const users = yield getUser(); console.log(users);// 1s后获取 用户数据 const orders = yield getOrder(); console.log(orders);// 再1s后获取 订单数据 const goods = yield getGood(); console.log(goods);// 再1s后获取 商品数据 }

promise

// 1.实例化一个promise const p = new Promise(function(resolve, reject) { setTimeout(function() { //2.异步操作 例如获取接口数据 let data = '接口获取的数据'; resolve(data); //1. promise的状态变为成功 调用then方法的第一个回调函数 fullfilled let err = '失败的数据'; reject(err); // 2.promise的状态变为失败 rejected }, 1000) }) p.then(function(value) { console.log(value); // 接口获取的数据 }, function(reason) { conslole.error(reason); // 失败的数据 })

Promise封装ajax

function ajax(url){ return new Promise((resolve,reject)=>{ var xhr=new XMLHttprequest(); xhr.open('GET',url,true); xhr.onreadystateChange=function(){ if(this.readyState===4&&this.status===200){ resolve(this.responseText,this) }else{ var errMsg={"code":this.status,"msg":"请求接口失败"} reject(errMsg); } } xhr.send(); }).then((response)=>{ console.log('resolve处理成功接收的数据:',response) },err=>{ console.log('reject处理的错误信息:',err) }) }

Promsie的then方法

const p = new Promise(function(resolve, reject) { setTimeout(function() { resolve('用户数据'); reject('出错了'); }, 1000) }) // 上面promise成功了执行then的第一个回调函数 失败了执行第二个回调函数 const result = p.then(function(value) { console.log(value); // 用户数据 }, function(reason) { conslole.error(reason); // 出错了 }) console.log(result); //then方法返回的是promise对象，对象状态由回调函数的执行结果决定 如果then里面返回的是非promise对象，then的状态也为成功 const result = p.then(function(value) { console.log(value); // 用户数据 return 123; }, function(reason) { conslole.error(reason); // 出错了 }) console.log(result); //1.[promise.... [promsiestatus]: fullfilled [promisevalue]: 123] // 如果then中没有返回 则状态也为成功，value是undefined 如果then里面返回的是Promise对象 const result = p.then(function(value) { console.log(value); // 用户数据 return new Promise((reslove, reject) => { reslove('ok'); reject('err') }); }, function(reason) { conslole.error(reason); // 出错了 }) console.log(result); //1.[promise.... [promsiestatus]: reslolved [promisevalue]: ok] // 如果then中状态为失败，value是err then中抛出错误 const result = p.then(function(value) { console.log(value); // 用户数据 throw new Error('出错了！') }, function(reason) { conslole.error(reason); // 出错了 }) console.log(result); //1.[promise.... [promsiestatus]: rejected [promisevalue]: 出错了] // 如果then中状态为失败，value是err

Promise的catch方法

catch获取promise中失败的结果，也可以通过then的第二个参数获取失败的结果。

set

集合类似数组

有iterator接口，可以for of循环

add、delete、has、size方法等等 用处：

去重

交集

并集

差集

map

1.对象 健名不限于字符串 2. 可以for of循环 3. set新增属性，get获取属性

class类

function Phone(price) { this.price = price; } Phone.prototype.call = function() { console.log('可以打电话') } let Huawei = new Phone(2333); console.log(Huawei); // {price:2333} Hiawei.call(); //可以打电话 // es6 class Phone{ constructor(price){ this.price =price; } // 方法的使用 call() { console.log(' 我可以打电话'); } } let ss = new Phone(3333); console.log(ss);

类的静态成员

实例对象不能访问函数对象的属性和方法，这些就是静态成员 function Phone{} Phone.name = '手机'; let nokia = new Phone(); console.log(nokia.name); //undefined 访问不了函数对象的属性 实例对象只能访问原型上的属性和方法

es6的继承

// es5的构造函数继承 function phone(price) { this.price = price; } phone.prototype.call =function() { console.log(' 我可以打电话') } function sonPhone(price, color) { phone.call(this, price); // 父类的属性 this.color = color; //子类独有的 } sonphone.prototype = new phone(); sonphone.propotype.constructor = sonphone; // 子类的方法 sonphone.propotype.photo = function() { console.log(' 拍照') } const ss = new sonphone(2999, '黑色'); console.log(ss); //{price:2999,color: '黑色'，。。。。方法等} // es6 class phone{ constructor(price) { this.price = price } call() { console.log(' 我可以打电话') } } class sonphone extends phone{ constructor(price, color) { super(price); // phone.call(this,price) this.color =color; } photo() { console.log(' 拍照') } // 子类对父类方法的重写 call() { console.log('我可以视频通话') } } const xiaomi = new sonphone(3333,'黑色'); console.log(xiaomi); xiaomi.call(); // 子类重写就调用子类的

es6的模块化

好处：

防止命名冲突。A文件夹下的a.js和B文件夹下的a.js不冲突代码复用。公共功能可抽离出，export导出即可高维护性

语法

export导出import导入

es6的babel转换es5