1、ECMAScript 6 簡介
ECMAScript 6.0（以下簡稱 ES6）是 JavaScript 語言的下一代標准，已經在 2015 年 6 月正式發布了。它的目標，是使得 JavaScript 語言可以用來編寫復雜的大型應用程序，成為企業級開發語言。
ECMA：國際標准組織
2、let,var和const命令
const：是用來定義一個常量的
const a ='hello' //const就是定義一個常量 //常量是不能修改的
let：是用來定義一個塊級作用域的變量
let和val都是用來聲明變量的，但是二者又有不同
let 先聲明后使用，不存在變量提升 let 不能重復定義,但是可以修改 var 既可以先聲明后使用，也可以先使用后聲明，這樣不會報錯，會打印undified,而let必須是先聲明后使用，如果沒有聲明就會報錯
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width"> 7 <title>Title</title> 8 </head> 9 <body> 10 <script> 11 12 13 // const PI = 3.14; 14 // const a='hello'; 15 //// a = 'word' ; //這樣會出錯,常量是不可以被修改的 16 // s = a.split("l"); //js中字符串的切割方法 17 // console.log(a); 18 // console.log(s); 19 20 // ============================== 21 //變量提升， 22 // 23 // console.log(b); //會打印undefined,先使用后聲明，但是不會報錯 24 // var b=123456; 25 26 27 // var b; 28 // console.log(b); //undefined 先聲明后使用 29 // b=123456; 30 // 31 // ================================= 32 let c=100; //let不存在變量提升 33 if (10>9){ 34 let c=200; 35 console.log(c) //200 36 } 37 console.log(c) //100 38 </script> 39 </body> 40 </html>
3、變量的解構賦值
數組解構賦值，就是把數組元素的值按照順序依次賦值
解構變量就是賦值，用更少的代碼來解決更多的事情
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width"> 7 <title>Title</title> 8 </head> 9 <body> 10 <script> 11 // ==============一般的操作================ 12 // let arr = [11,22,55,444]; 13 // let a = arr[0]; 14 // let b = arr[1]; 15 // let c = arr[2]; 16 // let d= arr[3]; 17 // console.log(a,b,c,d) //11 22 55 444 18 19 // ===============升級版的操作============ 20 // let[a,b,c] = [88,55,77]; //解構賦值的目的就是縮減代碼，吧上面幾行顯示的用一行來替代 21 // console.log(a,b,c) //88 55 77 22 // 23 // let[a,b,c,[d]] = [88,55,77,100]; //會報錯 24 // let[a,b,c,[d]] = [88,55,77,[100]]; //左邊和右邊的格式定義成一樣的 25 // console.log(a,b,c,d) ; //88 55 77 100 26 // 27 // let obj={ 28 // al:"json", 29 // a2:23, 30 // a3:666 31 // }; 32 // let {aa,bb}=obj; 33 // console.log(aa,bb); //undified 34 35 36 let obj2={ 37 a5:"dddff", 38 "a4":"jggz", 39 a2:[11,22], 40 a3:666, 41 a1:'jaas' 42 }; 43 let {a1,a2,a3,a4,a5}=obj2; //注意格式是一致的，並且和里面的鍵對應 44 console.log(a2,a1,a3,a4,a5); //undified 45 </script> 46 </body> 47 </html>
4、字符串的擴展之模板字符串
通過反引號來使用，字符串當中可以使用變量。可以當做普通字符串來處理，可以使用多行字符串
傳統的 JavaScript 語言，輸出模板通常是這樣寫的。
上面這種寫法相當繁瑣不方便，ES6 引入了模板字符串解決這個問題。
模板字符串（template string）是增強版的字符串，用反引號（`）標識。它可以當作普通字符串使用，也可以用來定義多行字符串，或者在字符串中嵌入變量。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width"> 7 <title>Title</title> 8 9 </head> 10 <body> 11 <div> 12 <h1>asdasd</h1> 13 <ul id="qwe"></ul> 14 </div> 15 16 <script> 17 let name=`瞎耍`; 18 console.log("他的名字交"+name); 19 console.log(`他的名字交${name}`); //反引號，不是單引號 20 21 let ele = document.getElementById("qwe"); 22 console.log(ele); 23 ele.innerHTML=` 24 <li>11</li> 25 <li>22</li> 26 <li>33</li> 27 <li>44</li> ` 28 </script> 29 </body> 30 </html>
5、正則的擴展
6、數值的擴展
7、函數的擴展
可以給函數設置默認參數
剩余參數：function func(a,...b){} func(11,22,33) 則：b=[22,33]
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width"> 7 <title>Title</title> 8 <script> 9 // function func1(x) { 10 // alert(x) 11 // } 12 // func1(12306); 13 14 // function func2(x=12,y=90,z=6) { //默認參數 15 // alert(x+y+z) //108 16 // } 17 // func2() 18 // 19 // function func3(x) { //默認參數 20 // console.log(x) //11 21 // } 22 // func3(11,22,33,44) 23 // 24 // function func4(x,...y) { //默認參數 25 // console.log(y) 26 // } 27 // func4(11,22,33.22,44); //多余的參數給了y 28 // 29 function func4(x,...y) { //默認參數 30 console.log(x,y)//{a: 22, b: 33} [] 31 } 32 // func4({a:22,b:33}); 33 func4(x=2,y=300); //2,300 34 </script> 35 </head> 36 <body> 37 38 </body> 39 </html>
8、數組的擴展
1、判斷數組當中是否存在某個數值 console.log(arr.indexOf(1000)) console.log(arr.includes(201)) 2、對數組的遍歷 forEach()：范圍比map廣，他能做的事情map不一定能做 map()：map能做的事情forEach一定能做 arr.forEach(function (value,index) { console.log(value); }) //也可以不用map,在forEach里面就能做操作，為了簡單用一個map也可以解決，具體見示例 var arr2 = arr.map(function (value,index) { return value+1 }) 3)對數組的過濾 var arr4 = arr.filter(function (value,index) { return value > 50 }) console.log(arr4);
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width"> 7 <title>Title</title> 8 <script> 9 // var arr=[77,88,99,44]; 10 // //如果對數組進行循環，用for循環 11 // var arr2=[]; 12 // for (var i=0;i<arr.length;i++){ 13 // arr2.push(arr[i]+1); 14 // } 15 // console.log(arr2); 16 17 // =============================== 18 // var arr=[77,88,99,44]; 19 // //在es6中的循環如下，對里面的元素都加1 20 // arr.forEach(function (value,index,arr) { 21 // console.log(value);// 77 88 99 44 22 // console.log(index); //0 1 2 3 23 // }); 24 // var arr2=arr.map(function (value,index) { //map是一個循環生成一個新的數組 25 // return value+1 26 // }); 27 // console.log(arr2);//78 89 100 45 28 29 30 // //查詢一下90在不在arr里面,一般可用於判斷 31 // var arr2=[11,22,33,44]; 32 // console.log(arr2.indexOf(44)); //3 根據值取索引,如果有就顯示索引，沒有就顯示-1 33 // console.log(arr2.indexOf(1000)) ; //-1 根據值取索引,如果有就顯示索引，沒有就顯示-1 34 // 35 // console.log(arr2.includes(33)) ; // true 看包含不包含，如果包含返回true，不包含返回false 36 37 //============================================== 38 // let arr3=[11,22,33]; 39 // for (var i in arr3){ 40 // console.log(i) ; //打印的是索引 41 // console.log(arr3[i]); //打印值 42 // } 43 // for (var j of arr3) { 44 // console.log(j); //打印的是值 45 // } 46 47 // 過濾 ===================================== 48 arr = [51,2,14,845]; 49 // var arr4 = arr.filter(function (value,index){ 50 // console.log(value); 51 // if (value>50){ 52 // return value //[51, 845] 53 // } 54 // }); 55 // console.log(arr4) 56 57 var arr4 = arr.filter(function (value,index) { 58 return value>50 //和map一樣，一定要有個返回值 59 }) 60 console.log(arr4) 61 </script> 62 </head> 63 <body> 64 65 </body> 66 </html>
9、對象的擴展
對象當中的屬性可以簡寫，對象當中的方法也可以簡寫
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width"> 7 <title>Title</title> 8 <script> 9 10 // let username="海燕"; 11 // function fun() { 12 // alert(888) 13 // } 14 // let obj={username,fun}; //如果上面定義的變量和對象的key的名字同名，就不用寫value了，直接把變量賦值給了對象的value 15 // console.log(obj.username); //海燕 16 // obj.fun(); //alert(888) 17 18 19 20 //對函數的簡寫 21 // let username="海燕"; 22 // console.log(obj.username) ; 23 // let obj={username,fun(){console.log(123)}}; 24 // obj.fun(); //123/海燕 25 26 //發送ajax請求的簡寫 27 var username=$("#text1").val(); 28 var password=$("#text2").val(); 29 $.get( 30 url, 31 {username, password}, 32 function () {}) 33 34 </script> 35 36 </head> 37 <body> 38 39 </body> 40 </html>
10、類
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width"> 7 <title>Title</title> 8 <script> 9 var age2 = 99; 10 Object.prototype.age2=age2; 11 12 function Person(name,age) { //創建一個人類 13 this.name = name; //屬性 14 this.age = age; 15 this.run = function () { 16 // alert(this.name+"跑起來") 17 alert(`${this.name}跑起來`) 18 }; 19 this.sing = function () { 20 alert(`${this.name}能唱歌能條`) 21 } //會執行里面的sing方法,如果這里沒有，執行外面的sing 22 } 23 Person.prototype.sing = function () { //對函數進行擴展，增加了一個方法 24 alert(`${this.name}能唱歌`) 25 }; 26 27 let man = new Person('小妹',19); 28 console.log(man.name); 29 console.log(man.age); 30 man.run(); 31 man.sing(); 32 </script> 33 </head> 34 <body> 35 36 </body> 37 </html>
11、維護學生信息的一個小示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width">
<title>Title</title>
<script src="vue.js"></script>
<style>
.box{
position: absolute;
top: 250px;
left: 600px;
border: 1px solid black;
background-color: slategray;
width: 200px;
height: 180px;
}
</style>
</head>
<body>
<div id="app">
<p><input type="text" v-model="username"></p>
<p><input type="text" v-model="age"></p>
<p><input type="submit" value="添加" @click="add"></p>
<table border="1" cellpadding="0">
<tr v-for="(item,index) in arr">
<td>{{item.username}}</td>
<td>{{item.age}}</td>
<td><input type="submit" value="刪除" @click="del(index)"></td>
<td><input type="submit" value="編輯" @click="edit(index)"></td>
</tr>
</table>
<div class="box" v-show="isshow">
<p><input type="text" placeholder="姓名" v-model="n_username"></p>
<p><input type="text" placeholder="年齡" v-model="n_age"></p>
<p>
<input type="submit" value="確定" @click="save">
<input type="submit" value="取消" @click="quxiao">
</p>
</div>
</div>
<script>
new Vue({
el:"#app",
data:{
username:"",
age :"",
arr:[],
isshow:false , //默認是隱藏的
n_username:"",
n_age:"",
n:0
},
methods:{
add:function () {
this.arr.push({"username":this.username, "age":this.age})
},
del:function (index) {
this.arr.splice(index,1)
},
edit:function (index) {
// this.isshow = true //這是一種表現方式，也可以按照下面的這種方式
this.isshow = !this.isshow;
this.n = index;
this.n_username = this.arr[index].username;
this.n_age = this.arr[index].age;
console.log(this.n_username)
},
save:function () {
this.arr[this.n].username = this.n_username;
this.arr[this.n].age = this.n_age;
this.isshow = false
},
quxiao:function () {
this.isshow = false
}
},
})
</script>
</body>
</html>