ES6学习笔记

已于 2023-03-22 18:09:15 修改
阅读量74 收藏
点赞数
分类专栏： ES6 文章标签： es6 javascript 前端
于 2023-03-14 23:09:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52225233/article/details/129345456
版权
本文详细介绍了ES6中的关键特性，包括let和const变量声明、模板字符串的使用、箭头函数的特性和限制、Promise解决异步问题的方式、迭代器和生成器的概念及其应用，以及Set和Map数据结构的操作。此外，还探讨了类和静态属性、Number的拓展以及对象方法的扩展，为理解和使用ES6提供了全面的指南。
摘要由CSDN通过智能技术生成
1.let变量

不能重复说明、块级作用域、不存在变量提升（先定义后使用）、不影响作用域链

2.const常量

赋初值、可以对数组和对象进行修改

3.模板字符串

（1）和’'、""的作用一样都可以表示字符串
（2）可以在定义中换行

<script>
        let str = `1
        2
        3`;
    </script>

（3）变量拼接

let a = `liuyang`;
let b = `${a}is best`;
4.箭头函数

（1）call方法可以强制改变this指向的对象
（2）箭头函数中this始终指向申明时所在的定义域
（3）不能作为构造实例化对象，下面代码会报错

let person = (a,b) =>{
	this.a = a;
	this.b = b;
};
let me = new person('name','pwd');

（4）箭头函数不能使用arguments参数
（5）箭头函数不适合与this有关的调用

5.rest参数

参数必须放到末尾

functioin fn(a,b,...args){
	console.log(a);
	console.log(b);
	console.log(args);
};
fn(1,2,3,4,5,6);
6.扩展运算符 …
const fn = [a,b,c];
function m(){
	conosole.log(arguments);
};
//将数组参数展开成参数序列
m(...fn);
7. 迭代器
const student = ['mary','lili','bob'];
//使用for...of 遍历数组 输出value
for(let v of student){
	console.log(v);
}// 'mary','lili','bob'
//使用for...in 遍历数组 输出key
for(let v in student){
	console.log(v);
}//0,1,2

调用next()方法返回value和done,当done为true时遍历结束

const student = ['mary','lili','bob'];
let iterator = student[Symbol.iterator]();
console.log(iterator.next());

自动遍历对象

//申明一个对象
const banji = {
	name:'jingyingban',
	status:[
		'mary',
		'bob',
		'lili'
	],
	[Symbol.iterator](){
		let index = 0;
		let _this = this;
		return{
			next:function(){
				if(index<this.status.length){
					const result = {value:this.status[index],done:false};
					index++;
					return result;
				}
				else{
					return {value:undefined,done:true};
				}
			}
		}
	};
	for(let v of banji){console.log(v);}
}
8.生成器

（1）生成器是 一个特殊的函数，可以异步编程，是纯回调函数

function * gen(){
	console.log('hello generator');
}
let iterator = gen();
//输出的是一个迭代器对象
//console.log(iterator);
//可以使用next函数输出内容'hello generator'
iterator.next();

（2）yield关键字

  • yield是ES6的新关键字，使生成器函数执行暂停，yield关键字后面的表达式的值返回给生成器的调用者。
  • 它可以被认为是一个基于生成器的版本的return关键字。它实际返回一个IteratorResult（迭代器）对象，它有两个属性，value和done，分别代表返回值和是否完成
  • yield无法单独工作，需要配合generator(生成器)的其他函数，如next，懒汉式操作，展现强大的主动控制特性。
  • yield并不能直接生产值，而是产生一个等待输出的函数
    在这里插入图片描述
9.promise
  • promise是ES6新引入的异步编程解决方案，它是一个构造函数，可以封装异步操作并获取成功或失败的结果
    （1）Promise构造函数：Promise(excutor){}
  • 案例一：使用promise延迟响应
<script>
        //实例化Promise对象
        const p = new Promise(function(resolve,reject){
            setTimeout(() => {
                // let data = '数据库中的用户数据';
                // resolve(data);
                let err = '数据读取失败';
                reject(err);
            }, 1000);
        });
        //调用Promise对象的then方法
        p.then(function(value){
            console.log(value);
        },function(reason){
            console.error(reason);
        })
    </script>
  • 案例二：使用promise读取文件
//1.引入fs模块
//const fs = require('fs');
//2.调用方法读取文件
// fs.readFile('./test.txt',(err,data)=>{
//     if(err) throw err;
//     console.log(data.toString());
// });
//3.使用promise封装
const p = new Promise(function(resolve,reject){
    fs.readFile('./test.txt',(err,data)=>{
        if(err) reject(err);
        resolve(data);
    });
});

p.then(function(value){
    console.log(value.toString());
},function(reason){
    console.log('读取失败');
})
  • 案例三：使用promise封装AJAX请求
const p = new Promise((resolve,reject) => {
            const xhr = new XMLHttpRequest();
            xhr.open('GET','http://127.0.0.1/jaon-server');
            xhr.send();
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4){
                    if(xhr.status >=200 && xhr.status < 300){
                        resolve(xhr.response);
                    }
                    else{
                        reject(xhr.status);
                    }
                }
            }
        });
        p.then(function(value){console.log(value)},function(reason){console.log(reason)})
  • 案例四：promise读取多个文件
const fs = require('fs');
const p = new Promise((resolve,reject)=>{
	fs.readFile('./text1.txt',(err,data)=>{
		resolve(data);
	});
});
p.then(value=>{
	return new Promise((resolve,reject)=>{
		fs.readFile('./text2.txt',(err,data)=>{
			resolve([value,data]);
		});
	})
}).then(value=>{
	return new Promise((resolve,reject)=>{
		fs.readFile('./text3.txt',(err,data)=>{
			value.push(data);
			resolve(value);
		});
	})
}).then(value=>{
	console.log(value);
})

