注意事項

代碼中的注釋有筆記如

// 1.變量不能重復聲明

有一些錯誤示范代碼，為了代碼整體可運行，將其注釋如

let star='jaychou';
// let star='jollin'
// Uncaught SyntaxError: Identifier 'star' has already been declared

當代碼有輸出是，通常將輸出放在對應代碼下一行，并注釋如下

// let star='jollin'
// Uncaught SyntaxError: Identifier 'star' has already been declaredconst TEAM = ['70KG','baisha'];
TEAM.push('MAZHE');
console.log(TEAM);
//  ['70KG', 'baisha', 'MAZHE']

1.聲明變量

<script>let a;let b,c,d;let e=100;let f=521, g='iloveyou', h=[];// 1.變量不能重復聲明let star='jaychou';// let star='jollin'// Uncaught SyntaxError: Identifier 'star' has already been declared// 2.塊級作用域，全局，函數，eval// if else while for{let girl='jollin';}// console.log(girl);// Uncaught ReferenceError: girl is not defined// 3.不存在變量提升// console.log(boy);// Uncaught ReferenceError: Cannot access 'boy' before initializationlet boy='jaychou';// 4.不影響作用域鏈{let school='xxschool';function fn(){console.log(school);}fn();}
</script>

2.定義常量

<script>// 聲明常量const SCHOOL = 'xxschool'// 1.一定要賦初始值// const A;// Uncaught SyntaxError: Missing initializer in const declaration// 2.一般常量使用大寫// 3.常量的值不能修改// SCHOOL='yyschool'// Uncaught TypeError: Assignment to constant variable.// 4.塊級作用域{const PLAYER='70KG';}// console.log(PLAYER);// Uncaught ReferenceError: PLAYER is not defined// 5.對于數組和對象的元素修改，不算做對常量的修改，不會報錯const TEAM = ['70KG','baisha'];TEAM.push('MAZHE');console.log(TEAM);//  ['70KG', 'baisha', 'MAZHE']
</script>

3.解構賦值

<script>// ES6允許按照一定模式從數組和對象中提取值，對變量進行賦值，稱為解構賦值。// 1.數組的解構const F4 = ['A1','B2','C3','D4'];let [A,B,C,D] = F4;console.log(A,B,C,D);// A1 B2 C3 D4// 2.對象的解構const zhou = {name:'jaychou',age:'40',skill: function(){console.log('我可以唱歌');}};let {name,age,skill} = zhou;console.log(name,age,skill);// jaychou 40 ? (){//         console.log('我可以唱歌');// }
</script>

4.模板字符串

<script>// ES6引入新的字符串聲明方式``// 1.聲明let str1 = `這是一個字符串`;console.log(str1);// 這是一個字符串// 2.內容中可以出現換行符let str2 = `<ul><li>A1</li><li>B2</li><li>C3</li><li>D4</li></ul>`// 3.變量拼接let star = '周杰倫';let str3 = `我最喜歡聽${star}的歌曲`console.log(str3)// 我最喜歡聽周杰倫的歌曲
</script>

5.簡化對象寫法

<script>// ES6允許在大括號里，直接寫入變量和函數，作為對象的屬性和方法let name = 'jaychou';let skill = function(){console.log('i can sing');}const star = {name,skill,age(){console.log('40');}}console.log(star);// {name: 'jaychou', skill: ?, age: ?}
</script>

6.箭頭函數

