vue中会用到的ES6语法和高阶函数

最新推荐文章于 2024-06-15 22:21:41 发布

青椒切小块

最新推荐文章于 2024-06-15 22:21:41 发布

阅读量966

点赞数 2

分类专栏： vue 笔记

本文链接：https://blog.youkuaiyun.com/ShangMY97/article/details/105347153

版权

vue 同时被 2 个专栏收录

47 篇文章

订阅专栏

笔记

6 篇文章

订阅专栏

本文主要探讨了Vue项目中常用的ES6语法，包括filter、map和reduce的使用，以及let、const的块级作用域和对象增强写法。同时，详细讲解了Promise的概念、状态变化、链式调用以及all方法的应用，帮助开发者更好地理解和掌握异步编程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

filter/map/reduce

我们通过案例来了解这些函数和方法

const nums = [10, 20, 111, 222, 444, 40, 50]

1.需求: 取出所有小于100的数字

let newNums = []
for (let n of nums) {
  if (n < 100) {
    newNums.push(n)
  }
}

在这里插入图片描述
2.需求:将所有小于100的数字进行转化: 全部*2

let new2Nums = []
for (let n of newNums) {
  new2Nums.push(n * 2)
}

在这里插入图片描述
3.需求:将所有new2Nums数字相加,得到最终的记过

let total = 0
for (let n of new2Nums) {
   total += n
 }

在这里插入图片描述
我们现在用另一种方法实现这三种功能
filter/map/reduce

filter中的回调函数有一个要求: 必须返回一个boolean值
true: 当返回true时, 函数内部会自动将这次回调的n加入到新的数组中
false: 当返回false时, 函数内部会过滤掉这次的n

const nums = [10, 20, 111, 222, 444, 40, 50]

1.filter函数的使用（过滤作用）

let newNums = nums.filter(function (n) {//回调函数
  return n < 100
})
console.log(newNums);

在这里插入图片描述
2.map函数的使用（映射,可以对数组中每个元素进行操作，并逐一返回，生成一个理想的新数组）

let new2Nums = newNums.map(function (n) { // 20需要返回四次
  return n * 2
})

在这里插入图片描述
3.reduce函数的使用
接收一个函数作为累加器（accumulator），数组中的每个值（从左到右）开始合并，最终为一个值（对数组中所有的内容进行汇总）

let total = new2Nums.reduce(function (preValue, n) {
  return preValue + n
}, 0)

在这里插入图片描述
链式编程直接算出结果

let total = nums.filter(function (n) {
  return n < 100
}).map(function (n) {//映射
  return n * 2
}).reduce(function (prevValue, n) {
  return prevValue + n
}, 0)

或箭头函数

let total = nums.filter(n => n < 100).map(n => n * 2).reduce((pre, n) => pre + n);

let/const/var

块级作用域

ES5中的var是没有块级作用域的(if/for)
ES6中的let是由块级作用的(if/for)
ES5之前因为if和for都没有块级作用域的概念, 所以在很多时候, 我们都必须借助于function的作用域来解决应用外面变量的问题.
ES6中,加入了let, let它是有if和for的块级作用域.

1.变量作用域: 变量在什么范围内是可用.

{
    var name = 'smy';
    console.log(name);//24行
  }
  console.log(name);//26行

在这里插入图片描述

2.没有块级作用域引起的问题: if的块级

 var func;
  if (true) {
    var name = 'smy';
    func = function () {
      console.log(name);//33行
    }
    func()//第一次调用
  }
  name = 'kobe'
  func()//第二次调用，被拦截变成kobe
  console.log(name);//39行

在这里插入图片描述

var name = 'smy'
  function abc(bbb) { 
    console.log(bbb);//优先使用属于我作用域的name
  }
  abc(name)
  name = 'kobe'

在这里插入图片描述
3.没有块级作用域引起的问题: for的块级

  var btns = document.getElementsByTagName('button');
  for (var i=0; i<btns.length; i++) {
    (function (num) { // 0
      btns[i].addEventListener('click', function () {
        console.log('第' + num + '个按钮被点击');//这个i是引用函数后面的i
      })
    })(i)
  }

为什么闭包可以解决问题: 函数是一个作用域.
在这里插入图片描述
如果没有这个闭包，点击哪个都是第五个
或者ES6写法

  const btns = document.getElementsByTagName('button')
  for (let i = 0; i < btns.length; i++) {
    btns[i].addEventListener('click', function () {
      console.log('第' + i + '个按钮被点击');
    })
  }

