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); // 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>
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>
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>
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>
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 () { //prototype是对每一个类的扩展，如果类内有，那拓展就失效了 alert(`${this.name}能唱歌`); }; let man = new Person("小秋",19); console.log(man.name); //首先在类中查找 man.run(); man.sing(); //其次到类的prototype中查找 console.log(man.age2); //再到Object中查找 </script>