ES6常用语法介绍，前端建议收藏

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);

希望我的内容对大家有所帮助~