ES6新特性 - 悦读

ES6

ES6是什么？

JavaScript的第六版，在ES5的基础上增加了许多特性：箭头函数、字符串插值、代理、生成器、结构赋值、块级作用域等等。

1. let与const

let允许创建块级作用域，相当于局部变量

{
  var a = 2;
  let b = 3;
  
}
console.log(a); //2 
console.log(b); //b is not defined

注意：var可以重复命名，let不可以重复命名

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

const a = 10;
      a = 20;    //运行报错：TypeError: Assignment to constant variable.
console.log(a)

注意： const一旦声明变量，就必须立即初始化

2. 变量的解构赋值

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

数组解构

//以前
var a = 1;
var b = 2;
var c = 3;
//ES6
var [a, b, c] = [1, 2, 3];

本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。下面是一些使用嵌套数组进行解构的例子。

let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3

let [ , , third] = ["foo", "bar", "baz"];
third // "baz"

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

let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]

let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []

注意 : 如果解构不成功，变量的值就等于undefined

对象解构

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

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

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

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

var { baz } = { foo: "aaa", bar: "bbb" };
baz // undefined

字符串解构

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

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

3. 模板字符串

用一对反引号（模板字符串）标识，它可以当普通字符串使用（‘普通字符串’），也可以用来定义多行字符串，在模板字符串中可以嵌入变量、js表达式或函数等。

//基本用法
let s1 = "张三" 
let s2 = 'hello'
//字符串和变量拼接
let s3 = `a ${s1}b ${s2} `; 

console.log(s1)
console.log(s2)
console.log(s3)

注意：变量、js表达式或函数需要写在 ${} 中。

4.箭头函数

ES6 中，箭头函数就是函数的一种简写形式，使用括号包裹参数，跟随一个 =>，紧接着是函数体

用 map 遍历数组

//以前
var arr = [100, 200, 300]
arr.map(function (item) {
    return item + 1
})

//ES6
const arr = [100, 200, 300]
arr.map(item => item + 1)

当函数只有一个参数，并且函数体中只有一行代码时，可以简写成上面的形式，参数有多个，函数体中超过一行这样写：
arr.map((item,index) => {
    console.log(index, item);
    return item + 1
})

5.模块化

就是把代码进行拆分，方便重复利用。类似java中的导包:要使用一一个包，必须先导包。而JS中没有包的概念，换来的是模块。
在ES6中每一个模块即是一个文件，在文件中定义的变量，函数，对象在外部是无法获取的。
模块功能主要由两个命令构成: ‘export’ 和import’。

1. 模块的定义与导出

在ES6中，我们使用export关键字来导出模块。在一个模块中，我们可以导出多个变量或函数，它们可以是任意的数据类型。下面是一个简单的例子：

// myModule.js  
export function hello() {  
  return "Hello, world!";  
}  
  
export const message = "This is a message from ES6 module.";

在上面的例子中，我们定义了一个名为myModule的模块，并导出了一个函数hello和一个常量message。

2.模块的导入与使用

在ES6中，我们使用import关键字来导入模块。我们可以导入一个模块中的特定导出项，也可以导入整个模块。以下是一个导入模块的例子：

// main.js  
import { hello } from './myModule.js';  
console.log(hello()); // 输出 "Hello, world!"

在上面的例子中，我们导入了myModule.js模块中的hello函数，并在main.js中使用了它。

3.模块默认导出与命名导出

ES6允许模块默认导出和命名导出两种方式。默认导出是指一个模块可以有一个特殊的导出项，它是该模块的默认导出。命名导出则允许一个模块导出多个项，每个项都有自己的名称。

默认导出的例子：

// myModule.js  
export default function hello() {  
  return "Hello, world!";  
}

在上面的例子中，hello函数是myModule.js的默认导出项。我们可以使用以下方式导入并使用它：

// main.js  
import hello from './myModule.js';  
console.log(hello()); // 输出 "Hello, world!"