請看下面
1、let關鍵字,let定義的變量只在它所在的塊級作用域有用({}內有用),let不能在同一個作用域中重復定義,let沒有聲明提升 。
2、const關鍵字,用於聲明一個常量,一旦定義 就不能改變值 必須得有初始值 也就是常量只要定義就必須要賦值。
3、解構賦值,一種新的變量賦值方式。常用於交換變量值,提取數據,用解構賦值保存
常問的有:
①數組的解構賦值:let a=10,b=20;[a,b]=[b,a] ==》交換變量
②對象的解構賦值:(提取數據)
let data={name:"xiaoming",age:18,sex:"nan"}; let {name,sex}=data; console.log(name,sex);//xiaoming nan
③字符串的解構賦值:
let [d,e,f]="he"; console.log(d,e,f)//h e undefined
④當一個函數有多個返回值的時候 用解構賦值保存
function fun1(){ return [1,2]; } let [x,y]=fun1(); console.log(x,y)//1,2
4、for...of遍歷 es6中新增的循環 for-of
for of循環 可以循環數組和類數組對象,可以直接拿到數組的每一項 也可以使用break和continue,
但是 它不能直接拿到數組的下標
5.箭頭函數
Let fun1=()=>{}
(1)原來js代碼里用到函數的地方 都可以寫成箭頭函數
(2)箭頭函數里沒有this,如果要用this就是父級的this 如果父級也沒有this 那么就繼續往上找 直到找到window
6.Set結構,set它本身是一個構造函數 用new Set去實例化 set的值都是唯一 可以用來去重
Set.prototype.size:返回Set實例的成員總數。
add();//往set的末尾添加值
delete(); // 刪除set的某個值 返回一個布爾值,表示刪除是否成功。
has(); //判斷是否含有某一項 返回一個布爾值
clear(); //刪除所有的set項 沒有返回值。
foreach可以用於遍歷成員,循環set結構 跟數組的循環類似 但是set的循環得不到下標
數組去重的方法(ES6)
- Array.from(new Set(arr))
- […new Set(arr)]
其中 ...分為倆中用法
...作為擴展運算符(spread)的時候,說白了就是把數組展開
1.把類數組轉化為數組
var con=new Set([1,2,3,2,1]); var arr=[...con];//1,2,3
2.復制數組(第一層深復制)
var arr2=[...arr];
3.合並數組:
var arr3=[...arr,...arr2];
...作為剩余運算符(rest)
1.在數組解構的時候:
let [a,...b]=[1,2,3]; console.log(a,b)//1 [2,3]
2.作為剩余參數,實參的個數可以不確定
function fun1(a,...b){ console.log(a);//1
console.log(b);//[2,3,4,5]
} fun1(1,2,3,4,5)
7、Map結構
map 結構的數據類似於json 區別是可以用任何類型的數據作為key值
map.size //返回 Map 結構的成員總數。
set(key, value)返回整個 Map 結構。
get(key) get方法讀取key對應的鍵值,如果找不到key,返回undefined。
has(key) 返回一個布爾值 某個鍵是否在當前 Map 對象之中
delete(key) 刪除某個鍵,返回true。如果刪除失敗,返回false。
clear() clear方法清除所有成員,沒有返回值。
遍歷方法
Map
keys():鍵名。
values():鍵值
forEach():遍歷 Map 的所有成員。
8. es6面向對象
(一) ES6中對象的創建 class
{ class Person{//定義類 //構造方法
constructor(name,age){ this.name=name; this.age=age; } say(){ alert(this.name) }//不加static的方法被實例化對象調用
static say2(){//靜態方法
}//加上static的方法 只能被整個類調用
} //實例化類
var xm=new Person("小明",18); xm.say();//小明
Person.say2();
(二) ES6中對象的繼承
E6中class可以通過extends關鍵字來實現繼承,
子類必須在constructor方法中首先調用super方法,否則實例化時會報錯。
這是因為子類沒有自己的this對象, 而是繼承父類的this對象,
如果不調用super方法,子類就得不到this對象。
class Women extends Person{ // 類women繼承preson //那么 person就叫父類 也叫超類 是因為super方法實現繼承
constructor(name,age,sex){
super(name,age); this.sex=sex; } show(){ alert(this.sex); } } var xl=new Women("小麗",20,"nv"); xl.say();
9.處理異步操作
(一)Promise
(1)頁面中只有一個ajax請求 用promise方法請求
let p=new Promise(function(resolve,reject){ var xhr=new XMLHttpRequest(); xhr.open("get","a.txt",true); xhr.send(); xhr.onreadystatechange=function(){ if(xhr.readyState==4){ if(xhr.status==200){ resolve(xhr.responseText); }else{ reject("404"); } } } }) //原生的寫法:
p.then(res=>{ console.log(res); },error=>{ console.log(error) }) //jq寫法($.ajax返回的本身就是一個promise對象):
$.ajax({url:"a.txt",dataType:"json"}).then(res=>{ },error=>{})
(2) 如果頁面中有多個ajax請求的時候,這些請求之間互相沒有依托關系 可以用promise.all
// jq寫法:
let jq_pro = (url, data) => { return $.ajax({ url, dataType: "json", data,cache:false }) }//封裝一個jq ajax
let del_a = (data) => { console.log(data) }//處理數據data1的函數
let del_b = (data) => { console.log(data) }//處理數據data2的函數
Promise.all([ jq_pro("a.json"),//調用封裝的jq ajax函數
jq_pro("b.txt") ]).then(res => { let [data1, data2] = res;//解構賦值
console.log(data1, data2); del_a(data1);//處理數據data1 把得到的數據data1傳進函數
del_b(data2);//處理數據data2 把得到的數據data2傳進函數
}).catch(error=>{ console.log(error) }) // 原生js ajax多個請求時用promise寫
let js_promise =(url)=>{ let p= new Promise(function(resolve,reject){ var xhr=new XMLHttpRequest(); xhr.open("get",url,true); xhr.send(); xhr.onreadystatechange=function(){ if(xhr.readyState==4){ if(xhr.status==200){ resolve(xhr.responseText); }else{ reject("404"); } } } }) return p; } Promise.all([ js_promise("a.json"), js_promise("b.txt") ]).then(res=>{ let [list1,list2]=res; console.log(eval("("+list1+")"),list2); })
(3) 多個ajax請求 並且互相關聯
// jq:
let jq_pro = (url, data) => { return $.ajax({ url, dataType: "json", data, cache: false }) }//封裝一個jq ajax
jq_pro("a.json").then(res => { console.log(res); return jq_pro("b.txt"); }).then(res => { console.log(res); return jq_pro("c.txt"); }).then(res2 => { console.log(res2); }, error => { console.log(error) // 原生js解決回調地獄
var js_promise = function (url) { return new Promise(function (resolve, reject) { var xhr = new XMLHttpRequest(); xhr.open("get", url, true); xhr.send(); xhr.onreadystatechange = function () { if (xhr.readyState == 4) { if (xhr.status == 200) { resolve(xhr.responseText); } else { reject("404"); } } } }); } js_promise("a.json").then(function (res) { return js_promise("b.txt"); }).then(function (res) { return js_promise("c.txt"); }).then(function (res) { console.log(res); }).catch(function (err) { console.log(err); })
(二)async處理方式
let jq_promise=(url,data)=>{ return $.ajax({ url, data, dataType:"json" }) } async function getData(){ let data1=await jq_promise("a.json"); let data2=await jq_promise("b.json") return data2; } getData().then(res=>{ console.log(res); })
(三)generator處理方式
let jq_promise=(url,data)=>{ return $.ajax({ url, data, dataType:"json" }) } function * getData(){ yield jq_promise("a.json") yield jq_promise("b.json") } var obj=getData(); obj.next().value.then(res=>{ console.log(res); return obj.next().value; }).then(res=>{ console.log(res); })
10.Symbol 是一種新的原始數據類型 代表獨一無二的值
11.下面是包括ES6的總結的一些數組、字符串方法:
1.數組的方法
unshift() 數組頭部添加內容
push() 數組尾部添加內容
pop() 數組尾部刪除內容
shift() 數組頭部刪除內容
sort() 數組排序 a-b 升序 b-a 降序
reverse() 數組倒排序
splice() 修改數組
slice() 截取
indexOf() 查找下標,找不到 返回-1。
forEach() 循環數組 三個參數(數組的每一項, 每一項的下標, 數組本身)
map() 映射數組:對數組的每一項進行操作,返回新的數組
filter() 過濾數組,返回滿足條件的數據,保存在新數組中
Every 判斷數組每一項是否滿足條件 全部滿足返回真
Some 只要有一項滿足條件就返回真
Join 把數組用連接符連接成字符串
Find 查找滿足條件的元素 有就返回第一項 沒有的話返回undefined
FindIndex 查找滿足條件的下標
Array.From 把類數組轉化為數組
Array.of 把參數轉化為數組
Fill 填充 用一個元素替換數組的某一部分
Copywithin 用數組的某一部分替換數組的另外一部分
keys() 遍歷鍵名。
values() 遍歷鍵值。
includes() 數組是否包含指定值。
flat() 多維數組轉一維數組
2.字符串的方法
match() 匹配 輸入內容,返回內容
search() 查找,輸入內容,返回下標 -1 不能使用g
indexOf() 檢索字符串(內容,下次開始找的位置) -1
lastindexOf() 倒序
replace() 替換字符串 默認只能替換一個 i不區分大小寫 g全局 m多行
toUpperCase() 轉化為大寫
toLowerCase() 轉化為小寫
slice() 截取子字符串(開始下標,結束的下標-1) 能用於數組和字符串
Substr substring 截取字符串
split() 分隔字符串(分隔,個數) 字符串轉化為數組 原有字符串不變
charCodeAt() unicode碼
charAt(index) 通過下標獲取內容
fromCharCode() 轉碼
trim() 刪除字符串首尾空格
模板字符串 用反引號 ``
includes() 判斷是否含有某個字符
startsWith() 返回布爾值,判斷參數字符串是否在原字符串的頭部。
endsWith() 返回布爾值,判斷參數字符串是否在原字符串的尾部。
repeat() 字符串重復 返回新的字符串,表示將字符串重復指定次數返回。
padStart() 字符串補全 返回新的字符串,從頭部補全原字符串。
padEnd() 字符串補全 返回新的字符串,從尾部補全原字符串。
第一篇博客,多多指教!