码迷,mamicode.com
首页 > 其他好文 > 详细

初步了解ECMAScript 6

时间:2019-02-22 12:08:49      阅读:180      评论:0      收藏:0      [点我收藏+]

标签:rabl   func   结构   命令   3.1   直接   clear   ati   sign   

一、let和const命令

ES6 规定暂时性死区和letconst语句不出现变量提升;如果区块中存在letconst命令,这个区块对这些命令声明的变量,从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量,就会报错;并且不可以在这个区域块外面调用声明的变量

1、let

{
  let a = 10;
  var b = 1;
}

a // ReferenceError: a is not defined.
b // 1

上面代码在代码块之中,分别用letvar声明了两个变量。然后在代码块之外调用这两个变量,结果let声明的变量报错,var声明的变量返回了正确的值。这表明,let声明的变量只在它所在的代码块有效。

for循环的计数器,就很合适使用let命令。

for (let i = 0; i < 10; i++) {
  // ...
}

console.log(i);
// ReferenceError: i is not defined

上面代码中,计数器i只在for循环体内有效,在循环体外引用就会报错。

2、const

const声明一个只读的常量。一旦声明,常量的值就不能改变。

const PI = 3.1415;
PI // 3.1415

PI = 3;
// TypeError: Assignment to constant variable.

 

上面代码表明改变常量的值会报错。

const声明的变量不得改变值,这意味着,const一旦声明变量,就必须立即初始化,不能留到以后赋值。

const foo;
// SyntaxError: Missing initializer in const declaration

 

上面代码表示,对于const来说,只声明不赋值,就会报错。

二、变量的解构赋值

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

1、数组的解构赋值

按照数组成员顺序进行解构

以前,为变量赋值,只能直接指定值。

let a = 1;
let b = 2;
let c = 3;

 

ES6 允许写成下面这样。

let [a, b, c] = [1, 2, 3];

 

上面代码表示,可以从数组中提取值,按照对应位置,对变量赋值。

注意事项:

(1)、等号左边比等号右边多

let [foo] = [];
let [bar, foo] = [1];
以上两种情况都属于解构不成功,foo的值都会等于undefined。

(2)、等号右边比等号左边多

let [x, y] = [1, 2, 3];
x // 1
y // 2

let [a, [b], d] = [1, [2, 3], 4];
a // 1
b // 2
d // 4

上面两个例子,都属于不完全解构,但是可以成功。

2、对象的解构赋值

对象按照属性名进行解构

解构不仅可以用于数组,还可以用于对象。

let { foo, bar } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"

 

对象的解构与数组有一个重要的不同。数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。

3、字符串的解构赋值

字符串也可以解构赋值。这是因为此时,字符串被转换成了一个类似数组的对象。

const [a, b, c, d, e] = ‘hello‘;
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"

 

类似数组的对象都有一个length属性,因此还可以对这个属性解构赋值。

let {length : len} = ‘hello‘;
len // 5

 

三、数组的扩展

1、Array.from():将类数组转换成真正的数组

Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括 ES6 新增的数据结构 Set 和 Map)

下面是一个类似数组的对象,Array.from将它转为真正的数组。

let arrayLike = {
    ‘0‘: ‘a‘,
    ‘1‘: ‘b‘,
    ‘2‘: ‘c‘,
    length: 3
};

// ES5的写法
var arr1 = [].slice.call(arrayLike); // [‘a‘, ‘b‘, ‘c‘]

// ES6的写法
let arr2 = Array.from(arrayLike); // [‘a‘, ‘b‘, ‘c‘]

值得提醒的是,扩展运算符(...)也可以将某些数据结构转为数组。

// arguments对象
function foo() {
  const args = [...arguments];
}

 

2、Array.of() :将一组值转换为数组

Array.of方法用于将一组值,转换为数组。

Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1

 

这个方法的主要目的,是弥补数组构造函数Array()的不足。因为参数个数的不同,会导致Array()的行为有差异。

Array() // []
Array(3) // [, , ,]
Array(3, 11, 8) // [3, 11, 8]

 

上面代码中,Array方法没有参数、一个参数、三个参数时,返回结果都不一样。只有当参数个数不少于 2 个时,Array()才会返回由参数组成的新数组。参数个数只有一个时,实际上是指定数组的长度。

Array.of基本上可以用来替代Array()new Array(),并且不存在由于参数不同而导致的重载。它的行为非常统一。

Array.of() // []
Array.of(undefined) // [undefined]
Array.of(1) // [1]
Array.of(1, 2) // [1, 2]

 

Array.of总是返回参数值组成的数组。如果没有参数,就返回一个空数组。

四、Set

ES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。

Set本身是一个构造函数,用来生成 Set 数据结构。

set必须传一个可以遍历的数据;

可以采用扩展运算符将set数据转成数组;

  • add(value):添加某个值,返回 Set 结构本身。

  • delete(value):删除某个值,返回一个布尔值,表示删除是否成功。

  • has(value):返回一个布尔值,表示该值是否为Set的成员。
  • clear():清除所有成员,没有返回值。
  • size():返回类数组长度

s.add(1).add(2).add(2);
// 注意2被加入了两次

s.size // 2

s.has(1) // true
s.has(2) // true
s.has(3) // false

s.delete(2);
s.has(2) // false

实现数组去重:

var ary = [12,1,2,2,1,12,2];
var c = new Set(ary);
console.log([...c]);//=>[12, 1, 2]

 五、函数扩展

函数的参数可以赋默认值
如果有实参,那么会将默认值覆盖
如果实参是undefined的话,不能改变形参的默认值;
function fn(x=100,y=100) {
console.log(x);
}
fn(undefined,200);

 

可以和解构赋值结合,给形参赋值;
function f({x,y=7}) {
console.log(x);
console.log(y);
}
f({x:100,y:200})
作用域
如果函数形参赋默认值,在函数初始化形参时,就会形成一个单独的作用域;初始化完成之后,作用域会消失;
var x = 1;
function fn(x=y,y=x) {
console.log(x);
console.log(y);
}
fn();

 六、箭头函数

1、箭头函数和普通函数的区别

(1)、形式上

1. 箭头函数没有function这个关键字;并且在形参和{}之间要有箭头;
2.如果形参只有一个,可以省略形参的小括号;
3.如果大括号只有一条语句时,可以省略{};
4.如果大括号中只有return一条语句时,可以把大括号和return都省略;
5. 如果return出一个对象时,需要在对象的大括号外面加上小括号;

(2)、执行上

1. 箭头函数中没有this;那么如果输出this,就会输出箭头函数定义时所在的作用域中的this;
2. 在箭头函数中,不能使用arguments;
3. 箭头函数不能作为构造函数;
4. 不可以使用yield命令,不能作为Generator函数;

 

初步了解ECMAScript 6

标签:rabl   func   结构   命令   3.1   直接   clear   ati   sign   

原文地址:https://www.cnblogs.com/qingtiao/p/10415421.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!