ES6新增语法(复习)
1.const声明常量以及特点
-
一定要赋初始值
- const A;
-
一般常量使用大写(潜规则)
- const a = 100;
-
常量的值不能修改
- SCHOOL = ‘ATGUIGU’
-
块级作用域
-
{
const PLAYER = ‘UZI’;
}
console.log(PLAYER);
-
-
对于数组和对象的元素修改，不算做对常量的修改，不会报错
- const TEAM = [‘UZI’,‘MLXG’,‘Ming’,‘Letme’];
- TEAM.push(‘Meiko’);
2.ES6-变量的解构赋值
- ES6允许按照一定模式从数组和对象中提取值，对变量进行赋值
2.1-数组的结构
const F4 = ['小沈阳','刘能','赵四','宋小宝'];
let [xiao,liu,zhao,song] = F4;
打印 xiao,liu,zhao,song 分别一一对应
2.2-对象的解构
const zhao = {
name:'赵本山',
age:'不详',
xiaopin:function(){
console.log("我可以演小品"),
}
};
let {name,age,xiaopin} = zhao;
console.log(name),
console.log(age),
console.log(xiaopin),
let {xiaopin} = zhao;
xiaopin();
3.ES6-模板字符串
3.1 声明
let str = `我是一个字符串哦`;
console.log(str,typeof str);
3.2 内容中可以直接出现换行符
let str = '<ul>
<li>沈腾</li>
<li>玛丽</li>
<li>魏翔</li>
</ul>'
// 以上报错，不能在单引号中出现换行
let str = `<ul>
<li>沈腾</li>
<li>玛丽</li>
<li>魏翔</li>
</ul>`
3.3 变量拼接
let lovest = '魏翔';
// let out = 'xxx是我心目中最搞笑的演员'
let out = `${lovest}是我心目中最搞笑的演员`
4.ES6-对象的简化写法
ES6允许在大括号里面，直接写入变量和函数，作为对象的属性和方法
let name = '尚硅谷';
let change = function(){
console.log('我们可以改变你！');
}
const school = {
name.
change,
// improve function(){
// console.log('');
// }
improve(){
console.log('我们可以提高你的技能！');
}
// 省略function()
}
5.ES6-箭头函数以及声明特点
ES6允许使用[箭头]=>定义函数
// let fn = function(){
// }
let fn = (a,b) => {
return a + b;
}
// 调用函数
let result = fn(1,2);
console.log('result');
5.1 this是静态的
- this始终指向函数声明时所在作用域下的this的值
function getName(){
console.log('this.name');
}
let getName2 =() => {
console.log('this.name');
}
// 设置window对象的name属性
window.name = '尚硅谷';
const school ={
name:"ATGUIGU"
}
// 直接调用
getName()
getName2()
// call 方法调用
getName.call(school); --> ATGUIGU
getName2.call(school); --> 尚硅谷
5.2 不能作为构造实例化对象
let Person = (name,age) => {
this.name = name;
this.age = age;
}
let me = new Person('xiao',30);
console.log(me); --> Person is not a constructor
5.3 不能使用arguments变量
let fn = () => {
console.log(arguments);
}
fn(1,2,3) --> arguments is not defined
5.4 箭头函数的简写
// 1.省略小括号，当形参有且仅有一个的时候
let add = (n) => { --> let add = n => {
retutn n + n;
}
console.log(add(9));
// 2.省略花括号，当代码体只有一条一句的时候,此时return必须省略
// 语句的执行结果就是函数的返回值
let pow = (n) =>{
return n * n;
}
-->
let pow n => n * n;
console.log(pow(9));
6.ES6-函数参数的默认值设置
6.1形参初始值
-
具有默认值的参数，一般位置要靠后(潜规则)
- 如果c的值没有传递，只有一个形参，那么打印的结果就是NaN
-
function add (a,b,c=10){ return = a + b + c; } let result = add(1,2); console.log(result) --> 13
6.2与解构赋值结合
function connect({host="127.0.0.1",username,password,port}){
console.log(host),
// --> atguigu.com 如果 connect有值，就用下面的，如果没有，就用上面的
console.log(username),
// --> root
console.log(password),
// --> root
console.log(port),
// --> 3306
}
connect({
host:'atguigu.com',
username:'root',
password:'root',
port:3306
})
7.rest参数
7.1 rest参数
function date(...args){
console.log(args); // --> 可以使用数组方法 filter some every map
}
date('Xiaohu','Ming','Cryin')
7.2 rest参数必须要放到参数最后
function fn(a,b,...args){
console.log(a)
// --> 1
console.log(b)
// --> 2
console.log(args)
// --> [3,4,5,6]
}
fn(1,2,3,4,5,6)
8.拓展运算符
8.1介绍
[…]扩展运算符能将[数组]转换为逗号分隔的[参数序列]
声明一个数组…
const tfboys = ['易烊千玺','王源','王俊凯'];
// => '易烊千玺','王源','王俊凯'
声明一个函数
function chunwan(){
console.log(arguments);
}
chunwan(...tfboys);
// chunwan('易烊千玺','王源','王俊凯')
8.2应用
1.数组的合并
const kuaizi = ['王太利','肖央'];
const fenghuang = ['曾毅','玲花'];
// const zuixuanxiaopingguo = kuaizi.concat(fenghuang); --> ES5
const zuixunxiaopingguo = [...kuaizi,...fenghuang];
console.log(zuixunxiaopingguo)
2.数组的克隆
const sanzhihua = ['E','G','M'];
const sanyecao = [...sanzhihua]; // ['E','G','M']
const.log(sanyecao);
3.将伪数组转为真正的数组
const divs = document.querySelectorAll('div');
const divArr = [...divs];
console.log(divArr); // arguments
9.Symbol
9.1-Symbol基本使用
10.迭代器
是一种接口，为各种不同的数据结构提供统一的访问机制
10.1-自定义遍历数据
//声明一个对象
const YM = {
name:"YM",
stus:[
'xiaoming',
'ning',
'tian',
'knight'
],
[Symbol.iterator](){
// 索引变量
let index = 0;
let _this = this;
return {
next:function(){
if(index < _this.stus.length){
return{value:_this.stus[index],done:false};
//下标自增
index++
//返回结果
return result;
}else{
return{value:undefined,done:true};
}
}
};
}
}
//遍历这个对象
for(let v of YM){
console.log(v);
// --> YM is not iterable (YM这个不能迭代)
}
11.生成器
生成器其实就是一个特殊的函数
异步编程 --> 纯回调函数
function * gen(){
console.log("hello generator")
}
let iterator = gen();
iterator.next();
通过next控制向下遍历的内容
11.1-生成器函数参数
function * gen(arg){
console.log(arg);
let one = yield 111;
console.log(one);
let two = yield 222;
console.log(two);
let two = yield 333;
console.log(three);
}
//执行器获取迭代器对象
let iterator = gen('AAA');
console.log(iterator.next());
//next方法可以传入实参
console.log(iterator.next('BBB'));
console.log(iterator.next('CCC'));
console.log(iterator.next('DDD'));
11.2-实例一
- 1s后控制台输出111 2s后输出222 3s后输出333
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();
},3000)
}
function * gen(){
yield one();
yield two();
yield three();
}
11.3-实例二
- 模拟获取 用户数据 订单数据 商品数据
function getUsers(){
setTimeout(() => {
let data = '用户数据';
// 调用next方法，并且将数据传入
iterator.next(data);
},1000)
}
function getOrders(){
setTimeout(() => {
let data = '订单数据';
iterator.next(data);
},1000)
}
function getGoods(){
setTimeout(() => {
let data = '商品数据';
iterator.next(data);
},1000)
}
function * gen(){
let users = yield getUsers();
let orders = yield getOrders();
let goods yield getGoods();
}
// 调用生成器函数
let iterator = gen();
iterator.next();
–> 每个数据间隔一秒 打印出 用户数据 订单数据 商品数据
12.Pormise
Promise是ES6引入的异步编程的解决方案
语法上Promise是一个构造函数，用来封装异步操作并获取成功/失败的结果
// 实例化Promise对象
const p = new Promise(function(resolve,reject){
setTimesout(function)(){
let data = '数据库中的用户数据';
resolve(data); --> 成功
let err = '数据读取失败';
reject(err); --> 失败
},1000);
});
// 调用promise对象的then方法
p.then(function(value){
console.log(value);
},function(reason){
console.error(reason);
})
12.1-Promise读取文件
const p = new Promise(function(resolve,reject){
fs.readFile("././路径文件.xx",(err,data) => {
// 如果失败
if(err) reject(err);
// 如果成功
resolve(data);
})
})
p.then(function(value){
console.log(value.toString());
},function(reason){
console.log("读取失败!");
})
12.2-Promise封装AJAX
// 1.创建对象
const shr = new XMLHttpRequest();
const p = new Promise((resolve,reject) => {
// 2.初始化
xhr.open("GET"，"https://api.apiopen.top/getJoke");
// 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.response);
}
}
}
})
// 指定回调
p.then(function(value){
console.log(value);
},function(reason){
console.error(reason);
})
13.set
let arr = [1,2,3,4,5,6,7,8,9,8,7,6,5,4,3];
-
数组去重
-
let result = [...new Set(arr)]; console.log(result); -
交集
-
let arr2 = [4,5,6,8,9]; let result = [...new Set(arr)].filter(item => { let s2 = new Set(arr2); if(s2.has(item)){ return true; }else{ return false; } }); let result = [...new Set(arr)].filter(item => new Set(arr2).has(item)); console.log(result); -
并集
-
let arr2 = [4,5,6,8,9]; let union = [new Set([...arr, ...arr2])]; console.log(union) -
差集
-
let result = [...new Set(arr)].filter(item => !(new Set(arr2).has(item)));
14.Map
<script>
//声明 Map
let m = new Map();
//添加元素
m.set('name', '尚硅谷');
m.set('change', function () {
console.log("我们可以改变你!!");
});
let key = {
school: 'ATGUIGU'
};
m.set(key, ['北京', '上海', '深圳']);
//size
console.log(m.size);
//删除
m.delete('name');
//获取
console.log(m.get('change'));
console.log(m.get(key));
//清空
m.clear();
//遍历
for (let v of m) {
console.log(v);
}
console.log(m);
</script>
ES8新特性(复习)
1.async函数
- async函数的返回值为promise对象，
- promise对象的结果由async函数执行的返回值决定
async function fn(){
// 返回一个字符串
return '尚硅谷';
// 返回的结果不是一个Promise类型的对象，返回的结果就是成功的Promise对象
// return;
// 抛出错误,返回的结果是一个失败的Promise
throw new Error('出错啦！');
// 返回的结果如果是一个Promise对象
return new Promise(resolve,reject) => {
// resolve('成功的数据');
reject('失败的数据');
}
}
// 返回的结果是一个Promise类型的对象，返回的状态由函数中的return决定
const result = fn();
console.log(result)
2.await表达式
- await必须写在async函数中
- await右侧表达式一般为promise对象
- await返回的是promise成功的值
- await的promise失败了，就会抛出一场，用try…catch…来捕获失败
// 创建 promise对象
const P = new Promise(resolve,reject) => {
resolve("成功的值");
}
async function main(){
let result = await P;
//
console.log(result);
}
main();
2.1 async和await结合
// 引入fs模块
const fs = require("fs");
// 读取...
function readWeiXue(){
return new Promise((resolve,reject) => {
fs.readFile("././路径文件.xx",(err,data) => {
// 如果失败
if(err) reject(err);
// 如果成功
resolve(data)
})
})
}
// 声明一个async函数
async function main(){
// 获取xx内容
let weixue = await readWeiXue();
console.log(weixue.toString());
}
main();
2.2 async与await封装Ajax请求
// 发送Ajax请求，返回的结果是Promise对象
function sendAJAX(url){
return new Promise((resolve,reject) => {
// 1.创建对象
const x = new XMLHttpRequest();
// 2.初始化
x.open('GET',url);
// 3.发送
x.send();
// 4.事件绑定
x.onreadystatechange = function(){
if(x.readyState === 4){
if(x.status >= 200 && x.status <300){
// 成功
resolve(x.response);
}else{
// 失败
reject(x.status);
}
}
}
})
}
// promise then方法的测试
sendAJAX("https://接口地址").then(value => {
console.log(value);
},reason =>{})
// async 与 await测试
async function main(){
// 发送Ajax请求
let result = await sendAJAX("https://接口地址");
console.log(result);
}
3.ES8对象方法的拓展
//声明对象
const school = {
name:"尚硅谷",
cities:['北京','上海','深圳'],
xueke: ['前端','Java','大数据','运维']
};
// 获取对象所有的键
console.log(Object.keys(school));
// 获取对象所有的值
console.log(Object.values(school));
entries
console.log(Object.entries(school));
// 创建 Map
const m = new Map(Object.entries(school));
console.log(m.get('cities'));
// 对象属性的描述对象
console.log(Object.getOwnPropertyDescriptors(school));
const obj = Object.create(null, {
name: {
//设置值
value: '尚硅谷',
//属性特性
writable: true,
configurable: true,
enumerable: true
}
});
613
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
