文章目錄
一、定義變量 ,let
主要用於區分let var
代碼塊:{} 包起來的代碼， 形成了一個作用域，塊級作用域
比如: if for while
特點: 只能在代碼塊裏面使用
var 只有函數作用域
a). let具備塊級作用域
b). 不允許重複聲明
let a=12;
let a=5; //錯的
總結: 其實let才接近其他語言的變量
用處：
封閉空間：
(function(){
var a=12;
})()
現在：
{
let a=12;
}
i問題:
總結: 塊級作用域，其實就是 匿名函數立即調用
二、const
定義 常量 一旦賦值，以後再也修改不了了
const a-=12;
a=15//報錯
注意: const必須給初始值， 不能重複聲明
因爲以後再也沒法賦值了，所以聲明的時候一定得有值
用途: 爲了防止意外修改變量
比如引入庫名，組件名
三、字符串連接
之前:
var str='';
var str=""
反單引號: var str= `` 字符串模板
之前: 'abc'+變量名+'ef'
現在: `abc${變量名}ef`
四、解構賦值
4.1 跟順序無關
var [a,b,c]=[12,5,101];
var {a,b,c}={b:5,a:12,c:101};
4.2 模式匹配：左側的樣子，需要和右側一樣
var [a,[b,c],d]=[12,[1,2],5];
var [{a,e},[b,c],d]=[{e:'eeee', a:'aaaa'},[1,2],5];
4.3 交互：數據解析-> 後臺返回數據不用點
var arr = [{title:"abs",href:"kkk",img:"img1"}];
var [{title,href,img}] = arr;
4.4 給默認值:
var json={};
var a=json.a || 12
語法:
var {time=12,id=0}={};
運動框架:
function move(options){
options=options || {};
options.time=options.time || 300;
}
move({
time:600
})
function move({time=300}={}){
}
五、複製數組
a). 循環
b). Array.from(arr)
c). var arr2=[...arr];
function show(...args){
args.push(5);
console.log(args);
}
show(1,2,3,4);
數組去重
Array.from(new Set(arr))
複製數組:
六、數組操作
基本數據類型（深拷貝->改變副本中的數據，對前者沒有任何影響）：
包括str、num、boolean、null、undefined
引用類型(淺拷貝->改變副本中的數據，對前者有任何影響)
：就是對象。包括object、Array、function、date
6.0複製數組
a). 循環
b). Array.from(arr)
c). var arr2=[...arr];
function show(...args){
args.push(5);
console.log(args);
}
show(1,2,3,4);
6.1循環
普通for
for in
for of 循環, 可以循環數組，不能循環json
真正目的爲了循環 map對象
6.2for of
遍歷(迭代、循環)整個對象， 表現 類似 for in
var arr=['apple','banana','orange','pear'];
6.3Map對象
和json相似，也是一種key-value形式
Map對象爲了和for of循環配合而生的
var map=new Map();
設置: map.set(name,value);
獲取： map.get(name)
刪除： map.delete(name)
遍歷map: 不能使用for in，沒有效果
for(var name of map){
console.log(name); // a,apple b,banana
}
for(var name of map.entries()){ // a,apple b,banana
console.log(name);
}
for(var [key,value] of map){
console.log(key, value); // key value
}
for(var [key,value] of map.entries()){ //key value
console.log(key, value); // key value
}
for(var key of map.keys()){ //只是循環key
console.log(key);
}
for(var val of map.values()){ //只是循環value
console.log(val);
}
6.5for… of也可以循環數組:
只循環值: for(var value of arr){}
只循環索引: for(var key of arr.keys()){}
索引和值都循環： for(var some of arr.entries()){}
七、箭頭函數：
7.1函數之前:
function show(){
alert(1);
}
show();
----------------------
function show(a){
return a;
}
show(12);
----------------------
function show(a,b){
return a+b;
}
show(12,5);
7.2箭頭函數:
箭頭函數：
=>
var show=a=>a; function show(a){return a};
var show=(a,b)=>a+b; function show(a,b){return a+b};
var show=()=>'welcome'; function show(){return 'welcome'}
var show=() => {
function show(){
alert(1);
alert(1);
}
}
注意：
this問題， this指向了window
arguments， 不能使用了
7.3箭頭函數 應用:
7.3.1排序
var arr=[34,101,-100,90,98,77777];
/*arr.sort(function(n1,n2){
return n1-n2;
});
console.log(arr);*/
arr.sort((n1,n2)=>n1-n2);
console.log(arr);
八、對象
對象語法簡潔化
單體模式:
json
var name='abb';
var age=101;
var preson={
name,
age,
showName(){
return this.name;
},
showAge(){
return this.age;
}
}
九、面向對象
9.1 之前
人類 工人類
function Person(name,age){ //類、構造函數
this.name=name;
this.age=age;
}
Person.prototype.showName=function(){
return this.name;
};
Person.prototype.showAge=function(){
return this.age;
};
9.2 ES6
類 class
構造函數 constructor 生成完實例以後，自己就執行的
class Person{ //類
constructor(name,age){
this.name=name;
this.age=age;
}
showName(){
return this.name;
}
showAge(){
return this.age;
}
}
function move(obj='對象必須要填寫的',json={},options={}){
console.log(options);
}
9.3 繼承
之前: 子類.prototype=new 父類();
ES6:
class Person{ //類
constructor(name='default',age=0){
this.name=name;
this.age=age;
}
showName(){
return this.name;
}
showAge(){
return this.age;
}
}
//繼承
class Worker extends Person{
constructor(name,age,job='掃地的'){
super(name,age);
this.job=job;
}
showJob(){
return this.job;
}
}
var p1=new Person();
var w1=new Worker('mmm',56);
//alert(p1.showAge());
alert(w1.showName());
9.4 面向對象-應用
9.4.1 數組賦值
class Queue{
constructor(content=[]){
this._queue=[...content];
}
}
var q=new Queue([1,2,3,4]);
console.log(q._queue);
9.4.2 數組加減
class Queue{
constructor(content=[]){
this._queue=[...content];
}
shift(){
const value=this._queue[0];
this._queue.shift();
return value;
}
push(n){
this._queue.push(n);
return this._queue.length;
}
}
var q=new Queue([1,2,3,4]);
q.shift();
q.push(5);
console.log(q._queue);
十、模塊化開發
a.js
const a=12;
export default a;
b.js
const a=5;
export default a;
c.js
const a=5;
const b=12;
export default {a,b};
sum.js
import a from './a.js';
import b from './b.js';
export default function sum(){
return a+b;
};
----------------------------------------------
import modA from './a.js';
import modB from './b.js';
console.log(modA+modB); 17
----------------------------------------------
import sumMod from './sum.js';
console.log(sumMod()); 17
----------------------------------------------
import c from './c.js';
console.log(c.a+c.b); 17
十一、異步
異步: 多個操作可以同時進行
ajax
ajax(url,function(){
//1
},fnFail);
//2
十二、Promise: 承諾
https://blog.csdn.net/weixin_41817034/article/details/80492315
12.1 說明
就是一個對象，用來傳遞異步操作的數據(消息)
pending（等待、處理中） --> Resolve(完成、fullFilled) --> Rejected(拒絕、失敗)
12.2 使用
var p1=new Promise(function(resolve,reject){
//resolve 成功了
//reject 失敗了
});
var p1=new Promise(function(resolve,reject){
if(異步處理成功了){
resolve(成功數據)
}else{
reject(失敗原因)
}
});
p1.then(成功(resolve),失敗(reject)) √
--------------------------------------------
p1.catch 用來捕獲錯誤
12.3 Promise.all
Promise.all 全部，用於將多個promise對象，組合，包裝成一個全新的promise實例
Promise.all([p1,p2,p3...]);
所有的promise對象，都正確，才走成功
否則，只要有一個錯誤，是失敗了
var p1=Promise.resolve(3);
var p2=Promise.reject(5);
Promise.all([true,p1,p2]).then(function(value){
console.log('成功了,'+value);
},function(value){
console.log('錯誤了,'+ value);
});
12.4 Promise.race
返回也是一個promise對象
最先能執行的promise結果， 哪個最快，用哪個
var p1=new Promise(function(resolve,reject){
setTimeout(resolve,50,'one');
});
var p2=new Promise(function(resolve,reject){
setTimeout(resolve,100,'two');
});
Promise.race([p1,p2]).then(function(value){
console.log(value);
});
12.5 Promise.reject()
生成錯誤的一個promise
Promise.reject('這是錯誤的信息').then(function(){
},function(res){
console.log(res);
});
12.6 Promise.resolve()
生成一個成功的promise對象
語法：
Promise.resolve(value)
Promise.resolve(promise)
Promise.resolve('Success').then(function(value){
console.log(value);
},function(res){
console.log(res);
});
-----------------------------------------------
Promise.resolve([1,2,3]).then(function(value){
console.log(value[0]);
},function(res){
console.log(res);
});
-----------------------------------------------
var p1=Promise.resolve(3);
var p2=Promise.resolve(p1);
p2.then(function(value){
console.log(value); //3
});
十三 generator 生成器
13.1 基礎
function* show(){
yield 'Hello';
yield 'World';
yield 'Es6';
return 'well';
}
var res=show();
console.log(res.next()); //{value:'Hello', done:false}
console.log(res.next()); //{value:'World', done:false}
console.log(res.next()); //{value:'Es5', done:false}
console.log(res.next()); //{value:'well', done:true}
總結：
每次返回一個value和done結果
value,每次yield後面值
done是一個布爾值，代表是否遍歷結束
yield是都有返回值
yield語句本身沒有返回值，或者每次返回undefine
13.2 next可以帶參數，給上一個yield值
function* fn(){
for(var i=0; true; i++){
var a= yield i;
if(a){i=-1}
}
}
var d=fn();
console.log(d.next()); {value: 0, done: false}
console.log(d.next()); {value: 1, done: false}
console.log(d.next(true)); {value: 0, done: false}
console.log(d.next()); {value: 1, done: false}
true 給yield
13.3 for of循環generator函數
function* fn(){
yield 1;
yield 2;
yield 3;
yield 4;
yield 5;
return 6;
}
for(let v of fn()){
document.write(v);
}
13.4 generator函數放到對象裏
var json={
*show(){
yield 'a';
yield 'b';
return 'c';
}
};
var res=json.show();
console.log(res.next());
console.log(res.next());
console.log(res.next());
