前端常用属性及方法汇总下篇

12次阅读

共计 2071 个字符,预计需要花费 6 分钟才能阅读完成。

书接上会把剩余的继续写完!

13、判断 Object 中是否含有某个属性

大家比较熟悉的 `Object.hasOwnProperty();`
还有一中:`key in Object;`
这两种也可以用来判断 Object 是否为空!

14、使用 map 遍历 Object

都是到 map 是数组的方法,但是有些场景时候我也需要遍历数组又不能使用 `for in` 或者 `for of` 的时候怎么办呢!我们可以是用一下三个方法:`Object.keys();`:这个方法返回的是 Object 中的所有 `key` 组成一个数组;`Object.values();`
这个方法返回的是 Object 中的所有 `value` 组成一个数组;`Object.entries();`:这个方法返回的是一个二位数组,子集包含 Object 的 key 和 value;

15、Object.is();

方法是将两个 Object 作比较,省去了我们循环遍历的代码;

16、Object.assign(); 与 {…object1, …object2}

这个方法类似于数组的 concat 方法,不同的是 `Object.assign();` 连接历来你给个对象的时候如果

两个对象有属性重复的时候,后面的会把前面的覆盖; es6 中我们简写成 `{...object1, ...object2}`


17、... 拓展运算符

es6 中新提出来的,主要作用:

 - 合并 array 或者 object

```
// ES5 的写法  
var arr1 = [0, 1, 2];  
var arr2 = [3, 4, 5];  
arr1.conant(arr1, arr2);  
// ES6 的写法  
var arr1 = [0, 1, 2];  
var arr2 = [3, 4, 5];  
arr1.push(...arr2); 
```

 - 与解构赋值结合

    ```
    // ES5  
    a = list[0], rest = list.slice(1)  
    // ES6  
    [a, ...rest] = list  
    下面是另外一些例子。const [first, ...rest] = [1, 2, 3, 4, 5];  
    first // 1  
    rest // [2, 3, 4, 5]  
    const [first, ...rest] = [];  
    first // undefined  
    rest // []:  
    const [first, ...rest] = ["foo"];  
    first // "foo"  
    rest // []  
    ```
    或者很多博主写的 ` 剩余参数 ` 都是这个东西
    
    ```
    function add(first, second, ...remaining) {return first + second;}
    ```
    
 - 函数的返回值
    JavaScript 的函数只能返回一个值,如果需要返回多个值,只能返回数组或对象。扩展运算符提供了解决这个问题的一种变通方法。```
    var dateFields = readDateFields(database);  
    var d = new Date(...dateFields);  
    ```
    上面代码从数据库取出一行数据,通过扩展运算符,直接将其传入构造函数 Date。- 字符串
    扩展运算符还可以将字符串转为真正的数组。```
    [...'hello']  
    // ["h", "e", "l", "l", "o"]  
    ```
    上面的写法,有一个重要的好处,那就是能够正确识别 32 位的 `Unicode` 字符。```
    'x\uD83D\uDE80y'.length // 4  
    [...'x\uD83D\uDE80y'].length // 3  
    ```
    上面代码的第一种写法,JavaScript 会将 32 位 Unicode 字符,识别为 2 个字符,采用扩展运算符就没有这个问题。因此,正确返回字符串长度的函数,可以像下面这样写。```
    function length(str) {return [...str].length;  
    }  
    length('x\uD83D\uDE80y') // 3  
    
    ```
    

18、[]设定变量为属性名


let obj = {}, name = ‘machinist’
obj[name] = 1111;

console.log(obj); // {machinist: 1111}

在补上一些常用的简写

  1. 当 if 条件内部只有一行代码的时候省略{}
    栗:

    if(true)retrun true
    else return false
  2. 当函数体内只有一行代码的时候
    栗:

    () => ... 你的代码

    等同于:

    ()=> {....}
    
    
  3. 当函数体内 return 一个 map 的时候可以省略 return 以及函数的大括号;
    栗:

    arrayMap = data => data.map(item => {.... 处理逻辑})

    等同于:

    arrayMap = (data) => {
       return data.map(item => {.... 处理逻辑})
    }

4. 同时声明多个变量的时候;

let a = 1, b = 2, c = 3, ..., z = 26;
 等同于:

```
let a = 1;
let b = 2;
...;
let z = 26;
```
  1. 声明对象带方法的
    栗:

    let object = {func(){...},
        func1(){...},
        func2(){...},
    }

    等同于:

    let object = {func:() => {...},
        func1:() =>{...},
        func2:() =>{...},
    }
正文完
 0