在这里插入图片描述
用let每个作用于有属于自己的i,
可以理解为一个i对应一个

btns[i].addEventListener('click', function () {
      console.log('第' + i + '个按钮被点击');
    })

而ES5没有作用域，相当于在最外面定义了一个i，一个改都改

在这里插入图片描述

const的使用

const关键字，在JavaScript中也是如此,使用const修饰的标识符为常量,不可以再次赋值。
当我们修饰的标识符不会被再次赋值时,就可以使用const来保证数据的安全性。

const的注意
1.a的值是不可以再赋值（修改）的

const a = 20;
a = 30;

2.const修饰的标识符必须赋值

const name;

3.常量的含义是指向的对象不能修改, 但是可以改变对象内部的属性.

  const obj = {
    name: 'smy',
    age: 18,
    height: 1.88
  }
  console.log(obj);

  obj.name = 'kobe';
  obj.age = 40;
  obj.height = 1.87;

  console.log(obj);

在这里插入图片描述

对象增强写法

ES6,对对象自变量进行了很多增强
1.属性的增强写法

  const name = 'why';
  const age = 18;
  const height = 1.88

  // ES5的写法
  const obj = {
    name: name,
    age: age,
    height: height
  }
   //ES6写法
  const obj = {
    name,
    age,
    height,
  }

2.函数的增强写法

  // ES5的写法
  const obj = {
    run: function () {},
    eat: function () {}
  }
  const obj = {
    run() {},
    eat() {}
  }

Promise

什么是Promise呢？

ES6中一个非常重要和好用的特性就是Promise
Promise到底是做什么的呢？

Promise是异步编程的一种解决方案。

那什么时候我们会来处理异步事件呢？

一种很常见的场景应该就是网络请求了。
我们封装一个网络请求的函数，因为不能立即拿到结果，所以不能像简单的3+4=7一样将结果返回。
所以往往我们会传入另外一个函数，在数据请求成功时，将数据通过传入的函数回调出去。
如果只是一个简单的网络请求，那么这种方案不会给我们带来很大的麻烦。

但是，当网络请求非常复杂时，就会出现回调地狱。

定时器异步事件

1.使用setTimeout进行异步操作

   setTimeout(() => {
     console.log('Hello World');
   }, 1000)

2.我们用promise对这个异步操作进行封装
执行传入的回调函数时, 会传入两个参数, resolve, reject.本身又是函数
这里，我们用一个定时器来模拟异步事件：

假设下面的data是从网络上1秒后请求的数据
console.log就是我们的处理方式。

new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('111111');
      console.log('111111');
      console.log('111111');
      console.log('111111');
      setTimeout(() => {
        console.log('2222');
        console.log('2222');
        console.log('2222');
        console.log('2222');
        setTimeout(() => {
          console.log('3333');
          console.log('3333');
          console.log('3333');
          console.log('3333');
        },1000)
      },1000)
    }, 1000)
  })

出现了回调地狱，不想这样，我们就把setTimeout取出来放到别的里面
如果是成功的，那么通常我们会调用resolve(messsage)，这个时候，我们后续的then会被回调。

new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Hello World')
    }, 1000)
  }).then((data) => {
    setTimeout(() => {
    console.log('111111');
    console.log('111111');
    console.log('111111');
    console.log('111111');
    setTimeout(() => {
      console.log('2222');
      console.log('2222');
      console.log('2222');
      console.log('2222');
      setTimeout(() => {
        console.log('3333');
        console.log('3333');
        console.log('3333');
        console.log('3333');
      },1000)
    },1000)
  }, 1000)
})

我们还可以在then中这样改写，链式编程
在这里插入图片描述如果是失败的，那么通常我们会调用reject(error)，这个时候，我们后续的catch会被回调。 reject()和resolve()里的值就是then或者catch函数内的参数

new Promise((resolve, reject) => {
    setTimeout(() => {
    
      // 失败的时候调用reject
      reject('error message')
    }, 1000)
  }).catch((err) => {
    console.log(err);
  })

Promise的另外处理形式，then(函数1，函数2)

  new Promise((resolve, reject) => {
    setTimeout(() => {
      // resolve('Hello Vuejs')
      reject('error message')
    }, 1000)
  }).then(data => {
    console.log(data);
  }, err => {
    console.log(err);
  })

在这里插入图片描述

Promise三种状态

首先, 当我们开发中有异步操作时, 就可以给异步操作包装一个Promise

异步操作之后会有三种状态

我们一起来看一下这三种状态:

