ES6新特性详解

let 声明变量与var区别

1.作用域

var 声明的变量往往会越域，而let 声明的变量有严格局部作用域:

{ 
var a = 1; 
let b = 2; 
}
console.log(a); // 1 
console.log(b); // ReferenceError: b is not defined
1
2
3
4
5
6

2.声明次数

var 可以声明多次，let 只能声明一次:

var m = 1 
var m = 2 
let n = 3 
// let n = 4 
console.log(m) // 2 
console.log(n) // Identifier 'n' has already been declared
1
2
3
4
5
6

const声明常量(只读变量)

// 1. 声明之后不允许改变 
// 2. 一但声明必须初始化，否则会报错 
const a = 1; 
a = 3; //Uncaught TypeError: Assignment to constant variable.
1
2
3
4

解构表达式

1.数组解构

let arr = [1,2,3]; //以前我们想获取其中的值，只能通过角标。ES6 可以这样： 
const [x,y,z] = arr;// x，y，z 将与 arr 中的每个位置对应来取值 
// 然后打印 
console.log(x,y,z);
1
2
3
4

2.对象解构

const person = { 
name: "jack", 
age: 21, 
language: ['java', 'js', 'css'] }// 解构表达式获取值，将 person 里面每一个属性和左边对应赋值 
const { name, age, language } = person; // 等价于下面 
// const name = person.name; 
// const age = person.age; 
// const language = person.language; 
// 可以分别打印 
console.log(name); 
console.log(age); 
console.log(language); 
//扩展：如果想要将 name 的值赋值给其他变量，可以如下,nn 是新的变量名 
const { name: nn, age, language } = person; 
console.log(nn); 
console.log(age); 
console.log(language);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

字符串模板

模板字符串相当于加强版的字符串，用反引号 `,除了作为普通字符串，还可以用来定义多行 字符串，还可以在字符串中加入变量和表达式

// 1、多行字符串 
let ss = `

