如何在浏览器中使用es6的语法呢?

方法一:引入文件相关js文件

 <script src="traceur.js"></script>
<script src="bootstrap.js"></script> //引导程序 --- 跟css的bootstrap无关
<script type="module">
//code 这里写你的代码
</script>

方法二:

在线编译 测试 --- https://babeljs.io/repl/

注意:玩ES6的时候,用严格模式('use strict'),如果不出问题的情况下,不用加编译,出问题再加。

1. 变量定义(let)和常量定义(const)

let 定义变量 (浏览器已经支持),有块级别作用域(只在本块有用,不会影响其他的)
 {
let a = 12;
}
alert(a); //不能用

应用:可解决i值的问题。

        let aBtn = document.getElementsByTagName('input');
for(let i = 0;i<aBtn.length;i++){
aBtn[i].onclick = function(){
alert(i); //点谁就弹几
};
}

注意:let不能重复定义同一变量。
错误示例:

  'use strict'
let a = 12;
let a = 5;
alert(a); //会报错
定义常量(const)
  const a = 'Tab';
alert(a);
1.不能重复定义
2.常量不能修改

2.字符串模板引擎(字符串拼接)

Es6的这种新的“字符串拼接”方法比较简单,没有繁琐的加号和引号,只需要在所需要的字符串“边界”加上``即可。(键盘 tab上面那个键 ${变量} 键盘 tab上面那个键)

    var name = 'Datura';
var age = 18;
var sex = '其它';
var hobby = '敲代码';
var str1 = `我是${name},今年${age}岁,性别${sex}的了,爱好${hobby}`; //注意此处有两个“ `` ”
var str2 = '我是'+name+',今年'+age+'岁,性别'+sex+',爱好'+hobby+''; //这个是原来的写法
alert(st1r);

3. 解构赋值

就根据“对应”赋值,请看以下几个例子:

 'use strict';
let a = 12;
let b = 5;
let c = 8;
//相当于
let [a,b,c] = [12,5,8];
console.log(a,b,c); //12 5 8

json格式的赋值

let {a,b,c} = {a:12,b:5,c:8};
console.log(a,b,c); //12 5 8
//数组里面嵌套数组
let [a,[b,c],d] = [12,[1,3],8];
console.log(a,b,c,d); // 12 1 3 8
与顺序无关,与结构有关(左右结构一致):
let {a,b,c} = {b:5,a:12,c:8};
console.log(a,b,c); //12 5 8

应用,我们现在利用jsonp获取了一组数据

let json = {
q:"aaa",
p:false,
s:["aaa云主机","爱奇艺vip免费试用","啊aaaaaaaa视频","aaaa","爱奇艺","aaa电池","工商银行","aaai","aaa短信轰炸机"]
}; let {s,q} = json;
console.log(s,q); //s为那组数组的数据,q为字符串aaa

解构赋值的默认值问题

let {time=1000,id=0} = {};
console.log(time,id); // 1000 0

4.神奇的“三个点”

我之前的文章曾提到过数组或者对象的深浅拷贝问题,今天我们就利用es6的三个点来处理下。

    var arr = [12,5,8];
arr2 =arr;
arr2.pop();
alert(arr); // 12 5

上面的代码就是arr2与arr公用一段内存地址,所以导致srr2数据改变的时候arr也必然会变的。这就是浅拷贝。那么我们下面就简单的说几种深度复制数组方式。
方式一:利用for循环把原数组的每一项都遍历,然后扔到新的数组中。

    var arr = [12,5,8];
var arr2 =[];
for(var i = 0;i<arr.length;i++){
arr2.push(arr[i]);
}
arr2.pop();
alert(arr); // 12 5 8

方式二:利用Array.from(原数组);

    var arr = [12,5,8];
var arr2 = Array.from(arr);
arr2.pop();
console.log(arr2); // 12 5
alert(arr); // 12 5 8

方式三:三个点

    var arr = [12,5,8];
var arr2 = [...arr]
arr2.pop();
console.log(arr2);//12 5
alert(arr); //12 5 8

说了这么多,我们现在就说下“三个点”的应用把,我们知道函数的参数是一个集合(arguments)并不是一个真正的数组。那么我们怎么才能在这个arguments中加一项呢??

    function show(){
//因为类数组对象,并不具备数组的那些方法。所以此会报错
arguments.push(8);
console.log(arguments);
}
show(12,5);
      function show(...arr){
arr.push(8);
console.log(arr);
}
show(12,5); //12 5 8

