前端基本_ES6

2023年2月7日 107次阅读 来源: 104828720

声明

  • 三大关键字
声明变量：
 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

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

在一切html DOM构造衬着完成和其他脚步实行完成再实行js代码
  • html导入js模块
1、导入一般js文件

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

2、导入模块js文件

type="module"
默许异步加载（defer）
    原文作者：104828720
    原文地址: https://segmentfault.com/a/1190000017858113
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