ES6常用特性(一)

本文根据阮一峰老师《ECMAScript 6 入门》一书记录,只记录常用特性,适合快速学习

一、 Babel转码器

  1. 作用:
  2. 将ES6代码转换成ES5代码,从而方便从浏览器执行环境执行
  3. 安装配置
  4. npm install babel –save-dev
  5. 配置文件.babelrc
{
"presets": [
"es2015",
"react",
"stage-2"
],
"plugins": []
}

presets 字段指定转码规则

二、 let和const命令
1. let命令
1. 从一个java程序员的角度理解,let命令就和java程序中的变量定义一样,只在let命令所在的代码块内起作用(块级作用域),并且不再像var 定义变量时,可以重复定义。
2. 不存在变量提升,所以变量一定要在声明后使用。
示例代码:

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

// let 的情况
console.log(bar); // 报错ReferenceError
let bar = 2;
  1. 暂时性假死:只要块级作用域内存在let命令,它所声明的变量就“绑定”(binding)这个区域,不再受外部的影响。
  2. ES6可以在块级作用域内,定义函数;在块级作用域内定义的函数不能在作用域外引用
  3. const命令
  4. 用来定义常量,常量值不可修改,即使重新赋值也不起作用。
  5. 如果该常量是对象,则该常量指向对象的地址,对象中的内容时可以改变的;如果不想对象内容改变可以用Object.freeze({});
  6. const命令也存在暂时性假死现象

三 、 变量的解构赋值
1. 解释:ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring);
2. 示例:

let [a, b, c] = [1, 2, 3];
a //1
b //2
c //3
  1. 只要某种数据结构具有 Iterator 接口,都可以采用数组形式的解构赋值
  2. 解构赋值允许指定默认值
let [x, y = 'b'] = ['a']; // x='a', y='b'
let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'
  1. 字符串的解构赋值
let [a,b,c,d,e] = "hello"
a //h
b //e

  1. 对象的解构赋值
var { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"

let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj;
f // 'hello'
l // 'world'

对象的解构赋值,是根据对象的属性,将值赋给变量。
7. 函数参数的解构赋值

function add([x, y]){
return x + y;
}

add([1, 2]); // 3

8.解构赋值使用场景
1. 交换变量的值

let x = 1;
let y = 2;

[x, y] = [y, x];
  1. 从函数返回多个值
  2. 函数参数的定义
  3. 提取JSON数据
let jsonData = {
id: 42,
status: "OK",
data: [867, 5309]
};

let { id, status, data: number } = jsonData;

console.log(id, status, number);
// 42, "OK", [867, 5309]

 

创作不易,转载请注明文章来源为www.full-satcker.com:邢桂帅 » ES6常用特性(一)

赞 (0)
分享到:更多 ()

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址