GDPU Vue前端框架开发 ecmascript6初步使用

前端框架基础,打造你的前端应用。

箭头函数

使用箭头函数实现求多个数的和,可以有一个参数,也可以有多个或零个参数。

javascript 复制代码
let sum = (...numbers) => {
    return numbers.reduce((acc, curr) => acc + curr, 0);
  };

let a=sum();
let b=sum(1);
let c=sum(1,2);
let d=sum(1,2,3,4,5);
let arr=[1,2,3,4,5,6];
let e=sum(...arr)
console.log(a, b, c, d, e)

// let sum=(...data)=>{
//     s=0;
//     for(let i=0;i<data.length;i++){
//         s=s+data[i];
//     }
//     return s;
// }

可以安装nodejs与vscode的coderunner插件在vscode运行调试。

这里用了箭头函数的嵌套,其中(...参数)是一个rest参数,接着里面调用了reduce方法,回调函数是第一个参数,然后初始值0是第二个参数,注意看清楚逗号在哪,在js中经常有回调函数或箭头函数当参数的。

📚使用箭头函数要注意格式是:函数名=>函数的返回值。

📕如果没有参数就是()=》{},箭头函数不要再写return了,直接写值。然后一个参数名可以简写成参数=》{},两个或以上的则为一般形式(a,b,c,...)=>{}。

异步promise对象

红灯3秒亮一次,绿灯1秒亮一次,黄灯2秒亮一次;如何使用Promise让三个灯不断交替重复亮灯?,亮灯函数可以参考已经给出的或自行定义。

javascript 复制代码
function red() {
    console.log('red');
}
function green() {
    console.log('green');
}
function yellow() {
    console.log('yellow');
}
const run = (color, interval) => {
    return new Promise((resolve) => {
        setTimeout(() => {
            color();
            resolve();//使得 .then() 链中的下一个 Promise 被执行
        }, interval)
    })
}
//使用链式调用,依次的red,green,yellow,然后循环
const loop = () => {
    Promise.resolve().then(() => {
        return run(red, 3000);
    }).then(() => {
        return run(green, 1000);
    }).then(() => {
        return run(yellow, 2000);
    }).then(() => {
        loop()//递归调用
    })
}
loop()

这里使用了链式调用,首先在run的创建promise里调用了resolve的,链式调用中从Promise.resolve().开始,确保 Promise 链的启动和顺序执行。然后每到一个then后面执行的run方法都会去执行resolve更换状态,即当前promise完成后才会进行.then进行下一个promise的执行,这里要理清楚。然后用了几个箭头函数嵌套,要注意看准符号进行拆分就好看懂了,根据题意,要实现异步,肯定得创建promise对象,然后传几个参数,有颜色也有时间间隔,接着看返回值,最后返回调用的肯定是计时器与具体的实现。

📚promise这里也有个常用的模板。new Promise((resolve,reject) => {}),resolve为成功状态的调用函数对应的具体实现为.then,reject为出现异常时的调用函数对应的具体实现为.catch。这个在前端中的使用还是比较重要的,在vue中后面的axios跨域也会用到。

然后,链式调用或许有点繁琐,也可以用es6中常用的异步方式async与await,当async函数内遇到await就会进行等待去处理await后跟的promise,没有加await直接执行。

javascript 复制代码
function red() {
    console.log('red');
}

function green() {
    console.log('green');
}

function yellow() {
    console.log('yellow');
}

// 创建一个延迟函数
function delay(interval) {
    return new Promise(resolve => setTimeout(resolve, interval));
}

// 交替亮灯的函数
async function loop() {
    while (true) {
        red();
        await delay(3000); // 红灯亮3秒

        green();
        await delay(1000); // 绿灯亮1秒

        yellow();
        await delay(2000); // 黄灯亮2秒
    }
}

// 启动交通灯
loop();

可以看到,await里面执行的也是promise,因此要等前面的灯亮了才会执行后面的灯。

题变一下,js中如何实现程序并发执行,即如何实现3个灯各自同时并发执行?

javascript 复制代码
const red = () => {
    console.log('red');
};

const green = () => {
    console.log('green');
};

