ES6语法
ES6的相关概念
ECMAScript 2016,就是一个语法的规范,想比之前,更加的灵活,更加的方便
ES6新增的语法
let关键字
作用:用来声明变量的
语法:
let num = 1;
特点:
- 具有块级作用域
- 不会进行变量的提升
- 具有暂时性死区
var num = 10;
if(true){
let num = 20;
console.log(num) //20
}
//如果把两者调换一下顺序的话
if(true){
console.log(num) //报错
let num = 20;
}
const 关键字
作用:用来声明常量的;常量就是一个不可变化的值;
语法:
const num = 20;
特点:
- 具有块级作用域
- 不会进行变量的提升
- 初始化必须要赋值
- 不能去更改const所定义的值
- 简单数据类型,不能去修改值
- 复杂数据类型,不能修改地址值
var、let、const区别
- var 不具备块级作用域特点,只具备函数级别的作用域的特点,可以去修改值,存在变量的提升
- let 具备块级作用域的特点,不存在变量的提升,可以去修改值
- const 具备块级作用域的特点,不存在变量的提升,不可以去修改值
解构赋值
意思:分解数据结构,然后给变量进行赋值
数组
let arr = [2,3,4];
//进行解构
let [a,b,c] = arr; //我们定义了三个变量,每个变量对应数组里面相应的值
//a = 2;b = 3; c = 4;
对象
let person = {name: '三万',sex:'未知'};
//进行解构
let {name,sex} = person;//大括号里面应该写对象对应的属性名
// name = 三万 sex = 未知
//允许去设置别名
let {name: myName,sex: mySex} = person; //给我们name属性跟sex属性设置了一个别名
//myName = 三万 mySex = 未知
箭头函数
语法: 特殊的符号 =>
function fn(){
console.log(111);
}
//转成箭头函数
const fn = () => {
console.log(111);
}
注意:
-
如果形参只有一个的话,可以去省略小括号
function fn(a){
console.log(111);
}
//转成箭头函数
const fn = a => {
console.log(111);
} -
如果函数体里面只有一行代码,或者说这一行代码前面有一个关键字return,可以省略大括号
function fn(a){
console.log(111);
}
//转成箭头函数
const fn = a => console.log(111); -
箭头函数里面不绑定this,如果在箭头函数里面使用this的话,那么this是箭头函数所定义的位置所在的作用域
剩余参数
语法: …参数名
应用场景:当实参不确定的情况下使用,和arguments很像
function fn(...arg){
}
fn(10,20,30,40);//fn调用了这个函数,里面传递了4个实参,那么我们在形参里面定义的 ...arg 实际上获取的是一个数组,里面包含了所有的实参
ES6内置对象的扩展的方法
Array数组
扩展运算符
语法: …
应用场景: 合并数组,把伪数组转成数组
var arr = [1,2,3];
...arr// 1,2,3 获取的就是一个参数序列
var arr1 = [4,5,6];
let ary = [...arr,...arr1];
Array.from 方法
作用: 把伪数组转成真正的数组
let divs = 根据标签获取元素集合;
//这一行代码就可以把伪数组转成数组
let divArr = Array.from(divs,function(value){
//value 代表的就是divs里面每一个元素
});//第二个参数可以被省略
Array.find 方法
作用:用来查找数组中匹配的元素,只会匹配第一个
let arr = [2,5,7];
var result = arr.find(value => value == 2);//这个函数里面写的是条件,只有当返回式true的情况下,才会返回相应的元素
console.log(result);
Array.findIndex 方法
作用:用来查找数组中匹配元素对应的索引号,使用跟 find一致
Array.includes 方法
作用:判断数组是否包含某一个元素
let arr = [2,5,7];
arr.includes(5); //如果包含,返回true,如果不包含,返回false
String 字符串
模板字符串
语法: let str = ``;//反引号
特点:
- 我们不需要利用+号去拼接变量,利用${}
- 可以在字符串里面去调用函数 ${fn()}
- 会保留空格跟换行,让我们代码看起来更加的整洁
startsWith和 endsWith 方法
作用:判断字符串是否以什么开头或者是结尾
str.startsWith('ab');//判断是否以ab开头 ,如果是就返回true
str.endsWith('cd'); //判断是否以cd结尾,如果是返回true
repeat方法
作用:重复,copy几次
'a'.repeat(5);//copy a字符串 5次
set 集合
也是一种数据类型,专门用来存储数据的;里面存储的元素都是唯一的,里面没有重复的值
//实例化set对象
var set = new Set([2,4,5]);
//操作set
set.add(6); //添加一个元素 2,4,5,6
set.delete(6);//删除一个元素 2,4,5
set.has(3); //判断是否有这个元素 如果有返回true,如果没有返回false
set.clear(); //清空
//遍历 forEach
set.forEach(value=>{
//value 遍历的时候每一个元素的值
});