<script>// ES6允許使用箭頭(=>)定義函數// 聲明一個函數let skill=function(a,b){return a+b;}let skill2=(a,b)=>{return a+b;}// 調用函數let result = skill(1,2);let result2 = skill(2,4);console.log(result);// 3console.log(result2);// 6// 1.this是靜態的，this始終指向函數聲明時所在作用域下的this的值function getName(){console.log(this.name);}let getName2 = () => {console.log(this.name);}// 設置window對象的name屬性window.name = 'name of window';const star={name:'jaychou'}// 直接調用getName();// name of windowgetName2();// name of window// call 方法調用getName.call(star);// jaychougetName2.call(star);// name of window// 2.不能作為構造實例化對象let Person=(name,age)=>{this.name=name;this.age=age;}// let me=new Person('xiaoming','30');// Uncaught TypeError: Person is not a constructor// 3.不能使用arguments變量// let fun=()=>{//     console.log(arguments);// }// fun(1,2,3);// Uncaught ReferenceError: arguments is not defined// 4.箭頭函數的簡寫// 1).省略小括號，形參只有一個的時候let add=n=>{return n+n;}console.log(add(3))// 6// 2). 省略花括號，當代碼只有一條語句的時候，此時return必須省略，// 而且語句的執行結果就是函數的返回值let square = n => n*n;console.log(square(4))// 16// 示例：從數組中返回偶數的元素const arr=[1,6,9,100,10];const even_result = arr.filter(function(item){if (item%2===0){return true;}else{return false;}})console.log(even_result);// [6, 100, 10]const even_result2 = arr.filter(item=>item%2===0)console.log(even_result2);// [6, 100, 10]
</script>

箭頭函數適合與this無關的回調，定時器，數組的方法回調
不適合與this有關的回調，時間回調，對象的方法

7.參數默認值

<script>// ES6允許給函數的參數賦值初始值// 1.形參初始值，具有默認的參數，一般位置要靠后function add(a, b, c = 10) {return a + b + c;}let result = add(1, 2)console.log(result);// 13// 2.與解構賦值結合function connect({host = '127.0.0.1', port, username, password}) {console.log(host);console.log(port);console.log(username);console.log(password);}connect({host: 'localhost',port: '3306',username: 'username',password: 'password',})// localhost// 3306// username// password
</script>

8.rest參數

<script>// ES6引入rest參數，用于獲取函數的實參，用來代替arguments// ES5獲取實參的方式function date(){console.log(arguments);}date('girl1','girl2','girl3')// Arguments(3) ['girl1', 'girl2', 'girl3', callee: ?, Symbol(Symbol.iterator): ?]// rest參數function date2(...args){console.log(args);}date2('girl1','girl2','girl3')// (3) ['girl1', 'girl2', 'girl3']function fun(a,b,...args){console.log(a);console.log(b);console.log(args);}fun(1,2,3,4,5,6);// 1// 2// (4) [3, 4, 5, 6]
</script>

9.擴展運算符

<div></div>
<div></div>
<div></div>
<script>// 擴展運算符能將數組轉換為逗號分割的參數序列const f4=['f1','f2','f3','f4']function singer(){console.log(arguments);}singer(...f4);// Arguments(4) ['f1', 'f2', 'f3', 'f4', callee: ?, Symbol(Symbol.iterator): ?]// 應用1.數組的合并const boys=['boy1','boy2'];const girls=['girl1','girl2'];const boysAndGirls=boys.concat(girls)const boysAndGirls2=[...boys,...girls]console.log(boysAndGirls);// (4) ['boy1', 'boy2', 'girl1', 'girl2']console.log(boysAndGirls2);// (4) ['boy1', 'boy2', 'girl1', 'girl2']// 應用2.數組的克隆const fruits=['apple','banana','orange'];const fruits2 = [...fruits]console.log(fruits);// 將偽數組轉換成真正的數組const divs = document.querySelectorAll('div');const divArr = [...divs];console.log(divs);// NodeList(3) [div, div, div]console.log(divArr);// (3) [div, div, div]
</script>

10.Symbol

<script>// 創建Symbollet s=Symbol();let s2 = Symbol('abcd');let s3 = Symbol.for('ABCD');console.log(s, typeof s);// Symbol() 'symbol'console.log(s2, typeof s2);// Symbol(abcd) 'symbol'console.log(s3, typeof s3);// Symbol(ABCD) 'symbol'// 不能與其他類型數據進行運算// 數據類型巧記 USONB: YOU SO NB// U: undefined// S: String, Symbol// O: Object// N: null, Number// B: Boolean// Symbol創建對象屬性// 向對象中添加方法up downlet game = {name:'俄羅斯方塊'}let methods = {up: Symbol('up'),down: Symbol('down')};game[methods.up] = function(){console.log('我可以改變形狀');}game[methods.down] = function(){console.log('我可以快速下降');}console.log(game);// {name: '俄羅斯方塊', Symbol(up): ?, Symbol(down): ?}let game2 = {name:'狼人殺',[Symbol('say')]: function(){console.log('我可以發言');},[Symbol('zibao')]: function(){console.log('我可以自爆');},}console.log(game2)// {name: '俄羅斯方塊', Symbol(up): ?, Symbol(down): ?}
</script>

