ES6学习笔记

Updated on in 程序人生 with 0 views and 0 comments

概念

ECMAScript是浏览器脚本语言的规范,Java script是规范的具体实现。

参考:1.1 ES6 教程 | 菜鸟教程 (runoob.com)

变量

let和var

let 是在代码块内有效,var 是在全局范围内有效,下述代码打印时,会提示 a is not defined

<script>
    {
        let a = 1;
        var b = 2;
    }
    console.log(a)
    console.log(b)
</script>

let声明的变量不能重复定义,var可以,下属代码运行提示 Identifier 'a' has already been declared

<script>
    {
        let a = 1;
        let a = 1;
        var b = 2;
        var b = 3;
    }
    console.log(a)
    console.log(b)
</script>

var 存在变量提升,let不存在变量提升,下述代码,b打印结果为undefined,a打印提示 caught ReferenceError: Cannot access 'a' before initialization

<script>
    console.log(b)
    var b = 2;
    console.log(a)
    let a = 1;
</script>

const

const声明的变量不能修改,const声明的变量必须初始化,下属代码修改const值,控制台报错提示 peError: Assignment to constant variable.

结构表达式

解构赋值是对赋值运算符的扩展。

他是一种针对数组或者对象进行模式匹配,然后对其中的变量进行赋值。

<script>
    let arr = [1,2,3]
    let [a,b,c] = arr;
    console.log(a,b,c)
</script>

函数参数

参数默认值

下述代码中,a和b默认都为0,如果不给函数传递参数,拿就会按默认值运算

function addNum(a=0,b=0){
    console.log(a+b)
}

参数个数不固定

    function paramsFunc(...params){
        console.log(params)
    }
    paramsFunc(1,2)
    paramsFunc(1,2,3)

下属代码输出结果

image.png

箭头函数

箭头函数是一种简洁得函数写法

单个参数

    var f = v => v;
    //等价于
    var f = function(a){
        return a;
    }

多个参数

var f = (a,b) => a+b;

方法有多行

方法有多行得话,将箭头后的部分用大括号括起来,然后再里面写方法体

    var f = (a,b) =>{
        let c = a+b;
        return  c;
    };

方法返回值

方法不加大括号就默认返回箭头后得表达式运算值,如果方法不需要返回值则需要在大括号中声明

    var f = (a,b) =>{
        let c = a+b;
        console.log(c)
    };

返回一个对象

需要返回对象时,可以用大括号将方法体包起来,然后再里面定义定向返回,如果不适用方法体,可以用()封装对象

var f = (a,b) => ({'a':a,'b':b})
    console.log(f(1,2))

返回结果

image.png

使用时特殊情况总结

  • 没有 this、super、arguments 和 new.target 绑定;
  • 箭头函数体中的 this 对象,是定义函数时的对象,而不是使用函数时的对象;
  • 不可以作为构造函数,也就是不能使用 new 命令,否则会报错
// 此时的this指向定义Pershon中sayHello函数的对象,此时控制台输出undefined
var Person = {
    'age':18,
    'sayHello':()=>{
        console.log(this.age)
    }
}

若对象中定义方法,需要访问this使用以下方法

var Person = {
    'age':18,
    'sayHello':function (){
        setTimeout(()=>{
            console.log(this.age)
        })
    }
}

或者

var Person = {
    'age':18,
    'sayHello':function (){
       console.log(this.age)
    }
}

对象优化

获取对象属性

通过Object对象的常用方法,可以帮我们快速取得对象中的属性值,并对其进行操作

var Person = {
    'age':18,
    'sayHello':'hello long'
}
// 获取对象的key
console.log(Object.keys(Person))
// 获取对象的value
console.log(Object.values(Person))
// 获取对象的key和value,并将其封装成Entry返回
console.log(Object.entries(Person))

输出结果为

image.png

使用Object.assign快速复制对象

使用Object.assign方法实现属性的快速复制,如下,将Person1中的属性复制到Person,age相同,则Person1中的17会覆盖Person中的age,class再Person中没有,则会讲Person1中的class属性和值都复制给Person

var Person = {
    'age':18,
    'sayHello':'hello long'
}
var Person1 = {
    'age': 17,
    'class': '高三'
}
console.log(Object.assign(Person,Person1))

代码输出结果如下

image.png

属性简写

原来创建一个对象

var age = 17,name = 'long';
var person = {'age':age,'name':name};
console.log(person)

若对象中的属性名和定义的变量属性名相同就可以按照下述代码简写

var age = 17,name = 'long';
var person = {age,name};
console.log(person)

函数名简写

原来定义函数名,需要通过function关键字或者箭头函数调用

var person = {
    'age':17,
    'name':name,
    'sayHello':function(){
        console.log(this.age)
    }
};
person.sayHello()

但我们可以使用下述方法简写

var person = {
    'age':17,
    'name':name,
    sayHello(){
        console.log(this.age)
    }
};
person.sayHello()

拓展运算符

对象属性拷贝

拓展运算符(...)用于取出参数对象所有可遍历属性然后拷贝到当前对象。拷贝时,目标对象的属性会丢失。

    var Person = {
        'age':18,
        'sayHello':'hello long',
        'props':undefined
    }
    let person1 = {'a':99}
    person1 = {...Person}
    console.log(person1)

代码输出结果如下

