前端基础_ES6

声明

  • 三大关键字
声明变量:
 var (ES5语法) 
 let (ES6语法)

声明常量:
 const  (ES6语法)
  • var 声明变量
特性
1、支持 函数作用域
2、支持 JS预解析 (所谓变量提升)
3、支持 重复声明 (同域同名变量)
1、函数作用域(局部作用域)
function show(){
    var a = '34';
}
console.log(a);      //underfind

2、JS预解析
console.log(name);   //underfind
var name = '1234';

3、重复声明
var a = '123';
var a = '4565';
  • let 声明变量 (推荐)
特性
1、支持 块作用域
2、不支持 JS预解析
3、不支持 重复声明 (同域同名变量)
1、块作用域(局部作用域)
if(true){
    var a = '34';
}
console.log(a);      //underfind

2、不支持JS预解析
必须声明后才能使用,否则报错
  • const 声明常量
从ES6开始引入常量概念
特性
1、 let所有特性
2、 声明时必须赋值,否则报错
3、 定义常量后,再也不能更改值
1、声明时必须赋值,否则报错
const a;  //报错
const a = 11;   //正确

2、定义常量后,基本类型是不能改了,但如果是对象或数组,是可以改对象内或数组内的值
const a = ['22','bb'];
a[0] = '你好';  //['你好','bb'];
  • 只声明,不赋值
var a;  //undefined 
let b;  //undefined
  • JS预解析

解构赋值

  • 应用场景
对象数组
  • ES5 做法
var obj = {
    name:"bbb",
    age:12
};
var name = obj.name;
var age = obj.age;

var arr = [123,'wtao'];
var a = arr[0];
var b = arr[1];
  • ES6 做法
let obj = {
    name:"bbb",
    age:12
};
let {name,age} = obj;
console.log(name);
console.log(age);

let arr = [123,'wtaddo'];
let [name,age] = arr;
console.log(name);
console.log(age);

函数

  • 默认值
  • 剩余值
  • 箭头函数

模块化

  • 注意事项
1、在一个项目里,多个不同模块导入(依赖)某个相同模块时,该模块只会加载并执行一次,
2、在同一个模块中,多次导入相同模块,只会加载并执行一次
3、在模块中,无论import(导入语句)写在哪个位置,执行时都会提前
4、模块有模块作用域
  • 导入语法
import defaultExport from "module-name";
import * as name from "module-name";
import { export } from "module-name";
import { export as alias } from "module-name";
import { export1 , export2 } from "module-name";
import { foo , bar } from "module-name/path/to/specific/un-exported/file";
import { export1 , export2 as alias2 , [...] } from "module-name";
import defaultExport, { export [ , [...] ] } from "module-name";
import defaultExport, * as name from "module-name";
import "module-name";
  • 导出语法
export { name1, name2, …, nameN };
export { variable1 as name1, variable2 as name2, …, nameN };
export let name1, name2, …, nameN; // also var, const
export let name1 = …, name2 = …, …, nameN; // also var, const
export function FunctionName(){...}
export class ClassName {...}

export default expression;
export default function (…) { … } // also class, function*
export default function name1(…) { … } // also class, function*
export { name1 as default, … };

export * from …;
export { name1, name2, …, nameN } from …;
export { import1 as name1, import2 as name2, …, nameN } from …;
export { default } from …;
  • 异步加载延迟执行
defer



在所有html DOM结构渲染完成和其他脚步执行完成再执行js代码
  • html导入js模块
1、导入普通js文件

type="application/javascript"
默认省略
默认同步加载

2、导入模块js文件

type="module"
默认异步加载(defer)

你可能感兴趣的