文档章节

ES6 新特性

杜宝
 杜宝
发布于 2017/08/29 16:01
字数 1141
阅读 4
收藏 0
  • 类的支持
//类的定义
class Animal {
	//ES6中新型构造器
    constructor(name) {
        this.name = name;
    }
    //实例方法
    sayName() {
        console.log('My name is '+this.name);
    }
}
//类的继承
class Programmer extends Animal {
    constructor(name) {
    	//直接调用父类构造器进行初始化
        super(name);
    }
    program() {
        console.log("I'm coding...");
    }
}
//测试我们的类
var animal=new Animal('dummy'),
wayou=new Programmer('wayou');
animal.sayName();//输出 ‘My name is dummy’
wayou.sayName();//输出 ‘My name is wayou’
wayou.program();//输出 ‘I'm coding...’
  • 字面量
字面量表示如何表达这个值,一般除去表达式,给变量赋值时,等号右边都可以认为是字面量。
字面量分为字符串字面量(string literal )、数组字面量(array literal)和对象字面量(object literal),另外还有函数字面量(function literal)。
示例:
var test="hello world!";
"hello world!"就是字符串字面量,test是变量名。

对象字面量被增强了,写法更加简洁与灵活,同时在定义对象的时候能够做的事情更多了。具体表现在:

  • 可以在对象字面量里面定义原型
  • 定义方法可以不用function关键字
  • 直接调用父类方法

这样一来,对象字面量与前面提到的类概念更加吻合,在编写面向对象的JavaScript时更加轻松方便了。

//通过对象字面量创建对象
var human = {
    breathe() {
        console.log('breathing...');
    }
};
var worker = {
    __proto__: human, //设置此对象的原型为human,相当于继承human
    company: 'freelancer',
    work() {
        console.log('working...');
    }
};
human.breathe();//输出 ‘breathing...’
//调用继承来的breathe方法
worker.breathe();//输出 ‘breathing...’
  • 字符串模板

