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