11.生成器函數

<script>// 生成器其實就是一個特殊的函數function* gen() {yield 'alpha';yield 'bob';yield 'charlie';}let iterator = gen();console.log(iterator.next());// {value: 'alpha', done: false}console.log(iterator.next());// {value: 'bob', done: false}console.log(iterator.next());// {value: 'charlie', done: false}console.log(iterator.next());// {value: undefined, done: true}// 遍歷for (let v of gen()) {console.log(v);}// alpha// bob// charlie// 生成器函數實例// 回調地獄// setTimeout(() => {//     console.log(111);//     setTimeout(() => {//         console.log(222);//         setTimeout(() => {//             console.log(333);//         },3000)//     },2000)// },1000)function one() {setTimeout(() => {console.log(111);iterator2.next();},1000)}function two() {setTimeout(() => {console.log(222);iterator2.next();},2000)}function three() {setTimeout(() => {console.log(333);iterator2.next();},3000)}function * gen2(){yield one();yield two();yield three();}let iterator2=gen2();iterator2.next();// 1秒后輸出：111// 2秒后輸出：222// 3秒后輸出：333</script>

12.Promise基本語法

<script>// 實例化 Promise 對象const p = new Promise(function(resolve,reject){setTimeout(function(){let data = '用戶數據';resolve(data);// let err='錯誤信息';// reject(err);},1000);});// 調用 Promise 對象的then方法p.then(function(value){console.log(value);},function(reason){console.error(reason);})// 1秒后輸出：用戶數據
</script>

13.集合set

<script>// set的聲明let s= new Set(['a','b','c']);let s2 = new Set(['A','B','C','D','E'])// 元素個數console.log(s2.size);// 5// 添加新元素s2.add('F');console.log(s2);// Set(6) {'A', 'B', 'C', 'D', 'E', …}// 刪除元素s2.delete('A');console.log(s2);// Set(5) {'B', 'C', 'D', 'E', 'F'}// 查詢元素console.log(s2.has('C'));// trueconsole.log(s2.has('O'));// false// 清空s2.clear();console.log(s2)// Set(0) {size: 0}// 遍歷for(let v of s){console.log(v)}// a// b// c
</script>

14.Map

<script>// 聲明Maplet m = new Map();// 添加元素m.set('name','jaychou');m.set('skill',function(){console.log('我可以唱歌！');});let key={star:'jollin'};m.set(key,['value1','value2','value3']);// sizeconsole.log(m.size)// 3// 刪除m.delete('name');// 獲取console.log(m.get('skill'));// ? (){//     console.log('我可以唱歌！');// }console.log(m.get(key));// (3) ['value1', 'value2', 'value3']// 清空m.clear();
</script>

15.類class

<script>// 構造一個類class MobilePhone{// 構造方法，名字不能修改constructor(brand,price){this.brand = brand;this.price = price;}// 方法必須使用該語法，不能使用ES5的對象完整形式call(){console.log('我可以打電話')}}let onePlus = new MobilePhone("1+",2000);console.log(onePlus);// MobilePhone {brand: '1+', price: 2000}
</script>

16.數值擴展

<script>// 0.Number.EPSILON 是JavaScript表示的最小精度function equal(a,b){if (Math.abs(a-b)<Number.EPSILON){return true;}else{return false;}}console.log(0.1+0.2===0.3);// falseconsole.log(equal(0.1+0.2,0.3));// true// 1.二進制和八進制let b=0b1010;let o=0o177;let d=200;let x=0xff;console.log(x);// 255// 2.Number.isFinite檢查一個值是否為有限數console.log(Number.isFinite(100));// trueconsole.log(Number.isFinite(100/0));// falseconsole.log(Number.isFinite(Infinity));// false// 3.Number.parseInt Number.parseFloat字符串轉整數console.log(Number.parseInt('312123123abc'));// 312123123console.log(Number.parseFloat('3.231232131dii'));// 3.231232131// 4.Number.isNaN檢查一個數值是否為NaNconsole.log(Number.isNaN(23));// false// 5.Number.isInteger 判斷是否整數// 6.Math.trunc 抹掉小數部分// 7.Math.sign 判斷一個數符號console.log(Math.sign(100));// 1console.log(Math.sign(0));// 0console.log(Math.sign(-2000));// -1
</script>

