ES6全面講解
寫在以前.講解了比較經常使用的ES6知識點,能夠快速的入門.有兩個比較複雜的知識點(promise,generator)則是留在了其餘文章中,在裏面詳細講解.javascript
介紹
1.歷史css
1.ECMAScript歷史html
在上個世紀全部的瀏覽器都採用本身的編碼標準，史稱瀏覽器戰爭。各大瀏覽器廠商相互用本身手中的技術對對方進行技術限制，爭取市場份額。java
這也是爲何今天不少代碼要搞適配的緣由。react
ECMAScript做爲一個統一的標準應運而生，結束了這場戰爭。jquery
有興趣的能夠看看這個:es6
ECMAScript 的發展歷史ajax
而咱們今天的要講的內容則是則是ECMAScript的第六個版本——ES6。json
你所須要擁有的知識: JavaScript,ES5數組
ES6
1.變量//改進 2.函數//更改 3.數組//數組改進 4.字符串//改進 5.面向對象//改進 6.Promise//增長 7.generator//增長 8.模塊化//增長
簡單
變量
js的缺點
能夠重複聲明
<script>
var a=5;
var a=12;
alert(a);//返回12
</script>
沒法限制修改
/* 好比常量PI */
沒有塊級做用域<>
{
//一對括號包起來的語法塊
int a=10;
}//java的話a出去就用不了
{
var a = 12;
}//js就一點問題沒有
alert(a);
ES6的改進
let不能重複聲明,變量-能夠修改,塊做用域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tite</title>
</head>
<body>
</body>
<script>
let a=12;
let a=5;
alert(a);//報錯,不能重複聲明
</script>
</html>
const不能重複聲明,且爲常量-不能修改,塊做用域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tite</title>
</head>
<body>
</body>
<script>
const a=12;
const a=5;//這也會報錯,由於不能重複聲明
a=5;//常量不能修改,爆錯.
alert(a);
</script>
</html>
塊級做用域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tite</title>
</head>
<body>
</body>
<script>
if(true) {
var b=10;
let a = 12;
const c=13;
};
alert(b);//成功,彈出窗口
alert(a);//失敗,顯示未定義
alert(c);//失敗,顯示未定義
</script>
</html>
能夠解決的問題
塊級做用域的用處
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tite</title>
</head>
<body>
<input type="button">
<input type="button">
<input type="button">
</body>
<script>
var aBtn=document.getElementsByTagName('input');
for (var i = 0; i <aBtn.length ; i++) {
aBtn[i].onclick=function () {//注意這個只是註冊函數.調用函數的時候for已經循環完畢了,i的值已經爲3了.
alert(i);//依次按動三個按鈕按出來的數據是3,3,3而不是1,2,3
}//由於沒有塊級做用域,因此i就至關於java中的全局變量
}
</script>
</html>
有塊級做用域的java
public class test {
public static void main(String[] args) {
int i=1;//沒有塊級做用域的js變量(var),相似於java中的這個變量.做用域爲整個函數
for ( i = 1; i < 3; i++) {
//注意,
System.out.println(i);//1,2,3
}
//模擬按鈕的三次按動--僞裝有這個功能
System.out.println(i);//3
System.out.println(i);//3
System.out.println(i);//3
}
}
如今咱們用閉包解決這個問題
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tite</title>
</head>
<body>
<input type="button">
<input type="button">
<input type="button">
</body>
<script>
//若是看不懂也不要緊,這個不影響大局
var aBtn=document.getElementsByTagName('input');
for (var i = 1; i <=aBtn.length ; i++) {
(function (i) {
aBtn[i].onclick = function () {
alert(i);
};
})(i);//輸出的內容就是1,2,3了
}
</script>
</html>
而使用let就只用不多的一點
var aBtn=document.getElementsByTagName('input');
for (let i = 0; i <aBtn.length ; i++) {
aBtn[i].onclick = function () {
alert(i);
}
// (function (i) {
// aBtn[i].onclick = function () {
// alert(i);
// };//由於沒有塊級做用域,因此i就至關於java中的全局變量
// })(i);
}
函數
聲明改進
箭頭函數
實際上你們大能夠將這個內容當作一個簡寫,用=>符號代替function.
你能夠一直不用......不影響大局
有兩個特性:
1.若是隻有一個參數,()能夠省
2.若是隻有一個return,{}能夠省
實例1:
=>代替function()
<script>
window.onload= function show() {
alert("aab");
};//正常js
window.onload=()=>{
alert("aab");
};//ES6
show();//顯示aab;
</script>
實例2:
=>代替function()
//匿名函數
let show=function () {
alert("abc");
}//實際上上這兩個function不能同時出現
let show=()=>{
alert("abc");
}
show();
實例3
(a,b)=>代替function(a,b)
let show=function (a,b) {
alert(a+b);
}
let show= (a,b)=> {
alert(a+b);
}
shows(8,8);
實例4:
數組排序
let arr=[12,9,5,1,2];
arr.sort((a,b)=> {
return a-b;
});
alert(arr);
實例5:
兩個特性
let show=function (a) {
return a*2;
}//普通js
alert(show(12));
let show=a=>{
return a*12;
}//特性1:若是隻有一個參數,()能夠省
let show=a=>a*12;//加入特性2:若是隻有一個return,{}能夠省
alert(show(12));
參數改進
參數擴展
args其實是一個數組,爲了知足傳入不定數量的參數而存在.
<script>
function show(a,b, ...args) {
//args參數必須是最後一個形參
alert(a);
alert(b);
alert(args);
}
show(1,2,3,4,5)//先跳一個1,再跳一個2,再跳一個3,4,5
</script>
展開數組
...arr
let arr=[1,2,3];
let arr2=[3,4,5];
let arr3=[...arr,...arr2];
//這就是數組展開
//只要是帶逗號的就能夠用這個
alert(arr3);//彈出1,2,3,3,4,5
實例1
function show(...args) {
fn(...args);
}
function fn(a,b) {
alert(a+b);
}//彈出17
show(12,5);
默認參數
function show(a,b=5,c=12) {//這就是默認參數的改進方法
console.log(a,b,c);
}
show(99);//輸出99,5,12
解構賦值
必須作到的要求: 1.左邊右邊結構必須同樣 2.右邊必須是個東西 3.解構賦值不能分開
let arr=[1,2,3];
let a=arr[0];
let b=arr[1];
let c=arr[2];
console.log(a,b,c)//1,2,3
//二者是一摸同樣的做用
let [a,b,c]=[1,2,3];//結構賦值
console.log(a,b,c)//1,2,3
1.左邊右邊必須結構同樣
let {a,b,c}={"a":12,"b":5,"c":6};//左邊是json右邊也要是json
let [json,[n1,n2,n3],num,str]=[{a:12,b:13,c:12},[12,5,8],8,"hello world"];//混合賦值
//json,數組,數字,字符串 //json 數組 數字 字符串
let [a,b]={"a":12,"c":13};//這個報錯,由於左邊是數組右邊是json
console.log(json,n1,n2,n3,num,str);//{a: 12, b: 13, c: 12} 12 5 8 8 "hello world"
2.右邊必須是個東西
這個比較簡單,其實就是說你賦值的內容必須符合語法規則.不能瞎賦
3.解構賦值不能分開
let c;
c=10;//這個能夠,
let [a,b]//必錯!
[a,b]=[12,5];//解構賦值必須連在一塊兒,不能分開
console.log(a,b);
數組
1.map 映射 一個對一個 進來多少,出來多少 [12,58,99,86,45] 映射 [不及格,不及格,優秀,良好,不及格] ------------------------------------------------------------------------------ 2.reduce 彙總 算個總數 [12,800000,5999999] => ******(懶得算了) 算個平均數 [1,2,3] => 2 --------------------------------------------------------------------------- filter 過濾器 forEach 循環(迭代)
map
let arr=[1,2,3];
let result=arr.map(function (item) {
return item*2;
});//每一個arr中的數都會做爲參數到這個函數中走一遭
alert(result);//彈出2,4,6
複習一下上面學過的=>知識
let arr=[1,2,3];
//1.若是隻有一個參數,()能夠省
//2.若是隻有一個return,{},return能夠省
let result=arr.map((item)=>item*2) ;//每一個arr中的數都會做爲參數到這個函數中走一遭
alert(result);
完成上目標
//將[12,58,99,86,45] 映射 [不及格,不及格,優秀,良好,不及格]
let score=[12,58,99,86,45]
var result=score.map(item=>item>=60?"及格":"不及格");
alert(result);
reduce彙總
let arr=[12,69,180,8763];
let result= arr.reduce(function (tmp,item,index) {
//tmp:中間值
//item:現有元素
//index:下標
alert(tmp+","+item+","+index);
return tmp+item;
});
alert(result);//彈出9024
看一下這張圖,理解一下.
本質來說就是一個數組中,前兩個元素的操做(這裏面是加和)獲得的值會賦值給tmp而後item的值變爲下一個元素(第三個元素)的值而後與tmp再次加和,周而復始.
實例1:算平均值
let result= arr.reduce(function (tmp,item,index) {
//tmp:中間值
//item:現有元素
//index:下標
alert(tmp+","+item+","+index);
if(index==arr.length-1){
return (tmp+item)/arr.length;
};
return tmp+item;
});
alert(result);
filter過濾器
let arr=[12,3,4,5,6,7,9]
let result=arr.filter(item=>{
if (item%3==0) {
return true;
}else {
return false;
}
});//每一個元素都被放進返回true的能夠被輸出,返回false的不會被輸出
alert(result);
用=>簡化一下
let arr=[12,3,4,5,6,7,9] let result=arr.filter(item=>item%3==0); alert(result);
處理JSON相關的問題
let arr=[
{"title":"男士襯衫","price": 75},
{"title":"女士襯衫","price": 175},
{"title":"襪子","price": 75},
];
let result=arr.filter(json=>json.price>100);
console.log(result);
迭代forEach
let arr=[12,5,,6,5];
arr.forEach((item,index)=>{
alert(index+" "+item);
});
字符串
1.多了兩個新方法 startsWith 以()做爲開始 endsWith 2.字符串模板 咱們通常使用字符串鏈接 字符串模板是對這個方法的一種改進 i.直接把東西塞進字符串裏面 ii.能夠折行
str.startsWith
let str="http://www.baidu.com";
if (str.startsWith("http://")){
alert("這是網址");
}
//彈出這是網址
str.endsWith
let str="1.txt";
if (str.endsWith("txt")){
alert("這是文本文件");
}
//彈出這是文本文件
字符串模板
let a=12;
let str=`a${a}bc`;
`${a}`//這個就是字符串模板,在${}中的是參數,會根據參數的值來變化
alert(str);//a12bc
ES6面向對象
ES6面向對象 1.class關鍵字,構造器和類分開了 2.class裏面直接加方法 繼承: super();--超類(父類)
之前的方法
要是不會的話,我以後會出一個文章....
function User(name,pass) {
this.name=name;
this.pass=pass;
}//構造函數就是類
User.prototype.showName=function () {
alert(this.name);
};
User.prototype.showPass=function () {
alert(this.pass);
};
var u1=new User('bule',123);
u1.showPass();
u1.showName();
革新後的方法
class User{
constructor(name,pass){
this.name=name;
this.pass=pass;
}
showName(){
alert(this.name);
}
showPass(){
alert(this.pass)
}
}
var u1=new User('bule',123);
u1.showPass();
u1.showName();
老版的繼承
function User(name,pass) {
this.name=name;
this.pass=pass;
}
User.prototype.showName=function () {
alert(this.name);
};
User.prototype.showPass=function () {
alert(this.pass);
};
//繼承的類
function vipUser(name,pass,level) {
User.call(this,name,pass);//調用父類構造函數(相似於java中的super())
this.level=level;
}//構造函數(類)
vipUser.prototype=new User();
vipUser.prototype.constructor=vipUser;
vipUser.prototype.showLevel=function () {
alert(this.level);
}
var vip=new vipUser("blue",123,3);
vip.showName();//blue
vip.showPass();//123
vip.showLevel();//3
新版的繼承
function User(name,pass) {
this.name=name;
this.pass=pass;
}
User.prototype.showName=function () {
alert(this.name);
};
User.prototype.showPass=function () {
alert(this.pass);
};
//繼承的類
class vipUser extends User{
constructor(name,pass,level){
super(name,pass);
this.level=level;
}
showLevel(){
alert(this.level);
}
}
var vipUser1 = new vipUser("blue",123,3);
vipUser1.showLevel();//3
vipUser1.showName();//123
vipUser1.showPass();//blue
//其實咱們發現這個更加的像java了.
面向對象應用--React
React --class
1.組件化--class 2.JSX JS的擴展版 這個暫時不會講太多,由於主要的應用在React中,能夠到React中再看
一個小實例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js">
//必需要引進的js庫
</script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js">
//必需要引進的js庫</script>
<script src="http://static.runoob.com/assets/react/browser.min.js"></script>
<!-- 這個必須這麼寫 -->
<script type="text/babel">
class Test extends React.Component{//組件,也是clas
constructor(...args){//參數擴展,接到多少給父級多少
super(...args);
}
render(){
return <span>123</span>;//全部的組件都是可視化的
}//這個方法必須有
}
window.onload=function () {
let oDiv=document.getElementById("div1");
ReactDOM.render(<li><Test/></li>,oDiv);
};
</script>
</head>
<body>
<div id="div1">
</div>
</body>
</html>
json
1.JSON對象 JSON.stringify JSON.parse 2.簡寫 名字跟值同樣留一個就行 方法 能夠省略:function這個
<script>
let a=12;
let b=5;
let json={a,b,c:55};//名字和值同樣的時候能夠直接寫一個名字.
//json={a:12,b:5,c:55}比較相似於這個
let json={
a:12,
show(){
alert(this.a);
},//新版寫法
show: function () {
alert(this.a);
}//舊版寫法
};
console.log(json);
</script>
Promise--承諾
同步：必須等待前面的任務完成，才能繼續後面的任務。 異步：不受當前任務的影響。
一個簡單的promise demo
說明(arr.txt的文件內容爲: [1,2,3,4,575,354] )
要想訪問文件時候 用localhost
<!DOCTYPE html>
<html lang="en">
<head>
//數組 [1,2,3,4,575,354] )
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script>
let p = new Promise(function (resolve,reject) {
//異步代碼
//resolve 代碼成功了
//reject 代碼失敗了
$.ajax({
url : './arr.txt',
dataType : 'json',
success(arr){
resolve(arr);
},
error(err){
reject(err);
}
})
})
//當promise執行有結果的時候就會調用then 接受2個函數做爲參數
p.then(function(){
alert('成功了.')
},function(){
alert('失敗了');
});
</script>
</head>
<body>
</body>
</html>
結果:
成功了.1,2,3,34,77
第二個demo 用到 Promise的all方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script>
let p1 = new Promise(function (resolve,reject) {
//異步代碼
//resolve 代碼成功了
//reject 代碼失敗了
$.ajax({
url : './arr.txt',
dataType : 'json',
success(arr){
resolve(arr);
},
error(err){
reject(err);
}
})
})
let p2 = new Promise(function (resolve, reject) {
//異步代碼
//resolve 代碼成功了
//reject 代碼失敗了
$.ajax({
url: './arr2.txt',
dataType: 'json',
success(arr) {
resolve(arr);
},
error(err) {
reject(err);
}
})
})
//當promise執行有結果的時候就會調用then 接受2個函數做爲參數
Promise.all([
p1,p2
]).then(function(){
console.log('都成功了');
},function(){
console.log('至少有一個成功了');
});
</script>
</head>
<body>
</body>
</html>
結果
都成功了
generator--生成器
普通函數--一路到底 generator函數--中間能停 走走停停,依靠next進行往下移動.
<script>
function *show() {
alert("a");
yield ;
alert("b");
}//generator函數
let genObj=show();//生成一個generator對象
console.log(genObj);
genObj.next();
genObj.next();
</script>
其實你能夠這麼理解generator函數其實是以yield爲邊界將一個函數分紅了兩個函數.
function show1(){
alert("a");
}
function show2(){
alert("b");
}
每次next調用一個
最後兩個內容會單開兩個文章詳細講解.
若是是刷刷leetcode上面一些內容已經很夠了.
相關文章
- 1. ES6全面講解--Promise
- 2. JFreeChart全面講解
- 3. http全面講解
- 4. 樂安全全面講解
- 5. Git與github全面講解
- 6. Django框架全面講解
- 7. 全面講解Hibernate緩存
- 8. http協議全面講解
- 9. redis實戰全面講解
- 10. 全面感知ES6
- 更多相關文章...
- • ASP.NET Web Pages - 全局頁面 - ASP.NET 教程
- • ASP.NET MVC - 安全 - ASP.NET 教程
- • 爲了進字節跳動，我精選了29道Java經典算法題，帶詳細講解
- • Tomcat學習筆記（史上最全tomcat學習筆記）
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. ES6全面講解--Promise
- 2. JFreeChart全面講解
- 3. http全面講解
- 4. 樂安全全面講解
- 5. Git與github全面講解
- 6. Django框架全面講解
- 7. 全面講解Hibernate緩存
- 8. http協議全面講解
- 9. redis實戰全面講解
- 10. 全面感知ES6