摘要:基礎(chǔ)實(shí)踐和和的區(qū)別輸出輸出猜猜是否報錯,以及輸出什么常量模板字符串普通字符串我是一個好人多行字符串我還是可以換行的字符串猜猜的長度是多少猜猜是否相等插入變量張三你好,很高興認(rèn)識你,我是,我的性別是男,我今年歲,我想說李四延伸思考解構(gòu)賦值數(shù)組
ES6 基礎(chǔ)實(shí)踐 let 和 const let 和 var 的區(qū)別
var a = 1; window.a; // 輸出:1 let b = 2; window.b; // 輸出:undefined
{ let a = 1; // let a = 2; var b = 2; } console.log(a); console.log(b);
let a = 1; { console.log(a); let a = 2; }
let i = "a"; for(let i = 0; i < 10; i++){ // let i = "b"; console.log(i); } // 猜猜是否報錯,以及輸出什么const 常量
const a = [1,2,3]; const b = a; const c = [1,2,3];模板字符串 普通字符串
`我是一個好人`多行字符串
console.log(`我還是可以 換行的字符串`);
let a = `1 2 3 4`; a.length //猜猜a的長度是多少? let b = "1 2 3 4"; a === b //猜猜是否相等?插入變量
let name = "張三"; let age = 12; function say(name){ return "你好,很高興認(rèn)識你," + name; } console.log(`我是${name},我的性別是:${ "男" },我今年 ${ age * 2 }歲,我想說: ${ say("李四") }`);延伸思考
let a = "abc"; let b = new String("abc"); a == b? a === b?解構(gòu)賦值 數(shù)組解構(gòu)
let a = 1, b = 2, c = 3;
let [a, b, c] = [1, 2, 3];
let [a, ...b] = [1, 2, 3, 4];
let [a = 1] = [2];
let [a = 1] = [null];
let [a = 1] = [undefined];
let [a] = [null];
let [a] = [];
對象解構(gòu)let {a, b} = {a: 1, b: 2 };
let {a : newA, b: newB} = {a: 1, b: 2 };
let {a = 1} = {};
let {a = 1} = {a:2};
1、先兩句一起執(zhí)行: let a = 1; {a} = {a: 2} 2、分開一條一條執(zhí)行 let a = 1; {a} = {a: 2} 3、反過來執(zhí)行 {a} = {a: 2} let a = 1; a ? window.a ? 上面的a 和 window.a 各輸出什么?
let a = 1; ({a} = {a: 2}) 如果這樣的兩句一起執(zhí)行呢?數(shù)組和對象解構(gòu)?
用途
交換變量的值
let a = 1; let b = 2; [a, b] = [b, a];
從函數(shù)返回多個值
function example() { return [1, 2, 3]; } let [a, b, c] = example();
function example() { return { a: 1, b: 2 }; } let {a, b} = example();
函數(shù)參數(shù)的定義
function example([a, b, c]) { console.log(a, b, c); } example([1, 2, 3]);
提取JSON數(shù)據(jù)
let myDataList = { name: "張三", sex: "男", age: "24" }; let { name, sex, age} = myDataList;
函數(shù)參數(shù)的默認(rèn)值
let throwMyErr = (errName) => { throw new Error(`請傳入?yún)?shù) ${errName}`); } let example = (name = throwMyErr("name")) => { console.log(name); }箭頭函數(shù)
let example = x => x * 2;
let myObj = { funA : function(){ setTimeout(function(){ console.log(this); }, 500); } } let myObj = { funA : function(){ setTimeout(() => { console.log(this); }, 500); } }class和extends
function SayHellowES5 (){ this.name = "SARS"; } SayHellowES5.prototype.say = function () { console.log(this.name); };
class SayHellow { constructor() { this.name = "SARS"; } say(){ console.log(this.name); } } typeof SayHellow SayHellow === SayHellow.prototype.constructor
var a = new SayHellow(); a === SayHellow ? a.constructor === SayHellow ?
var b = new SayHellow(); a.__proto__ === b.__proto__ ? 原型是否相等?
b.__proto__.say2 = function(){ alert("say2"); } a.say2() ? 思考 this 到底指的哪?原型呢?同樣下面的繼承是否也一樣? (確認(rèn)下節(jié)課內(nèi)容)
class SayBey extends SayHellow{ sayBey(){ console.log("beybey!"); } }
class toBey extends SayHellow{ sayBey(){ console.log(`${this.name} beybey!`); } }
class toBey2 extends SayHellow{ constructor() { this.sex = "女"; } sayBey(){ console.log(`${this.sex} beybey!`); } } //想想為什么報錯?模塊化 export import 導(dǎo)出模塊
export let myLetA = 1; export let myLetB = 2; export let example = () => { alert("SARS"); }
let myLetA = 1; let myLetB = 2; let example = () => { alert("SARS"); } export {myLetA, myLetB, example as name};
// 正確 var a = 1; export default a; // 錯誤 export default var a = 1;導(dǎo)入模塊
import {myLetA, myLetB, example as name} from "./main"; import SARS from "./main";
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/82140.html
摘要:是文檔的一種表示結(jié)構(gòu)。這些任務(wù)大部分都是基于它。這個實(shí)踐的重點(diǎn)是把你在前端練級攻略第部分中學(xué)到的一些東西和結(jié)合起來。一旦你進(jìn)入框架部分,你將更好地理解并使用它們。到目前為止,你一直在使用進(jìn)行操作。它是在前端系統(tǒng)像今天這樣復(fù)雜之前編寫的。 本文是 前端練級攻略 第二部分,第一部分請看下面: 前端練級攻略(第一部分) 在第二部分,我們將重點(diǎn)學(xué)習(xí) JavaScript 作為一種獨(dú)立的語言,如...
摘要:學(xué)習(xí)定稿有兩年多的時間了,斷斷續(xù)續(xù)通過一些博客,書籍也學(xué)到了很多知識。將各個部分的知識整理成一篇篇博文,以便于自己系統(tǒng)掌握和復(fù)習(xí)。整個系列主要參考了的深入理解,可以看作是對這本書的一個學(xué)習(xí)總結(jié),也向大家強(qiáng)烈推薦這本書作為的學(xué)習(xí)書籍。 學(xué)習(xí)es6 es6定稿有兩年多的時間了,斷斷續(xù)續(xù)通過一些博客,書籍也學(xué)到了很多es6知識??梢哉f,es6給js語言帶來了非常大的改進(jìn),引進(jìn)了很多好用的特性...
摘要:不過今天我希望能夠更進(jìn)一步,不僅僅再抱怨現(xiàn)狀,而是從我個人的角度來給出一個逐步深入學(xué)習(xí)生態(tài)圈的方案。最后,我還是想提到下對于的好的學(xué)習(xí)方法就是回顧參照各種各樣的代碼庫,學(xué)習(xí)人家的用法與實(shí)踐。 本文翻譯自A-Study-Plan-To-Cure-JavaScript-Fatigue。筆者看到里面的幾張配圖著實(shí)漂亮,順手翻譯了一波。本文從屬于筆者的Web Frontend Introduc...
閱讀 1537·2021-10-11 10:59
閱讀 1943·2021-09-09 11:36
閱讀 1459·2019-08-30 15:55
閱讀 1350·2019-08-29 11:20
閱讀 3091·2019-08-26 13:39
閱讀 1494·2019-08-26 13:37
閱讀 1992·2019-08-26 12:11
閱讀 1356·2019-08-23 14:28