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声明的变量只在所处的块级有效
javascript
<!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声明的变量不具备块级作用域特性
不存在变量提升
javascript
//不存在变量提升
console.log(a);
let a = 20;
暂时性死区
利用let声明变量会绑定这个块级作用域,不会受到外界的影响
java
var temp = 123;
if(true){
let temp;
temp = 'abc';
}
经典面试题
javascript
var arr = [];
for(var i = 0; i < 2; i++){
arr[i] = function(){
console.log(i);
}
}
arr[0]();
arr[1]();
关键是变量i是全局的,函数执行时候输出是全局作用域下的i的值
javascript
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
声明常量,常量就是(内存地址)不能变化的量
具有块级作用域
javascript
if(true){
const a = 10;
}
console.log(a); //a is not defined
声明的时候必须赋值
javascript
const PI; //Missing initializer in const declaration
常量赋值后,值不能被修改
javascript
const PI = 3.14;
PI = 100; //Assignment to constant variable
小结
- const声明的变量是一个常量(值不能被修改)
- 既然是常量就不能重新再赋值,如果是基本数据类型,不能更改值。如果是复杂数据类型,不能更改地址值。
- 声明const的时候必须要给定值
3.3 let、const和var的区别
var | let | const |
---|---|---|
函数级作用域 | 块级作用域 | 块级作用域 |
变量提升 | 不存在变量提升 | 不存在变量提升 |
值可以修改 | 值可以修改 | 值不可更改 |
4.解构赋值
ES6中允许从数组中提取值,按照对一个位置,对变量赋值,对象也可以实现解构
4.1 数组解构
javascript
<!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 对象解构
javascript
<!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} = person
console.log(myname);
console.log(myage);
console.log(sex);
</script>
</body>
</html>
小结
- 解构赋值就是把数据结构分解,然后给变量进行赋值
- 如果解构不成功,变量跟数值个数不匹配的时候,变量的值为undefined
- 数组解构用中括号包裹,对象解构用花括号包裹,多个变量之间用逗号分隔
- 利用解构赋值能够让我们方便的去取对昂中的属性和方法
5.箭头函数(⭐⭐⭐⭐⭐)
5.1 ES6中新增的定义函数的方式
javascript
() => {} //() 代表是函数 => 必须要的符号,指向哪一个代码块 {}表示函数体
javascript
const fn = () => {} //代表把一个函数赋值给了fn
5.2 大括号可省略
函数体内只有一行代码,且代码的执行结果就是返回值,可以省略大括号
javascript
//1.在箭头函数中,如果函数体内只有一句代码,
// 并且代码的执行结果就是函数的返回值,函数体大括号可以省略
// const sum = (x,y) => {
// return x + y;
// }
const sum = (x,y) => x + y;
5.2 形参括号可省略
如果形参只有一个,可以省略小括号
javascript
//2.在箭头函数中,如果形参只有一个,形参外侧的小括号也是可以省略不写
// const fn = (v) =>{
// console.log(v);
// }
const fn = v =>{
console.log(v);
}
fn('我爱中国');
5.3 箭头函数中没有this
箭头函数不绑定this关键字,箭头函数中的this,指向的是函数定义位置上下文的this
javascript
<!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,指向的是函数定义位置上下文的this
div.addEventListener('click',() => {
console.log(this); //这个时候是btn
});
}
</script>
</body>
</html>
javascript
<!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关键字将指向箭头函数定义位置中的this
function 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 面试题
javascript
var age = 100;
var obj = {
age: 20,
say: ()=>{
alert(this.age);
}
}
obj.say(); //100
箭头函数this指向是被声明的作用域里面,而对象没有作用域,所以箭头函数虽然在对象中被定义,但是this指向的是全局作用域。
6.剩余参数(⭐⭐⭐)
剩余参数语法允许我们将一个不定数量的参数表示为一个数组,不定参数定义方式,这种方式很方便的去声明不知道参数的情况下的一个函数。
6.1 语法
javascript
function 函数名 (first,...args){
}
6.2 剩余参数和解构
javascript
let students = ['zs','ls','ww'];
let [s1,...s2] = students;
console.log(s1); //sz
console.log(s2); //['ls','ww']
6.2 案例
javascript
<!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的扩展方法
扩展运算符(展开语法)
扩展运算符可以将数组或对象转换为用逗号分隔的参数序列
javascript
let arr = [1,2,3]
...arr
console.log(...arr); //等同于下面的写法
console.log(1,2,3);
扩展运算符可以应用于合并数组
javascript
//方法一
let arr1 = [1,2,3]
let arr2 = [3,4,5]
let arr1 = [...arr1,...arr2]
//方法二
arr1.push(..arr2);
将类数组或可遍历对象转换成为真正的数组
javascript
let oDivs = document.getElementByTagName('div');
oDivs = [...oDivs]
javascript
<!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()
将伪数组或可遍历对象转换成为真正的数组
javascript
//定义一个集合
let arrLike = {
'0':'a',
'1':'b',
'2':'c',
length: 3
}
//转成一个真数组
let arr2 = Array.from(arrLike); //['a','b','c']
方法还可以接受第二个参数,作用类似于数组的map方法,用原来对每个元素进行处理,将处理的值放入到返回的数组
javascript
//定义一个集合
let arrLike = {
'0':1,
'1':2,
'2':3,
length: 3
}
//转成一个真数组
let arr2 = Array.from(arrLike,item => item*2); //[2,4,6]
javascript
<!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
javascript
<!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
javascript
<!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
判断某个数组是否包含给定的值,返回布尔值
javascript
<!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); //true
result = arr.includes('d');
console.log(result);//false
</script>
</body>
</html>
7.2 String的扩展方法
7.2.1 字符串模板
ES6 新增的创建字符串的方式,使用反引号定义
javascript
let name = `张三`
模板字符串中可以解析变量
javascript
let name = '张三';
let sayHello = `hello,my name is ${name}`;
模板字符串可以换行
javascript
let result = {
name:'张三',
age:20,
sex:'男'
}
let html = `<div>
<span>${result.name>}</span>
<span>${result.age>}</span>
<span>${result.sex>}</span>
</div>`
在模板字符串中可以调用函数
javascript
const sayHello = function(){
return '厉害了我的国';
}
let grant = `${sayHello()}哈哈哈`
console.log(grant); //厉害了我的国哈哈哈
javascript
<!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() 表示值参数字符串是否在原字符串的尾部,返回布尔值
javascript
let str = 'Hello World';
str.startWith('Hello'); //true
str.endWith('World'); //true
str.endWith('d'); //true
str.endWith('x'); //false
javascript
<!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(次数);
javascript
console.log('*'.repeat(10));
8.Set数据结构
ES6中提供了一个新的数据解构set,它类似于数组,但是成员的值都是唯一的,没有重复的值。
Set本身是一个构造函数,用来生成Set数据结构
8.1 创建语法
javascript
const s = new Set();
set函数可以接受一个数组作为参数,用来初始化
javascript
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() :清除所有的成员,没有返回值
javascript
<!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'); //删除成功返回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>
</body>
</html>
8.3 遍历
Set结构的实例和数据一样,也拥有forEach方法,用于对每个成员执行某种操作,没有返回值
javascript
set.forEach(value => console.log(value));
javascript
<!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方法,用于对每个成员执行某种操作,没有返回值
javascript
set.forEach(value => console.log(value));
javascript
<!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>