ES6 总结1
ES6新特性
1 let关键字
let关键字用来声明变量，使用let声明的变量有几个特点
- 不允许重复使用
- 块级作用域
- 不存在变量提升
- 不影响作用域链
{ let school = '尚硅谷'; function fn(){ console.log(school); } fn(); }
应用场景：以后声明变量使用 let 就对了
2 const关键字
const关键字用来声明常量，有几个特点
- 一定要赋初值
- 一般常量是用大写（潜规则）
- 常量的值不能修改
- 块级作用域
- 对于数组和对象的元素修改，不算是对常量的修改，不会报错
const TEAM = ['UZI','MXLG','Ming','Letme'];
TEAM.push('Meiko');
注意: 对象属性修改和数组元素变化不会触发 const 错误
应用场景：声明对象类型使用 const，非对象类型声明选择 let
3 变量的解构赋值
ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称 为解构赋值。
// 1.数组的解构赋值 const xiao=['ss','sss','aaa']; let [s,d,f] = xiao; console.log(s); //ss console.log(d); //sss console.log(f); // aaa
// 2.对象的解构赋值 const people={ name: '小明', age: 18, el: function () { console.log('你好啊'); } } let {name,age,el} = people console.log(name); //小明 console.log(age); //18 el() //你好啊
4 模板字符串
模板字符串是增强版的自负床，用反引号``标识，特点：
- 字符串可以出现换行符
- 可以使用 $( 常量/变量 ) 形式输出变量
// 1.声明 let str = `我也是一个字符串哦` console.log(str, typeof str); // 2.内容中可以直接换行 let str1 = ` <ul> <li>aaa</li> <li>bbb</li> <li>ccc</li> </ul> ` // 3.变量拼接 let lovest = '赵丽颖' let out = `${lovest}是我最喜欢的演员` console.log(out); //赵丽颖是我最喜欢的演员
注意：当遇到字符串与变量拼接的情况使用模板字符串
5 简化对象写法
ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。这 样的书写更加简洁。
let name = '小明';
let slogon = '加油
console.log('可以提高你的技能');
}
//属性和方法简写
let atguigu = {
name,
slogon,
change() {
console.log('可以改变你')
}
};
6 箭头函数
注意：
- 如果形参只有一个，则小括号可以省略
- 函数体如果只有一条语句，则花括号可以省略，不写return，函数的返回值为该条语句的执行结果
- 箭头函数this指向声明时所在作用于下this的值(当前层的外层作用域的this值)
- 箭头函数不能作为构造函数实例化
- 不能使用arguments
//省略小括号和花括号
let fn3 = score => score * 20
//不能作为构造实例化对象
let Person = (name, age) => {
this.name = name;
this.age = age;
}
let me = new Person('xiao',30);
console.log(me); //错误
//this 指向
let school = {
name: '尚硅谷',
getName(){
let fn5 = () => {
console.log(this); //指向school
}
fn5();
}
};
箭头函数适合与this无关的回调。定时器、数组的方法回调
不适合与this有关的回调。事件回调，对象的方法
const arr = [1,6,9,10,12,17]; const result = arr.filter(item => item%2===0); console.log(result) //[6,10,12]
7 ES6允许给函数参数赋初始值
// 1.形参初始值，具有默认值的参数，一般为只要靠后（潜规则） function add(a,b,c=10) { return a+b+c; } console.log(add(1, 2, 3)) // 2.与解构赋值结合 //普通写法 // function connect(options) { // let host = options.host; // let username = options.username; // console.log(host); // console.log(username); // } //ES6与解构赋值结合写法 function connect({host,username}){ console.log(host); console.log(username); } connect({ host: 'localhost', username: 'root', })
8 react参数，用于获取函数的实参，用来代替arguments
// ES5获取实参的方式 function date() { console.log(arguments); //返回的是对象，伪数组 } date('dd','ff','gg') //ES6获取实参的方式 function date1(...args) { console.log(args) //filter some every map 返回的是数组 } date1('aa','ss','dd') //rest 参数必须要放在参数最后 function f(a,b,...args) { console.log(a); //1 console.log(b); //2 console.log(args); //[3,4,5,6] } f(1,2,3,4,5,6)
注意：rest 参数非常适合不定个数参数函数的场景
9 扩展运算符（...）。他好比rest参数的逆运算，将一个数组转化为逗号分隔的参数序列，对数组进行解包
// 扩展运算符（...）能将数组转换为逗号分隔的参数序列 const tfboys=['易烊千玺','王源','王俊凯']; //=> '易烊千玺','王源','王俊凯' function chunwan() { console.log(arguments); } chunwan(tfboys) //Arguments(1) chunwan(...tfboys) //Arguments(3) 将一个数组转换为三个参数序列
9.1 扩展运算符的应用
// 1.数组的组合 const kuaizi = ['王太利','肖央']; const fenghuang = ['曾毅','玲花'];
//ES5写法
const zuhe0 = kuaizi.concat(fenghuang);
//ES6写法 const zuhe = [...kuaizi,...fenghuang]; console.log(zuhe); //['王太利','肖央','曾毅','玲花'] // 2.数组的克隆 const sanzhihua = ['E','G','M']; const sanyecao = [...sanzhihua]; console.log(sanyecao); //['E','G','M'] // 3.将伪数组转换为真正的数组 const divs = document.querySelectorAll('div'); const divsArr = [...divs] console.log(divsArr); //['div','div','div']
10 Symbol
10.1 Symbol基本使用
ES6引入了一种新的原始数据类型Symbol，表示独一无二的值。他是JS语言的第七种数据类型，是一种类似于字符串的数据类型。
数据类型有：USONB（undefined、String、Symbol、Object、Null、Number、Boolean）
特点：
- Symbol值是唯一的，用了来解决命名冲突的问题
- Symbol值不能与其他数据进行运算（+ - * /、字符串的拼接、对比等）
- Symbol定义的对象属性不能使用for...in循环遍历，可以使用Reflect.ownkeys来获取对象的所有键名
// 创建Symbol let s = Symbol(); console.log(s,typeof s); //Symbol() "symbol" let s2 = Symbol('小明'); let s3 = Symbol('小明'); console.log(s2 === s3); //false，地址不同 //创建Symbol.for let s4 = Symbol.for('小芳') let s5 = Symbol.for('小芳') console.log(s4 === s5); //true
10.2 Symbol的作用是给对象添加独一无二的属性和方法
给对象添加Symbol类型的属性
1 let game = { 2 name: '俄罗斯方块' 3 } 4 let methods = { 5 up: Symbol(), 6 down: Symbol() 7 } 8 game[methods.up] = function () { 9 console.log('我可以改变形状'); 10 } 11 game[methods.down] = function () { 12 console.log('我可以快速下降'); 13 } 14 console.log(game); 15 16 let youxi = { 17 name: '狼人杀', 18 [Symbol('say')]: function () { 19 console.log('我可以说'); 20 }, 21 [Symbol('do')]: function () { 22 console.log('我可以做'); 23 } 24 } 25 console.log(youxi);
10.3 Symbol内置值（Symbol对象的属性）
Symbol.hasInstance 整体作为对象的属性存在
<script> class People{ static [Symbol.hasInstance](param) { console.log(param); console.log('我被用来检测了'); return false } } let o = {}; console.log(o instanceof People); const arr = [1,2,3]; const arr1 = [4,5,6]; arr1[Symbol.isConcatSpreadable] = false; //arr1不展开 console.log(arr.concat(arr1)); //[1, 2, 3, Array(3)] </script>
11 迭代器
遍历器（iterator）就是一种机制。它是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署Iterator接口，就可以完成遍历操作。
iterator接口就是对象里面的属性,属性的名字叫Symbol.iterator
- ES6创造了一种新的遍历命令for...of循环，Iterator接口主要供for...of消费
- 原生具备了Iterator接口的数据（可用for of遍历）
- Array
- Arguments
- Set
- Map
- String
- TypedArray
- NodeList
3.工作原理：
- 创建一个指针对象，指向当前数据结构的起始位置
- 第一次调用对象next方法，指针自动只想数据结构的第一个成员
- 接下来不断调用next方法，指针一直往后移动，直到指向最后一个成员
- 每调用next方法返回一个包含value和done属性的对象
const xiyouji = ['孙悟空','猪八戒','唐僧','沙僧'] for(e in xiyouji) { console.log(e); // 0 1 2 3 } for(v of xiyouji) { console.log(v); // 孙悟空 猪八戒 唐僧 沙僧 } // Iterator工作原理 let iterator = xiyouji[Symbol.iterator]() console.log(iterator); console.log(iterator.next()); console.log(iterator.next()); //{value: "孙悟空", done: false} console.log(iterator.next()); //{value: "唐僧", done: false} console.log(iterator.next()); //{value: "沙僧", done: false} console.log(iterator.next()); //{value: undefined, done: true}
需要自定义遍历数据的时候，要想到迭代器
//自定义遍历对象 const banji = { name: '终极一班', stus: ['小明','小黄','小亮'], [Symbol.iterator]() { let index = 0; let _this= this return { next(){ // console.log(this) // console.log(_this) if(index<_this.stus.length){ const result = {value: _this.stus[index],done: false} index++; return result; }else { return {value: _this.stus[index],done: true} } } } } } for(v of banji) { console.log(v); }
12.生成器
生成器是ES6提供的一种异步编程解决方案，语法行为与传统函数完全不同
代码说明：
- * 的位置没有限制
- 生成器函数返回的结果是迭代器对象，调用迭代器对象的next()方法可以得到yield语句后的值
- yield相当于函数的暂停标记，也可以认为是函数的分隔符，每调用一次next方法，执行一段代码
- next()方法可以传递实参，作为yield语句的返回值
//生成器函数实例 <script> function getUsers() { setTimeout(()=> { let data = '用户数据' interate.next(data) },1000) } function getOrders() { setTimeout(()=> { let data = '订单数据' interate.next(data) },1000) } function getGoods() { setTimeout(()=> { let data = '商品数据' interate.next(data) },1000) } function * fen() { let users = yield getUsers() console.log(users); let orders = yield getOrders() console.log(orders); let goods = yield getGoods() console.log(goods); } let interate = fen() interate.next() </script>
13. Promise
Promise是ES6引入的异步编程的新解决方案。语法上Promise是一个构造函数，用来封装异步操作并可以获取其成功和失败的结果。
13.1. Promise基本使用
//实例化Promise对象 const p =new Promise((resolve,reject)=> { setTimeout(()=> { // console.log('数据获取成功'); // let data = '数据获取成功' // resolve(data) let err = '数据获取失败' reject(err) },1000) }) p.then((value)=> { console.log(value); },(reason)=> { console.error(reason); })
13.2 Promise封装读取文件
// 引入fs模块 const fs = require('fs'); // 2.调用方法读取文件 // fs.readFile('./resources/为学.md',(err, data)=> { // //如果失败,则抛出错误 // if(err) throw err; // //如果没有出错,则输出内容 // console.log(data.toString()); // }) //3.使用Promise封装 const p =new Promise((resolve, reject) => { fs.readFile('./resources/为学.md',(err, data)=> { //如果失败,则抛出错误 if(err) reject(err); //如果没有出错,则输出内容 resolve(data); }) }) p.then(value => { console.log(value.toString()); },reason => { console.log(reason); })
13.3 Promise的封装AJAX
const p = new Promise((resolve, reject) => { //1.创建对象 const xhr = new XMLHttpRequest(); //2.初始化 xhr.open("GET","https://api.apiopen.top/getJ") //3.发送 xhr.send(); //4.绑定事件，处理响应结果 xhr.onreadystatechange = function () { if(xhr.readyState === 4) { //判断响应码状态 200-299 if(xhr.status >=200 && xhr.status < 300) { //表示成功 resolve(xhr.response) } else { //如果失败 reject(xhr.status) } } } }) p.then(value => { console.log(value); },reason => { console.log(reason); })
13.4 Promise的then方法
const p = new Promise((resolve, reject) => { setTimeout(()=> { resolve('用户数据') // reject('出错啦') },1000) }) //调用then方法 then方法返回的结果是Promise对象，对象状态由回调函数的执行结果决定 // 1.如果回调函数中返回是 非 Promise类型的属性，状态为成功，返回值为对象的成功的值 const result = p.then(value => { console.log(value); //1.非 Promise 值 // return 'iloveyou' //2.Promise 值 // return new Promise((resolve, reject) => { // // resolve('ok') // reject('error') // }) //3.抛出错误 throw new Error('出错啦') },reason => { console.warn(reason) }) console.log(result);
13.5 Promise的catch方法
const p =new Promise((resolve, reject) => { setTimeout(()=>{ reject('出错啦') },1000) }) p.then(value => {}) p.catch(reason => { console.log(reason); })
13.6 Promise实践：读取多个文件
//引入fs模块 const fs = require('fs') // fs.readFile('./resources/为学.md',(err,data1) => { // fs.readFile('./resources/插秧诗.md',(err,data2) => { // fs.readFile('./resources/观书有感.md',(err,data3) => { // let resullt = data1 + '\r\n' +data2 + '\r\n' + data3; // console.log(resullt); // }) // }) // }) //使用Promise实现 new Promise((resolve, reject) => { fs.readFile('./resources/为学.md',(err,data) =>{ resolve(data) }) }).then(value => { return new Promise((resolve, reject) => { fs.readFile('./resources/插秧诗.md',(err,data) => { resolve([value,data]) }) }) }).then(value => { return new Promise((resolve, reject) => { fs.readFile('./resources/为学.md',(err,data)=>{ value.push(data) resolve(value) }) }) }).then(value => { console.log(value.join('\r\n')); })
浙公网安备 33010602011771号