doina

一个小菜鸟运维工程师.

ES6 语法和模块和箭头函数

[toc]

for循环

es5写法, 通常会写成下面这个样子

        const myArray = [10, 20, 30]
        for (var index = 0; index < myArray.length; index++) {
          console.log(myArray[index]);
        }

// 浏览器控制台输出为
10
20
30

es6写法

        // for-in 是为普通对象设计的,你可以遍历得到字符串类型的键,因此不适用于数组遍历
        // item获取到的是index
        const myArray = [10, 20, 30]
        for (let item in myArray) {
            console.log(item);
            console.log(myArray[item]);
        }
// 浏览器控制台输出为
0
10
1
20
2
30        

        // 这是最简洁、最直接的遍历数组元素的语法
        // for-of 循环用来遍历数据—例如数组中的值。
        const myArray = [10, 20, 30]
        for (let item of myArray) {
            console.log(item)
        }

// 浏览器控制台输出为
10
20
30        

高阶函数

现在有3个需求, 都是对数组进行操作, 需求2依赖需求1的完成, 需求3依赖需求2的完成.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<script>
  const nums = [10, 20, 30, 60, 80, 120, 240]

  // 需求1: 有一个包含很多数字的数组(nums), 要取出数组中小于100的数字保存到一个新数组中

  // 第一种: 使用es6循环语法完成需求
  let new1Nums = []
  for (let num of nums) {
    if (num < 100) {
      new1Nums.push(num)
    }
  }
  console.log(new1Nums);

  // 第二种: 使用filter高阶函数完成需求
  // filter是一个高阶函数,是一个回调函数,定义 new2Nums 来接收处理后返回的数组
  // 传入的参数为函数, n为循环数组的变量. 直接追加n < 100的到new2Nums数组中
  const new2Nums = nums.filter(function (n) {
    return n < 100
  })
  console.log(new2Nums);


  // 需求2: 将所有小于100的数字进行转化: 全部*2

  // 第一种: 使用es6循环语法完成需求
  let new3Nums = []
  for (let num of new1Nums) {
    new3Nums.push(num * 2)
  }
  console.log(new3Nums);

  // 第二种: 使用map高阶函数完成
  const  new4Nums = new1Nums.map(function (n) {
    return n * 2
  })
  console.log(new4Nums);

  // 需求3: 将所有new3Nums数字相加,得到最终的结果

  // 第一种: 使用es6循环语法完成需求
  let total1 = 0
  for (let num of new3Nums) {
    total1 += num
  }
  console.log(total1);

  // 第二种: 使用reduce函数的使用
  // reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。
  // reduce() 可以作为一个高阶函数,用于函数的 compose。
  let total2 = new3Nums.reduce(function (preValue, n) {
    return preValue + n
  }, 0)
  console.log(total2);

  // 使用高阶函数串联完成
  let total3 = nums.filter(function(n) {
    return n < 100
  }).map(function(n) {
    return n * 2
  }).reduce(function(prevValue, n) {
    return prevValue + n
  }, 0)
  console.log(total3);

  // 使用箭头函数一行完成
  let total4 = nums.filter(n => n < 100).map(n => n * 2).reduce((pre, n) => pre + n);
  console.log(total4);

</script>
</body>
</html>


导入导出

导出模块

// 第一种: export直接导出
export let name = 'baiyongjie';
export let age = '23';

// 第二种: 在最后通过export导出一个对象和函数
let sex = 'man'
function info(name, age, sex) {
  console.log("姓名: ", name, "年龄: ", age, "性别: ", sex)
}

export {sex, info}

// 第三种: 导出函数/类
export function sum(num1, num2) {
  return num1 + num2
}

export class Person {
  constructor(name) {
    this.name = name;
  }

  run() {
    console.log(this.name, '在奔跑');
  }
}

// 第四种: export default类型, 在一个js文件中, 只能有一个defalut方式, 可以是变量,函数,类,对象
const address = '北京市海淀区'
export default {
  addr: address
}

导入模块

// 直接导入
import {name, age, sex, info} from "./aaa.js";
console.log(name, age, sex);
info(name, age, sex)

// 导入export的function/class
import {sum, Person} from "./aaa.js";
// 使用函数
console.log(sum(10, 20));
// 使用类
const p = new Person('小白')
p.run()

// 导入default, 可以自命名, 不能用{}引起来
import addr from './aaa.js'
console.log("地址: ", addr);

// 统一全部导入
import * as aaa from './aaa.js'
import esdefault from "./aaa.js";
aaa.info(name, age, sex)

console.log(esdefault);
console.log(esdefault.addr);

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<h1>ES6模块导入导出学习</h1>
<h2>aaa.js是定义模块的文件,并导出</h2>
<h2>bbb.js是导入aaa.js中的模块,并使用</h2>

<script src="aaa.js" type="module"></script>
<script src="bbb.js" type="module"></script>
</body>
</html>

《ES6 语法和模块和箭头函数》

箭头函数

点赞

发表评论

邮箱地址不会被公开。

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据