ES6面试题

• let
• const
• 变量的解构赋值
• • 数组的解构
  • 对象的解构
• 模板字符串
• 简化对象写法
• 箭头函数
• 函数参数默认值
• rest参数
• 扩展运算符
• • 扩展运算符的应用
• Symbol（一般用不到）
• Set
• Map

let

1：变量声明不能重复
2：块级作用域
3：不存在变量提升
4：不影响作用域链

const

1：用于声明常量，一定要赋初始值
2：一般用大写（潜规则）
3：常量的值不能修改
4：块级作用域
5：对于数组或对象的元素的修改，不算对常量的修改，不会报错

变量的解构赋值

数组的解构

const F3 = ['白素贞', '小青', '许仙'];
let [bai, qing, xu] = F3;
console.log(bai) // 白素贞
console.log(qing) // 小青
console.log(xu) // 许仙

对象的解构

const dong = {
    name: "东子",
    wife: "奶茶妹妹",
    age: 40,
    save: function () {
        console.log("捐东西")
    }
}
let {name,wife,age,save} = dong;
console.log(name,wife,age); // 东子 奶茶妹妹 40
console.log(save); // ƒ () { console.log("捐东西") }
save(); // 捐东西

模板字符串

1：内容中可以直接出现换行符
2：变量拼接

let age = 80;
let out = `我今年${age}岁了。`

简化对象写法

ES6里面允许在大括号里面，直接写入变量和函数，作为对象的属性和方法

let name = "兵长";
let kill = function (){
	console.log("我能砍巨人")
}

const liweier= {
	name,
	kill,
	fly () {
		console.log("我能飞")
	}
}
上面写法等价于
const liweier= {
	name: name,
	kill: kill,
	fly: function () {
		console.log("我能飞")
	}
}

箭头函数

let fn = (a,b) => {return a + b}

1：this 是静态的，始终指向函数声明时所在作用域下的 this 的值
2：不能作为构造函数实例化对象

let Fn = (name, age) => {
	this.name = name
	this.age = age
}
let fn = new Fn('小明', 29); // 报错
	// Uncaught TypeError: Fn is not a constructor
    // at <anonymous>:1:10

3：不能使用arguments变量

let fn = () => {console.log(arguments)}
fn(1,2) // 报错，找不到arguments
	// VM845:1 Uncaught ReferenceError: arguments is not defined
    // at fn (<anonymous>:1:29)
    //at <anonymous>:1:1

4：关于箭头函数的简写

1）：省略小括号，当形参只有一个的时候
let add = n => {
	return n + n
}
2)：省略花括号，当代码体只有一条语句的时候，此时，return 也必须省略，而且语句的执行结果就是函数的返回值
let pow = n => n * n;
console.log(pow(2)) // 4

实践一下吧：

需求：返回数组中的偶数
let arr = [1,2,3,4,5,6,6,7];
let result = arr.filter(item => item%2 === 0) // [2, 4, 6, 6]

函数参数默认值

1：形参初始值,具有默认值的参数一般放在最后

function add (a, b, c=10) {
	return a + b + c
}
let result  = add(1,2) // 13

2：与结构赋值结合

function connect({host="127.0.0.1", username}) {
	console.log(host, username)
}
connect({host: "192.168.1.1", username: "root"})

rest参数

ES6引入rest参数，用于获取函数的实参。用来代替arguments

// ES5的arguments
function data () {
	console.log(arguments)
}
data(1,2,3)
// ES6中的rest参数
function data (...args) {
	console.log(args) // [1,2,34]
}
data(1,2,34)
// rest 参数必须放到最后
function data (a,b,...args) {
	console.log(a) // 1
	console.log(b) // 2
	console.log(args) // [3,4,5]
}
data(1,2,3,4,5)

扩展运算符

扩展运算符能将 数组 转化为逗号分隔的参数序列

const tfboys = ['易烊千玺', '王源', '王俊凯'];
function data () {
	console.log(arguments)
}
data(...tfboys) // 相当于 data('易烊千玺', '王源', '王俊凯')

扩展运算符的应用

1：数组的合并

const arr1 = [1,2]
const arr2 = [3,4]
// ES5 写法
const newArr = arr1.concat(arr2)
// ES6 写法
const newArr = [...arr1, ...arr2]

2：数组的克隆（浅克隆）

var arr = [1,2,3];
var arrCopy = [...arr]; // [1, 2, 3]

3：将伪数组转为真正的数组

const divs = document.querySelectorAll('div');
const divAll = [...divs]
// Es6 数组去重
const arr = [1,1,2,3,3]
const result = [...new Set(arr)]; // [1,2,3]
或
const result = Array.from(new Set(arr)); // [1,2,3]

Symbol（一般用不到）

ES6引入了一种新的数据类型Symbol（JS的第7种数据类型，原来的6种有：undefined，null，number，string，boolean，object），表示独一无二的值，是一种类似于字符串的数据类型。
特点：
1：Symbol的值是唯一的，用来解决命名冲突的问题。
2：Symbol不能与其他数据进行运算。
3：Symbol定义的对象属性不能使用for…in循环遍历

Set

ES6提供的新的数据结构，类似于数组，但是里面的每个值都是唯一的。

let s = new Set([1,2,3])
// 元素个数
s.size // 3
// 新增元素
s.add(4) // Set(4) {1, 2, 3, 4}
// 删除元素
s.delete(3) // true
console.log(s) // Set(3) {1, 2, 4}
//检测
s.has(2) // true
// 清空
s.clear()

Set实践
let arr = [1,1,2,3,4,4,5,3]
let arr2 = [4,5,6,5,6]
1：数组去重
2：求交集
3：求并集
4：求差集

// 1: 去重
let arr = [1,1,2,3,4,4,5,3];
let result = [... new Set(arr)]
// 2：交集
let result = [...new Set(arr)].filter(item => new Set(arr2).has(item)); // [4,5]
// 3：并集
let result = [...new Set([...arr, ...arr2])];
// 4：差集(arr不含arr2的元素)
let diff = [...new Set(arr)].filter(item => !(new Set(arr2).has(item))); // [1, 2, 3]

Map

类似于对象，也是键值对的集合。但是“键”的范围不限于字符串，各种类型的值都可以作为键

// 声明
let m = new Map();
// 添加元素
m.set('name', '孙杨');
m.set('swim', function () {console.log("会游泳")})
let key = {
	des: "这是一个对象"
}
m.set(key, "对象也能作为键")
console.log(m)
// size
m.size // 3
// 删除
m.delete('name') // true
// 获取
m.get(key) // "对象也能作为键"
// 清空
m.clear()
// 遍历
for (let v of m) {console.log(v)}