ES6常用语法介绍,前端建议收藏
首先了解一下什么是ES6,它带来了什么作用?
ES6发行于2015年6月,这个版本的语法能极大地提高开发人员的工作效率,代码简洁效率高,在JS技术广泛使用的前提下,ES6自然是非常重要而且热度很高的代码。
那么下面正式去了解ES6
let和const
let和const是ES6新增声明变量的关键字,接下来去介绍它们的特点
let
1,不进行变量提升
我们之前在声明变量的时候都是用var
,但是var存在变量提升的问题,对于一些项目来说,非常不友好
但是let和const不存在变量提升了
a = 5;
let a = 6;
console.log(a);
2, 只在块级作用域里有效
{
let a = 30;
}
cosole.log(a);
当然不干扰外界,也不收到外界干扰
var num = 20;
{
let num = 30;
}
console.log(num); // 20
const
const也是用来声明变量,而且现在用的频率越来越高
很多人知道const有一个特点,就是赋值后,值不能修改
由此,引出一个问题:
const对象的属性可以修改吗?
const保证的并不是变量的值不能改动,而是变量指向的那个地址不能改动。对于基本类型的数据(数值、字符串、布尔值),其值就保存在变量指向的那个内存地址,因此就等于常量。
但对于引用类型的数据(主要是对象和数组)来说,变量指向数据的内存地址,保存的只是一个指针,const只能保证这个指针固定不动的,至于纸箱的数据结构是不是可变的,就不好控制了
所以赋值之后值还是有可能会发生改变的,但是对于基本数据类型就是常量对待了
1,基本数据类型赋值
const name = "我是garrison";
name = "gary";
console.log(name)
2,引用数据类型赋值
const g = {
name :"garrison",
age: 20
}
g = {
name :"Gary",
age : 19
}
console.log(g)
const g = {
name :"garrison",
age: 20
}
g.name = "gary";
console.log(g)
这样const对象里面属性的值就发生改变了,但是保存的内存地址没有进行变化
至于const剩下的特点就是与let保持一致,为了使本篇文章更精炼简洁,就不在这里过多赘述了
箭头函数
我们常在项目里面看到这样的代码
(temp)=>{
代码块1...
}//类似这种写法的
这样的称作为箭头函数,那下面来介绍一下箭头函数各部分代表的含义
- () 代表 函数
- {} 代表 函数体
- const test = () => {} 代表 把一个函数赋值给了test
1,无参数,直接赋
const introduction = ()=>{ console.log("我是garrison"); }
introduction();
2,有一个参数,大括号可以省略
const i = name => "我是" + name;
console.log(i("garrison"));
const i = name => console.log("我是" + name);
i("garrison");
怎么写都行,保证在赋值变量以及函数正常执行就可以
3,有多个参数,但是只有一个返回
const i = (name, age) => {return name + age}
console.log(i("garrison", "19岁"));
4,其它举例
const avg = (stu, sex) =>{
let arr = stu.filter(stu => stu.sex == sex).map(item => item.age);
return Math.max(...arr)
}
let stu = [
{sex : "男", age : 20},
{sex : "女", age : 22},
{sex : "男", age : 19}
]
console.log("男生年龄最大值" + avg(stu, "男"));
箭头函数执行真的很巧妙,大家在写箭头函数的时候一定要有return!!!
解构
解构顾名思义就是分解,构建,所以解构就是先把数据结构进行分解,然后为定义的变量赋值
数组解构
传统写法:
let arr = [1, 2, 3, 4]
let a = arr[0];
let b = arr[1];
解构写法
let [a, b] = [1, 2, 3, 4]
对象解构
传统写法
let i = {
name: "garrison",
age : 20
}
let name = i.name;
let age = i.age;
结构写法:
let {name, age} = {name: "garrison", age : 20}
解构写法会节省很多代码,还是很简便的
剩余参数
剩余参数允许我们将一个未知数量的参数表示为一个数组。
函数使用
const i = (name, ...args) => {
console.log(name);
console.log(args);
}
i("Garrison", 20, "男");
与解构写法一同使用
let stu = ["小R", "小G", "小W"];
let [s1, ...s2] = stu;
console.log(s1);
console.log(s2);
let stu = ["小R", "小G", "小W"];
let [...s1, ...s2] = stu;
console.log(s1);
console.log(s2);
这种写法不允许,剩余元素只能是最后一个元素
合并数组
let u1 = ['三', '四', '五'];
let u2 = ['张', '赵', '周'];
let u3 = [...u1,...u2];
console.log(u3);
可选链
可选链写法:?.
可选链是一种访问嵌套对象属性的犯错误方法。及时中间的属性不存在,也不会发生错误。如果可选链?.前面部分是undefined或者是null,它会停止并且返回undefined。
大多写法:
let res = {
data : {
introduction : {
name : "garrison",
age : 19
}
}
}
if(res.data.introduction.name){
console.log(res.data.introduction.name);
}
加入可选链:
let res = {
data : {
introduction : {
name : "garrison",
age : 19
}
}
}
if(res?.data?.introduction?.name){
console.log(res?.data?.introduction?.name);
}
Set
Set是ES6提供的一种数据结构,和数组相似,但是里面的数据是不可重复的。
Set初始化
const set = new Set([1, 2, 3, 4, 4]);
console.log(set1);
Set添加数据
set.add(5);
Set删除数据
set.delete(4);
Set查看是否包含数据
set1.has(1);//返回Boolean类型
Set清楚所有数据
set1.clear();
数组操作
includes()
判断数组里面是否包含某值,返回值是布尔类型
let stu = ['s1', 's2', 's3'];
let res = stu.includes('s1');
console.log(res);//true;
find()
找到第一个符合条件的成员,没有找到返回 undefined
let stu = [{ name: '张三', age: 18 }, { name: '李四', age: 20 }];
let res = stu.find((item, index) => item.age > 18)
console.log(res);
findIndex()
用来找到第一个符合条件的成员的索引,没有的话返回 -1
let stu = [{ name: '张三', age: 18 }, { name: '李四', age: 20 }];
let res = stu.findIndex((item, index) => item.age > 18)
console.log(res);
filter()
用来返回一个满足条件的新数组,不满足条件返回空数组
let stu = [{ name: '张三', age: 18 }, { name: '李四', age: 20 }, { name: '王二麻子', age: 19 }];
let res = stu.filter((item, index) => item.age > 18)
console.log(res);
map()
返回一个对成员进行加工之后的新数组
let stu = [{ name: '张三', age: 18 }, { name: '李四', age: 20 }, { name: '王二麻子', age: 19 }];
let res = stu.map((item, index) => {
item.name += index;
return item;
})
console.log(res);
字符串操作
startsWith()
表示该字符串参数是否在某个字符串头部
let message = "helloworld";
let res = message.startsWith("hello");
console.log(res);
endsWith()
表示该字符串参数是否在某个字符串尾部
let message = "helloworld";
let res = message.endsWith("ww");
console.log(res);
模版字符串
模板字符串是 ES6 新增加的创建字符串的方式
定义方式:反引号
1,定义方式
let name = `garrison`
2,对变量解析
let name = `garrison`
let introduction = `我是${name}`
console.log(introduction)
3,调用函数
const introduction = name => "我是" + name;
let i = `${introduction("garrison")}`
console.log(i);
希望我的内容对大家有所帮助~