Es6笔记_const obj1 = fn() ;const obi2 = fn() console.log(o-CSDN博客

本文链接：https://blog.csdn.net/waouya/article/details/126677589

本周主要是对之前知识进行复习，比如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之类的知识点需要我们更细致些去研究学习，这些知识平常只有多用才能更了解它的功能，现在觉得有些知识并没有什么用处，之后写项目时，就会知道它的重要性，尤其是关于异步处理。