Web 前端开发 让前端飞

和我一起熟悉下ES6的基本小方法

2017-05-18  本文已影响0人  Brighten_Sun

Javascript(以下简称为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>

当你写好的ES6浏览器无法解析时不要怕,通过 https://babeljs.io/repl 可在线把ES6语法编译为ES5

ES6新增的一些小方法
一、声明变量的方法
1、定义变量

let a=12;
alert(a);//12
1)不允许重复声明。

2、定义常量

const a=12;
alert(a);//12
1)一经赋值不可再修改。
2)必须要给初始值。

二、返单引号``(切换英文模式tab键上面的)

字符串声明的方式

以往的字符串拼接
var a='variable';
var str='Im the '+a+'';

ES6中的字符串拼接
let a=`variable`;
let str=`Im the ${a}`;

三、结构赋值

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];
//模式匹配   左面的结构和右边的结构要一样

四、复制数组
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();

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)

五、如何在函数中声明默认值
以往我们函数传参时会在最初给一些默认值

function move(json){
   var {time=1000}=json;   //1000是做初始值声明
   alert(time)
}
move({time:2000});    //当json中为空时为1000初始值,有值时可以直接赋值

//ES6中现在可以直接这样
function show(time=1){    //1是初始值
    alert(time)
}
show(5);

六、箭头函数
注意:
1、this有问题,指向的是window
2、arguments不能用

1、以往函数对比
function show(){
    alert(1);
}

var show=()=>{
    alert(1);
}
show()

2、以往函数对比
function show(a,b){
    alert(a+b)
}

var show=(a,b)=>{
    alert(a+b);
}
show(2,3)

3、以往函数对比
var show=()=>{
    return 1
}
var a=show();
alert(a);

var show=(a,b)=>a+b;
var s=show(1,2);
alert(s);

七、模块化 (需要在服务器环境)

// 在模块中创建数据  文件名a.js 编写如下代码
const a=12;
//导出默认的数据
export default a

//接受数据 创建一个html文件 在script中编写如下代码
import Aaa(模块名) from 'a.js';
alert(Aaa); //12

如果有些还是不可以出效果的同学可以找我要上面的两个js文件哦,毕竟现在浏览器兼容的还是个问题

上一篇下一篇

猜你喜欢

热点阅读