hello world 
 ` 
console.log(ss)
1
2
3
4
5

// 2、字符串插入变量和表达式。变量名写在 ${} 中，${} 中可以放 入 JavaScript 表达式。 
let name = "张三"; 
let age = 18; 
let info = `我是${name}，今年${age}了`; 
console.log(info)
1
2
3
4
5

// 3、字符串中调用函数 
function fun() { return "这是一个函数" }
let sss = `O(∩_∩)O 哈哈~，${fun()}`; 
console.log(sss); // O(∩_∩)O 哈哈~，这是一个函数
1
2
3
4

函数

参数默认值

//直接给参数写上默认值，没传就会自动使用默认值
function add2(a , b = 1) 
{ 
return a + b; 
}
// 传一个参数 
console.log(add2(10));
1
2
3
4
5
6
7

不定参数

不定参数用来表示不确定参数个数，形如，…变量名，由…加上一个具名参数标识符组成。 具名参数只能放在参数列表的最后，并且有且只有一个不定参数

function fun(...values) 
{ 
console.log(values.length) 
}
fun(1, 2) //2 
fun(1, 2, 3, 4) //4
1
2
3
4
5
6

箭头函数

• 一个参数时：

//以前声明一个方法 
// var print = function (obj) { 
// console.log(obj); 
// } 
// 可以简写为：
 var print = obj => console.log(obj); 
 // 测试调用 print(100);
1
2
3
4
5
6
7

• 多个参数：

// 两个参数的情况：
var sum = function (a, b) { return a + b; }
// 简写为：
//当只有一行语句，并且需要返回结果时，可以省略 {} , 结果会自动返回。
var sum2 = (a, b) => a + b;
//测试调用
console.log(sum2(10, 10));//20
1
2
3
4
5
6
7

// 代码不止一行，可以用`{}`括起来
var sum3 = (a, b) => { c = a + b; return c; };
//测试调用 
console.log(sum3(10, 20));//30
1
2
3
4

举例：

var hello2 = ({ name }) => { console.log("hello," + name) }; 
hello2(person);
1
2

上述是解构+箭头函数的应用。hello2用箭头函数定义，参数为结构一个对象的name属性。调用hello2函数，参数为person时，会输出person的name属性值。

对象特性

1.声明对象简写

const age = 23 
const name = "张三"
// 传统 
const person1 = { age: age, name: name }
// ES6：属性名和属性值变量名一样，可以省略
const person2 = { age, name }
1
2
3
4
5
6

2.对象的函数属性简写

let person = 
{ name: "jack", 
// 以前： 
eat: function (food) { 
console.log(this.name + "在吃" + food); 
},
// 箭头函数版：这里拿不到 this 
eat2: food => console.log(person.name + "在吃" + food), 
// 简写版： 
eat3(food) { console.log(this.name + "在吃" + food); } }person.eat("apple");
1
2
3
4
5
6
7
8
9
10

3.对象拓展运算符

// 1、拷贝对象（深拷贝） 
let person1 = { name: "Amy", age: 15 } 
let someone = { ...person1 } 
console.log(someone) //{name: "Amy", age: 15}

// 2、合并对象 
let age = { age: 15 } 
let name = { name: "Amy" } 
let person2 = { ...age, ...name } //如果两个对象的字段名重复，后面对象字 段值会覆盖前面对象的字段值 
console.log(person2) //{age: 15, name: "Amy"}
1
2
3
4
5
6
7
8
9
10

4. map和reduce

数组中新增了 map 和 reduce 方法。

• map:
  接收一个数组，将原数组中的所有元素用这个函数处理后放入新数组返回。

let arr = ['1', '20', '-5', '3']; 
console.log(arr) 
arr = arr.map(s => parseInt(s)); 
console.log(arr)
1
2
3
4

• reduce:

语法: arr.reduce(callback,[initialValue])

reduce 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元 素，接受四个参数：初始值（或者上一次回调函数的返回值），当前元素值，当前索引，调 用 reduce 的数组。

callback （执行数组中每个值的函数，包含四个参数）
1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
2、currentValue （数组中当前被处理的元素）
3、index （当前元素在数组中的索引）
4、array （调用 reduce 的数组） initialValue （作为第一次调用 callback 的第一个参数。）

const arr = [1,20,-5,3]; 
//没有初始值： 
console.log(arr.reduce((a,b)=>a+b));//19 
console.log(arr.reduce((a,b)=>a*b));//-300

//指定初始值： 
console.log(arr.reduce((a,b)=>a+b,1));//20 
console.log(arr.reduce((a,b)=>a*b,0));//-0
1
2
3
4
5
6
7
8

可以看出，当没有指定初始值时，第一次执行callback函数时，第一个参数a是数组第一个元素，第二个参数b是数组第二个元素，然后依次执行callback函数。当指定了初始值时，第一次执行callback时，a就是指定的初始参数，b就是数组第一个元素。

应用场景:
map函数用于对数组中单个元素遍历进行处理时使用，reduce函数用于对数组中元素进行叠加交互处理时使用。

EXPORT

一切 JS 变量都可以导出，比如基本类型变量、函数、数组、 对象。

• 导出一个值时:

const util = { sum(a,b){ return a + b; } }
export {util};
1
2

或者

export  const util = { sum(a,b){ return a + b; } }
1

• 导出多个值时:

var name = "jack" 
var age = 21 
export {name,age}
1
2
3

• 省略名称:
  上面的导出代码中，都明确指定了导出的变量名，这样其它人在导入使用时就必须准确写出 变量名，否则就会出错。 因此 js 提供了default关键字，可以对导出的变量名进行省略

// 无需声明对象的名字 
export default { sum(a,b){ return a + b; } }
1
2

这样，当使用者导入时，可以任意起名字

IMPORT

使用export命令定义了模块的对外接口以后，其他 JS 文件就可以通过import命令加载这 个模块。

import util from 'hello.js' 
// 调用 util 中的属性 
util.sum(1,2)
1
2
3

import {name, age} from 'user.js'
 console.log(name + " , 今年"+ age +"岁了")
1
2