前端基礎_ES6

wuyangnju 發布于2019-08-23 14:39 / 2245人閱讀

摘要：聲明三大關鍵字聲明變量語法語法聲明常量語法聲明變量特性支持函數作用域支持預解析所謂變量提升支持重復聲明同域同名變量函數作用域局部作用域預解析重復聲明聲明變量推薦特性支持塊作用域不支持預解析不支持重復聲明同域同名變量塊作用域局部作用域不支持預

聲明

三大關鍵字

聲明變量：
 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）

云服務器 GPU云服務器前端基礎前端基礎教程前端零基礎零基礎前端

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/100939.html

前端培訓-初級階段（13） - 類、模塊、繼承

摘要：前端培訓初級階段語法變量值類型運算符語句前端培訓初級階段內置對象函數基礎內容知識我們會用到。模塊定義加載模塊繼承中的繼承依賴于原型鏈繼承。前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現在前端開發的定義已經遠遠不止這些。前端小課堂（HTML/CSS/JS），本著提升技術水平，打牢基礎知識的中心思想，我們開課啦（每周四）。該文為前...

luodongseu 2019-08-26 13:43 評論0 收藏0
再和“面向對象”談戀愛 - 繼承（五）

摘要：面向對象里最大的特點應該就屬繼承了。在第二篇文章里說過原型實例跟構造函數之間的繼承，并且還講了一道推算題。通過上一篇文章想必各位老鐵已經熟悉了class了，這篇文章接著介紹繼承。面向對象里最大的特點應該就屬繼承了。一個項目可能需要不斷的迭代、完善、升級。那每一次的更新你是要重新寫呢，還是在原有的基礎上改吧改吧呢？當然，不是缺心眼的人肯定都會在原來的基礎上改吧改吧，那這個改吧改吧就需要...

Airmusic 2019-08-23 10:45 評論0 收藏0
【JS基礎】一文看懂前端模塊化規范

摘要：參考資料前端模塊化詳解完整版入門近一萬字的語法知識點補充徹底搞清楚中的和和詳解前言前端的模塊化之路經歷了漫長的過程，想詳細了解的小伙伴可以看浪里行舟大神寫的前端模塊化詳解(完整版)，這里根據幾位大佬們寫的文章，將模塊化規范部分做了匯總和整理，希望讀完的小伙伴能有些收獲，也希望覺得有用的小伙伴可以點個贊，筆芯。什么是模塊將一個復雜的程序依據一定的規則(規范)封裝成幾個塊(文件)...

HelKyle 2019-08-23 17:09 評論0 收藏0
前端規范(ES6BEMOOCSSSMACSS)

摘要：前端規范在實際開發中，由于團隊成員編碼習慣不一，技術層次不同，開發前定制并遵循一種代碼規范能提高代碼質量，增加開發效率。是定義了一種的命名規范，每個名稱及其組成部分都是存在一定的含義。前端規范在實際開發中，由于團隊成員編碼習慣不一，技術層次不同，開發前定制并遵循一種代碼規范能提高代碼質量，增加開發效率。 Javascript Javascript規范直接參考airbnb: ES6 ...

Object 2019-08-02 15:54 評論0 收藏0
前端規范(ES6BEMOOCSSSMACSS)

摘要：前端規范在實際開發中，由于團隊成員編碼習慣不一，技術層次不同，開發前定制并遵循一種代碼規范能提高代碼質量，增加開發效率。是定義了一種的命名規范，每個名稱及其組成部分都是存在一定的含義。前端規范在實際開發中，由于團隊成員編碼習慣不一，技術層次不同，開發前定制并遵循一種代碼規范能提高代碼質量，增加開發效率。 Javascript Javascript規范直接參考airbnb: ES6 ...

willin 2019-08-30 13:02 評論0 收藏0