JavaScript不断发布一些新特性，感觉是上天的节奏。本文收集整理了它的一些先进概念和用法，有需要的朋友可以参考一下。
:
目录
1.关闭2。函数绑定3。使用名称空间4。判断属性是否存在。解构作业6。遍历对象属性7。过滤阵列8。消除重复值9。判断数组是否为10。转换数字和字符串。转换为boolean12。可选链条13。归并算子14。有条件地添加属性15。异步调用异常捕获16.引用地图17。反映18。科林尼泽19。结合JavaScript语言，不断发布一些新特性。感觉是上天的节奏。本文收集整理了它的一些高级概念和用法，看看你是否都知道了？这样写代码是不是更优雅？
1. 闭包
闭包是Javascript中的一项重要技术。内部函数总是可以访问其外部函数的变量和参数，即使在外部函数返回之后。我们使用闭包来保护不想暴露给外部范围的数据。
//
按钮onclick="increaseCounter()"增加计数器/按钮
//1.全局变量，这些变量将被意外修改
设计数器=0；
函数increaseCounter() {
柜台；
}
//2.局部变量，每次调用该变量时都会重置为0。
函数increaseCounter() {
设计数器=0；
柜台；
}
//3.闭合功能，符合要求
const increase counter=(function(){
设计数器=0；
返回函数(){
计数器=计数器1；
console.log(计数器)；
};
})();
2. 函数绑定
当上下文丢失时，这是无法确定的，可以通过函数绑定来解决。
//1.如果不符合预期，那就是未定义。
let book={
标题：“学习JavaScript”，
printTitle() {
console.log(`图书标题：$ { this . title } `)；
}
}
setTimeout(book.printTitle，1000)；//书名：未定义
//2.使用函数绑定，符合预期。
let book={
标题：“学习JavaScript”，
printTitle() {
console.log(`图书标题：$ { this . title } `)；
}
}
设print title=book . print title . bind(book)；
setTimeout(printTitle，1000)；//书名：JavaScript
3.使用命名空间
使用命名空间可以防止代码冲突。
//1.移动和跳转函数位于animal名称空间中，需要通过animal.move()调用
让动物={
move: ()={
console.log('Move！');
},
跳转：()={
consle.log('Jump！');
}
};
//2.在实际项目中，名称空间的用法如下
if(应用类型==='未定义'){
APP={ }；
APP。ANIMAL={ }；
}
APP。ANIMAL.move=()={
console . log(“Move”)；
};
APP。ANIMAL.jump=()={
console . log(' Jump ')；
};
APP。animal . move()；//移动
APP。animal . jump()；//跳转
4. 判断属性是否存在
使用in关键字确定属性是否存在于对象中。
常量人员={
id:“123”，
姓名：“张三”
}
console.debug('id '本人)//true
console . debug(' age ' in person)//false
5. 解构赋值
通过解构赋值表达式，可以将属性和值从对象和数组中取出，赋给其他变量，非常方便。
const { address:address line }={ address:'长安街20号'，邮编：' 518118 ' }；
console . warn(address line)；//长安街20号
const [first，second]=[1，2，3，4]
console.warn(first，second) //1 2
//动态解构
const extractKey='邮政编码'
const {[extract key]:you bian }={地址：'长安街20号'，邮编：' 518118 ' }；
console.log(youbian) //518118
6.遍历对象属性
使用Object.entries遍历对象的属性和值。
Const data={地址：'长安街20号'，邮编：' 518118 ' }；
对象.条目(数据)。forEach(([key，value])={
if (['地址'，'邮编']。包括(键)){
console.log('键：'，键，'值：'，值)
}
})
//输出结果如下
钥匙：地址值：长安街20号
关键字：邮政编码值：518118
7. 过滤数组
使用过滤器和一些数组来过滤数组。
const fruits=['apple '，null，' mongo '，undefined，' ']
const filted=fruits.filter(布尔值)
console . debug(filted)//(2)[' apple '，' mongo']
const any=fruits.some(布尔值)
console.log(any) //true
8. 消除重复值
const fruits=['apple '，null，' mongo '，' apple '，' ']
const uniqued=[.新套餐（水果)]
控制台。debug(uniqued)//(4)[' apple '，null，' mongo '，' ']
9. 判断是否数组
利用Array.isArray，而不是类型关于判断。
const fruits=['apple '，null，' mongo '，' apple '，' ']
console.debug(水果类型)//对象
控制台。错误(数组。isarray(fruits))//true
10. 转换数字和字符串
const text='12345 '
console.debug('text:'，text，' typeof:'，type of(text))//text:12345 type of:number
常数编号=123456
console . debug(' num:'，num ' '，' typeof:'，type of(num ' '))//number:123456 type of:string
11. 转换为boolean
利用！运算符可以将其它类型转换为布尔代数学体系的类型。
console.log(！null，typeof(！null)) //false，布尔值
console.log(！typeof(！'))//假，布尔值
console.log(！未定义，类型为(!未定义))//false，布尔值
console.log(！null，typeof(！null)) //false，布尔值
console.log(！true，typeof(！true)) //true，布尔值
console.log(！false，typeof(！false)) //false，布尔值
console.log(！{id:' '，名称：' ' },类型(!(！idspnonenote).{id:' '，name:''})) //true，boolean
12. 可选链
可选链？是一种访问嵌套对象属性的安全的方式，可避免在对象或属性不可用时抛出异常。由于Java脚本语言不是类型化语言，该特性还是很有用。
//未使用可选链接，将抛出异常
const contactInfos={ address:'长安街20号' };
控制台。警告(联系信息。用户。电话号码)
//以上语句将报错：无法读取未定义的属性（读取"电话号码")
//使用可选链接，将打印不明确的
const contactInfos={ address:'长安街20号' };
console.warn(contactInfos.user？电话号码)//未定义
13. 合并运算符
合并运算符的写法为两个问号？对于该运算符连接的两个参数，如果第一个参数不是空，也不是未定义，则返回第一个参数，否则返回第二个参数。
const contactInfos={ address:'长安街20号' };
console.warn(contactInfos.user？电话号码？'') //''
const contactInfos={ address:'长安街20号，地址号码：0 };
控制台。警告(联系信息。地址编号| |未定义)//未定义
控制台。警告(联系信息。地址号码？未定义)//0
14. 有条件地添加属性
使用.扩展语法，可以仅当某个条件成立时，才为对象添加某个属性。
const moreInfos={ info:'请开车前往.'}
返回{
地址： '长安街20号，
邮政编码："518118",
.(moreInfos！==undefined { moreInfos }) //仅当更多信息不是不明确的时，才添加更多信息属性
}
15. 异步调用异常捕获
以下写法让处理异步调用异常的代码变得更为简洁。
const results=await getPosts().catch((err)={
返回{
类型："错误",
消息：错误消息
}
});
console.warn(结果)//{ type:'错误，消息：'无法从该端点获取帖子' }
16. 弱引用Map
Weakmap不同于地图，它的键必须是引用对象，不能是基础类型，如果没有对该键对象引用时，该对象将被从地图和内存中移除。
const videoSegments=new WeakMap()
let options={ id: '1234 '，timeStart: 1653831957378，size: 10000 }
const segment={ data:new uint 8 array(200)}
videoSegments.set(选项，分段)
控制台。警告(视频片段。get(options))//{ data:新的uint 8数组(200)}
//以下当选择被赋值为空后，该对象将被移除和回收
选项=空
控制台。警告(视频片段。has(options))//false，则从WeakMap中删除"选项"键对象
17. 反射
显示是一个全局对象，它为元编程提供了一些有用的静态方法。
常量人员={
姓名："鲍勃",
[Symbol(' email ')]:' bob @ evil。' com '
};
Reflect.get(person，' name ')；//=鲍勃
Reflect.has(person，' email ')；//=真
Reflect.has(人，'电话');//=假
反思。getprototypeof(person)；//={构造函数.}
反思。getownpropertydescriptor(person，' name ')；//={ value: 'Bob '，可写：真的，可枚举：真的，可配置：true }
Reflect.ownKeys(人);//名称、符号（电子邮件)
Reflect.defineProperty(person，' phone '，{ writable:true })；
Reflect.has(人，'电话');//=真
Reflect.set(人，'电话'，' 123456789 ')；
Reflect.deleteProperty(person，' phone ')；
Reflect.has(人，'电话')；//=假
18. 柯里化
Currying是关于函数的高阶技术，是指将一个函数从可调用的f(a，b，c)转换为可调用的f(a)(b)(c)。内聚不调用函数，只是转换它们。
//完成银行转账交易功能，余额转账金额-费用。
const transaction=(费用，余额，金额)=(
余额-费用；
);
//科里奥利函数的简单实现
康斯特库里=(fn，args)=(
（._arg)=(
fn(.参数，_arg)
)
);
//重用事务函数的无事务函数
const free transaction=curry(transaction，0)；
freeTransaction(10，90)；//=100
19. 组合
组合是一种技术，其中一个函数的结果传递给下一个函数，下一个函数再传递给下一个函数，以此类推.直到执行最后一个函数并计算出一些结果。函数的组合可以由任意数量的函数组成。
//f和G都是函数，X是它们之间通过“管道”传递的值
var compose=function(f，g) {
返回函数(x) {
返回f(g(x))；
};
};
var toupper case=function(x){ return x . toupper case()；};
var exclaim=function(x) { return x '！'；};
var shout=compose(惊叫，toupper case)；
喊(‘送小丑进来’)；//='让小丑们进来！'
//组合函数
const compose=(.fns)=x=fns.reduce((y，f)=f(y)，x)；
//原始函数
const addFee=amount=amount 2；
const add discount=amount=amount-5；
//功能组合
const composition=compose(add fee，add discount)(100)；
console.log(composition) //97
这就是关于JavaScript的高级概念和用法的文章。有关js高级用法的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。