pending：等待状态，比如正在进行网络请求，或者定时器没有到时间。
fulfill：满足状态，当我们主动回调了resolve时，就处于该状态，并且会回调.then()
reject：拒绝状态，当我们主动回调了reject时，就处于该状态，并且会回调.catch()

Promise链式调用

我们在看Promise的流程图时，发现无论是then还是catch都可以返回一个Promise对象。
所以，我们的代码其实是可以进行链式调用的：
这里我们直接通过Promise包装了一下新的数据，将Promise对象返回了

Promise.resovle()：将数据包装成Promise对象，并且在内部回调resolve()函数
Promise.reject()：将数据包装成Promise对象，并且在内部回调reject()函数

  // wrapped into
  // 网络请求: aaa -> 自己处理(10行)
  // 处理: aaa111 -> 自己处理(10行)
  // 处理: aaa111222 -> 自己处理
  new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('aaa')
    }, 1000)
  }).then(res => {
    // 1.自己处理10行代码
    console.log(res, '第一层的10行处理代码');

    // 2.对结果进行第一次处理
    return new Promise((resolve, reject) => {
      resolve(res + '111')
      // reject('err')
    })
  }).then(res => {
    console.log(res, '第二层的10行处理代码');

    return new Promise(resolve => {
      resolve(res + '222')
    })
  }).then(res => {
    console.log(res, '第三层的10行处理代码');
  }).catch(err => {
    console.log(err);
  })

在这里插入图片描述
若对结果进行第一次处理时是拒绝状态，下面的就都不进行了

*我们发现在进行第二，三次处理的时候并没有进行异步操作
new Promise(resolve => resolve(结果))简写

  new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('aaa')
    }, 1000)
  }).then(res => {
    // 1.自己处理10行代码
    console.log(res, '第一层的10行处理代码');

    // 2.对结果进行第一次处理
    return Promise.resolve(res + '111')
  }).then(res => {
    console.log(res, '第二层的10行处理代码');

    return Promise.resolve(res + '222')
  }).then(res => {
    console.log(res, '第三层的10行处理代码');
  })

若对结果进行第一次处理时是拒绝状态throw ‘error message’，下面的也是不进行了

throw语句抛出用户定义的异常。当前函数的执行将停止（throw之后的语句将不会执行），并且控制权将传递给调用堆栈中的第一个catch块。如果调用函数之间不存在catch块，则程序将终止。

  new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('aaa')
    }, 1000)
  }).then(res => {
    /// 1.自己处理10行代码
    console.log(res, '第一层的10行处理代码');

    // 2.对结果进行第一次处理
    // return Promise.reject('error message')
    throw 'error message'
  }).then(res => {
    console.log(res, '第二层的10行处理代码');

    return Promise.resolve(res + '222')
  }).then(res => {
    console.log(res, '第三层的10行处理代码');
  }).catch(err => {
    console.log(err);
  })

在这里插入图片描述
省略掉Promise.resolve
内部会进行一层Promise包装

  new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('aaa')
    }, 1000)
  }).then(res => {
    // 1.自己处理10行代码
    console.log(res, '第一层的10行处理代码');

    // 2.对结果进行第一次处理
    return res + '111'
  }).then(res => {
    console.log(res, '第二层的10行处理代码');

    return res + '222'
  }).then(res => {
    console.log(res, '第三层的10行处理代码');
  })

Promise的all使用方法

我们现在想象一个操作，需要两个请求都为true时才可以通过
一般思路如下

  // 请求二一:
  let isResult1 = false
  let isResult2 = false
  $ajax({
    url: '',
    success: function () {
      console.log('结果1');
      isResult1 = true
      handleResult()
    }
  })
  // // 请求二:
  $ajax({
    url: '',
    success: function () {
      console.log('结果2');
      isResult2 = true
      handleResult()
    }
  })

  function handleResult() {
    if (isResult1 && isResult2) {
      //都为true要进行的操作
    }
  }

在Promise中用all也可以实现，两种情况都满足，进行then操作

  Promise.all([
      new Promise((resolve, reject) => {
        $.ajax({
          url: 'url1',
          success: function (data) {
            resolve(data)
          }
        })
      }),
      new Promise((resolve, reject) => {
        $.ajax({
          url: 'url2',
          success: function (data) {
            resolve(data)
          }
        })
      })
  ]).then(results => {
    console.log(results);
  })

  Promise.all([
    new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve({name: 'smy', age: 18})
      }, 2000)
    }),
    new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve({name: 'kobe', age: 19})
      }, 1000)
    })
  ]).then(results => {
    console.log(results);
  })