ES6新增的语法

ES6新增的语法

ES6实际上是一个泛指，泛指 ES2015 及后续的版本

1，let

用于声明变量的关键字

• 1，let 声明的变量只在所处于的代码块内有效

if (true) {
  let a = 10
}
console.log(a) // a is not defined

• 2, let 不存在变量提升

console.log(a)  // a is not deined
let a = 10

• 3，let 声明的变量具有暂时性死区特性

var a = 10
if (true) { // 在块级作用域中有 let 关键字声明的变量，这个变量就和这个块级进行绑定
  console.log(a)
  let a = 20
}
// 报错 Cannot access 'a' before initialization

和let 有关的面试题

var arr = [];
for (var i = 0; i < 2; i++) {
  arr[i] = function () {
    console.log(i)
  }
}
arr[0]()  // 2
arr[1]()  // 2

image

将以上代码中的var i改为let

var arr = [];
for (let i = 0; i < 2; i++) {
  arr[i] = function () {
    console.log(i)
  }
}
arr[0]()  // 0
arr[1]()  // 1

image

2, const

声明的是常量，常量就是值(内存地址)，是不能改变的量

• 1, 具有块级作用域

if (true) {
  const a = 10
}
console.log(a) // a is not defined

• 2，声明常量时必须赋值

const a //  Missing initializer in const declaration

• 3, 常量赋值后，值不能修改

const a = 10
a = 20
console.log(a) // Assignment to constant variable.

const arr = [1, 2, 3, 4, 5, 6]
arr[0] = 10
arr[1] = 20
console.log(arr)
arr = ['x', 'y', 'z']
console.log(arr)

image

以上代码, 更改 arr[0]的值，并没有更改 arr 常量在内存中的存储地址， 而给 arr 重新赋值(arr = ['x', 'y', 'z'])却改变了常量在内存中的存储地址。

3, let、const、var区别

• 1，使用 var 声明的变量，作用域为该语句所在的函数内，且存在变量提升现象
• 2，使用 let 声明的变量，作用域为该语句所在的代码块重，不存在变量提升
• 3，使用 const 声明的常量，在后面出现的代码中不能再被修改

4，解构赋值

ES6 允许从数组中提取值，按照对应位置，对变量赋值。对象也可以实现解构

• 数组解构

let [a, b, c, d, e] = [1, 2, 3]
console.log(a, b, c, d, e)  // 1 2 3 undefined undefined

5, 对象解构

let obj = { name: 'Jerry', age: 18 };
let { name, age } = obj;
let { name: uname, age: uage } = obj  // uname uage属于别名
console.log(name, age)  // Jerry 18

6，箭头函数

箭头函数是用来简化函数定义语法的

// 语法
() => {}

通过我们会把箭头函数赋值给一个变量
const func = () => {}

函数体中只有一句代码的话，并且代码的执行结果就是返回值，我们可以省略大括号

// 传统的函数形式
function func(x, y) {
  return x + y
}

// 使用箭头函数的形式
const func = (x, y) => x + y

如果形参只有一个，可以省略小括号

// 传统函数形式
function func (v) {
  return v
}

// 箭头函数形式
const func = v => v

箭头函数不绑定 this，箭头函数中没有自己的 this，如果在箭头函数中使用this, this关键字将指向箭头函数定义位置中的 this

function fn() {
  console.log(this)
  return () => {  // 箭头函数 中的 this 指向的是箭头函数定义区域的 this， 此处箭头函数被定义在 fn 函数的内部，所以箭头函数中的 this 指向的就是 fn这个区域中的this
    console.log(this)
  }
}
const obj = {
  name: 'Jerry'
}
const func = fn.call(obj)
func()

image

箭头函数面试题：

var age = 100
const obj = {
  age: 18,
  say: () => {
    console.log(this.age)  // 此处打印出100， obj 不能产生作用域，所以箭头函数被定义在全局作用域下 
  }
};
obj.say()

7， 剩余参数

剩余参数允许我们将一个不确定数量的参数表示为一个数组

function func(name, ...args) {
  console.log(name) // 1
  console.log(args) // [2, 3, 4, 5, 6]
}
func(1, 2, 3, 4, 5, 6)

实例：

const sum = (...args) => {
  let total = 0;
  args.forEach(item => total += item)
  return total
}
console.log(sum(10, 20, 30, 40))  // 100

剩余参数配合解构使用：

let person = ['Jerry', 'Lise', 'Tom', 'xiaowang'];
let [p1, ...p2] = person
console.log(p1) // Jerry
console.log(p2) // ['Lise', 'Tom', 'xiaowang'];

8, 扩展运算符

扩展运算符可以将数组或者对象转为用逗号分隔的参数序列

const arr = [1, 2, 3, 4, 5]
console.log(...arr)  // 1 2 3 4 5

