ES6新增的语法

news2024/11/17 15:31:38

ES6实际上是一个泛指，泛指 ES2015 及后续的版本
1，let用于声明变量的关键字
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)
}
}
arr0 // 2
arr1 // 2
在这里插入图片描述

将以上代码中的var i改为let
var arr = [];
for (let i = 0; i < 2; i++) {
arr[i] = function () {
console.log(i)
}
}
arr0 // 0
arr1 // 1

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)

在这里插入图片描述

以上代码, 更改 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()

在这里插入图片描述

箭头函数面试题：
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)
在这里插入图片描述

以上就是伪数组(类数组)，我们把他转为真正的数组：
arduino复制代码const arr = […divs]
console.log(arr)
在这里插入图片描述

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) // 模板字符串中的内容可以换行

模板字符串中可以调用函数
j 在这里插入图片描述
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)
在这里插入图片描述