ECMAScript系列，第一章
JavaScript 是大家所瞭解的語言名稱，但是這個語言名稱是商標（ Oracle 公司註冊的商標）。因此，JavaScript 的正式名稱是 ECMAScript 。
一、ES6
1、let
語法：
<body>
<script>
//1、聲明變量
// let a;
// let b,c,d;
// let e = "123";
// let f = 521, g='iloveyou', h=[];
//2、變量不能重複聲明[var可以]
// let start="羅志祥";
// let start="小豬";
//3、塊級作用域[var可以]
// {
// let girl="周揚青";
// }
// console.log(girl);
//4、不存在變量提升[var可以]
// console.log(song);
// let song = "轉角遇到愛";
//5、不影響作用於鏈
// {
// let school="尚硅谷";
// function fn(){
// console.log(school);
// }
// fn();
// }
</script>
</body>
案例：
<body>
<div class="container over-flow">
<h2 class="page-header">點擊切換顏色</h2>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<script>
let items = document.getElementsByClassName("item");
// for(var i=0;i<items.length;i++){
// items[i].onclick = function(){
// //this.style.background="pink";
// items[i].style.background="pink"; //function中找不到i去外層找
// }
// }
// console.log(i); //這時候 i 爲 3
for(let i=0;i<items.length;i++){
items[i].onclick = function(){
//this.style.background="pink";
items[i].style.background="pink";
}
}
</script>
</body>
2、const常量
語法
一般常量、數組、對象都用const聲明
<body>
<script>
//1、聲明常量：一般常量、數組、對象都用const聲明
// const SCHOOL = "尚硅谷";
// console.log(SCHOOL);
//2、常量聲明默認大寫字母
// const A = "100";
//3、塊級作用域
// {
// const PLAYER="UZI";
// }
// console.log(PLAYER);
//4、常量值不能修改
// const NAME="LEE";
// NAME="李";
//5、對數組和對象常量的修改，不報錯[主要是常量的指針沒變]
// const ARRAY = ["a","b","c"];
// ARRAY.push("d");
// console.log(ARRAY);
</script>
</body>
3、解構賦值
語法：
<body>
<script>
//ES6 允許按照一定的模式從數組和對象中提取值，對變量進行賦值
//1、數組的解構：字段可以不同
// const F4 = ["劉能","趙四","宋小寶","小瀋陽"];
// let [liu,zhao,song,xiao] = F4;
// console.log(liu);
// console.log(zhao);
// console.log(song);
// console.log(xiao);
//2、對象的解構：字段必須相同
// const ZHAO = {
// name: "趙本山",
// age: "不詳",
// ability: function(){
// console.log("昨天，今天和明天");
// }
// }
// let {name,age,ability} = ZHAO;
// console.log(name);
// console.log(age);
// console.log(ability);
// ability();
// let {ability} = ZHAO;
// ability();
</script>
</body>
4、模板字符串
語法：
<body>
<script>
//ES6 中引入了新的字符串聲明 ` ` [原來是""和'']
//1、聲明
// let str = `我也是一個字符串`;
// console.log(str,typeof str);
//2、字符串中可以直接出現換行符
//原來
// let str2 = "<ul>"
// +"<li>沈騰</li>"
// +"<li>馬麗</li>"
// +"</ul>";
// console.log(str2);
// //現在
// let str3 = `<ul>
// <li>沈騰</li>
// <li>馬麗</li>
// </ul>`;
// console.log(str3);
//3、變量拼接
// let lovest = "沈騰";
// let say = `${lovest}是我最喜歡的喜劇演員`;
// console.log(say);
</script>
</body>
5、對象的簡化寫法
<body>
<script>
//ES6 允許直接在{}中寫入變量和函數，作爲對象的屬性和方法
// let name = "尚硅谷";
// let change = function(){
// console.log("we can change your life");
// }
// const school = {
// name,
// change
// }
// console.log(school);
// console.log(school.change());
//對象中函數的簡化寫法
// const school2 = {
// name,
// change2(){
// console.log("we can change your life too.");
// }
// }
// console.log(school2);
// console.log(school2.change2());
</script>
</body>
6、箭頭函數
語法：
<body>
<script>
//ES6 允許使用箭頭=> 定義函數
//1、聲明
//原來
// let fn = function(){
// console.log("i'm a function");
// }
// fn();
//現在
// let fn2 = ()=>{
// console.log("i'm a function too");
// }
// fn2();
//2、=>聲明的函數 this是靜態的，this始終指向函數聲明時所在的作用域下的this值
// window.name = "尚硅谷";
// const school = {
// name : "ATGUIGU"
// }
// let fn3 = function(){
// console.log(this.name);
// }
// let fn4 = ()=>{
// console.log(this.name);
// }
//直接調用
// fn3();
// fn4();
//call方法調用
// fn3.call(school);
// fn4.call(school);
//3、=>聲明的函數，不能作爲構造函數
// let person = (name,age)=>{
// this.name = name;
// this.age = age;
// }
// let me = new person("lee",20);
// console.log(me);
//4、=>聲明的函數 不能使用arguments變量
// let fn5 = function(){
// console.log(arguments);
// }
// fn5(1,2,3);
// let fn6 = ()=>{
// console.log(arguments);
// }
// fn6(4,5,6);
//5、箭頭函數的簡寫
//1)、只有一個參數時，可以省略小括號
// let add = n =>{
// return n+1;
// }
// console.log(add(7));
//2）、當代碼體只有一句話時，可以省略{}和return
// let pow = n => n*n;
// console.log(pow(7));
</script>
</body>
實例：
<body>
<div id="ad"></div>
<script>
//1、需求一：點擊div 2s後變色pink
// let ad = document.getElementById("ad");
//原來寫法
// ad.addEventListener("click",function(){
// console.log(this);//this是add
// let _this = this;
// //定時器
// setTimeout(function(){
// //修改背景顏色
// console.log(this);//this是window
// _this.style.background='pink';
// },2000);
// });
//箭頭函數寫法
// ad.addEventListener("click",function(){
// setTimeout(()=>{
// console.log(this);
// this.style.background='pink';
// },2000);
// });
//2、需求二：從數組中返回偶數元素
// let arr = [2,5,16,88,77,97];
//原來寫法
// let res = arr.filter(function(item){
// if(item%2===0){
// return true;
// }else{
// return false;
// }
// });
//箭頭函數寫法
// let res = arr.filter(item=>item%2===0);
// console.log(res);
//3、測試this
// window.name = 'ATGUIGU';
// const Person = {
// name:'lee',
// say:function(){
// console.log(this.name);
// }
// }
// Person.say();//this是person
// const Person2 = {
// name:"ren",
// say:()=>{
// console.log(this.name);
// }
// }
// Person2.say();//this是window
</script>
</body>
7、參數默認值
語法：
<body>
<script>
//ES6 允許給函數參數設置默認值
//1、形參初始值，具有默認值的參數：一般位置放在最後
// function add(a,b,c=10){
// return a+b+c;
// }
// let res = add(1,2);
// console.log(res);
//2、與解構賦值結合
// function connect(options){
// console.log(options.host);
// console.log(options.username);
// console.log(options.password);
// console.log(options.port);
// }
// connect({
// host: "localhost",
// username: "root",
// password: "root",
// port: 3306
// });
// function connect2({host="127.0.0.1",username,password,port}){
// console.log(host);
// console.log(username);
// console.log(password);
// console.log(port);
// }
// connect2({
// username: "root",
// password: "root",
// port: 3306
// });
</script>
</body>
8、rest參數
語法：
<body>
<script>
//ES6 引入rest，用以獲取函數的實參。用來替代arguments
//ES5 獲取實參方式：[獲取的是Object對象]
// function arr(){
// console.log(arguments);
// }
// arr(1,2,3);
//ES6 rest參數：[獲取的是數組]
// function arr2(...args){
// console.log(args); //這樣就可以在這裏用array的 方法了 filter some every map等
// }
// arr2(4,5,6);
//rest參數必須放在最後
// function arr3(a,b,...args){
// console.log(a);
// console.log(b);
// console.log(args);
// }
// arr3(7,8,9,10,11,12);
</script>
</body>
9、spread擴展運算符
語法：
<body>
<script>
//ES6 新增...擴展運算符，將數組轉化爲逗號分隔的 參數序列
const TFBOY = ["易烊千璽","王源","王俊凱"];
function chunwan(){
console.log(arguments);
}
chunwan(TFBOY);//1個參數 組成一個數組
chunwan(...TFBOY);//3個參數
</script>
</body>
實例：
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<script>
//1、數組的合併
// const kuaizi = ["王太利","肖央"];
// const fenghuang = ["曾毅","玲花"];
//原來合併數組
// const zuixuanxiaopingguo = kuaizi.concat(fenghuang);
// console.log(zuixuanxiaopingguo);
//現在合併數組
// const zuixuanxiaopingguo2 = [...kuaizi,...fenghuang];
// console.log(zuixuanxiaopingguo2);
//2、數組克隆
// const sanzhihua = ["E","G","M"];
// const sanyecao = [...sanzhihua];
// console.log(sanyecao);
//3、將僞數組轉爲真正的數組
// const divs = document.querySelectorAll("div");
// console.log(divs);
// const divarr = [...divs];
// console.log(divarr);
</script>
</body>
10、Symbol
語法：
<body>
<script>
//Symbol 表示獨一無二的值
//1、Symbol的值是獨一無二的，用來解決命名衝突的問題
//2、Symbol不能與其他數據進行運算
//3、Symbol定義的對象屬性不能使用for...in循環遍歷，可以用Reflect.ownKeys來獲取對象的所有鍵名
//1、創建Symbol
// let s = Symbol();
// console.log(s,typeof s);
// let s2 = Symbol("尚硅谷");
// let s3 = Symbol("尚硅谷");
// console.log(s2,typeof s2);
// console.log(s3,typeof s3);
// console.log(s2===s3);
// let s4 = Symbol.for("尚硅谷");
// let s5 = Symbol.for("尚硅谷");
// console.log(s4,typeof s4);
// console.log(s4,typeof s5);
// console.log(s4===s5);
//2、Symbol不可以與其他數據進行運算
// let res = s+100;
// let res2 = s+"100";
// let res3 = s+s;
//3、JS的基本數據類型 USONB
// undefined
// String Symbol
// Object
// Number Null
// Boolean
</script>
</body>
實例1：
<body>
<script>
//Symbol創建對象屬性
//1、向game中添加up down [如果game內容很多，無法一眼看出裏邊是否有up down，如何安全的添加]
// const game = {
// name: "遊戲",
// up:function(){
// console.log("up up up up");
// },
// down:function(){
// console.log("down down down down");
// }
// }
//先聲明一個對象
// const method = {
// up : Symbol(),
// down : Symbol()
// }
// game[method.up] = function(){
// console.log("this is symbol up");
// }
// game[method.down] = function(){
// console.log("this is symbol down");
// }
// console.log(game);
//2、第二種添加方式
// let say = Symbol();
// const youxi = {
// name : "狼人殺",
// [say]:function(){
// console.log("say...");
// },
// [Symbol("zibao")]:function(){
// console.log("zibao...");
// },
// }
// console.log(youxi);
// youxi[say]();
</script>
</body>
11、迭代器
<body>
<script>
//聲明一個數組
const xiyou = ["唐僧","孫悟空","豬八戒","沙僧"];
//for...in
for(let v in xiyou){
console.log(xiyou[v]);//V是index腳標
}
//for...of
for(let v of xiyou){
console.log(v);//V是value值
}
//iterator
const ite = xiyou[Symbol.iterator]();
let obj = null;
do{
obj = ite.next();
console.log(obj.value);
}while(!obj.done);
</script>
</body>
實例：
<body>
<script>
//定義一個對象，自定義iterator方法
const Person = {
name : "person name",
arrs : [
"aaa",
"bbb",
"ccc",
"ddd"
],
[Symbol.iterator]:function(){
let index = 0;
return {
next:()=>{
if(index<this.arrs.length){
const res ={value:this.arrs[index],done:false};
index++;
return res;
}else{
return {value:undefined,done:true};
}
}
}
}
}
for(let v of Person){
console.log(v);
}
</script>
</body>
12、生成器
語法：
<body>
<script>
//生成器函數是ES6提供的一種 異步編程 解決方案
//原來：異步編程 純回調函數 ajax
//yield 是ES6的新關鍵字，使生成器函數執行暫停，yield關鍵字後面的表達式的值返回給生成器的調用者。它可以被認爲是一個基於生成器的版本的return關鍵字
//語法
function * gen(){
console.log(1);
yield "你好啊";
console.log(2);
yield "你也好啊";
console.log(3);
yield "你真好啊";
console.log(4);
}
let iterator = gen();
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
for(let v of gen()){
console.log(v);
}
</script>
</body>
生成器函數的參數傳遞
<body>
<script>
function * gen(args){
console.log(args);
let one = yield 111;
console.log(one);
let two = yield 222;
console.log(two);
let three = yield 333;
console.log(three);
}
let iterator = gen('AAA');
console.log(iterator.next()); //111
console.log(iterator.next('BBB'));//222
console.log(iterator.next('CCC'));//333
console.log(iterator.next('DDD'));//undefined
</script>
</body>
生成器函數實例：
<body>
<script>
//需求 1s後 控制檯輸出aaa, 之後再2s 控制檯輸出bbb ,再3s 控制檯輸出ccc
//原來，回調函數裏有回調
// setTimeout(()=>{
// console.log("aaa");
// setTimeout(()=>{
// console.log("bbb");
// setTimeout(()=>{
// console.log("ccc");
// },3000);
// },2000);
// },1000);
//使用生成器函數解決
function one(){
setTimeout(()=>{
console.log("aaa");
iterator.next();
},1000)
}
function two(){
setTimeout(()=>{
console.log("bbb");
iterator.next();
},2000)
}
function three(){
setTimeout(()=>{
console.log("ccc");
iterator.next();
},3000)
}
function * gen(){
yield one();
yield two();
yield three();
}
let iterator = gen();
iterator.next();
</script>
</body>
13、Promise
Promise是ES6引入的一個異步編程的新解決方案。
語法上Promise是一個構造函數，用來封裝異步操作並可以獲取其成功失敗的結果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Promise基礎語法</title>
</head>
<body>
<script>
//實例化Promise對象
const p = new Promise(function(resolve,reject){
setTimeout(()=>{
// let data = "數據庫中的user數據";
// resolve(data);
let reasonData = "異常數據";
reject(reasonData);
},1000);
});
//調用Promise中的then方法
p.then(function(value){
//正常返回
console.log(value);
},function(reason){
//發生異常
console.error(reason);
});
</script>
</body>
</html>