const yellow = () => {
    console.log('yellow');
};

// 用于控制灯光的显示
const run = (color, interval) => {
    return new Promise((resolve) => {
        setInterval(() => {
            color(); // 每次调用灯光函数
        }, interval);
    });
};

const loop = () => {
    Promise.all([
        run(red, 3000),   // 红灯每3秒亮一次
        run(green, 1000), // 绿灯每1秒亮一次
        run(yellow, 2000) // 黄灯每2秒亮一次
    ]);
};

loop();

把setTimeout改为setInterval,然后用Promise.all,进行全部的promise对象执行完,然后每个对象通过setInterval作间隔。

javascript 复制代码
function red() {
    console.log('red');
}
function green() {
    console.log('green');
}
function yellow() {
    console.log('yellow');
}
//定义一个异步函数来实现灯的调度
//这里只是每个颜色函数单独调用
async function asynf_run(color, interval) {
    return await new Promise((resolve, reject) => {
        setTimeout(() => {
            color();
            // console.log(new Date().toLocaleTimeString());//为了比对的方便,加入时间显示
            asynf_run(color, interval);//重新执行函数,以达到循环的目的
        }, interval);
    })
}
//定义一个异步的函数,来执行并行的目的。
const parrallel = async () => {   
    asynf_run(red, 3000)
    asynf_run(green, 1000)
    asynf_run(yellow, 2000)

}
//主程序调用
parrallel();

也可以在async函数中不加入await则会执行并行操作,然后每个颜色相对应的promise对象是加了await异步的。

可以看到三个灯各自同时并发执行,间隔少的会打印多一点。

有小白可能觉得这个很难繁琐,那阁下要是按最简单的方法怎么做这道题,不用promise就得嵌套好几个setTimeout或setInterval了,写一下就会发现好像更繁琐难看懂,所以学一些新的框架语法对开发还是有用的。

Promise与async/await的区别

Promise: 返回一个 Promise 对象,使用.then() 和 .catch()方法来处理成功和失败的结果在多个嵌套的异步操作中,可能导致多个回调或难以阅读的链式调用。

async/await: 总是返回一个 Promise,即使它返回的是一个非 Promise 值。提高了代码的可读性,更接近于同步代码的风格,易于理解和维护。

箭头函数的this

📕箭头函数中this指向的规则是什么?

箭头函数中的this指向根据当前执行上下文的变化而变化,遵循谁调用就指向谁。没找到直接调用者,则this指的是全局对象window。在严格模式下,没有直接调用者的函数中的this是undefind。使用call,apply,bind绑定,this指的是绑定的对象。嵌套函数中的this不会继承外层函数的this值。

下面代码输出结果分别是什么?为什么?

javascript 复制代码
student1 = {
    name: '张三',
    outerName(){
    displayName=function(){
        console.log('student1: '+this.name)
    };
    displayName();
    }
}
student1.outerName();
javascript 复制代码
student2 = {
    name: '张三',
    outerName(){
    displayName= () => {
        console.log('student2: '+this.name)
    }
    displayName();
    }

}
student2.outerName();

分别是 student1: undefined 、 student2: 张三。

当student1.outerName() 被调用时,在 outerName 方法内部,displayName 被声明为一个普通函数。当 displayName() 被调用时,this 的值在这个上下文中是全局对象(在浏览器中是 window,在 Node.js 中是 global),而不是 student1。所以,this.name 是 undefined(除非在全局作用域中有一个 name 属性)。student2.outerName() 被调用。当student2.outerName() 被调用时,displayName 被声明为一个箭头函数。箭头函数不绑定自己的 this,它会捕获外部上下文中的 this 值。在这种情况下,this 指向的是 student2 对象。因为普通函数的 this 绑定与箭头函数的 this 绑定行为不同。

实验心得

谁来异步写个作业吧。

相关推荐
安全系统学习13 分钟前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖29 分钟前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖40 分钟前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水1 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐1 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06271 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台1 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
灿灿121382 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css
烛阴2 小时前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript
AntBlack2 小时前
拖了五个月 ,不当韭菜体验版算是正式发布了
前端·后端·python