乐趣区

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

jiezi

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

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：() =>{...},
}
退出移动版