es6---在项目和平时练习应用es6语法
一、关于取值
-
const obj = {
-
a:1,
-
b:2,
-
c:3,
-
d:4,
-
e:5,
-
}
-
-
const a = obj.a;
-
const b = obj.b;
-
const c = obj.c;
-
const d = obj.d;
-
const e = obj.e;
const {a,b,c,d,e} = obj;
也可以使用:进行重命名
-
const {a:a1} = obj;
-
console.log(a1)
二、数组和对象的合并
-
const a = [1,2,3];
-
const b = [1,5,6];
-
const c = a.concat(b);//[1,2,3,1,5,6]
-
-
const obj1 = {
-
a:1,
-
}
-
const obj2 = {
-
b:1,
-
}
-
const obj = Object.assign({}, obj1, obj2);//{a:1,b:1}
es6的扩展运算符,数组的合去重
-
const a = [1,2,3];
-
const b = [1,5,6];
-
const c = [...new Set([...a,...b])];//[1,2,3,5,6]
-
-
const obj1 = {
-
a:1,
-
}
-
const obj2 = {
-
b:1,
-
}
-
const obj = {...obj1,...obj2};//{a:1,b:1}
三、字符串拼接
-
const name = '小明';
-
const score = 59;
-
let result = '';
-
if(score > 60){
-
result = `${name}的考试成绩及格`;
-
}else{
-
result = `${name}的考试成绩不及格`;
-
}
es6模板字符串
在${}
中可以放入任意的JavaScript表达式,可以进行运算,以及引用对象属性。
-
const name = '小明';
-
const score = 59;
-
const result = `${name}${score > 60?'的考试成绩及格':'的考试成绩不及格'}`;
四、if条件多
-
if(
-
type == 1 ||
-
type == 2 ||
-
type == 3 ||
-
type == 4 ||
-
){
-
//...
-
}
es6数组方法includes
-
const condition = [1,2,3,4];
-
-
if( condition.includes(type) ){
-
//...
-
}
五、精确搜索
-
const a = [1,2,3,4,5];
-
const result = a.filter(
-
item =>{
-
return item === 3
-
}
-
)
es6数组find方法,性能优化,find
方法中找到符合条件的项,就不会继续遍历数组。
-
const a = [1,2,3,4,5];
-
const result = a.find(
-
item =>{
-
return item === 3
-
}
-
)
六、获取对象属性值
const name = obj && obj.name;
es6可选链?
const name = obj?.name;
可选链?补充:
会在尝试访问obj.name之前确定obj既不是null也不是undefined,如果obj是null或者undefined表达式会进行短路计算直接返回undefined
七、输入框非空判断
-
if(value !== null && value !== undefined && value !== ''){
-
//...
-
}
es6空位合并运算符??
-
if((value??'') !== ''){
-
//...
-
}
es6空位合并运算符??补充:
前值是null或者undefined时表达式返回后值
-
const a = 0 ?? '默认值a';
-
cosnt b = null ?? '默认值b';
-
-
-
console.log(a); // "0" 0是假值,但不是 null 或者 undefined
-
console.log(b); // "默认值b"
拓展:
变量赋默认值一般使用逻辑或操作符 || 。但是由于 ||
是一个布尔逻辑运算符,左侧的操作数会被强制转换成布尔值用于求值。任何假值(0
, ''
, NaN
, null
, undefined
)都不会被返回。这导致如果你使用0
,''
或NaN
作为有效值,就会出现不可预料的后果。这也是 ?? 操作符可以解决这个问题
-
const a = 0;
-
const b = a || 5
-
-
-
//当0作为有效值,与我们期望的 b 的值不一致
-
console.log(b); // 5
八、异步函数回调
-
const fn1 = () =>{
-
return new Promise((resolve, reject) => {
-
setTimeout(() => {
-
resolve(1);
-
}, 300);
-
});
-
}
-
const fn2 = () =>{
-
return new Promise((resolve, reject) => {
-
setTimeout(() => {
-
resolve(2);
-
}, 600);
-
});
-
}
-
const fn = () =>{
-
fn1().then(res1 =>{
-
console.log(res1);// 1
-
fn2().then(res2 =>{
-
console.log(res2)
-
})
-
})
-
}
es6的async和await
-
const fn = async () =>{
-
const res1 = await fn1();
-
const res2 = await fn2();
-
console.log(res1);// 1
-
console.log(res2);// 2
-
}
九、函数默认参数
-
function fn (name, age) {
-
let name = name || 'hsq'
-
let age = age || 22
-
console.log(name, age)
-
}
-
fn() // hsq 22
es6函数默认参数
-
function fn (name = 'hsq', age = 22) {
-
console.log(name, age)
-
}
-
fn() // hsq 22
-
fn('test', 23) // test 23
十、剩余参数
一个函数,传入参数的个数是不确定的,这就可以用ES6的剩余参数
-
function fn (name, ...params) {
-
console.log(name)
-
console.log(params)
-
}
-
fn ('hsq', 1, 2) // hsq [ 1, 2 ]
-
fn ('hsq', 1, 2, 3, 4, 5) // hsq [ 1, 2, 3, 4, 5 ]
十 一、箭头函数
普通函数
-
function fn () {}
-
-
const fn = function () {}
es6箭头函数
-
const fn = () => {}
-
-
// 如果只有一个参数,可以省略括号
-
const fn = name => {}
-
-
// 如果函数体里只有一句return
-
const fn = name => {
-
return 2 * name
-
}
-
// 可简写为
-
const fn = name => 2 * name
-
-
// 如果返回的是对象
-
const fn = name => ({ name: name })
-
普通函数和箭头函数的区别:
- 1、箭头函数不可作为构造函数,不能使用new
- 2、箭头函数没有原型对象
- 3、箭头函数没有自己的this
- 4、箭头函数没有arguments对象
十二、获取对象的键值
Object.keys
可以用来获取对象的key的集合
-
const obj = {
-
name: 'hsq',
-
age: 22,
-
gender: '男'
-
}
-
-
const values = Object.keys(obj)
-
console.log(values) // [ 'hsq', 22, '男' ]
Object.values
可以用来获取对象的value的集合
-
const obj = {
-
name: 'hsq',
-
age: 22,
-
gender: '男'
-
}
-
-
const values = Object.values(obj)
-
console.log(values) // [ 'hsq', 22, '男' ]
Object.entries
可以用来获取对象的键值对集合
-
const obj = {
-
name: 'hsq',
-
age: 22,
-
gender: '男'
-
}
-
-
const entries = Object.entries(obj)
-
console.log(entries)
-
// [ [ 'name', 'hsq' ], [ 'age', 22 ], [ 'gender', '男' ] ]
十三、数组扁平化
Array.flat
有一个二维数组,我想让他变成一维数组:
-
const arr = [1, 2, 3, [4, 5, 6]]
-
-
console.log(arr.flat()) // [ 1, 2, 3, 4, 5, 6 ]
还可以传参数,参数为降维的次数
-
const arr = [1, 2, 3, [4, 5, 6, [7, 8, 9]]]
-
-
console.log(arr.flat(2))
-
[
-
1, 2, 3, 4, 5,
-
6, 7, 8, 9
-
]
如果传的是一个无限大的数字,那么就实现了多维数组(无论几维)降为一维数组
-
const arr = [1, 2, 3, [4, 5, 6, [7, 8, 9, [10, 11, 12]]]]
-
-
console.log(arr.flat(Infinity))
-
[
-
1, 2, 3, 4, 5,
-
6, 7, 8, 9, 10,
-
11, 12
-
]
-
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhghabgf
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13