前端ES6学习笔记

廖奕泽

已于 2023-06-15 16:29:41 修改

阅读量66

点赞数 1

分类专栏：学习笔记文章标签： javascript 开发语言 ecmascript

于 2023-06-13 21:38:24 首次发布

本文链接：https://blog.csdn.net/weixin_50550864/article/details/131196790

版权

学习笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前端ES6语法

Let变量

1.let 与 var的区别

let声明的变量不会自动提升，var会自动提升

//实例演示：
//var
//下面语法通过，输出a = undefined,相当于在console前面有 var a;
    console.log("a = ",a);
    var a = 3;

//let 
//语法报错
     console.log("a = ",a);
     let a = 3;

let 有严格的局部作用域

//实例演示：
{
    let a = 1;
    var b = 2;
}
//let  语法报错 a is not defined
console.log(a);
//var  输出2
console.log(b)

let在作用域内只能声明一次，var可以声明多次

{
    //实例演示：
    //let   语法不通过，声明了2次a
    let a = 10;
    let a = 20;
    console.log(a);
    
    
    //var  输出20
    var b = 10;
    var b = 20
    console.log(b)
}

const常量

const 常量定义后不能改变值
const 常量在定义时必须赋值

数组解构

//实例演示：
{
            //传统写法：
            let arr = [1,2,3];
            let a=arr[0],b=arr[1],c=arr[2];
            console.log(a,b,c);
}
{
            //ES6：
            let arr = [1,2,3];
            let [a,b,c] = arr;
            console.log(a,b,c);
            //或者可以这样写
            let [num1,num2,num3] = [4,5,6];
            console.log(num1,num2,num3);
}

对象解构

实例：

{
            //传统写法：
            let student = {name:"zs",age:20};
            name = student.name;
            age = student.age;
            console.log(student.name,student.age);
}
{
            //ES6:
            let student = {name:"zs",age:20};
            let {name,age} = student;
            console.log(name,age);
}

模板字符串 ``

ES6新特性模板字符串``（反引号）用于引用变量，表达式计算，引用方法，使用时需要用${}

1.模板字符串``引用变量

let name = "zs";
console.log(`name=${name}`)

2.模板字符串``表达式计算

let num1 = 20;
let num2 = 30;
console.log(`${num1}+${num2}=${num1+num2}`)

3.模板字符串``引用方法

 function f1(name){
     return "name = " + name;
 }
console.log(`喜欢的人:${f1("张三")}`)

4.模板字符串``引用的内容，会保留换行

//保留换行
console.log(
    `每天都要
    快快
    乐乐
    学习`
)

对象声明简写

        const age = 18;
        const name = "李华";
        {
            // 传统 声明/定义对象
            let student = {name: name, age: age};
            console.log("student=>", student);
        }
        {
            // ES6 声明/定义对象
            //1. {name, age} : 表示对象的属性名是 name 和 age
            //2. 属性 name 的值是从变量/常量 name 来的
            let student = {name, age};
            console.log("student=>", student);
        }

对象方法简写

可以省略function

{
// 传统对象方法定义
    let student = {
        name: "李华", 
        age: 18, 
        skill: function () {
            console.log("写代码");
        }
    }
    student.skill();
}
{
//  ES6 
    let student = {
        name: "李华", 
        age: 18, 
        skill() {
            console.log("写代码");
        }
    }
    student.skill();
}

对象运算符扩展(深拷贝与合并对象)

传统使用 let student2 = student1,是浅拷贝(引用），改变了student2的属性，也会改变student1的属性

如果想要对象不相互关联，需要使用深拷贝，语法是： let student2 = (...student1)

实例演示：

            let student1 = {name: "李华", age: 18};
            {
                //传统引用，两个学生对象输出的name都为小明
                let student2 = student1;
                student2.name = "小明";
                console.log("student1=>", student1);
                console.log("student2=>", student2);//
            }
            let studnet ={name: "李华", age: 18};
            {
                // 拷贝对象(深拷贝)，只有第二个学生对象输出的是小明
                let student2 = {...studnet};
                student2.name = "小明";
                console.log("student1=>", studnet);
                console.log("student2=>", student2);
            }
            {
                // 合并对象[深拷贝]，两个对象合并也是深拷贝，不会影响原来对象
                let stu = {name: "小红", age: 18};
                let car = {brand: "奔驰", price: 800000};
                let stu_car = {...stu, ...car}
                stu_car.brand = "比亚迪";
                console.log("stu=>", stu);
                console.log("stu_car=>", stu_car);
            }

箭头函数

箭头函数提供更加简洁的函数书写方式;

箭头函数的语法为 (参数列表) => {函数体} ;

箭头函数多用于匿名函数的定义

实例演示：

//无参数
{
    //传统定义函数
    let f1 = function(){
        console.log("传统定义函数")
    }
    
    //ES6箭头函数
    let f2 = () => {
         console.log("ES6箭头函数")
    }
    f1();
    f2();
    
     //只有一条语句的箭头函数可以省略花括号
    let f3 = () =>
    console.log("f3---ES6箭头函数")
    f3();
}
//有一个参数
{
     //只有一个参数的箭头函数，可以省略()
    let f4 = data =>
    console.log("f4---ES6箭头函数有一个参数",data)
    f4("靓仔，点个赞吧！");
}

promise （解决传统ajax多层嵌套问题）

//resolve成功后使用的函数，reject失败时使用的函数
let p = new Promise( (resolve,reject) =>{
    $.ajax({
        url:"",
        success(resultData){
            //只有调用了resolve,之后才能使用回调函数then
             resolve(resultData)
        },
        error(err){
            reject(err);  
        }
    })
})  

//成功后回调，继续发送ajax请求
p.then((resultData) =>{
    return new Promise({
        $ajax({
            url:"",
            success(resultData){
                resolve(resultData)
            },
            error(err){
                reject(err);  
            }
        })
    })
}).then((resultData) =>{
    
}).catch(err =>{
    
})
//ajax+promise，解决了传统ajax的多次调用，但是原生方式，也不美观，可以使用代码重排，变得简洁

promise 代码重排

//封装重复代码
function get(url, data) {
    return new Promise((resolve, reject) => {
        $.ajax({
            url: url,
            data: data, 
             success(resultData) {
                 resolve(resultData);
            },
            error(err) {
                reject(err);
            }
        })
    })
}
//调用get函数
get("data/monster.json").then((resultData) => {
    
    //第 1 次 ajax 请求成功后的处理代码
    console.log("第 1 次 ajax 请求返回数据=", resultData);
        return get(`data/monster_detail_${resultData.id}.json`);
    })

    .then((resultData) => {
    //第 2 次 ajax 请求成功后的处理代码
    console.log("第 2 次 ajax 请求返回数据=", resultData);
        return get(`data/monster_gf_${resultData.gfid}.json`);
    })

    .then((resultData) => {
    //第 3 次 ajax 请求成功后的处理代码
        console.log("第 3 次 ajax 请求返回数据=", resultData);
    //继续.. })
    .catch((err) => {
        console.log("promise 请求异常=", err);
    })