17.對象私有屬性

<script>class Person{// 公有屬性name;// 私有屬性#age;#weight;// 構造方法constructor(name,age,weight){this.name=name;this.#age=age;this.#weight=weight;}intro(){console.log(this.name);console.log(this.#age);console.log(this.#weight);}}let girl=new Person('nana','23','45');console.log(girl.name);console.log(girl.age);console.log(girl.weight);// nana// undefined// undefinedgirl.intro();// nana// 23// 45
</script>

18.對象方法擴展

<script>// 1.Object.is 兩個值是否完全相等console.log(Object.is(120, 120));// trueconsole.log(Object.is(NaN, NaN));// trueconsole.log(NaN === NaN);// false// 2.Object.assign對象的合并const config1 = {host: 'localhost',port: 3306,name: 'root',pass: 'root'};const config2 = {host: 'localhost',port: 33060,name: 'name',pass: 'pass'}console.log(Object.assign(config1, config2));// {host: 'localhost', port: 33060, name: 'name', pass: 'pass'}// 3.Object.setPrototypeOf Object.getPrototypeOf// Object.setPrototypeOf() 靜態方法可以將一個指定對象的原型// （即內部的 [[Prototype]] 屬性）設置為另一個對象或者 null。const obj = {};const parent = { foo: 'bar' };console.log(obj.foo);// undefinedObject.setPrototypeOf(obj, parent);console.log(obj.foo);// barconsole.log(Object.getPrototypeOf(obj))// {foo: 'bar'}
</script>

19.js文件模塊化

ES6模塊暴露數據，m1.js

// 分別暴露
export let star='jaychou';export function skill() {console.log('i can sing');
}// 統一暴露
let movie='Titanic';function category(){console.log('romance')
}export{movie,category};// 默認暴露
export default{music:'Scarborough Fair',singer: function(){console.log('sarah brightman');}
}

ES6引入模塊數據，html文件

<script type="module">// 1.通用導入方式import * as m1 from './m1.js';// 2.解構賦值方式import {star,skill} from './m1.js';import {movie as mv, category} from './m1.js';import {default as dft} from './m1.js';// 針對默認暴露import dft2 from './m1.js';console.log(dft2);// {music: 'Scarborough Fair', singer: ?}
</script>

20.async和await

<script>// 創建promise對象const p = new Promise((resolve, reject) => {// resolve("user data");reject('error occured');})// await要放在async函數中async function main() {try {let rst = await p;console.log(rst);} catch (e) {console.log(e);}}main();// error occured
</script>

21.正則擴展-正向斷言與反向斷言

<script>// 聲明字符串let str = 'js3232323hahaoo44gaga';// 正向斷言const reg=/\d+(?=ga)/;const rst = reg.exec(str);console.log(rst);// (1) ['44', index: 15, input: 'js3232323hahaoo44gaga', groups: undefined]// 反向斷言const reg2=/(?<=o)\d+/;const rst2=reg2.exec(str);console.log(rst2);// (1) ['44', index: 15, input: 'js3232323hahaoo44gaga', groups: undefined]
</script>

22.可選鏈操作符

<script>// ?.function main(config) {const dbHost = config && config.db && config.db.host;const dbHost2 = config?.cache?.host;console.log(dbHost);console.log(dbHost2);}main({db: {host: '192.168.1.1',username: 'dbuser',},cache: {host: '192.168.1.1',username: 'cacheuser'}})// 192.168.1.1// 192.168.1.1
</script>

23.動態import

hello.js

export function ok(){alert('nihao！');
}

m1.js

const btn = document.getElementById('btn');btn.onclick = function(){import('./hello.js').then(module=>{module.ok();})
}