浅谈ES6
JS组成
1、DOM 文档对象模型
2、BOM 浏览器对象模型
3、ecmascript ->ES
js发展历史:
1996 ES1.0 js稳定 Netscape将js提交给ECMA组织， ES正式出现
1998 ES2.0 ES2.0正式发布
1999 ES3.0 ES3被浏览器广泛支持
2007 ES4.0 ES4过于激进，被废除了
2008 ES3.1 4.0退化为严重缩水版的 3.1, 代号 Harmony（和谐）
2009 ES5.0 ES5正式发布了，同时公布JavScript.next 也就后来 6.0
2011 ES5.1 ES5.1 成为了ISO国际标准
2013.3 ES6.0 ES6.0 制定草案
2013.12 ES6.0 ES6.0 草案发布
2015.6 ES6.0 ES6.0
ES6很多浏览器都不兼容，所以写的时候，如果遇到不兼容情况，就引入两个文件
**traceur.js和bootstrap.js **
<script src="traceur.js"></script>
<script src="bootstrap.js"></script>
<script type="module"></script>
https://babeljs.io/repl/ 在线把ES6->ES5
新增的有以下几点变化：
1、声明变量的方法
** 一 **、let a=12;
{}代码块 块级作用域
{} if for
if(true){
var a=12;
}
alert(a)//12
if(true){
let a=12;
}
alert(a);//找不到a报错
a、let只有在块级作用域里面生效
b、不允许重复声明
用途 配合块级作用域可以当自执行匿名函数来用
**二 **、const a=12; 定义常量
1）一经赋值不可再修改。
2）必须要给初始值。
const a =12;
a=5;
alert(a); // 报错 不允许重复赋值
/*
var a=12;
a=5;
alert(a); // 5
*/
2、 `` '' 返单引号
字符串声明的方式
在字符串拼接的时候 ${str} -> '+str+'
以前字符串和变量的拼接：
var b='1234';
var a='adfsa'+b+'faaasdf';
alert(a);
现在字符串和变量的拼接：
var b=`1234`;
var a=`w${b}ome to China`;
alert(a);
3、结构赋值
var [a,b,c]=[12,3,15]; 数组有顺序
var {a,b,c}={a:5,b:12,c:7}; json无序的
var [a,[b,c],d]=[1,[3,5],7];
//模式匹配 左面的结构和右边的结构要一样
4、复制数组
目前我们复制数组一共三种方法，
1、循环数组
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);
//这种...的方法也可以用在函数参数身上，直接把arguments伪数组变成数组，然后来用数组的方法
function show(...args){
args.push(5);
console.log(args);
}
show(1,2,3,4)
5、循环
目前一共三种循环：for while for-in
加上新增的for-of
感觉类似for-in 数组能用，json不能用
也是循环对象，但是他是为循环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
}
数组里面也有entries,keys,values
6、map
是一个对象,也是已key，value的形式存在的对象
如何声明一个map
var map=new Map();
//设置map
map.set(name,value);
//获取
map.get(name);
// 删除
map.delete(name);
7、申明默认值
以前我们函数传参一般在最初的时候给一些默认值
//这是以前的方法
function move(json){
var {time=1000}=json; //=1000 是做初始值声明
alert(time)
}
//move({})
//move({time:2000})
//现在可以直接这样
function show(a=1){
alert(a)
}
show(5);
8、箭头函数
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、面向对象
新版变相对象方法是使用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、模块化 (需要在服务器环境)
// 在模块中创建数据 文件名sum.js
const a=12;
//导出默认的数据
export default a
//接受数据
import 模块名 from 'sum.js';
alert(sum); //12
