前端VUE框架-es6
阿新 • • 發佈：2018-01-26
gpo char alert str num f11 唱歌 spa url 
EMCAScript 6 又叫 es2015
1、常量和變量 常量： const a = "hello" 常量不能修改和重復定義 變量： let:定義一個塊級作用域的變量 需要先定義再使用；(不存在變量提升) 不能重復定義 可以被修改 var:定義一個變量 存在變量提升 變量提升： 先使用後定義和賦值 // console.log(b); undefined// var b = 123456; 詳解： // var b; // console.log(b); undefined // b = 123456; js的數據類型： string array number null undefined boolean object 基本數據類型：string number null undefined boolean 引用類型：array object
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> const a = "hello"; console.log(a); // console.log(b); // var b = 123456; //變量提升 // var b; // console.log(b);View Code// b = 123456; //let c = 100; if(10> 9){ let c=200; console.log(c); } console.log(c); var c = 300 let d = 888; d = 999 console.log(d); var i=10; var arr = [22,33,44,55] for(let i=0;i< arr.length;i++){ } if(i>5){ console.log(i+10); } const obj = { name: "謝小二", age: 22 } var obj2 = obj; obj2.age = 90 console.log(obj.age); </script> </head> <body> </body> </html>
2、模板字符串
通過反引號來使用，字符串當中可以使用變量
可以當作普通字符串來處理
可以使用多行字符串
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <ul id="list_1"> </ul> <script> var name = `小三`; console.log(`她的名字叫${name}`); document.getElementById("list_1").innerHTML = ` <li>11</li> <li>22</li> <li>33</li> <li>44</li> ` </script> </body> </html>View Code
3、解構變量
解構變量的結構要一樣，結構對象時被賦值的變量要和對象內的key一樣
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> // let arr = [89,90,99]; // let a = arr[0]; // let b = arr[1]; // let c = arr[2]; let [a,b,c,[d]] = [89,90,99,[100]]; console.log(a); console.log(c); console.log(d); let obj = { "a1":"json", a2: 23 }; let {a1,a2} = obj; console.log(a1); </script> </head> <body> </body> </html>View Code
4、對象的擴展
對象當中的屬性可以簡寫
對象當中的方法也可以簡寫
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> let username = ‘謝小閑‘; let obj = { username, //username=‘謝小閑‘ fun() { alert(999); } }; console.log(obj.username); obj.fun(); //用法舉例： // var useranme = $("#text1").val(); // var password = $("#text2").val(); // $.get(url,{useranme,password},function(){ // // // }) </script> </head> <body> </body> </html>View Code
5、函數的擴展 可以給函數默認參數 剩余參數：function fun2(x=3,...y) { console.log(x); console.log(y); // [3.4.5] } fun2(x=2,y=3,z=4,5)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> function fun(x=100) { alert(x); } //fun(); function fun2(x=3,...y) { console.log(x); console.log(y); // [3.4.5] } fun2(x=2,y=3,z=4,5) </script> </head> <body> </body> </html>View Code
6、數組的擴展
1)判斷數組當中是否存在某個數值
console.log(arr.indexOf(1000)) //沒有打印 -1 ，有則打印數值的索引
console.log(arr.includes(201)) // false或true
2）對數組的遍歷
var arr = [78,89,90,21];
arr.forEach(function (value,index) {
console.log(value);
})
var arr2 = arr.map(function (value,index) {
return value+1 //必須有返回值
})
console.log(arr2); //[79, 90, 91, 22]
let arr3 = [11,22,33]
for(var i in arr3){ // in 方法 i表示索引
console.log(arr3[i]);
}
for(var i of arr3){ // of 方法 i表示值
console.log(i);
}
3)對數組的過濾
var arr4 = arr.filter(function (value,index) {
return value > 50 //必須有返回值
})
console.log(arr4); // [78, 89, 90]
7、類擴展 <script> var age2 = 99; Object.prototype.age2 = age2; function Person(name,age){ this.name = name; this.age = age; this.run = function () { alert(`${this.name}能跑`); } } Person.prototype.sing = function () { alert(`${this.name}能唱歌`); }; let man = new Person("小秋",19); console.log(man.name); //首先在類中查找 man.run(); man.sing(); //其次到類的prototype中查找 console.log(man.age2); //再到Object中查找 </script>
前端VUE框架-es6