Ecmascript 6

  • ECMAScript 6.0(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了。
  • Ecmascript 是 JavaScript 语言的标注规范
  • JavaScript 是 Ecmascript 规范的具体实现
    • 具体实现取决于各大浏览器厂商的支持进度
  • Ecmascript 6 也被称作 Ecmascript 2015
  • 各大浏览器厂商对于最新的 Ecmascript 6 标准支持可以参照:
  • 对于不支持 ES6 的环境,可以使用一些编译转码工具做转换处理再使用
    • 例如 babel

let 和 const

let:

  • let 类似于 var,用来声明变量
  • 通过 let 声明的变量不同于 var,只在 let 命令所在的代码块内有效(块级作用域)
  • let 声明的变量不存在变量提升
  • let不允许在相同作用域内,重复声明同一个变量

const:

  • const声明一个只读的常量。一旦声明,常量的值就不能改变
  • const 声明必须初始化
  • const的作用域与let命令相同:只在声明所在的块级作用域内有效
  • const命令声明的常量也是不提升,必须先声明后使用
  • const声明的常量,也与let一样不可重复声明

解构赋值

ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。

数组解构:

let [a, b, c] = [123, 456, 789]
console.log(a, b, c) 123 456 789

对象解构:

let { name, age } = { name: 'Jack', age: 18 }
console.log(name, age) Jack 18

函数参数解构:

function f (p1, { p2 = 'aa', p3 = 'bb' }) {
console.log(p1, p2, p3)
} f('p1', { p2: 'p2' }) p1 p2 bb

字符串解构:

let [a, b, c, d, e] = 'hello'
console.log(a, b, c, d, e) h e l l o

字符串

实用方法:

includes(String):返回布尔值,表示是否找到了参数字符串。
startsWith(String):返回布尔值,表示参数字符串是否在源字符串的头部。
endsWith(String):返回布尔值,表示参数字符串是否在源字符串的尾部。
repeat(Number):repeat方法需要指定一个数值,然后返回一个新字符串,表示将原字符串重复Number次。

模板字符串:

let basket = { count: 5, onSale: true }
$('#result').append(`
There are <b>${basket.count}</b> items
in your basket, <em>${basket.onSale}</em>
are on sale!
`);
  • 模板字符串(template string)是增强版的字符串,用反引号(`)标识
  • 它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量
  • 如果使用模板字符串表示多行字符串,所有的空格和缩进都会被保留在输出之中
  • 模板字符串中嵌入变量,需要将变量名写在 ${} 之中
    • 大括号内部可以放入任意的JavaScript表达式,可以进行运算,以及引用对象属性
    • 大括号内部还可以调用函数

数组

方法:

Array.from() 将一个伪数组转为一个真正的数组
实际应用中,常见的类似数组的对象是DOM操作返回的NodeList集合,
以及函数内部的arguments对象。Array.from都可以将它们转为真正的数组。
Array.of() Array.of方法用于将一组值,转换为数组
这个方法的主要目的,是弥补数组构造函数Array()的不足。
因为参数个数的不同,会导致Array()的行为有差异。
find() 查找数组中某个元素
findIndex() 查找数组中某个元素的索引下标
includes() 返回一个布尔值,表示某个数组是否包含给定的值,与字符串的includes方法类似

实例方法:

ES6提供三个新的方法——entries(),keys()和values()——用于遍历数组.

可以用 for...of 循环进行遍历,唯一的区别是 keys() 是对键名的遍历、

values() 是对键值的遍历,entries() 是对键值对的遍历。

entries()
keys()
values()

函数的扩展

函数参数的默认值:

ES6 允许为函数的参数设置默认值,即直接写在参数定义的后面。

function log(x, y = 'World') {
console.log(x, y);
} log('Hello') Hello World
log('Hello', 'China') Hello China
log('Hello', '') Hello
  • 通常情况下,定义了默认值的参数,应该是函数的尾参数

    • 因为这样比较容易看出来,到底省略了哪些参数
    • 如果非尾部的参数设置默认值,实际上这个参数是没法省略的。
  • 指定了默认值以后,函数的length属性,将返回没有指定默认值的参数个数
    • 也就是说,指定了默认值后,length属性将失真

rest 参数:

function add(...values) {
let sum = 0; for (var val of values) {
sum += val;
} return sum;
} add(2, 5, 3) 10

扩展运算符:

console.log(...[1, 2, 3]) 1 2 3
console.log(1, ...[2, 3, 4], 5) 1 2 3 4 5

箭头函数:

var f = v => v

上面的箭头函数等同于:

var f = function(v) {
return v
}
  • 箭头函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象
  • 箭头函数不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误
  • 箭头函数内部不可以使用arguments对象,该对象在函数体内不存在
    • 如果要用,可以用Rest参数代替

对象

属性的简洁表示法:

var foo = 'bar';
var baz = {foo};
baz {foo: "bar"} 等同于
var baz = {foo: foo} 除了属性简写,方法也可以简写:
var o = {
method() {
return "Hello!"
}
} 等同于 var o = {
method: function() {
return "Hello!"
}
}

es6简单小复习的更多相关文章

  1. koa2入门--01.ES6简单复习、koa2安装以及例子

    1.ES6简单复习 /*let 和 const: let用于定义一个块作用域的变量,const 定义一个常量 */ let a = 'test'; const b = 2; /*对象的属性和方法的简写 ...

  2. ES6简单语法

    ES6 简单语法: 变量声明 ES5 var 声明变量为全局变量 会变量提升 ES6 let 声明的变量为块级变量 且不能重复声明 不存在变量提升 # {}一个大括号为一个作用域 ES6 const ...

  3. php+jquery+ajax+json简单小例子

    直接贴代码: <html> <title>php+jquery+ajax+json简单小例子</title> <?php header("Conte ...

  4. ES5与ES6的小差异

    ES5与ES6的小差异 变量的定义 ES6与ES5的区别 ES5: <script> console.log(username); var username; var username = ...

  5. 基于C语言libvirt API简单小程序

    libvirt API简单小程序 1.程序代码如下 #include<stdio.h> #include<libvirt/libvirt.h> int getDomainInf ...

  6. C#利用事件与委托进行窗体间传值简单小例子

    本篇博客是利用C#委托与事件进行窗体间传值的简单小例子 委托与事件的详细解释大家可以参照张子阳的博客: http://www.tracefact.net/CSharp-Programming/Dele ...

  7. 小程序开发-7-访问api数据与ES6在小程序中的应用

    访问API数据与ES6在小程序中的应用 看待组件的两种观点 组件复用 代码分离-(特别重要) 不能在一个页面写所有的代码,代码分离具有很强的可读性.可维护性 Blink Api 介绍与测试API ur ...

  8. webpack -- 多页面简单小例

    有时单页面并不能满足我们的业务需求,就需要去构建多页面应用,以下为简单小例: entry:{ index:'./src/module/index/index.js', student:'./src/m ...

  9. props简单小栗子

    props简单小栗子 可以直接copy查看结果 <!DOCTYPE html> <html lang="en"> <head> <meta ...

随机推荐

  1. CCF_201512-1_数位之和

    水. #include<iostream> #include<cstdio> using namespace std; int main() { ; cin >> ...

  2. HDU_5094_dfs

    http://acm.hdu.edu.cn/showproblem.php?pid=5094 bfs,vis[x][y][z],z表示钥匙的状态,用二进制来表示,key[x][y]储存当前位置钥匙的二 ...

  3. 牛客练习赛52 C 烹饪(容斥+扩展欧几里得)

    来源:https://ac.nowcoder.com/acm/contest/1084/D 思路来源:https://www.cnblogs.com/Morning-Glory/p/11521114. ...

  4. 2018icpc南京网络赛-L Magical Girl Haze (分层图最短路)

    题意: 有向图,可以把k条路的长度变为0,求1到n的最短路 思路: 将图复制k份,一共k+1层图,对于每一条i→j,都连一条低层的i→高层的j,并且权值为0 即对每一对<i,j,w>,都加 ...

  5. (三)maven创建部署javaweb

    http://how2j.cn/k/idea/idea-maven-web/1356.html#nowhere 这个网站讲的很详细了,下载很慢的话按照他的提示配置阿里云即可,很快 另外可能会出现各种j ...

  6. 第2章 Java并行程序基础(二)

    2.3 volatile 与 Java 内存模型(JMM) volatile对于保证操作的原子性是由非常大的帮助的(可见性).但是需要注意的是,volatile并不能代替锁,它也无法保证一些复合操作的 ...

  7. Spring Cloud第十四篇 | Api网关Zuul

    ​ 本文是Spring Cloud专栏的第十四篇文章,了解前十三篇文章内容有助于更好的理解本文: Spring Cloud第一篇 | Spring Cloud前言及其常用组件介绍概览 Spring C ...

  8. 神奇的 SQL 之 WHERE 条件的提取与应用

    开心一刻 小明:为什么中国人结婚非要选一个好日子呢 ? 楼主:嗯 ? 那肯定啊,结完婚之后你还能有好日子吗 ? 小明:那结婚时所说的白头到老是真的吗 ? 楼主:这哪能是真的,你看现在,头发还没白就秃了 ...

  9. light oj 1214 - Large Division 大数除法

    1214 - Large Division Given two integers, a and b, you should check whether a is divisible by b or n ...

  10. 关于Java/Kotlin下载图片,图片打开不能显示问题探究

    图片下载其实是个很简单的功能,通过IO流从在线地址获取流,之后将流输出到文件即可完成下载功能,但是,最近我发现某个网站中的图片下载成功,但是打开却是无法打开,这让我迷惑,百度上根本就没有人说清楚 今天 ...