目录
1,let和const
let声明的变量是块级作用域,作用域仅在当前的代码块中。
if (5>3) {
let a =10;
}
// console.log(a);// a is not defined
const:常量声明,声明之后只能被赋值一次。
2,字符串模板
使用反撇号(``)
声明字符串插值模板,在字符串插值模板中可以使用${}
插入一个变量的值,可以直接输入回车和双引号等特殊字符。
let name='king';
let age =21;
let str1 =`我叫${name},今年${age}岁`;
console.log(str1); //=我叫king,今年21岁
3,解构赋值
3.1,对象解构赋值
对象的解构赋值,可以将对象中的属性赋值给若干个变量。
let obj = {
date: '2021',
address: '郑州',
people: 'king'
}
/* 解构赋值 */
let {people,time,address} =obj;
console.log(people);//king
3.2,数组解构赋值
let arr =['苹果','香蕉','橘子'];
/* 解构赋值 */
let [a,b,o] =arr;
console.log(a) //苹果
3.3,函数参数解构赋值
函数参数进行结构赋值,当函数的参数是一个对象时,可以直接在形参列表中进行解构,并且可以设置某个参数的默认值。
function f1({ a, b, c = 10, d }) {
console.log(a);
console.log(b);
console.log(c);
console.log(d);
};
f1({ a: 1, b: 5, d: 4 }) //1,5,10,4
4,Symbol
表示独一无二的值,最大的用法是用来定义对象的唯一属性名。
5, 箭头函数
不需要function
关键字来创建函数,省略 return 关键字,this始终指向函数申明时所在作用域下的this值。
//es5
var fun = function() {
}
//es6,箭头函数
var fn = () => {
}
6,for of
for of
遍历的是键值对中的值
let arr = ['a','b','c','d','e','f']
for (let item of arr){
console.log(item) //'a','b','c','d','e','f'
}
for in
遍历的是键值对中的键
let obj = {
name:'king',
status:'200',
hegiht:'175',
hue:'balck',
}
for (let item in obj){
console.log(item) //name,status,hegiht,hue
}
7,class类
ES6 中支持 class 语法,不过,ES6的class不是新的对象继承模型,它只是原型链的语法糖表现形式。
class Car{
constructor() {
console.log("this is a car");
}
color() {
console.log('black');
}
state() {
console.log("It's moving now");
}
}
console.log(typeof Car); // function
let HQ = new Car();
HQ.color(); // "black"
HQ.state(); // "It's moving now"
8,模块导入、导出
8.1,导入
es6使用import
导入模块(文件),两种方式:
//1
import ‘自定义名字’ from ‘模块名字/路径’;
//2
import ‘路径’;
通过 import xxx from xxx的方式引入模块,自定义名字相当于定义一个变量,用来接收即将导入的模块。
import Vue from 'vue'
路径可以有很多方式,既可以是绝对路径,也可以是相对路径,甚至只是一个简单的模块名称,更甚至连文件后缀都不需要。当你使用该命令时,系统会自动从配置文件中指定的路径中去寻找并加载正确的文件。
import './styles/element-variables.scss'
import '@/styles/index.scss'
8.2,导出
ES6 通过 export
和export default
导出(变量、函数和对象)。
在一个文件中通过 import 导入另一个文件,通过变量即可以接收到导出的数据。
let name = 'ren',age = 12;
//注意:变量需要用大括号包裹,然后才能向外导出
export {
name,
age
};
总结:使用 export 向外输出成员时,可以同时输出多个,并且必须用‘{}’大括号包裹,在其他地方使用 import 导入时,接收成员的变量名必须和这里输出的名称一致,同时,可以根据实际情况,仅接收实际需要的的成员(接收的时候也要用大括号包裹)
。
9,Promise
10,async/await
比promise更好的解决了回调地狱。
async function() {
awiat fn()
}