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

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 = <