ES6笔记

ES6

ECMAScript

ECMA组织：脚本语言标准化国际组织

1.什么是ES6

ES的全称是：ECMAScript，它是ECMA国际标准化组织制定的一项脚本语言的标准规范

2015年6月：ES2015

2016年6月：ES2016

2017年6月：ES2017

2018年6月：ES2018

…

2.为什么要学习ES6

每一次标准的诞生都意味着语言的完善，功能的加强。javaScript语言本身也有一些不令人满意的地方。

变量提升特性增加了程序运行时的不可预测性。
语法过于松散，实现相同的功能，不同的人可能会写出不同的代码

3.ES6 新增的语法

3.1 let

es6中新增的用于声明变量的关键字.

let声明的变量只在所处的块级有效

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>11let</title>
</head>
<body><script>//ES6中：如果一个变量用let声明，那么它只在所处的块级中有效if(true){let a = 10;}function fn(){}for(let i = 0; i <= 10; i++){}console.log(i);console.log(a);</script>
</body>
</html>

**注意：**使用let关键字声明的变量才具有块级作用域，使用var声明的变量不具备块级作用域特性

不存在变量提升

//不存在变量提升
console.log(a);
let a = 20;

暂时性死区

利用let声明变量会绑定这个块级作用域，不会受到外界的影响

var temp = 123;
if(true){let temp;temp = 'abc';
}

经典面试题

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

在这里插入图片描述

关键是变量i是全局的，函数执行时候输出是全局作用域下的i的值

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

! 在这里插入图片描述

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

小结

let关键字就是用来声明变量的
使用let关键字声明的变量具有块级作用域
在一个大括号中使用let关键字声明的变量才具有块级作用域，var关键字声明的变量不具备块级作用域
防止循环变量变成全局变量，可以使用let声明变量
使用let官架子声明的变量没有变量提升
使用let关键字声明的变量具有暂时死区特性

3.2 const

声明常量，常量就是（内存地址）不能变化的量

具有块级作用域

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

声明的时候必须赋值

const PI;  //Missing initializer in const declaration

常量赋值后，值不能被修改

const PI = 3.14;
PI = 100; //Assignment to constant variable

小结

const声明的变量是一个常量（值不能被修改）
既然是常量就不能重新再赋值，如果是基本数据类型，不能更改值。如果是复杂数据类型，不能更改地址值。
声明const的时候必须要给定值

3.3 let、const和var的区别

var	let	const
函数级作用域	块级作用域	块级作用域
变量提升	不存在变量提升	不存在变量提升
值可以修改	值可以修改	值不可更改

4.解构赋值

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

4.1 数组解构

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>14数组解构</title>
</head>
<body><script>let [a,b,c,d] = [1,2,3];console.log(a);console.log(b);console.log(c);console.log(d); //undefined  //如果解构不成功，变量的值就是undefined</script>
</body>
</html>

4.2 对象解构

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>15.对象解构</title>
</head>
<body><script>let person = {name:'张三',age:20,gender:'男'}//对象解构 - 这种写法要求解构出来的变量名必须和属性名一致let {name,age,gender} = person;console.log(name);console.log(age);console.log(gender);//对象解构 - 可以解构出来的变量名和属性名不一样 (myname,myage,sex都属于别名)let {name:myname,age:myage,gender:sex} = personconsole.log(myname);console.log(myage);console.log(sex);</script>
</body>
</html>

小结

解构赋值就是把数据结构分解，然后给变量进行赋值
如果解构不成功，变量跟数值个数不匹配的时候，变量的值为undefined
数组解构用中括号包裹，对象解构用花括号包裹，多个变量之间用逗号分隔
利用解构赋值能够让我们方便的去取对昂中的属性和方法

5.箭头函数(⭐⭐⭐⭐⭐)

5.1 ES6中新增的定义函数的方式

() => {}  //() 代表是函数    => 必须要的符号，指向哪一个代码块    {}表示函数体

const fn = () => {}  //代表把一个函数赋值给了fn

5.2 大括号可省略

函数体内只有一行代码，且代码的执行结果就是返回值，可以省略大括号

//1.在箭头函数中，如果函数体内只有一句代码，
//     并且代码的执行结果就是函数的返回值，函数体大括号可以省略
// const sum = (x,y) => {
//     return x + y;
// }
const sum = (x,y) =>  x + y;

5.2 形参括号可省略

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

//2.在箭头函数中，如果形参只有一个，形参外侧的小括号也是可以省略不写
// const fn = (v) =>{
//     console.log(v);
// }
const fn = v =>{console.log(v);
}
fn('我爱中国');

5.3 箭头函数中没有this