当然还有很多的对象深拷贝方式请参照(http://www.jianshu.com/p/4e613af9509c),这里就不一一论述了。

1. Map对象

ES6提供了新的数据结构Map,Map结构提供了“值—值”的对应,是一种更完善的Hash结构实现。如果你需要“键值对”的数据结构,Map比Object更合适。它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。{"b" => "banana"}并且每一项都包含了key和value
我们来新建一个Map对象,并为其赋值:

    let map = new Map();
map.set('a','apple');
map.set('b','banana');
console.log(map); // Map {"a" => "apple", "b" => "banana"}

结果如图:

获取Map对象里面的值(map.get()):
    let map = new Map();
map.set('a','apple');
map.set('b','banana');
console.log(map.get('b')); //banana
删除Map对象里面的值(map.delete();):
    let map = new Map();
map.set('a','apple');
map.set('b','banana');
map.delete('a');
console.log(map); // {"b" => "banana"}
获取Map对象的“长度”:
    let map = new Map();
map.set('a','apple');
map.set('b','banana');
console.log(map.size); //2
console.log(map.length); //undefined
map.entries()
    let map = new Map();
map.set('a','apple');
map.set('b','banana');
console.log(map.entries()); // MapIterator {["a", "apple"], ["b", "banana"]}
遍历Map对象(for...of... )
    let map = new Map();
map.set('a','apple');
map.set('b','banana');
for(let name of map){
console.log(name); //["a", "apple"] ["b", "banana"]
}
//循环出来的是以数组套键值对的方式

如果我们只要Map中的“值”怎么办?别急

    let map = new Map();
map.set('a','apple');
map.set('b','banana');
for(let val of map.values()){
console.log(val); //apple banana
}

如果我们只要Map中的“键(key)”怎么办?别急

    let map = new Map();
map.set('a','apple');
map.set('b','banana');
for(let key of map.keys()){
console.log(key); // a b
}

如果我们只要Map中的“键 --- 值”怎么办?也别急

    let map = new Map();
map.set('a','apple');
map.set('b','banana');
for(let [key,value] of map.entries()){
console.log(key,value); //a apple b banana
}

2.for循环那些事

a) for ... in ...循环

  //循环数组
let arr = [12,5,8];
for(let i = 0;i<arr.length;i++){
console.log(i); //0 1 2
console.log(arr[i]); //12 5 8
} let arr = [12,5,8];
for(let i in arr){
console.log(i); //0 1 2
console.log(arr[i]); //12 5 8
}
    //循环json数据
let json = {a:12,b:5,c:8};
for(let name in json){
console.log(name); //a b c
console.log(json[name]); //12 5 8
}

b) for ... of ...循环

  //循环数组
let arr = [12,5,8];
for(let name of arr){
console.log(name); // 12 5 8
}
 //循环json数据
let json = {a:'apple',b:'banana'};
for(let name of json){
console.log(name);
}
//报错,因为不能用for ...of...来循环json数据

c) 删除json的某一条数据

    let json = {a:12,b:5};
delete json.a;
console.log(json); // b:5

3. 箭头函数

ES6标准新增了一种新的函数:Arrow Function(箭头函数)。
为什么叫Arrow Function?因为它的定义用的就是一个箭头:

x => x * x

我们先回顾下ES5函数定义与调用:

    var show = function(){
alert(12);
};
show(); // 12
    const show = () =>{
alert(12);
};
show(); // 12
//个人理解:这里将function关键字去掉然后在“()”后面加一个“=>”
接下来我们举几个例子,来进一步了解下箭头函数:

a) 函数有返回值

//ES5函数写法
var sum = function(a,b){
return a+b;
}
alert(sum(12,5));
//ES6函数写法
let sum = (a,b) => {
return a+b;
}
alert(sum(12,5));
//进化一下 --- 省略花括号
let sum = (a,b) => a+b;
alert(sum(12,5));

b) 参数是1个

        var show = function(a){ return 'welcome'}
//相当于 省略括号
var show = a => 'welcome'

c) 参数是0个

        var show = function(){ return 'welcome'}
//相当于 省略括号
var show = () => 'welcome'
注意:箭头函数下 ,arguments 不能使用了
var show = (a,b) => console.log(this.arguments);     // 报错
箭头函数简单应用:

数组排序

    var arr = [12,55,8];
//es5写法
arr.sort(function(n1,n2){
return n1 - n2;
});
//es6写法
arr.sort((n1,n2) => n1-n2);
alert(arr);

1. 面向对象

a) 单例模式(单体模式)
     let name = 'Datura';
