ES6新增

妖狐艹你老母 2023-07-13 08:29 12阅读 0赞

## 一. 关键字 ##

**let**  
声明变量关键字

1.  let声明的变量只在所处的块级作用域有效 \{\} 防止循环变量变成全局变量
2.  不存在变量提升 只能先声明再使用
3.  暂时性死区 let声明的变量会和当前的块级作用域绑定，不会受外界的影响

每次循环都会产生一个块级作用域，每个块级作用域中的变量都是不同的，函数执行时输出的是自己上一级作用域（循环时产生的块级作用域）下的i值

**const**  
声明常量

1.  具有块级作用域的特点
2.  声明常量时必须赋初始值
3.  常量赋值后，简单数据类型值（内存地址）不可更改 对于复杂数据类型来说，能能改里面的值，但是不能重新赋值

**let、const、var的区别**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjg3NTE2_size_16_color_FFFFFF_t_70]

## 二. 解构赋值 ##

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

**数组解构：**

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

**对象解构：**

// 对象解构允许我们使用变量的名字匹配对象的属性 匹配成功 将对象属性的值赋值给变量
    let person = { name: 'lisi', age: 30, sex: '男'};
    		let {  name, age, sex } = person;
    		console.log(name)
    		console.log(age)
    		console.log(sex)
    //第二种写法
    let { name: myName} = person;   //将'lisi'赋值给myName
    		console.log(myName)

## 三. 箭头函数 ##

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

const fn = () => { 
    	console.log(123)
     }
    fn();

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

const sum = (n1, n2) => n1 + n2;

在箭头函数中，如果形参只有一个 形参外侧的小括号也是可以省略的

const fn = v => { 
            	alert(v);
            }
            fn(20)

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

## 四. 剩余参数 ##

当实参个数大于形参时，可以将剩余实参放入一个数组中

**例子：** 求n个数的和（n不确定）

const sum = (...args) => { 
    		let total = 0;
    		args.forEach(item => total += item);
    		return total;
    		};

**剩余参数和解构配合使用**

let ary1 = ['张三' , '李四', '王五'];
    	let [s1, ...s2] = ary1;
    	console.log(s1);  // '张三'
    	console.log(s2);   //['李四', '王五']

## 五. ES6的内置对象扩展 ##

**array的扩展方法**

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

let ary = ["a", "b", "c"];
    	...ary // "a", "b", "c"
    	console.log(...ary)  // "a" "b" "c"

**应用：**  
*合并数组*

let ary1 = [1, 2, 3];
    	let ary2 = [4, 5, 6];
    	// ...ary1 // 1, 2, 3
    	// ...ary1 // 4, 5, 6
    	let ary3 = [...ary1, ...ary2];
    
    	// 合并数组的第二种方法
    	let ary1 = [1, 2, 3];
    	let ary2 = [4, 5, 6];
    	ary1.push(...ary2);

*将伪数组转换为真正的数组*

var oDivs = document.getElementsByTagName('div');
    	console.log(oDivs)
    	var ary = [...oDivs];

1.  构造函数方法：  
    Array.from(arrayLike) 将类数组或可遍历对象转换为真正的数组  
    Array.from(arrayLike, item => item \* 2) 还可以接收第二个参数，作用类似数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组
2.  实例方法：  
    ①.find()  
    用于找出第一个符合条件的数组成员，如果没有找到返回undefined

var ary = [{ 
    		id: 1,
    		name: '张三'
    	}, { 
    		id: 2,
    		name: '李四'
    	}];
    	let target = ary.find(item => item.id == 3);
    	console.log(target)

②.findIndex() 用于找出第一个符合条件的数组成员的位置，如果没有找到返回-1

let ary = [10, 20, 50];
    	let index = ary.findIndex(item => item > 15);
    	console.log(index)   // 1
    ③.includes()  表示某个数组是否包含给定的值，返回布尔值
    	let ary = ["a", "b", "c"];
    	let result = ary.includes('a')  //true
    	console.log(result)
    	result = ary.includes('e')      //false
    	console.log(result)

**string的扩展方法**

1.  **模板字符串**  
    ES6新增的创建字符串的方式，使用反引号定义

let str = `abc`

**特点：**  
①可以解析变量

let name = `张三`;
    	let sayHello = `Hello, 我的名字叫${ name}`;

②模板字符串可以换行

let result = { 
    	name: "zhangsan",
    	age: 20
    	};
    	let html = ` <div> <span>${ result.name}</span> <span>${ result.age}</span> </div> `;

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

const fn = () => { 
    		return '我是fn函数'
    	}
    	let html = `我是模板字符串 ${ fn()}`;

1.  实例方法：  
    satrtsWith()：参数字符串是否在原字符串的头部，返回布尔值  
    endsWith()：参数字符串是否在原字符串的尾部，返回布尔值

let str = 'Hello world!';
    	let r1 = str.startsWith('Hello');  //true
    	let r2 = str.endsWith('!');  //true

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

"x".repeat(5)   //"xxxxx"

## 六. set数据结构 ##

类似于数组，但是它的成员的值都是唯一的，没有重复的值

const s1 = new Set();
    const s2 = new Set(["a", "b"]);

s2.size 包含多少值（长度）  
**数组去重：**

const s3 = new Set(["a", "a", "b", "b"]);
        const ary = [...s3];

**实例方法：**  
add(value)：添加某个值，返回Set本身  
delete(value)：删除某个值，返回布尔值，表示是否删除成功  
has(value)：判断该值是否为Set成员，返回布尔值  
clear()：清空Set，没有返回值  
遍历：  
forEach

const s5 = new Set(['a', 'b', 'c']);
            s5.forEach(value => { 
                console.log(value)
            })

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjg3NTE2_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200311141912208.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjg3NTE2,size_16,color_FFFFFF,t_70