1.ES新特性
-
什么是ES6?
是脚本浏览器语法的规范,而各种我们熟悉的js语言,如javascript则是规范的具体实现
-
创建es6文件夹,创建一个let.html
**shirt+!**生成
1.let&const
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// var声明的变量会越域
// let声明到变量会有严格的作用域
// {
// var a = 1;
// let b = 3;
// }
// console.log(a);
// console.log(b); // b is not defined
// var可以声明多次
// let只能声明一次
// var m = 1;
// var m = 2;
// let n = 3;
// console.log(m);
// console.log(n);
// var会存在变量提升
// let不会变量提升
// console.log(a);
// var a = 1;
// console.log(b); // Cannot access 'b' before initialization
// let b = 2;
// const声明常量
const a = 1;
a = 3; // Assignment to constant variable.
</script>
</body>
</html>
2.结构表达式&字符串
<script>
// let arr = [1, 2, 3];
// // 数组赋值
// let [a, b, c] = arr;
// console.log(a, b, c);
// 对象值打印
const person = {
name: "liubo",
age: 18,
language: ['a', 'b', 'c']
}
const { name, age, language } = person;
console.log(name, age, language);
// 字符串扩展
let str = "hello.vue";
console.log(str.startsWith("hello")); // true
console.log(str.endsWith(".vue")); // true
console.log(str.includes("hello")); // true
console.log(str.includes("e")); //true
function fun(){
return "这是一个函数"
}
// 字符串插入变量和表达式
let info = `我叫${name},我今年${age}岁,我想说一句话:${fun()}`;
console.info(info);
</script>
3.箭头函数
<script>
// 函数不传就设置默认值
function fun(a, b = 1) {
return a + b;
}
console.log(fun(10));
// 传可变参数
function fun1(...values) {
console.log(values.length);
}
fun1(1, 2, 3, 4);
fun1(1, 2);
// 计算值
let sum = (a, b) => {
c = a + b;
return a + c;
}
console.log(sum(10, 20));
let person = {
name: "liubo",
age: 18
}
// 函数直接打印对象的name
let hello = ({ name }) => console.log("hello," + name);
hello(person);
</script>
4.对象优化
<script>
const person = {
name: "javk",
age: 12,
language: ['java', 'js']
}
console.log(Object.keys(person)); // ["name","age","language"]
console.log(Object.values(person)); // ["javk",12,Array(3)]
console.log(Object.entries(person)); // [Array(2),Array(2),Array(2)]
const target = {a:1};
const source1 = {b:2};
const source2 = {c:3};
Object.assign(target,source1,source2);
console.log(target); // {a:1,b:2,c:3}
// 声明对象的简写方式
const name = "张三";
const age = 21;
const person1 = {name,age};
console.log(person1);
// 对象函数简写
let person3 = {
name : "里斯",
// 箭头函数里面不能使用this. 必须使用对象.
eat : food => console.log(person3.name +"在吃"+food),
eat2(food){
console.log(person3.name +"在吃"+food);
}
}
person3.eat("苹果");
person3.eat2("香蕉");
// 对象扩展运算符
// 1.拷贝对象
let p1 = {name:"abc",age :12}
let someone = {...p1}
console.log(someone)
// 2.合并对象
let age1 = {age:14}
let name1 = {name :"kk"}
let p3 = {...age1,...name1}
console.log(p3)
</script>
5.map和reduce
<script>
// map : 将arr数组中的元素都*2
var arr = ['1', '2', '3'];
arr = arr.map(item => item * 2);
console.log(arr);
// reduce:为数组中每一个元素依次执行回调函数,不包括数组中被删除或从未赋值的元素
let result = arr.reduce((a, b) => {
console.log("上一次处理的值" + a);
console.log("当前处理的值" + b);
return a + b;
})
console.log(result);
</script>
6.promise异步编排
https://blog.csdn.net/weixin_44415928/article/details/105674889