let age = 18;
let person = {
name,
age,
sex:'Man',
showName:function(){return this.name},
showAge:function(){return this.age}
};
alert(person.showAge()); //18
alert(person.sex); //Man
b) 工厂模式
es5的面向对象工厂模式:

首先让我们一起来回一下es5面向对象的写法:
i) 首先定义一个构造函数(此处是 Person);
ii) 定义Person的“属性”,用this.xxx = xxx;
iii) 把方法挂在原型上,Person.prototype.xxx = function(){ xxx };
iiii) 调用

   function Person(name,age){
this.name = name;
this.age = age;
}
Person.prototype.showName = function(){
return this.name;
};
Person.prototype.showAge = function(){
return this.age;
};
var p1 = new Person('alice',18);
alert(p1.showAge()); //18
es5继承:
//定义一个Person构造函数
function Person(name,age){
this.name = name;
this.age = age;
}
Person.prototype.showName = function(){
return this.name;
};
Person.prototype.showAge = function(){
return this.age;
}; //Worker构造函数
//继承属性
function Worker(name,age,job){
//改变this指向,继承Person的属性
Person.apply(this,arguments);
//定义worker新的属性
this.job = job;
}
//继承方法
Worker.prototype = new Person();
//给worker指定“亲爹”
Worker.prototype.construcotr = Worker;
//定义worker新的方法
Person.prototype.showJob = function(){
return this.job;
};
//调用
var p2 = new Worker('Datura',20,'boss');
alert(p2.showName()); //Datura
alert(p2.showJob()); //boss
es6的面向对象工厂模式:

i) 首先定义一个构造函数(此处是 Person),注意用class关键字而不是function;
ii) 定义Person的“属性”,写在constructor(){this.xxx = xxx };
iii) 定义方法,xxx () { xxx };
iiii) 调用
iiiii) 注意constructor和方法之间没有“;”,可以给属性初始值或默认值

    class Person{
constructor(name,age=25){ //可以给属性初始值或默认值,正常es的function函数也可以给默认值
this.name = name;
this.age = age;
}
showName(){
return this.name;
}
showAge(){
return this.age;
}
} var p1 = new Person('alice',18);
alert(p1.showAge()); // 18
es6继承:
  //父类构造函数Person
class Person{
constructor(name,age){
this.name = name;
this.age = age;
}
showName(){
return this.name;
} showAge(){
return this.age;
}
}
//子类继承父类
class Worker extends Person{
constructor(name,age,job='搬砖的'){ //继承父类属性,并新加属性给默认值
super(name,age);
//这里必须传参,也就是需要把原来构造函数的参数传入。
//子类必须在constructor方法中调用super方法,否则新建实例时会报错。
//这是因为子类没有自己的this对象,而是继承父类的this对象,然后对其进行加工。如果不调用super方法,子类就得不到this对象。
this.job = job;
}
//给子类定义新方法showJob
showJob(){
return this.job;
} }
//调用
var w1 = new Worker('rose',17);
alert(w1.showJob());
alert(w1.showName());

2. 模块化

注意:目前还没有浏览器支持模块化(需要引入traceur.js和bootstrap.js)

第三方:seajs require.js 模块化工具
那么我们来学习下,es6自带的模块化

a).导出,将变量a“暴露”出去
const a =12;
export default a;
b).导入1.js文件“暴露”的东西,并用modA 接收
import modA from './1.js'; (./代表同级目录下)
c).同一个模块导出多个值 export default {a:12,b:5};
d).不同模块间的引入
import modA from './mod1.js';
import modB from './mod2.js';
let sum = modA+modB;
export default sum;

实例写个小例子:
//mod1.js文件的内容
const a = 12;
export default a;
//mod2.js文件的内容
const b = 5;
export default c;
//主入口(模块)的内容
<script src="traceur.js"></script>
<script src="bootstrap.js"></script>
<script type="module">
import modA from './mod1.js';
import modB from './mod2.js';
alert(modA+modB); //17
</script>
一个子模块“暴露”一个json数据
//mod3.js文件的内容
export default {a:12,b:5};
//主入口(模块)的内容
import modA from './mod3.js';
console.log(modA.a+modA.b); // 17