字符串模板相对简单易懂些。ES6中允许使用反引号 ` 来创建字符串,此种方法创建的字符串里面可以包含由美元符号加花括号包裹的变量${vraible}

//产生一个随机数
var num=Math.random();
//将这个数字输出到console
console.log(`your num is ${num}`);
  • 解构

解构赋值允许你使用类似数组或对象字面量的语法将数组和对象的属性赋给各种变量。这种赋值语法极度简洁,同时还比传统的属性访问方法更为清晰

//以前我们获取对象数组的前三个数组的方法  

    var first = someArray[0];
    var second = someArray[1];
    var third = someArray[2];
//现在ES6
var [first, second, third] = someArray;
  • 默认函数值,(在定义函数的时候,可以给定默认参数)
function sayHello(name){
	//传统的指定默认参数的方式
	var name=name||'dude';
	console.log('Hello '+name);
}
//运用ES6的默认参数
function sayHello2(name='dude'){
	console.log(`Hello ${name}`);
}
sayHello();//输出:Hello dude
sayHello('Wayou');//输出:Hello Wayou
sayHello2();//输出:Hello dude
sayHello2('Wayou');//输出:Hello Wayou

 

  • 不定参数 (...传递)
    //将所有参数相加的函数
    function add(...x){
    	return x.reduce((m,n)=>m+n);
    }
    //传递任意个数的参数
    console.log(add(1,2,3));//输出:6
    console.log(add(1,2,3,4,5));//输出:15

     

  • 拓展参数(... 传递数组为参数)
var people=['Wayou','John','Sherlock'];
//sayHello函数本来接收三个单独的参数人妖,人二和人三
function sayHello(people1,people2,people3){
	console.log(`Hello ${people1},${people2},${people3}`);
}
//但是我们将一个数组以拓展参数的形式传递,它能很好地映射到每个单独的参数
sayHello(...people);//输出:Hello Wayou,John,Sherlock 

//而在以前,如果需要传递数组当参数,我们需要使用函数的apply方法
sayHello.apply(null,people);//输出:Hello Wayou,John,Sherlock 
  • let 和 const
// let可以看做var,但是限定了作用范围


for (let i=0;i<2;i++)console.log(i);//输出: 0,1
console.log(i);//输出:undefined,严格模式下会报错
 //const 就是定义常量了
  • for  of (循环提供的不是index而是 val)
  • var someArray = [ "a", "b", "c" ];
     
    for (v of someArray) {
        console.log(v);//输出 a,b,c
    }

    module(不同功能的代码分别写在不同文件中,各模块只需导出公共接口部分,然后通过模块的导入的方式可以在其他地方使用)

  • // point.js
    module "point" {
        export class Point {
            constructor (x, y) {
                public x = x;
                public y = y;
            }
        }
    }
     
    // myapp.js
    //声明引用的模块
    module point from "/point.js";
    //这里可以看出,尽管声明了引用的模块,还是可以通过指定需要的部分进行导入
    import Point from "point";
     
    var origin = new Point(0, 0);
    console.log(origin);

    Map,Set 和 WeakMap,WeakSet

  • // Sets
    var s = new Set();
    s.add("hello").add("goodbye").add("hello");
    s.size === 2;
    s.has("hello") === true;
    
    // Maps
    var m = new Map();
    m.set("hello", 42);
    m.set(s, 34);
    m.get(s) == 34;
    
    //如果怕内存泄漏,可以使用WeakMap,WeakSet
    // Weak Maps
    var wm = new WeakMap();
    wm.set(s, { extra: 42 });
    wm.size === undefined
    
    // Weak Sets
    var ws = new WeakSet();
    ws.add({ data: 42 });//因为添加到ws的这个临时对象没有其他变量引用它,所以ws不会保存它的值,也就是说这次添加其实没有意思

    JavaScript越来越强大了

© 著作权归作者所有

共有 人打赏支持
杜宝
粉丝 2
博文 37
码字总数 30098
作品 0
兰州
私信 提问
Nodejs下的ES6兼容性与性能分析

ES6标准发布后,前端人员也开发渐渐了解到了es6,但是由于兼容性的问题,仍然没有得到广泛的推广,不过业界也用了一些折中性的方案来解决兼容性和开发体系问题,但大家仍很疑惑,使用ES6会有...

ouven
2015/12/09
7K
13
【探秘ES6】系列专栏(一):ES6简介

ES6作为新一代JavaScript标准,即将与广大前端开发者见面。为了让大家对ES6的诸多新特性有更深入的了解,Mozilla Web开发者博客推出了《ES6 In Depth》系列文章。CSDN已获授权,将持续对该系...

一配
2015/10/22
228
0
张成文——ECMAScript 6 开发体系实践

2016年04月23日14:00時,在武汉市东湖高新技术开发区民院路38号纽宾凯鲁广国际酒店(光谷步行街地铁C出口省测绘局斜对面),舉行的规模在800人左右的2016源创会武汉站。由张成文(腾讯SNG web)分...

yunwangjun
2016/04/24
2.3K
1
《探索ES6》书评与作者采访

由Axel Rauschmayer编著的《探索ES6》是对JavaScript最新特性的一次深入探讨,本文包含了对作者所进行的一次简短的访谈内容。 Axel Rauschmayer博士的著作《探索ES6:升级至JavaScript的下一...

一配
2015/12/03
199
0
从ES5语法到ES6语法你应该知道这些

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/m366917/article/details/63267297 从ES5语法到ES6语法你应该知道这些 最近在学RN,所以就要先来了解一下现在...

Aduroidpc
2017/03/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

PHP生成CSV之内部换行

当我们使用PHP将采集到的文件内容保存到csv文件时,往往需要将采集内容进行二次过滤处理才能得到需要的内容。比如网页中的换行符,空格符等等。 对于空格等处理起来都比较简单,这里我们单独...

豆花饭烧土豆
今天
2
0
使用 mjml 生成 thymeleaf 邮件框架模板

发邮件算是系统开发的一个基本需求了,不过搞邮件模板实在是件恶心事,估计搞过的同仁都有体会。 得支持多种客户端 支持响应式 疼彻心扉的 outlook 多数客户端只支持 inline 形式的 css 布局...

郁也风
今天
5
0
让哲学照亮我们的人生——读《医务工作者需要学点哲学》有感2600字

让哲学照亮我们的人生——读《医务工作者需要学点哲学》有感2600字: 作者:孙冬梅;以前读韩国前总统朴槿惠的著作《绝望锻炼了我》时,里面有一句话令我印象深刻,她说“在我最困难的时期,...

原创小博客
今天
4
0
JAVA-四元数类

public class Quaternion { private final double x0, x1, x2, x3; // 四元数构造函数 public Quaternion(double x0, double x1, double x2, double x3) { this.x0 = ......

Pulsar-V
今天
17
0
Xshell利用Xftp传输文件,使用pure-ftpd搭建ftp服务

Xftp传输文件 如果已经通过Xshell登录到服务器,此时可以使用快捷键ctrl+alt+f 打开Xftp并展示Xshell当前的目录,之后直接拖拽传输文件即可。 pure-ftpd搭建ftp服务 pure-ftpd要比vsftp简单,...

野雪球
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部