1. 啥是 ES6?
在学习 ES6 之前,我们先了解一下啥是 ES。
ES 全称 ECMAScript,它是由欧洲计算机协会(ECMA)制定的一种脚本语言的标准化规范。
这家伙说白了就是给 JavaScript 制定的一种语法规范,你写 js 的时候如果按照 ES6 中的规范去写,写的代码不仅简洁而且效率很高。
ES6 发行于 2015 年 6 月,由于这个版本的语法规范极大地提高了前端开发人员的效率,所以在前端圈子中流行开来,时至今日热度依旧不减。
2. let 和 const
2.1 let
let 是 ES6 中新增加的用于声明变量
的关键字,它具有如下特点:
- 不存在变量提升
不能先使用再声明
num = 20;
let num = 30;
console.log(num);
- 只在块级作用域有效
例一:
{
let num = 30;
}
console.log(num);
例二:
var num = 20;
{
let num = 30;
}
console.log(num);
从上面的例子中我们可以看到,let 定义的变量只能在所在的 { }
中使用,不受外界干扰,也不会干扰外界。
2.2 const
const 也是 ES6 中新增加的用于声明变量
的关键字,它主要用来声明常量。它具有如下特点:
- 声明常量时必须赋值
const name;
console.log(name);
- 只在块级作用域有效
var message = '今天基金跌惨了。。呜呜呜';
{
const messge='把钱还给我,不玩了。。。呜呜呜';
}
console.log(message);
从上面的例子中我们可以看到,const 定义的变量只能在所在的 { }
中使用,不受外界干扰,也不会干扰外界。
- 赋值后,值不能修改
例一:
const message = '今天基金跌惨了。。呜呜呜';
message='今天我赚翻了。。。哈哈哈';
console.log(message);
例二:
const user = { id: 123, name: "张三" };
user ={id:234,name:"李四"}
console.log(user);
const user = { id: 123, name: "张三" };
user.name="李四";
console.log(user);
从上面的例子中我们可以看出 const 赋值的常量如果是基本数据类型,不能重新赋值;如果是对象等复杂数据类型,不能更改地址,但是可以更改对象中属性的值。
2.3 var、let、const 的区别
- var 声明的变量作用域在所处的函数内,let 和 const 声明的变量作用域在所处的大括号内。
- var 声明的变量存在变量提升现象,let 和 const 声明的变量不存在变量提升现象。
- const 声明变量时必须要赋值,赋值之后不能再重新赋值。
3. 箭头函数
- ( ) 代表函数
- { } 代表函数体
- const ft = ()=>{} 代表把一个函数赋值给 ft
- ft() 调用该函数
- 无参数,函数体只有一行代码
// 常规写法
function print() {
console.log("呜呜呜,今天打王者荣耀连着输了6把!");
}
// 箭头函数
const ft = ()=> console.log("呜呜呜,今天打王者荣耀连着输了6把!");
// 调用函数
ft();
- 有参数,函数体只有一行代码
// 常规写法
function print(name,content) {
return name + content;
}
// 箭头函数
const ft = (name,content) => name + content;
// 调用函数
console.log(ft("鲁迅","家门前有2棵树"));
- 只有一个参数,可以去掉大括号
// 常规写法
function print(name) {
return name + "我爱你";
}
// 箭头函数
const ft = name => name + "我爱你";
// 调用函数
console.log(ft("祖国妈妈"));
4. 多个参数,函数体有多行
// 箭头函数:获取年龄最大值
const ft = (userArray, sex) => {
let ageArray = userArray.filter(user => user.sex == sex).map(item => item.age);
return Math.max(...ageArray);
}
let userArray = [{ name: '张三', sex: '男', age: 18 },
{ name: '李四', sex: '女', age: 19 },
{ name: '王五', sex: '男', age: 21 }]
// 调用函数
console.log(ft(userArray, '男'));
4. 解构
解构就是把数据结构进行分解
,然后为定义的变量赋值
。
4.1 数组解构
获取数组中数值的传统方式:
const num =[0,1,2,3];
const a= num[0];
const b= num[1]
console.log(a+b);
解构:
let [a, b] = [0, 1, 2, 3];
console.log(a + b);
4.2 对象解构
获取对象中数据的传统方式:
let user = {name:"张三",age:19};
let name = user.name;
let age = user.age;
console.log("姓名:"+name+",年龄:"+age);
解构:
let { name, age } = { name: "张三", age: 19 };
console.log("姓名:" + name + ",年龄:" + age);
5. 剩余参数
剩余参数允许我们将一个未知数量的参数表示为一个数组。
5.1 使用
语法:…参数名
例如:
const print = (num, ...args) => {
console.log(num);
console.log(args);
}
print(0, 1, 2)
从上面的例子中我们发现参数 args 是一个数组。
5.2 和解构连用
let users = ['张三', '李四', '王五'];
let [u1, ...u2] = users;
console.log(u1);
console.log(u2);
5.3 合并数组
let u1 = ['张三', '李四', '王五'];
let u2 = ['张无忌', '赵敏', '周芷若'];
let u3 = [...u1,...u2];
console.log(u3);
6. 可选链
可选链 ?. 是一种 访问嵌套对象属性的防错误方法 。即使中间的属性不存在,也不会出现错误。 如果可选链 ?. 前面部分是 undefined 或者 null,它会停止运算并返回 undefined。
我们要想获取一个嵌套对象的属性,一般会这样写:
let res = {
data: {
data: {
success: true,
id: "20220425"
}
}
}
if (res && res.data && res.data.data.success) {
let id = res.data.data.id;
console.log(id);
}
使用可选链
let res = {
data: {
data: {
success: true,
id: "20220425"
}
}
}
if (res?.data?.data?.success) {
let id = res?.data?.data?.id;
console.log(id);
}
7. Set
Set 是 ES6 提供的一种数据结构,它和数组很像,但是它里面的数据是不可重复
的。
- 初始化
const set1 = new Set([1, 2, 3, 4, 5, 5]);
const set2 = new Set(['苹果','橘子','橘子']);
console.log(set1);
console.log(set2);
- 添加数据
const set1 = new Set([1, 2, 3, 4, 5,5]);
set1.add(7);
- 删除数据
const set1 = new Set([1, 2, 3, 4, 5,5]);
set1.delete(3);
- 包含数据
const set1 = new Set([1, 2, 3, 4, 5,5]);
const res = set1.has(1);
console.log(res);
- 清除所有数据
const set1 = new Set([1, 2, 3, 4, 5,5]);
set1.clear();
8. 数组操作
8.1 合并数组
let u1 = ['张三', '李四', '王五'];
let u2 = ['张无忌', '赵敏', '周芷若'];
let u3 = [...u1,...u2];
console.log(u3);
8.2 includes()
includes 用来判断该数组是否包含某个值,返回值是布尔值
let users = ['张三','李四'];
let res =users.includes('张三');
console.log(res);
8.3 find()
find 用来找到第一个符合条件的成员,没有找到返回 undefined
let users = [{ name: '张三', age: 18 }, { name: '李四', age: 20 }];
let user = users.find((item, index) =>
item.age > 18
)
console.log(user);
8.4 findIndex()
findIndex 用来找到第一个符合条件的成员的索引,没有的话返回 -1
let users = [{ name: '张三', age: 18 }, { name: '李四', age: 20 }];
let index = users.findIndex((item, index) =>
item.age > 18
)
console.log(index)
8.5 filter()
filter 用来返回一个满足条件的新数组,不满足条件返回空数组
let users = [{ name: '张三', age: 18 }, { name: '李四', age: 20 }];
let array = users.filter((item, index) =>
item.age > 21
)
console.log(array);
8.6 map()
map 用来返回一个对成员进行加工之后的新数组
let users = [{ name: '张三', age: 18 }, { name: '李四', age: 20 }];
let array = users.map((item, index) => {
item.name += "666";
item.age += 10;
return item;
})
console.log(array);
9. 字符串扩展方法
9.1 startsWith() 和 endsWith()
startsWith()
表示该字符串参数是否在某个字符串头部
let message = "helloworld";
let res = message.startsWith("hello");
console.log(res);
endsWith()
表示该字符串参数是否在某个字符串尾部
let message = "helloworld";
let res = message.endsWith("ww");
console.log(res);
9.2 模板字符串
模板字符串是 ES6 新增加的创建字符串的方式
定义方式:反引号
- 定义
let country = `中国`;
- 解析变量
let country = `中国`;
let message = `我爱你${country}`;
console.log(message);
- 调用函数
const print = message=>message+",2022-04-25";
let message = `${print('我爱你中国')}`;
console.log(message);
今天的文章前端开发常用的ES6语法,建议收藏!分享到此就结束了,感谢您的阅读。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/20411.html