扩展运算应用场景：

可以应用于数组合并

const arr1 = [1, 2, 3]
const arr2 = [4, 5, 6]

// 方法1:
const arr3 = [...arr1, ...arr2]
console.log(arr3)  // [1, 2, 3, 4, 5, 6]

// 方法2:
arr1.push(...arr2)
console.log(arr1)  // [1, 2, 3, 4, 5, 6]

扩展运算符可以将 类数组 或可遍历对象转为真正的数组

const divs = document.getElementsByTagName('div');
console.log(divs)

image
以上就是 伪数组(类数组)，我们把他转为真正的数组：

const arr = [...divs]
console.log(arr)

image

8, ES6的内置对象扩展

Array的扩展方法

Array的扩展方法1：Array.from()

构造函数方法：Array.from(): 将 类数组 或可遍历的对象转为真正的数组

const obj = {
  "0": 100,
  '1': 200,
  '2': 300,
  length: 3
};
const arr = Array.from(obj);
console.log(arr) // [100, 200, 300]

Array.from()方法还可以接受第二个参数，作用类似于map方法，用来将每个元素进行处理，将处理后的值放入返回的数组：

const obj = {
  "0": 100,
  '1': 200,
  '2': 300,
  length: 3
};
const arr = Array.from(obj, item => item * 2);
console.log(arr)  // [200, 400, 600]

Array的扩展方法2：find()方法

用于找出第一个符合条件的数组成员，如果没有找到返回 undefined

let arr = [
  {
    id: 1,
    name: 'Jerry'
  },
  {
    id: 2,
    name: 'Lise'
  }
];
let res = arr.find((item, idx) => item.id === 1)
console.log(res)  // {id: 1, name: 'Jerry'}

Array的扩展方法3：findIndex()方法

用于找出第一个符合条件的数组成员的索引，如果没有找到返回 -1

示例1:
let arr = [
  {
    id: 1,
    name: 'Jerry'
  },
  {
    id: 2,
    name: 'Lise'
  }
];
let res = arr.findIndex((item, idx) => item.id === 1)
console.log(res)  // 0

// 示例2:
const arr = [10, 20, 30, 40, 50]
const index = arr.findIndex(item => item > 18)
console.log(index) // 1

Array的扩展方法4：includes()方法

表示某个数组是否包含给定的值，返回布尔值

let arr = ['x', 'y', 'z'];
console.log(arr.includes('x'))  // true
console.log(arr.includes('k'))  // false

String的扩展方法

String的扩展方法1：模板字符串(``)

let name = `Jerry`
console.log(name) // Jerry

模板字符串中可以解析变量

const name = 'Jerry'
const age = 18
const Hi = `我是 ${name}, 
今年 ${age}`
console.log(Hi) // 模板字符串中的内容可以换行

image

模板字符串中可以调用函数

const func = function () {
  return '函数返回内容'
}
const res = `${func()}，哈哈哈～`
console.log(res)   // 函数返回内容，哈哈哈～

String的扩展方法2：startsWith()、endsWith()

• startsWith(): 表示参数字符串是否在原字符串中的头部，返回布尔值
• endsWith(): 表示参数字符串是否在原字符串中的尾部，返回布尔值

const str = 'Hello'
console.log(str.startsWith('H'))  // true
console.log(str.startsWith('e'))  // false
console.log(str.endsWith('e'))  // false
console.log(str.endsWith('o')) // true

String的扩展方法3：repeat()

repeat()方法表示将原字符串重复 n 次，返回一个新字符串

const name = 'Jerry'
console.log(name.repeat(3)) // JerryJerryJerry

9, Set

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

Set本身是一个构造函数，用来生成 Set数据结构

const s = new Set()

Set函数可以接受数组作为参数，用来初始化

const s = new Set([1, 2, 3, 4, 5, 6, 6, 6])
console.log(s.size)
console.log(s)

image

Set 应用场景： 数组去重

const arr = new Set(['a', 'a', 'b', 'b'])
console.log([...arr])  // ['a', 'b']

Set实例的方法：

• 1，add(): 添加，返回 Set 结构本身
• 2，delete()：删除，返回布尔值，表示删除成功与否
• 3，has()：返回一个布尔值，表示该值是否为 Set 成员
• 4，clear()：清除所有成员，没有返回值

const s = new Set();
s.add(1).add(2).add(3)  // {1, 2, 3}
s.delete(2)  // {1, 3}
s.has(3)  // true
s.clear() // {}

Set的实例与数组一样，也拥有forEach 方法，用于对每个成员执行某种操作，没有返回值

s.forEach(value => console.log(value))

示例：

const s = new Set(['a', 'b', 'c']);
s.forEach(v => console.log(v)) // a b c