本周主要是对之前知识进行复习,比如js高级和Es6之类的,整理了一下笔记,下面是Es6的一些知识点。
let
声明变量不可重复声明
块级作用域
不存在变量提升
不影响作用域链
const声明常量
一定要赋初始值
一般使用大写
常量的值不可修改
块级作用域
对数组和对象的修改不算作对常量的修改
结构赋值
es6允许按照一定的模式从数组和对象中提取值,对变量进行赋值
数组的结构赋值:
const xingshi=['赵','钱','孙','李'];
let ['第一','第二','第三','第四']=xingshi;
这样第一就代表的是赵,第二代表的是钱,以此类推。
对象的解构赋值:
const zhu={
name:zhuziqing,
age:'不祥',
work:function(){
console.log('我有好多文章');
}
};
let {name,age,work}=zhu;
//这样就可以直接调用函数
work();
模板字符串``
与单引号和双引号相比内容可以直接出现换行符
变量拼接:
let work='《背影》';
let out=`我的作品的名字叫${work}`;
箭头函数:
//之前的
let fn=function(a,b){
return a+b
}
fn(1,2);
//箭头函数
let fn=(a,b)=>{
return a+b
}
fn(1,2);
//当参数只有一个时
let add=n=>{
return n+n;
}
//当代码体只有一句时,可省略花括号,此时return也必须省略
let add=n=>n+n;
注意:
箭头函数中,this是静态的,this始终指向函数声明时所在作用域下的this的值不能作为构造函数去实例化对象,如果你这样写:
let Person=(name,age)=>{
this.name=name;
this.age=age;
}
let me=new Person('姓名',18);
这样就会报错
不能使用arguments(接受实参)
es6允许给函数参数赋值初始值:
1、形参初始值,具有默认值的参数,一般位置靠后
function add(a,b,3){
return a+b+c;
}
let res=add(1,2);
2、与结构赋值结合
function fn(name,age,home){
console.log(name);
console.log(age);
console.log(home);
}
fn({
name:'左左',
age:18,
home:'河南'
})
//赋初始值
function fn('姓名',0,home){
console.log(name);
console.log(age);
console.log(home);
}
fn({
name:'左左',
age:18,
home:'河南'
})
rest参数:
用于获取函数的实参(rest参数放在参数最后面)
function data(a,b,...args){
console.log(a)
console.log(b)
console.log(args);
}
data(1,2,3,4,5);
这样就把1赋值给了a,2赋值给了b,[3,4,5]赋值给了args
...扩展运算符(将数组转换为以逗号分隔的参数序列):
//声明一个数组
const month=['一月','二月','三月'];
function getDate(){
console.log(arguments);
}
getDate(...month);
getDate(month);
//可自行比较上面两行输出的区别
Symbol:
是一种新的数据类型
js数据类型:undefined、string、symbol、object、null、number、boolean
创建Symbol
let s=Symbol();
let s2=Symbol('123');
let s3=Symbol('123');
console.log(s2===s3)//false
let s4=Symbol.for('123')
let s5=Symbol.for('123')
console.log(s4===s5)//true
注意:
Symbol类型的数据不能与其他数据运算和对比
let game={
}
let methods={
up:Symbol(),
down:Symbol()
}
game[method.up]=function(){
console.log('上升')
}
game[method.down]=function(){
console.log('下降')
}
//这样可以添加方法并且不影响对象中原有的方法
//或者
let game2={
name:'123',
[Symbol('say')]:function(){
copnsole.log('i can say');
},
[Symbol('work')]:function(){
copnsole.log('i can work');
}
}
迭代器:
为不同的数据结构提供统一的访问机制
for...in遍历的是键名,for...of遍历的是键值
生成器:
生成器函数是es6提供的异步编程的方案
function * gen(){
console.log('我是生成器');
}
let iterator=gen();
console.log(iterator);
//返回的是迭代器对象
iterayor.next();
//这样就可以打印'我是生成器'了
生成器函数中可以有yield
function *gen(){
console.log(111);
yield '2';
console.log(222);
yield '3';
console.log(333);
yield '4';
console.log(444);
}
let iterator=gen();
iterayor.next();//111
iterayor.next();//111 222
iterayor.next();//111 222 333
iterayor.next();//111 222 333 444
//如果这样写
for(let v of gen()){
console.log(v)
}
//返回的是yield后面的内容
生成器函数的参数传递:
function *gen(arg){
console.log(arg);//AAA
let one=yield '2';
console.log(one);//BBB
let two=yield '3';
console.log(two);//CCC
let three=yield '4';
console.log(three);//DDD
}
let iterator=gen('AAA');
console.log(iterator.next());
console.log(iterator.next('BBB'));//next里面的内容作为第一个yield返回结果
console.log(iterator.next('CCC'));//next里面的内容作为第二个yield返回结果
console.log(iterator.next('DDD'));//next里面的内容作为第三个yield返回结果
Promise(主要应用于异步请求,解决回调地狱问题)
promise对象有三种状态即:pending,resolved,rejected
状态一旦确定不再改变
then方法返回结果是Promise对象,对象状态由回调函数执行结果决定
1、如果返回的不是Promise类型的,那么状态是成功
2、如果是Promise类型的,则返回状态取决于返回的Promise对象的状态
3、抛出错误时状态是失败的
Es6集合介绍与API
Set
//声明一个Set
let s=new Set();
let s2=new Set(['喜羊羊','美羊羊','懒羊羊','沸羊羊']);//set里面可以放一个可迭代数据,如数组
//元素的个数
console.log(s2.size);
//添加元素
s2.add('灰太狼');
//删除元素
s2.delete('灰太狼');
//检测是否存在某个元素
console.log(s2.has('喜羊羊'));//true
//清空
s2.clear();
//可以使用for...of遍历
for(let v if s2){
console.log(v);
}
Map(键值对集合,key的类型不限):
//声明Map
let m=new Map();
//添加元素
m.set('name','喜羊羊');
m.set('smart',function(){
console.log('我很聪明');
})
let key={
name:'place'
}
m.set(key,['北京','上海','浙江','江苏','河南']);
//长度
console.log(s.size);
//删除
m.delete('name');
//获取
console.log(m.get('smart'));
console.log(m.get(key));
//清空
m.clear();
//遍历
for(let v of m){
console.log(v);
}
class
class Phone{
//constructor是固定名称,不可改变
constructor(brand,price){
this.brand=brand;
this.price=price;
}
call(){
console.log('I can');
}
}
let mi=new Phone('米',2000);
console.log(mi);
注意:静态属性(属于类而不属于实例对象):
class Phone{
static name='手机';
static buy(){
console.log('I can');
}
}
let ph=new Phone();
console.log(Phone.name)//手机
console.log(ph.name)//undefined
继承
class Phone{
constructor(brand,price){
this.brand=brand;
this.price=price;
}
call(){
console.log('我可以打电话');
}
}
class smartPhone extends Phone{
constructor(brand,price,color){
super(brand,price);
this.color=color;
}
game(){
console.log('I can play game');
}
//重写
call(){
console.log('我可以打电话');
}
}
const mi=new SmartPhone('mi',2000,'蓝色');
mi.game();
mi.call();//调用的是子类的call方法,无法调用父类的call方法
console.log(mi);
get和set:
class Phone{
get Price(){
console.log('价格被读取了');
return 'read';
}
//必须接收一个参数
set price(change){
console.log('价格被修改了');
}
}
//实例化对象
let s=new Phone();
console.log(s.price)//输出结果为返回的内容
s.price='free';
Es6数值的扩展
Number.EPSILON是js表示的最小精度
console.log(0.1+0.2===0.3)//false
function equal(a,b){
if(Math.abs(a-b)<Number.EPSILON){
return true;
}else{
return false;
}
}
console.log(equal(0.1+0.2,0.3));//true
二进制 0b开头
八进制0o开头
十六进制0x开头
Number.isFinite检测一个数值是否是有限数
Number.isNaN检测一个数值是否为NaN
Number.parseInt Number.parseFloat字符串转换为整数
Number.isInteger判断一个数是否为整数
Math.trunc将数字的小数部分抹掉
Math.sign判断一个数到底值正数、负数还是0
对象方法的扩展
1、Object.is判读两个值是否完全相等(这里需要注意NaN)
console.log(Object.is(120,120))//true
console.log(Object.is(121,120))//false
//和===很像,但也不太一样,例如:
console.log(Object.is(NaN,NaN))//true
console.log(NaN===NaN)//false
2、Objsct.assign对象的合并
const obj1={
name:'名字',
age:18,
home:'河南',
sex:'女'
}
const obj2={
name:'yi',
age:20,
home:'山东'
}
console.log(Object.assign(obj1,obj2))
//obj2会把与obj1重复的部分覆盖掉
3、Object.setPrototypeOf设置原型对象
Object.getPrototypeOf获取原型对象
const palce={
name:'河南'
}
const home={
we:['新乡','郑州','许昌']
}
Object.setPrototypeOf(place,home);
console.log(school);
console.log(Object.getPrototypeOf(place))
Es6模块化语法:
模块功能主要有两个命令构成:export、import
export命令用于规定模块的对外接口
import命令用于输入其他模块提供的功能
Es7新特性:
includes(判断元素是否存在)(indexOf也可以判断,存在返回1,不存在返回-1)
const arr=['喜羊羊','美羊羊','懒羊羊','沸羊羊'];
console.log(arr.includes('喜羊羊'))//true
console.log(arr.includes('暖羊羊'))//false
**
console.log(2**10);//等同于Math.pow(2,10);
Es8新特性
async函数
返回的是一个Promise对象
async function fn(){
return "我是返回内容";
//如果这里不是一个Promise类型的对象,则返回的是一个成功状态的Promise对象
//如果抛出错误,则返回的是一个失败状态的Promise对象
//如果返回的结果是一个Promise类型的对象,返回的Promise的状态取决于改Promise对象的状态
}
let res=fn();
console.log(res)
await表达式
await必须写在async函数中(处理异步操作)
await右侧的表达式一般为promise对象
await返回的是promise成功的值
await的promise失败了,就会抛出异常,需要通过try...catch捕获处理
const p=new Promise((resolve,reject)=>{
reject('失败了');
})
async function main(){
try{
let result=await p;
console.log(result);
} catch(e){
console.log(e);
}
}
Es9扩展运算符和rest参数(Es6是针对数组的,这里是对于对象的)
const one={
n1:'喜羊羊'
}
const two={
n2:'美羊羊'
}
const three={
n3:'懒羊羊'
}
const m={...one,...two,...three};
console.log(m);
这是大致的一些知识点,比如Promise之类的知识点需要我们更细致些去研究学习,这些知识平常只有多用才能更了解它的功能,现在觉得有些知识并没有什么用处,之后写项目时,就会知道它的重要性,尤其是关于异步处理。