淺談ES6
JS組成
1、DOM 文檔對象模型
2、BOM 瀏覽器對象模型
3、ecmascript ->ES
js發(fā)展歷史:
1996 ES1.0 js穩(wěn)定 Netscape將js提交給ECMA組織， ES正式出現(xiàn)
1998 ES2.0 ES2.0正式發(fā)布
1999 ES3.0 ES3被瀏覽器廣泛支持
2007 ES4.0 ES4過于激進(jìn)，被廢除了
2008 ES3.1 4.0退化為嚴(yán)重縮水版的 3.1, 代號 Harmony（和諧）
2009 ES5.0 ES5正式發(fā)布了，同時(shí)公布JavScript.next 也就后來 6.0
2011 ES5.1 ES5.1 成為了ISO國際標(biāo)準(zhǔn)
2013.3 ES6.0 ES6.0 制定草案
2013.12 ES6.0 ES6.0 草案發(fā)布
2015.6 ES6.0 ES6.0
ES6很多瀏覽器都不兼容，所以寫的時(shí)候，如果遇到不兼容情況，就引入兩個文件
**traceur.js和bootstrap.js **
<script src="traceur.js"></script>
<script src="bootstrap.js"></script>
<script type="module"></script>
https://babeljs.io/repl/ 在線把ES6->ES5
新增的有以下幾點(diǎn)變化：
1、聲明變量的方法
** 一 **、let a=12;
{}代碼塊 塊級作用域
{} if for
if(true){
var a=12;
}
alert(a)//12
if(true){
let a=12;
}
alert(a);//找不到a報(bào)錯
a、let只有在塊級作用域里面生效
b、不允許重復(fù)聲明
用途 配合塊級作用域可以當(dāng)自執(zhí)行匿名函數(shù)來用
**二 **、const a=12; 定義常量
1）一經(jīng)賦值不可再修改。
2）必須要給初始值。
const a =12;
a=5;
alert(a); // 報(bào)錯 不允許重復(fù)賦值
/*
var a=12;
a=5;
alert(a); // 5
*/
2、 `` '' 返單引號
字符串聲明的方式
在字符串拼接的時(shí)候 ${str} -> '+str+'
以前字符串和變量的拼接：
var b='1234';
var a='adfsa'+b+'faaasdf';
alert(a);
現(xiàn)在字符串和變量的拼接：
var b=`1234`;
var a=`w${b}ome to China`;
alert(a);
3、結(jié)構(gòu)賦值
var [a,b,c]=[12,3,15]; 數(shù)組有順序
var {a,b,c}={a:5,b:12,c:7}; json無序的
var [a,[b,c],d]=[1,[3,5],7];
//模式匹配 左面的結(jié)構(gòu)和右邊的結(jié)構(gòu)要一樣
4、復(fù)制數(shù)組
目前我們復(fù)制數(shù)組一共三種方法，
1、循環(huán)數(shù)組
var arr=[1,2,3];
var arr2=[];
for(var i=0;i<arr.length;i++){
arr2[i]=arr[i];
}
arr2.pop();
console.log(arr,arr2);
2、Array.from(arr);
var arr=[1,2,3];
var arr2=Array.from(arr);
arr2.pop();
console.log(arr,arr2);
3、[...arr]
var arr=[1,2,3];
var arr2= [...arr];
arr2.pop();
console.log(arr,arr2);
//這種...的方法也可以用在函數(shù)參數(shù)身上，直接把a(bǔ)rguments偽數(shù)組變成數(shù)組，然后來用數(shù)組的方法
function show(...args){
args.push(5);
console.log(args);
}
show(1,2,3,4)
5、循環(huán)
目前一共三種循環(huán)：for while for-in
加上新增的for-of
感覺類似for-in 數(shù)組能用，json不能用
也是循環(huán)對象，但是他是為循環(huán)map
map -> a:1 b:2 c:3
for(var name of map){
document.write(name+'<br>'); // a,1 b,2 c,3
}
for(var [key,value] of map){
document.write(value+'<br>'); 1 2 3
document.write(key+'<br>'); a b c
}
for(var name of map.entries()){
document.write(key+'<br>'); --> key,value
}
for(var key of map.keys()){
document.write(key+'<br>'); --> key
}
for(var value of map.values()){
document.write(value+'<br>'); //---> value
}
數(shù)組里面也有entries,keys,values
6、map
是一個對象,也是已key，value的形式存在的對象
如何聲明一個map
var map=new Map();
//設(shè)置map
map.set(name,value);
//獲取
map.get(name);
// 刪除
map.delete(name);
7、申明默認(rèn)值
以前我們函數(shù)傳參一般在最初的時(shí)候給一些默認(rèn)值
//這是以前的方法
function move(json){
var {time=1000}=json; //=1000 是做初始值聲明
alert(time)
}
//move({})
//move({time:2000})
//現(xiàn)在可以直接這樣
function show(a=1){
alert(a)
}
show(5);
8、箭頭函數(shù)
function show(){
alert(1);
}
var show=()=>{
alert(1);
}
show()
function show(a,b){
alert(a+b)
}
var show=(a,b)=>{
alert(a+b);
}
show(2,3)
var show=()=>{
return 1
}
var a=show();
alert(a);
var show=(a,b)=>a+b;
var s=show(1,2);
alert(s);
注意：1、this有問題，指向的是window
2、arguments不能用
9、面向?qū)ο?/h3>
新版變相對象方法是使用class 類
class Person{
constructor(name,age){ //直接寫屬性
this.name=name;
this.age=age;
}
showName(){ //直接可以寫方法
return this.name
}
showAge(){
return this.age
}
}
//var xiaoming=new Person('小明','16');
class Student extends Person{ //繼承
constructor(name,age,job='student'){
super(name,age); //直接就繼承了屬性和方法
this.job=job;
}
showJob(){
return this.job
}
}
var xiaohua=new Student('小花','39');
var xiaolv=new Student('小綠','45','student');
alert(xiaohua.showJob())
10、模塊化 (需要在服務(wù)器環(huán)境)
// 在模塊中創(chuàng)建數(shù)據(jù) 文件名sum.js
const a=12;
//導(dǎo)出默認(rèn)的數(shù)據(jù)
export default a
//接受數(shù)據(jù)
import 模塊名 from 'sum.js';
alert(sum); //12