image.png

合并对象

合并对象时,若两个对象有相同的属性,则在方法中放在后面的对象属性会覆盖放前面的对象属性

如代码中,Person和person1中有相同属性,但是我在合并对象时,Person放在后面,因此person2的结果中,Person的属性值会覆盖person1的属性值

    var Person = {
        'age':18,
        'sayHello':'hello long',
        'props':undefined
    }
    let person1 = {
        'age':19,
        'sayHello':'hello long1',
        'props':undefined,
        'didi':'huan'
    }
    let person2 = {...person1,...Person}
    console.log(person2)

代码运行结果如下

image.png

数组的map和reduce

map()函数

map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。

map() 方法按照原始数组元素顺序依次处理元素

注意:

  • map不会修改原数组值
  • map不会做空数组检测

下述代码将数组中元素都*2

let arry = [1,2,3]
arry = arry.map(item => item*2)
console.log(arry)

运行结果

image.png

reduce()函数

reduce函数接收一个回调函数作为累加器,将数组从左至右开始计算

该函数参数如下

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

image.png

实例代码

let arry = [1,2,3]
let ret = arry.reduce((total,currentValue)=>{
    return total + currentValue;
},0)
console.log(ret)

输出结果如下

image.png

Promise

promise用于处理异步编程

例如代码中,建立两个Promise方法嵌套,在外层的方法中,判断如果1=1则执行resolve方法,否则执行reject

此时1==1,进入到最外层Promise的then方法中,执行了嵌套的Promise方法,内部的Promise方法中,判断如果年龄为1则执行resolve进入到内部Promise定义的then,否则进入到内部Promise定义的catch

new Promise((resolve,reject)=>{
    if(1 ===1) resolve({age:1,name:'long'});
    else reject('外层Promise条件判断错误')
}).then((data)=>{
    new Promise((resolve,reject)=>{
        if(data.age === 1){
            resolve(data)
        }else{
            reject('年龄不符合要求')
        }
    }).then(data=>{
        console.log(data)
    }).catch(err=>{
        console.log(err)
    })
}).catch((err)=>{
    console.log(err)
})

输出结果如下

image.png

此时,我们将1===1条件改为2===1

new Promise((resolve,reject)=>{
    if(2===1) resolve({age:1,name:'long'});
    else reject('外层Promise条件判断错误')
}).then((data)=>{
    new Promise((resolve,reject)=>{
        if(data.age === 1){
            resolve(data)
        }else{
            reject('年龄不符合要求')
        }
    }).then(data=>{
        console.log(data)
    }).catch(err=>{
        console.log(err)
    })
}).catch((err)=>{
    console.log(err)
})

结果为

image.png

此时我们将条件任然改为1===1,然后将age属性改为2测试内部Promise的catch方法是否正常

new Promise((resolve,reject)=>{
    if(1===1) resolve({age:1,name:'long'});
    else reject('外层Promise条件判断错误')
}).then((data)=>{
    new Promise((resolve,reject)=>{
        if(data.age === 2){
            resolve(data)
        }else{
            reject('年龄不符合要求')
        }
    }).then(data=>{
        console.log(data)
    }).catch(err=>{
        console.log(err)
    })
}).catch((err)=>{
    console.log(err)
})

结果为

image.png

async和await

async 函数返回一个 Promise 对象,可以使用 then 方法添加回调函数。

    async function helloAsync(){
        return "helloAsync";
    }
    console.log(helloAsync())
    helloAsync().then(v=>{
        console.log(v);
    })

代码输出结果

await 操作符用于等待一个 Promise 对象, 它只能在异步函数 async function 内部使用

    async function helloAsync(){
        await init();
        console.log('helloAsync')
    }
    function init (){
       return new Promise((resolve,reject)=>{
            setTimeout(function(){
                console.log("init");
                resolve();
            }, 1000);
        });
    }
    helloAsync();

代码运行结果

image.png

模块化

export

导出各种类型的变量,如字符串,数值,函数,类

代码如下

var util = {
    sum(a,b){
        return a+b;
    }
}
var name=1,age=2
export {util,name,age}

import

导入各种类型的变量,如字符串,数值,函数,类

import {util,age,name} from "./util";

export default

  • 在一个文件或模块中,export、import 可以有多个,export default 仅有一个。
  • export default 中的 default 是对应的导出接口变量。
  • 通过 export 方式导出,在导入时要加{ },export default 则不需要。
  • export default 向外暴露的成员,可以使用任意变量来接收。

示例代码如下

在util.js中定义export

var util = {
    sum(a,b){
        return a+b;
    }
}
var name=1,age=2
export {util,name,age}
export default {util,name,age}

index.js中引用,并使用export导出

import {util,age,name} from "./util.js";
import utilImp from "./util.js";

function printExport(){
    util.sum(1,2)
    console.log(age,name)
}
function printExportDefault(){
    utilImp.util.sum(1,2)
    console.log(utilImp.name,utilImp.age)
}


export default {
    printExport,printExportDefault
}

在html页面中引用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script type="module">
    import obj from './index.js'
    obj.printExport()
    obj.printExportDefault()
</script>
</body>
</html>

输出结果为

image.png


标题:ES6学习笔记
作者:wenyl
地址:http://www.wenyoulong.com/articles/2023/05/06/1683363680574.html