es6常用语法（一）

let 和 const 命令

let 命令

  • 只在let命令所在的代码有效

let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块即{}内有效。

{
  let a = 1;
  var b = 2;
}
console.log(a) // ReferenceError: a is not defined.
console.log(b) // 2
  • 不存在变量提升

var命令会发生“变量提升”现象，即变量可以在声明之前使用，值为undefined。这种现象多多少少是有些奇怪的，按照一般的逻辑，变量应该在声明语句之后才可以使用。

// var 的情况
console.log(a); // 输出undefined
var a = 2;

// let 的情况
console.log(b); // 报错ReferenceError
let b = 2;
  • 暂时性死区

只要块级作用域内存在let命令，它所声明的变量就“绑定”这个区域，不再受外部的

var a = 123;
if (true) {
  a = 'abc'; // ReferenceError
  let a;
}
  • 不允许重复声明

let不允许在相同作用域内，重复声明同一个变量。

  • const 命令

const 声明一个只读的常量。一旦声明，常量的值就不能改变。const实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动。对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量。但对于复合类型的数据（主要是对象和数组），变量指向的内存地址，保存的只是一个指向实际数据的指针，const只能保证这个指针是固定的（即总是指向另一个固定的地址），至于它指向的数据结构是不是可变的，就完全不能控制了。因此，将一个对象声明为常量必须非常小心。

变量的解构赋值

  • 数组的解构赋值

数组中提取值，按照对应位置，对变量赋值

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

嵌套数组进行解构的例子

let [ , , x] = ["a", "b", "c"];
console.log(x) // c
let [head, ...end] = [1, 2, 3, 4];
console.log(head)  // 1
console.log(end) // [2,3,4]

解构赋值允许指定默认值。

let [x, y = 'b'] = ['a']; // x='a', y='b'
  • 对象解构赋值

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

let { a, b } = { a: 'aaa', b: 'bbb' };
console.log(a) // "aaa"
console.log(b) // "bbb"

实际上面的写法等于下面这个{ a, b }是 { a:a, b:b }的简写形式

let { a:a, b:b } = { a: 'aaa', b: 'bbb' };
console.log(a) // "aaa"
console.log(b) // "bbb"

对象的解构也可以指定默认值。

 var {a = 3} = {};
 console.log(a) // 3
 
 var {a, b = 2} = {x: 1};
 console.log(a) // 1
 console.log(b) // 2
  • 函数参数的解构赋值

函数的参数使用解构赋值是平时最常见的用法。用法类似数组和对象结构赋值，包括默认值，非常好用。

function test([x = 5, y]){
  return x + y;
}

test([1, 2]); // 3
test([, 2]); // 7

function test2({x = 0, y = 0} = {}) {
  return [x, y];
}

test2({x: 3, y: 8}); // [3, 8]
test2({x: 3}); // [3, 0]
test2({}); // [0, 0]
test2(); // [0, 0]

数组和对象扩展运算符

扩展运算符（spread）是三个点（...），将一个数组或对象转为用逗号分隔的参数序列。

  • 数组扩展运算符
  console.log(...[1, 2, 3])
  // 1 2 3
  console.log(1, ...[2, 3, 4], 5)
  // 1 2 3 4 5
  //用于函数参数
  function push(array, ...items) {
    array.push(...items);
  }
  function add(x, y) {
    return x + y;
  }
  const numbers = [4, 38];
  add(...numbers) // 42
  • 对象扩展运算符

关于属性简写

//属性简写
const a = 'a';
const b = {a};
console.log(b) // {foo: "bar"}
// 等同于
const b = {a: a};

//方法简写。
let c = {
 method() {
   return "Hello!";
 }
};
// 等同于
let c = {
 method: function() {
   return "test!";
 }
};

对象的扩展符用于从一个对象取值，相当于将目标对象自身的所有可遍历的

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
console.log(x) // 1
console.log(y) // 2
console.log(z) // { a: 3, b: 4 }

Symbol

ES6 引入了一种新的原始数据类型Symbol，表示独一无二的值。它是 JavaScript 语言的第七种数据类型

let s = Symbol();
typeof s
// "symbol"
let a = Symbol('foo');
let a = Symbol('bar');
console.log(Symbol('test') == Symbol('test')) //fase
a // Symbol(foo)
b // Symbol(bar)

a.toString() // "Symbol(foo)"
b.toString() // "Symbol(bar)"

作为属性名的 Symbol

let mySymbol = Symbol();

// 第一种写法
let a = {};
a[mySymbol] = 'Hello!';

// 第二种写法
let a = {
  [mySymbol]: 'Hello!'
};

// 第三种写法
let a = {};
Object.defineProperty(a, mySymbol, { value: 'Hello!' });

// 以上写法都得到同样结果
a[mySymbol] // "Hello!"

Set 和 Map 数据结构

  • Set

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

const s = new Set();

[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));

for (let i of s) {
  console.log(i);
}
// 2 3 5 4
//数组去重
const set = new Set([1, 2, 3, 4, 4]);
[...set]
// [1, 2, 3, 4]

Set 实例的属性和方法

  • Set.prototype.constructor：构造函数，默认就是Set函数。
  • Set.prototype.size：返回Set实例的成员总数。
  • Set.prototype.add(value)：添加某个值，返回 Set 结构本身。
  • Set.prototype.delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。
  • Set.prototype.has(value)：返回一个布尔值，表示该值是否为Set的成员。
  • Set.prototype.clear()：清除所有成员，没有返回值。
let a =new Set();
a.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

Set 遍历操作

  • Set.prototype.keys()：返回键名的遍历器
  • Set.prototype.values()：返回键值的遍历器
  • Set.prototype.entries()：返回键值对的遍历器
  • Set.prototype.forEach()：使用回调函数遍历每个成员
let set = new Set(['red', 'green', 'blue']);

for (let item of set.keys()) {
  console.log(item);
}
// red
// green
// blue

for (let item of set.values()) {
  console.log(item);
}
// red
// green
// blue

for (let item of set.entries()) {
  console.log(item);
}
// ["red", "red"]
// ["green", "green"]
// ["blue", "blue"]
  • Map

JavaScript 的对象（Object），本质上是键值对的集合（Hash 结构），但是传统上只能用字符串当作键。这给它的使用带来了很大的限制。

const m = new Map([['name','yzg'],['age',25]]);
const o = {p: 'Hello World'};

m.set(o, 'content')
m.get(o) // "content"

m.has(o) // true
m.delete(o) // true
m.has(o) // false
m.has('name')  // true
m.get('age') //25

Map 遍历操作

  • Map.prototype.keys()：返回键名的遍历器
  • Map.prototype.values()：返回键值的遍历器
  • Map.prototype.entries()：返回键值对的遍历器
  • Map.prototype.forEach()：使用回调函数遍历每个成员
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 213,864评论 6赞 494
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,175评论 3赞 387
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 159,401评论 0赞 349
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,170评论 1赞 286
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,276评论 6赞 385
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,364评论 1赞 292
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,401评论 3赞 412
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,179评论 0赞 269
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,604评论 1赞 306
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,902评论 2赞 328
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,070评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,751评论 4赞 337
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,380评论 3赞 319
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,077评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,312评论 1赞 267
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,924评论 2赞 365
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,957评论 2赞 351