（2）Promise.prototype.then方法

const p = new Promise((resolve,reject)=>{
            setTimeout(()=>{
                //resolve('用户数据');
                reject('出错了');
            },1000);
        });
        //调用then方法返回结果是Promise对象，对象状态由回调函数执行结果决定
        //如果回调函数中返回结果是非promise类型的属性，状态为成功，返回值为对象的成功状态
        p.then(value=>{
            console.log(value);
            //1.非promise类型的值
            //rerutn 111;
            //2.是promise类型的值
            //return new Promise((resolve,reject)=>{
            //     resolve('ok');
            //     reject('error');
            // });
            //3.抛出结果
            //throw '出错了';
        },reason=>{
            console.err(reason);
        });
        //链式调用
        p.then(value=>{}).then(value=>{}).then(value=>{});

（3）Promise.prototype.catch方法

const p = new Promise((resolve,reject)=>{
	setTimeout(()=>{
		reject('出错了');
	},1000);
});
p.catch(function(reason){
	console.warn(reason);
});
10.Set集合
  • size 返回集合的元素个数
  • add 增加一个元素，返回当前集合
  • delete 删除元素，返回boolean值
  • has 检测集合中是否包含某个元素，返回booolean值
  • clear 清空集合
  • 通过filter筛选器实现数组交集和差集
let s1 = new Set();
let s2 = new Set(['1','2','3']);
s2.add('4');//Set{'1','2','3','4'}
s2.delete('1');//true
s2.has('5');//false
s2.clear();//Set{}
let arr = [1,2,3,4,4,6,3,2,1];
//数组去重
let result = [...new Set(arr)];
//交集
let arr2 =[4,5,6,5,4];
let result = [...new Set(arr)].filter(item => {
	let a1 =  new Set(arr2);//[4,5,6]
	if(a1.has(item)){
		return true;
	}else{
		return false;
	}
})
//交集简化写法
let result = [...new Set(arr)].filter(item=>new Set(arr2).has(item));
//并集
let union = [...new Set([...arr,...arr2])];
//差集
let diff = [...new Set(arr)].filter(item=>!(new Set(arrr2).has(item))); //arr-arr2
11.Map
  • Map类似于对象，是键值对的集合，键的范围不限于字符串，各种类型都能当作键，同时map也实现了iterator接口
	let m = new Map();
	m.set('name','liuyang');
	m.set('change',function(){console.log(111);});
	let key = {school:'zndx'};
	m.set(key,['北部','新校','南校']);
	//m.size获取map大小
	//m.delete('name');删除特定元素
	//m.get('change');通过键获取对应的值
	//m.clear();清空map
12.类Class

（1）static属性属于类但是并不属于实例

class Phone{
	static name = 'nokia';
	static change(){console.log('百年世界');}
}
let nokia = new Phone();
console.log(nokia.name);//undefined
console.log(Phone.name);//'nokia'

（2） JS中的prototype,__proto__与constructor
（3）类的继承

class Phone{
	constructor(brand,price){
		this.brand = brand;
		this.price = price;
	}
	call(){
		console.log('打电话');
	}
}
class SmartPhone extends Phone{
	constructor(brand,price,color,size){
		super(brand,price);
		this.color = color;
		this.size = size;
	}
	photo(){
		console.log('拍照');
	}
	playgame()}{
		console.log('玩手机');
	}
}
const xiaomi = new SmartPhone('xiaomi',799,'blank','4.7inch');
xiaomi.call();
xiaomi.photo();
xiaomi.playgame();

（4）子类对父类方法的重写：在子类中对同名方法重新声明
（5）getter和setter的设置

class Phone{
	//对某个属性进行获取时
	get price(){
		console.log('getter');
		return 'a';	//'a'
	}
	//对某个属性进行设置时,必须设置参数
	set price(val){
		console.log('setter');	
		return 'b';//
	}
}
let s = new Phone();
s.price = 'free';
12.ES6的数值拓展

（1）Number.EPSILON是javascript所能表示的最小精度

function equal(a,b){
	if(Math.abs(a-b)<Number.EPSILON)	return true;
	else return false;
}

（2）引入二进制和八进制

let a = 0b1010;//二进制	10
let b = 0o777;//八进制	511
let c = 0xff;//十六进制	255

（3）检测是否是有限数

Number.isFinite(100);//true
Number.isFinite(100/0);//false
Number.isFinite(Infinity);//false

（4）Number.parseInt和Number.parseFloat,转换时会自动截取

Number.parseInt('12346整数');//12346
Number.parseFloat('3.1313小数');//3.1313

（5）Number.isInteger 判断是否为整数
（6）Math.trunc 抹除数字的小数部分
（6）Math.sign 判断数字是正数、负数还是0，返回1，0，-1

13.ES6的对象方法拓展

（1）Object.is 判断两个值是否完全相等
（2）Object.assign 对象的合并

const config1 = {
	host:'localhost',
	port:3386;,
	name:'root'
};
const config2 = {
	host:'http://baidu.com',
	port:8000;,
	name:'user1'
};
const p = Object.assign(config1,config2);//后面的对象将前面的覆盖，有则覆盖，无则添加

（3）Object.setPrototypeOf（设置原型对象）和Object.getprototypeOf

const school = {name:'zndx'}
const xiaoqu = {'北部','新校','南校'}
Object.setPrototypeOf(school,xiaoqu);
console.log(Object.getprototypeOf(school));//{xiaoqu:Array(3)}
努力的树袋熊
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值