es6-es13实用方法

你好小同志

已于 2023-07-25 13:50:08 修改

阅读量80

点赞数

文章标签： es6 es13 前端

于 2023-07-25 11:00:18 首次发布

本文链接：https://blog.csdn.net/wangkangyang/article/details/129442235

版权

1.数组的一下方法

// 将数据进行扁平化处理 
var obj = [{
                name: "A",
                list: ["鞍山", "安庆", "安阳"]
            },
            {
                name: "B",
                list: ["北京", "保定", "包头"]
            }
]
console.log(obj.flatMap(item => item.list))

//   将类数组转化为真数组  
 Arr.from
 Array.find

let arr = [11,12,13,14,15]
let res1 = arr.find(function(item){
    return item>13
})
let res2 = arr.findIndex(function(item){
    return item>13
})
console.log(res1) //14
console.log(res2) //3

2.对象

8-1 Object.is
方法判断两个值是否是相同的值

console.log(NaN===NaN) //false
console.log(+0===-0) //true

console.log(Object.is(NaN,NaN)) //true
console.log(Object.is(+0,-0)) //false

之前的 == 或者 ===  有一个缺点 就是 NaN === NaN  // false 

8-2   函数的默认值 
 function  test ( a, ...b ) {
  b 就包含 2,3,4
}
test(a=10, b)

   rest 参数 剩余参数 
  test （1,2,3,4）

3 模板字符串

//  模板字符串可以是中括号里面添加变量和简单的值 
const str = 'nidhfsfdsf dfsdfsdf'
const str1 = `nidhfsfdsf dfsdfs  df ${str} `
const { log } = console
log(str1);
// 带标签的字符串模版

const name1 = '张三'
const gender = true
function myFunction(string, name1, gender) {
    const sex = gender ? '真的' : '假的'
    return string[0] + name1 + string[1] + sex

}
const result = myFunction`hello${name1}is${gender}`
console.log(result);

4 Proxy 与Object.defineProperty() 的区别

功能：Proxy提供了对对象进行拦截和定制的能力，而Object.defineProperty()仅用于定义或修改单个属性的特性。

复杂性：Proxy比Object.defineProperty()更为灵活和强大，因为它可以拦截并覆盖对象的多个操作，例如读取、写入、删除属性以及对属性进行枚举等。而Object.defineProperty()只能对单个属性进行操作，没有拦截属性删除和枚举的能力。

兼容性：Proxy是ES6引入的新特性，在旧版本的浏览器和Node.js环境中可能不被支持。而Object.defineProperty()是从ES5开始引入的标准方法，具有广泛的兼容性。

性能：Object.defineProperty()是基于对象的getter和setter函数的定义，适用于对单个属性进行简单的拦截和修改。相比之下，Proxy对整个对象进行拦截和处理，可能会导致一些性能上的损耗，尤其在大规模对象上的操作。

综上所述，如果你需要对单个属性进行简单的拦截和修改，或者在兼容性要求较高的环境下使用，可以考虑使用Object.defineProperty()。而如果你需要对整个对象进行复杂的拦截和定制，并且在现代浏览器或支持Proxy的环境下使用，那么Proxy会是更好的选择。