美文网首页Web 前端开发 让前端飞
和我一起熟悉下ES6的基本小方法

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

作者: Brighten_Sun | 来源:发表于2017-05-18 14:37 被阅读0次

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文件哦,毕竟现在浏览器兼容的还是个问题

相关文章

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

    Javascript(以下简称为js)组成 js发展历史 目前ES6很多浏览器都不兼容,所以写的时候,如果遇到不兼...

  • 出现最多的字符串

    这是用String本身的方法实现(es6的新增方法不太熟悉,基本上es5的); 使用String的match方法 ...

  • 关于es6模板字面量

    基本用法 在ES6之前,将字符串连接到一起的方法是+或者concat()方法,如 模板字面量用倒引号 (``)(而...

  • ES6 let、const 总结

    let的基本用法 const ES6有六种声明方法

  • super()方法详解

    基本概念: constructor(构造方法) constructor 是对es6类的默认方法,通过 new 命令...

  • Reflect

    反射es6有部分对象的方法 放到 Reflect 功能基本一致

  • vue源码解析(二)

    先决条件 需要能够熟悉使用 vue ,了解vue属性和方法。 带着问题去看源码 熟悉ES6或者Typescript...

  • vue源码解析(一)

    vue源码解析(一) 先决条件 需要能够熟悉使用 vue ,了解vue属性和方法。 带着问题去看源码 熟悉ES6或...

  • ES6常见面试题 2019-06-14

    1.es6熟悉吗,说几个es6的新增方法 (1)新增声明命令let和const 在es6中通常用 let 和 co...

  • es6 class及super关键字

    传统方法 JavaScript 语言中,生成实例对象的传统方法是通过构造函数。 基本上,ES6 的class可以看...

网友评论

    本文标题:和我一起熟悉下ES6的基本小方法

    本文链接:https://www.haomeiwen.com/subject/eursxxtx.html