ES6语法
let-var-const的区别
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
/*
// 1.变量作用域： 变量在什么范围内是可用
{
var name = 'kobe';
console.log(name);
}
// 能访问 在C C++是不能访问的
console.log(name);
*/
//2.没有块级作用域引起的问题 if块级
var func;
if(true){
var name = 'why';
func = function () {
console.log(name);
};
func() //why
}
name = 'kobe';
func(); // kobe
//3.没有块级作用域引起的问题 for块级
// ES5写法 使用闭包解决作用域问题
/*
var btns = document.getElementsByTagName('button');
for(var i=0; i < btns.length; i++){
(function (i) {
btns[i].addEventListener('click', function () {
console.log('第' + i + '个按钮被按下');
})
})(i)
}
*/
// ES6写法
const btns = document.getElementsByTagName('button');
for(let i=0; i < btns.length; i++){
btns[i].addEventListener('click', function () {
console.log('第' + i + '个按钮被按下');
})
}
// 1.一旦使用const修饰的标识符，不能修改
// const number = 123;
// number = 124
// 2.必须赋一个初始值
// const number;
// 3. 常量的含义是指向对象不能被修改，但是可以修改对象内部的属性
const obj = {
name: 'kobe',
age: 40,
height: 1.98
};
console.log(obj);
obj.name = 'why';
console.log(obj);
</script>
</body>
</html>
属性的增强写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// 字面量增强
// const obj = new Object();
// const obj = {};
// 1.属性、函数的增强写法
/*
// ES5 写法
const obj = {
name: 'Kebo',
age: 40,
height: 1.99,
run:function () {
console.log('正在奔跑');
},
eat: function () {
console.log('在吃东西');
}
};
*/
const name = 'Kebo';
const age = 40;
const height = 1.99;
const obj = {
name,
age,
height,
run(){
console.log('正在奔跑');
},
eat(){
console.log('在吃东西');
}
};
console.log(obj);
obj.run();
obj.eat()
</script>
</body>
</html>
for循环区别
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<h2>总价格：{{totalPrice}}</h2>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
books: [
{id: 110, name: 'Linux编程艺术', price: 119},
{id: 111, name: '代码大全', price: 120},
{id: 112, name: '深入理解计算机原理', price: 150},
{id: 113, name: '现代操作系统', price: 140},
]
},
computed: {
totalPrice: function () {
let result = 0;
/*
for (let i=0; i < this.books.length; i++) {
result += this.books[i].price
}
return result
*/
/*
es6写法
for (let i in this.books) {
result += this.books[i].price
}
return result
*/
// es6写法
for (let book of this.books) {
result += book.price
}
return result
}
}
})
</script>
</body>
</html>
高阶函数的使用（在小项目中使用到reduce计算总的价格）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
/*
编程范式：命令式编程/申明式编程
编程范式：面向对象编程（第一公民：对象）/函数式编程（第一公民：函数）
filter/map/reduce
filter中回调函数有一个要求：必须返回一个boolean值
true:当返回是true时，函数内部会自动将这次回调的n加入到新的数组中
false:当返回是false时，函数内部会过滤掉这次的n
*/
const nums = [1, 10, 100, 50, 20, 30, 70, 500, 222];
let total = nums.filter(n => n < 100).map(n => n * 2).reduce((pre, n) => pre + n, 2);
console.log(total);
// 1.filter过滤函数的使用 在数组中对每个元素做操作
let newNums = nums.filter(function (n) {
return n < 100
});
console.log(newNums);
// 2. map函数的使用 对数组中每个元素做操作
let new2Nums = newNums.map(function (n) {
return n * 2
});
console.log(new2Nums);
// 3. reduce函数的使用 作用：对数组中的值进行汇总
let new3Nums = new2Nums.reduce(function (preValue, num) {
return preValue + num
}, 2);
console.log(new3Nums);
</script>
</body>
</html>
ES6导入导出
aaa.js
/*
// 闭包可以解决var变量作用域问题
;(function () {
let name = '小明';
let age = 18;
function sum(num1, num2) {
return num1 + num2
}
})();
// 模块化 其它文件可以调用
let ModuleA = (function () {
let obj = {};
obj.name = '小明';
obj.age = 18;
obj.mySum = function sum(num1, num2) {
return num1 + num2
};
return obj
})();
ModuleA.mySum(10, 20);
CommonJS的导出
module.exports = {
flag: true,
sum(a, b){
return a + b
}
};
CommonJS的导入
let {flag, sum} = require('module');
等同于
let _mA = require(module);
let flag = _mA.flag;
let sum = _mA.sum;
*/
let name = '小明';
let age = 18;
function sum(num1, num2) {
return num1 + num2
}
// 1. 导出方式一
export {
name,
age,
sum
}
// 2. 导出方式二
export let num = 1000;
// 3.导出函数/类
// es5 函数
export function mul(num1, num2) {
return num1 * num2
}
// es5 类
function Person1() {
}
export {
Person1,
}
// es6 类
export class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
run() {
console.log(this.name + '在奔跑');
}
}
// 默认同一模块中default只能一次
/*
const address = '成都市';
export default address
*/
export default function (argument) {
console.log(argument);
}
bbb.js
import {sum, mul, Person} from "./aaa.js";
console.log(sum(10, 20), mul(10, 20));
const p = new Person('智障', 18);
p.run();
// 统一全部导入
import * as aaaa from "./aaa.js"
console.log(aaaa.sum(40, 40));
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="./aaa.js" type="module"></script>
<script src="./bbb.js" type="module"></script>
<script src="./mmm.js" type="module"></script>
<!--模块化 type="module"-->
</body>
</html>
mmm.js
import {name, age, num, } from "./aaa.js"; // 这里不要简写 不然404找不到
import addr from "./aaa.js";
console.log(name, age, num);
addr('你好啊！');
console.log(addr);
箭头函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// 1. 定义函数的方式
const aa = function () {
}
// 2.对象在字面量中定义函数+增强写法
const obj = {
bbb: function () {
},
aaa() {
}
}
// 3. ES6中的箭头函数
// const ccc = (参数列表) => {
//
// }
// 3.1无参数情况
const ccc = () => {
}
// 3.2有参数情况两个参数
const sum = (num1, num2) => {
return num1 + num2
}
// 3.3有参数并且一个参数
const power = (num) => {
return num * num
}
const power1 = num => {
return num * num
}
const test = () => {
}
// 代码只有一行的情况+有返回值
const mul = (num1, num2) => num1 * num2
console.log(mul(20, 30));
//无返回值
const demo = () => console.log('Hello')
</script>
</body>
</html>
判断this 一层层的看
// es6 中对象的解构
const obj = {
name: '科比',
age: 18,
height: 1.98,
address: '洛杉矶'
}
const {name, height, age} = obj
console.log(name);
console.log(height);
console.log(age);
浙公网安备 33010602011771号