文档章节

es6新增

o
 osc_z1hvg4cu
发布于 2018/04/24 16:09
字数 732
阅读 6
收藏 0

钉钉、微博极速扩容黑科技,点击观看阿里云弹性计算年度发布会!>>>

首先要说let,他是只在代码块中执行的变量,例如:

{
    let = 10;
    var = 1;
}
console.log(a);//defined
console.log(b);//1

面试题系列咱们说过,闭包的经典应用是在循环的时候:

var = [];
for (var = 0; < 10; i++) {
    a[i] = function () {
        console.log(i);
    };
}
a[6](); // 10

这样是得不出你想要的结果的,以前只有利用闭包,但是现在我们有了let:

var = [];
for (let = 0; < 10; i++) {
    a[i] = function () {
        console.log(i);
    };
}
a[6](); // 6

我们发现它神奇的执行了。另外let不允许重复声明,它主要就是应用在函数内部的块级作用域。另外还新增const只读常量,一旦声明就无法改变,作用域和let一样。

For...of循环:

let iterable = [10, 20, 30];
for (const value of iterable) {
    console.log(value);
}

我们不仅可以这样用它来循环数组,甚至能用它来循环字符串。

let iterable = "boo";
for (let value of iterable) {
    console.log(value);
}
// "b"
// "o"
// "o"

新增字符串遍历的三个方法,以前我们只有indexOf这个方法来来判定一个字符串,是否含在另外一个字符串中,它返回字符串首次出现的位置,这显然不能满足我们。

所以es6新增includes:返回布尔值,表示是否找到字符串。startsWith:返回布尔值,表示字符串是否在源字符串的头部位置。endsWith:返回布尔值,表示参数字符串是否在源字符串尾部。

var = 'Hello world!';
s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('o') // true

三个方法都支持第二个参数,表示开始搜索的位置。

var = 'Hello world!';
s.startsWith('world', 6) // true
s.endsWith('Hello', 5) // true
s.includes('Hello', 6) // false

 

字符串操作新增repeat方法,返回一个新字符串,表示将源字符串重复多少次。

'x'.repeat(3) // "xxx"
'hello'.repeat(2) // "hellohello"
'na'.repeat(0) // ""

字符串操作里面最麻烦的莫过于拼接字符串,为解决这个问题ec6提供了模板字符串解决方案。

$('#result').append(
        'There are <b>' + basket.count + '</b> ' +
        'items in your basket, ' +
        '<em>' + basket.onSale +
        '</em> are on sale!'
);

以前我们是这么写的,现在我们只需要这么写:

    $('#result').append(`
  There are <b>${basket.count}</b> items
   in your basket, <em>${basket.onSale}</em>
  are on sale!
`);

记住开头结尾要加上反引号。模板中嵌入变量需要写在${}中。

 

Ec6里面终于新增了类的方法。以前我们我们是这么写构造函数的:

function Point(x, y) {
    this.x = x;
    this.y = y;
}

Point.prototype.toString = function () {
    return '(' + this.x + ', ' + this.y + ')';
};

var = new Point(1, 2);

而现在有了类之后:

//定义类
class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }

    toString() {
        return '(' + this.x + ', ' + this.y + ')';
    }
}

注意方法之间不要加逗号,否则会报错。

使用的时候我们直接new就可以了。


class Bar {
    doStuff() {
        console.log('stuff');
    }
}

var = new Bar();
b.doStuff() // "stuff"

是不是简单方便了好多!其实类里面的方法,就等同于它的原型下面的方法。

class Point {
    constructor(){
        // ...
    
}

    toString(){
        // ...
    
}

    toValue(){
        // ...
    
}
}

// 等同于

Point.prototype = {
    toString(){},
    toValue(){}
};

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
javascript的ES6学习总结(第二部分)

1.数组循环 介绍数组循环之前,先回顾一下ES5数组的循环 (1)数组遍历(代替普通的for):arr.forEach(callback(val,index,arr){todo}) //val是数组的当前项,index是数组的键名(下标),arr是整...

osc_msepeizi
2019/04/21
5
0
ES6面试、复习干货知识点汇总

一、问:ES6是什么,为什么要学习它,不学习ES6会怎么样? 答: ES6是新一代的JS语言标准,对分JS语言核心内容做了升级优化,规范了JS使用标准,新增了JS原生方法,使得JS使用更加规范,更加优...

米依若兮
2019/11/16
16
0
koahubjs 1.0.6 发布,基于 Koa.js 的快速开发框架

koahubjs 发布 1.0.6 发布了。KoaHub.js 是基于 Koa.js 平台的 Node.js web 快速开发框架。可以直接在项目里使用 ES6/7(Generator Function, Class, Async & Await)等特性,借助 Babel 编译...

einsqing
2017/01/17
951
4
ES6标准入门(第三版)学习笔记(1)

ES6声明变量的六种方法 ES5只有两种 var,function命令 ES6新增了let,const,class,import命令 验证var与let用法上的不同 var a = [];for (var i = 0; i < 10; i++){a[i] = function(){ }...

osc_qwdy7wd0
2018/11/13
2
0
javascript的ES6学习总结(第一部分)

ES6(ESNext学习总结——第一部分) ES6, 全称 ECMAScript 6.0 ,是 JavaScript 的下一个版本标准,2015.06 发版。 ECMA每年6月份,发布一个版本 2016年6月 ES6.1 ES7 ES2016 2017年6月 ES...

osc_gu9d45li
2019/04/07
1
0

没有更多内容

加载失败,请刷新页面

加载更多

SO_REUSEADDR和SO_REUSEPORT有何不同? - How do SO_REUSEADDR and SO_REUSEPORT differ?

问题: The man pages and programmer documentations for the socket options SO_REUSEADDR and SO_REUSEPORT are different for different operating systems and often highly confusing.......

法国红酒甜
32分钟前
28
0
asp.net core之SignalR

SignalR 是什么? ASP.NET Core SignalR 是一个开源的实时框架,它简化了向应用中添加实时 Web 功能的过程。 实时 Web 功能是服务器端能够即时的将数据推送到客户端,而无需让服务器等待客户端...

一介草民Coder
今天
24
0
如何通过日期属性对数组进行排序 - How to sort an array by a date property

问题: Say I have an array of a few objects: 说我有一些对象的数组: var array = [{id: 1, date: Mar 12 2012 10:00:00 AM}, {id: 2, date: Mar 8 2012 08:00:00 AM}]; How can I sort......

javail
今天
22
0
技术教程| 百度鹰眼历史轨迹查询:轨迹抽稀功能

本文作者:用****9 本篇教程中,我们将详细地说明鹰眼历史轨迹查询(gettrack接口)中,如何通过vacuate_grade选项对轨迹进行抽稀,以及不同的抽稀力度对轨迹产生的影响。 上一篇教程中,我们...

百度开发者中心
前天
24
0
Quartz的Misfire处理规则 错过任务执行时间的处理机制

调度(scheduleJob)或恢复调度(resumeTrigger,resumeJob)后不同的misfire对应的处理规则 CronTrigger withMisfireHandlingInstructionDoNothing ——不触发立即执行 ——等待下次Cron触发频率...

独钓渔
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部