箭头函数不绑定this关键字，箭头函数中的this，指向的是函数定义位置上下文的this

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>02箭头函数中的this</title>
</head>
<body><button>按钮1</button><div>哈哈</div><script>var btn = document.querySelector('button');var div = document.querySelector('div');btn.onclick = function(){console.log(this);// div.addEventListener('click',function(){//     console.log(this); //这个时候是div// });//箭头函数不绑定this关键字，箭头函数中的this，指向的是函数定义位置上下文的thisdiv.addEventListener('click',() => {console.log(this); //这个时候是btn});}</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>01.箭头函数</title>
</head>
<body><script>//箭头函数：用来简化函数定义语法的// const fn = () => {// }// fn();//1.在箭头函数中，如果函数体内只有一句代码，//     并且代码的执行结果就是函数的返回值，函数体大括号可以省略// const sum = (x,y) => {//     return x + y;// }const sum = (x,y) =>  x + y;const result = sum(10,20);console.log(result);//2.在箭头函数中，如果形参只有一个，形参外侧的小括号也是可以省略不写// const fn = (v) =>{//     console.log(v);// }const fn = v =>{console.log(v);}fn('我爱中国');//3. 箭头函数不绑定this。箭头函数没有自己的this关键字，如果在箭头哈桑怒中使用this关键字，//   this关键字将指向箭头函数定义位置中的thisfunction fn2(){console.log(this);  //window// return function(){//     console.log('返回的:' + this);// }return () => {console.log(this);}}const obj = {name:'张三'}var resFn = fn2().call(obj);resFn();</script>
</body>
</html>

5.4 小结

箭头函数不绑定this，箭头函数中的this指向的是它所定义的位置，可以简单的理解为，定义箭头哈桑农户中的作用域的this指向谁，他就指向谁
箭头函数的有点在于解决了this执行环境中所造成的一些问题。比如：解决了匿名函数this指向的问题（匿名函数的执行环境具有全局性），包括setTimeout和setInterval使用this造成的问题。

5.5 面试题

var age = 100;
var obj = {age: 20,say: ()=>{alert(this.age);}
}obj.say(); //100

箭头函数this指向是被声明的作用域里面，而对象没有作用域，所以箭头函数虽然在对象中被定义，但是this指向的是全局作用域。

6.剩余参数（⭐⭐⭐）

剩余参数语法允许我们将一个不定数量的参数表示为一个数组，不定参数定义方式，这种方式很方便的去声明不知道参数的情况下的一个函数。

6.1 语法

function 函数名 (first,...args){}

6.2 剩余参数和解构

let students = ['zs','ls','ww'];
let [s1,...s2] = students;console.log(s1); //sz
console.log(s2); //['ls','ww']

6.2 案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>04剩余参数</title>
</head>
<body><script>const sum = (...args) => {let total = 0;//args.forEach(function(value){});args.forEach(value => {total += value;});return total;}console.log(sum(10,20));console.log(sum(10,20,30));console.log(sum(10,20,30,40,50,60));let arr1 = ['张三','李四','王五','赵六'];let [s1,...s2] = arr1;console.log(s1);console.log(s2);</script>
</body>
</html>

7.ES6的内置对象扩展

7.1 Array的扩展方法

扩展运算符（展开语法）

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

let arr = [1,2,3]
...arr
console.log(...arr); //等同于下面的写法
console.log(1,2,3);

扩展运算符可以应用于合并数组

//方法一
let arr1 = [1,2,3]
let arr2 = [3,4,5]
let arr1 = [...arr1,...arr2]//方法二
arr1.push(..arr2);

将类数组或可遍历对象转换成为真正的数组

let oDivs = document.getElementByTagName('div');
oDivs = [...oDivs]

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>05数组扩展运算符</title>
</head>
<body><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><script>//1.扩展运算符可以将数组拆分成以逗号分隔的参数序列let arr = ['a','b','c'];// ...arr;  'a','b','c'console.log(...arr); //等同于下面的写法console.log('a','b','c');//2.扩展运算符应用于数组的合并let arr1 = [1,2,3];let arr2 = [3,4,5];let arr3 = [...arr1,...arr2];console.log(arr3);//第二种合并的方式arr1.push(...arr2);console.log(arr1);//3.利用扩展运算符将伪数组转换成真正的数组var oDivs = document.getElementsByTagName('div');console.log(oDivs);//转换成一个真数组var arr4 = [...oDivs]arr4.push('a');console.log(arr4);</script>
</body>
</html>

7.1.2 构造方法

Array.from()

将伪数组或可遍历对象转换成为真正的数组

//定义一个集合
let arrLike = {'0':'a','1':'b','2':'c',length: 3
}//转成一个真数组
let arr2 = Array.from(arrLike); //['a','b','c']

方法还可以接受第二个参数，作用类似于数组的map方法，用原来对每个元素进行处理，将处理的值放入到返回的数组

//定义一个集合
let arrLike = {'0':1,'1':2,'2':3,length: 3
}//转成一个真数组
let arr2 = Array.from(arrLike,item => item*2); //[2,4,6]

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>06Array.from方法</title>
</head>
<body><script>// var arrayLike = {//     '0':'a',//     '1':'b',//     '2':'c',//     length: 3// }// //将伪数组或可遍历对象转换成为真正的数组// var arr = Array.from(arrayLike);// console.log(arr); //['a', 'b', 'c']var arrLike = {'0':1,'1':2,'2':3,'length':3}//var arr = Array.from(arrLike,(item) => {return item*2});var arr = Array.from(arrLike,item => item*2);console.log(arr);</script>
</body>
</html>

7.1.3 实例方法find

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>实例方法find</title>
</head>
<body><script>let arr = [{id:1,name:'张三'},{id:2,name:'李四'}];//找数组里面符合条件的值，当数组中元素id等于2就查找出来//只会匹配一个//let target = arr.find((item,index) => { return item.id = 2;});let target = arr.find((item,index) => item.id = 2);console.log(target);</script>
</body>
</html>

7.1.4 实例方法findIndex

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>实例方法findIndex</title>
</head>
<body><script>// var arr = [//     {//         id:1,//         name:'张三'//     },//     {//         id:2,//         name:'李四'//     }// ]let arr = [10,20,30,50]let index = arr.findIndex((item) => {return item > 20;});//let index = arr.findIndex(item => item > 20);console.log(index);</script>
</body>
</html>

7.1.4 实例方法Includes

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>实例方法Includes</title>
</head>
<body><script>let arr = ['a','b','c','e'];let result = arr.includes('a'); console.log(result); //trueresult = arr.includes('d');console.log(result);//false</script>
</body>
</html>

7.2 String的扩展方法

7.2.1 字符串模板

ES6 新增的创建字符串的方式，使用反引号定义

let name = `张三`

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

let name = '张三';
let sayHello = `hello,my name is ${name}`;

模板字符串可以换行

let result = {name:'张三',age:20,sex:'男'
}
let html = `<div><span>${result.name>}</span><span>${result.age>}</span><span>${result.sex>}</span>
</div>`

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

const sayHello = function(){return '厉害了我的国';
}let grant = `${sayHello()}哈哈哈`console.log(grant); //厉害了我的国哈哈哈

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>10.字符串模板</title>
</head>
<body><script>let name = '张三';let sayHello = `hello,my name is ${name}`;console.log(sayHello);let result = {name:'张三',age:20}let html = `<div><span>姓名：${result.name}</span><span>年龄：${result.age}</span></div>`;console.log(html);const fn = () => {return '厉害了我的国';}let html2 = `${fn()}哈哈哈`console.log(html2);</script>
</body>
</html>

7.2.2 startWith() 和 endWith()

startWith() 表示参数字符串是否在原字符串的头部，返回布尔值
endWith() 表示值参数字符串是否在原字符串的尾部，返回布尔值

let str = 'Hello World';
str.startWith('Hello'); //true
str.endWith('World'); //true
str.endWith('d'); //true
str.endWith('x'); //false

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>11startWith() 和 endWith()</title>
</head>
<body><script>let str = 'Hello ECMAScript 2024';let r1 = str.startsWith('Hello');   //区分大小写console.log(r1);let r2 = str.endsWith('4');console.log(r2)</script>
</body>
</html>

7.2.2 repeat()

字符串重复多少次

语法：字符串.repeat(次数);

console.log('*'.repeat(10));

8.Set数据结构

ES6中提供了一个新的数据解构set，它类似于数组，但是成员的值都是唯一的，没有重复的值。

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

8.1 创建语法

const s = new Set();

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

const set = new Set([1,2,3,4,4,5]);  //{1,2,3,4}

8.2 实例方法

add(value)：添加某个值到set，返回set结构本身
delete(value)：删除某个值，返回一个布尔值，表示删除是否成功
has(value)：返回一个布尔值，表示该值是否为Set的成员
clear() ：清除所有的成员，没有返回值

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>13.set</title>
</head>
<body><script>//1.创建一个空的set对象const s1 = new Set();console.log(s1);console.log(s1.size); //set的长度const s2 = new Set(['a','b','c']);console.log(s2);console.log(s2.size);//set中不能有重复的元素const s3 = new Set(['a','b','c','a']);console.log(s3);console.log(s3.size);const set = new Set();//往set中添加元素set.add('a');set.add('b').add('c').add('d').add('c');//set中删除元素const d1 = set.delete('d'); //删除成功返回trueconst d2 = set.delete('d'); //删除失败返回falseconsole.log(d1);console.log(d2);//判断一个值是否是set数据结构中的成员，使用has,有就返回true，没有就返回falseconst r1 = set.has('d')console.log(r1);//清空set数据结构中的值，clear方法set.clear();console.log(set);</script>
</body>
</html>

8.3 遍历

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

set.forEach(value => console.log(value));

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>14set结构的遍历</title>
</head>
<body><script>const set = new Set(['a','b','c','d']);//遍历set.forEach(value =>{console.log(value);});</script>
</body>
</html>

删除元素
const d1 = set.delete(‘d’); //删除成功返回true
const d2 = set.delete(‘d’); //删除失败返回false
console.log(d1);
console.log(d2);
//判断一个值是否是set数据结构中的成员，使用has,有就返回true，没有就返回false
const r1 = set.has(‘d’)
console.log(r1);

    //清空set数据结构中的值，clear方法set.clear();console.log(set);
</script>

````

8.3 遍历

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

set.forEach(value => console.log(value));

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>14set结构的遍历</title>
</head>
<body><script>const set = new Set(['a','b','c','d']);//遍历set.forEach(value =>{console.log(value);});</script>
</body>
</html>