<返回更多

前端开发常用的ES6语法,建议收藏!

2023-03-16  掘金  
加入收藏

1. 啥是 ES6?


 

在学习 ES6 之前,我们先了解一下啥是 ES。

ES 全称 ECMAScript,它是由欧洲计算机协会(ECMA)制定的一种脚本语言的标准化规范。

这家伙说白了就是给 JAVAScript 制定的一种语法规范,你写 js 的时候如果按照 ES6 中的规范去写,写的代码不仅简洁而且效率很高。

ES6 发行于 2015 年 6 月,由于这个版本的语法规范极大地提高了前端开发人员的效率,所以在前端圈子中流行开来,时至今日热度依旧不减。

2. let 和 const2.1 let

let 是 ES6 中新增加的用于声明变量的关键字,它具有如下特点:

 

  1. 不存在变量提升

 

不能先使用再声明

num = 20; let num = 30; console.log(num); 复制代码


 

 

  1. 只在块级作用域有效

 

例一:


{ let num = 30; } console.log(num); 复制代码


 

例二:

var num = 20; { let num = 30; } console.log(num); 复制代码


 

从上面的例子中我们可以看到,let 定义的变量只能在所在的 { } 中使用,不受外界干扰,也不会干扰外界。

2.2 const

const 也是 ES6 中新增加的用于声明变量的关键字,它主要用来声明常量。它具有如下特点:

 

  1. 声明常量时必须赋值
const name; console.log(name); 复制代码

 


 

 

  1. 只在块级作用域有效
var message = '今天基金跌惨了。。呜呜呜'; { const messge='把钱还给我,不玩了。。。呜呜呜'; } console.log(message); 复制代码

 


 

从上面的例子中我们可以看到,const 定义的变量只能在所在的 { } 中使用,不受外界干扰,也不会干扰外界。

 

  1. 赋值后,值不能修改

 

例一:

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 的区别
  1. var 声明的变量作用域在所处的函数内,let 和 const 声明的变量作用域在所处的大括号内。
  2. var 声明的变量存在变量提升现象,let 和 const 声明的变量不存在变量提升现象。
  3. const 声明变量时必须要赋值,赋值之后不能再重新赋值。
3. 箭头函数
  1. 无参数,函数体只有一行代码
// 常规写法 function print() { console.log("呜呜呜,今天打王者荣耀连着输了6把!"); } // 箭头函数 const ft = ()=> console.log("呜呜呜,今天打王者荣耀连着输了6把!"); // 调用函数 ft(); 复制代码

 


 

 

  1. 有参数,函数体只有一行代码
// 常规写法 function print(name,content) { return name + content; } // 箭头函数 const ft = (name,content) => name + content; // 调用函数 console.log(ft("鲁迅","家门前有2棵树")); 复制代码

 


 

 

  1. 只有一个参数,可以去掉大括号
// 常规写法 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 提供的一种数据结构,它和数组很像,但是它里面的数据是不可重复的。

 

  1. 初始化
const set1 = new Set([1, 2, 3, 4, 5, 5]); const set2 = new Set(['苹果','橘子','橘子']); console.log(set1); console.log(set2); 复制代码

 


 

 

  1. 添加数据
const set1 = new Set([1, 2, 3, 4, 5,5]); set1.add(7); 复制代码
  1. 删除数据
const set1 = new Set([1, 2, 3, 4, 5,5]); set1.delete(3); 复制代码
  1. 包含数据
const set1 = new Set([1, 2, 3, 4, 5,5]); const res = set1.has(1); console.log(res); 复制代码

 


 

 

  1. 清除所有数据
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 新增加的创建字符串的方式

定义方式:反引号

 

  1. 定义
let country = `中国`; 复制代码
  1. 解析变量
let country = `中国`; let message = `我爱你${country}`; console.log(message); 复制代码

 

 

  1. 调用函数
const print = message=>message+",2022-04-25"; let message = `${print('我爱你中国')}`; console.log(message); 复制代码

 


 

声明:本站部分内容来自互联网,如有版权侵犯或其他问题请与我们联系,我们将立即删除或处理。
▍相关推荐
更多资讯 >>>