前端基础_ES6

发布时间:2019-08-19 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了前端基础_ES6脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

声明

  • 三大关键字
声明变量:
 VARES5语法) 
 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预解析
必须声明后才能使用,否则报错
从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 @R_126_2150@ "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

<script src="./a.js" defer></script>

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

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

2、导入模块js文件

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

脚本宝典总结

以上是脚本宝典为你收集整理的前端基础_ES6全部内容,希望文章能够帮你解决前端基础_ES6所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。