(转)es6用法的更多相关文章

  1. scss 用法 及 es6 用法讲解

    scss 用法的准备工作,下载 考拉 编译工具 且目录的名字一定不能出现中文,哪里都不能出现中文,否则就会报错 es6 用法 let 和 const  let  声明变量的方式 在 {} 代码块里面才 ...

  2. Typescript(ES6) ...用法

    简单例子: //数组深拷贝 var arr2 = arr; var arr3 = [...arr]; console.log(arr===arr2); //true, 说明arr和arr2指向同一个数 ...

  3. js 各种循环的区别与用法(for in,forEach,for of)

    1,forEach循环   不能跳过或者终止循环 const a = ["a","ss","cc"] a.dd="11" ...

  4. CKEditor5 + vue2.0 自定义图片上传、highlight、字体等用法

    因业务需求,要在 vue2.0 的项目里使用富文本编辑器,经过调研多个编辑器,CKEditor5 支持 vue,遂采用.因 CKEditor5 文档比较少,此处记录下引用和一些基本用法. CKEdit ...

  5. es6入门总结

    let和const命令 let命令 循环体的let变量只对花括号作用域可见,花括号外不可见 循环体的语句部分是一个父作用域,而循环体内部是一个单独的子作用域 let声明的变量不存在变量提升,未声明的使 ...

  6. ES6 数值的扩展

    在ES5中,我们存在几个全局函数 isNaN函数,isFinite函数,parseInt函数,parseFloat函数等,对于这些全局函数的使用很简单,就拿isNaN函数来举例. ES5中的写法是: ...

  7. ECMAScript 6(ES6)常用语法

     一:Let和const (1)Let定义块级作用域的变量,var定义的变量会提升.Let不会提升. 如下.var可以先用,打印是undefined但是let在定义之前是不能用的. 会报错Uncaug ...

  8. vue的基本用法

    公共样式---pc版的404报错 动态src 这个是vue组件template部分 <div class="not-found"> <img :src=" ...

  9. 【ES6新增语法详述】

    目录 1. 变量的定义 let const 2. 模版字符串 3. 数据解构 4. 函数扩展 设置默认值 箭头函数 5. 类的定义 class 6. 对象的单体模式 "@ ES6新增了关于变 ...

随机推荐

  1. GFS分布式文件系统理论个人总结

    GlusterFS 两种模式 可以通过TCP/IP和RDMA高速网络互连,客户端可通过原生Gluster协议访问数据 没有GlusterFS客户端的可以通过NFS/CIFS标准协议通过存储网关访问数据 ...

  2. 【转载】InputStreamReader和OutputStreamWriter 的区别和用法

    一.InputStreamReader 用于将一个字节流中的字节解码成字符 , 用法如下: @Test public void Test19() throws Exception { InputStr ...

  3. Hadoop 使用小命令(2)

    一.查看一堆文件共有多少行 查看file1/file2目录下所有文件总共多少行 hadoop fs -text file1/file2/* | wc -l 二.正则表达式 hadoop fs -tex ...

  4. [luogu4162 SCOI2009] 最长距离(最短路)

    传送门 Solution 题目是最长路,其实是最短路ヽ(ー_ー)ノ 把进入障碍点的边设为1,其他为0.枚举每个点为起点找距离<=T的点,更新答案 Code //By Menteur_Hxy #i ...

  5. [CodeForces]908D New Year and Arbitrary Arrangement

    设状态f[i][j]表示有i个a,j个ab的期望 发现如果i+j>=k的话就再来一个b就行了. #include <iostream> #include <cstdio> ...

  6. sql语句学习(NOT EXISTS 和 NOT IN )

    NOT EXISTS SELECT a.*FROM t_user aWHERE a.id_card LIKE '%3203821995100%'AND NOT EXISTS ( SELECT id F ...

  7. 【Codeforces 933A】A Twisty Movement

    [链接] 我是链接,点我呀:) [题意] [题解] 因为只有1和2. 所以最后肯定是若干个1接着若干个2的情况. 即11...11222...222这样的. 1.首先考虑没有翻转的情况. 那么就直接枚 ...

  8. UVALive 6177 The King's Ups and Downs

    The King's Ups and Downs Time Limit: 3000ms Memory Limit: 131072KB This problem will be judged on UV ...

  9. linux下最简单的端口转发工具

    linux下简单好用的工具rinetd,实现端口映射/转发/重定向 官网地址http://www.boutell.com/rinetd 软件下载wget http://www.boutell.com/ ...

  10. 洛谷 P3252 [JLOI2012]树

    P3252 [JLOI2012]树 题目描述 在这个问题中,给定一个值S和一棵树.在树的每个节点有一个正整数,问有多少条路径的节点总和达到S.路径中节点的深度必须是升序的.假设节点1是根节点,根的深度 ...