ES6系列学习（3）for of、for in、foreach、Object.keys、Object.values、Object.getOwnProperty、hasOwnProperty和in

╰+哭是因爲堅強的太久メ 2022-04-24 13:18 371阅读 0赞

**1.新增的字符串函数**

startsWith()、endsWith()、includes()、repeat()

**2.对象解构**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 1]

**3.数组解构**

![在这里插入图片描述][20190426153018653.png]  
![在这里插入图片描述][20190426153109567.png]

const numbers = ['one','two','three','four','five'];
    const [one,...others] = numbers;
    others = ['two','three','four','five'];
    
    //交换值
    [a,b] = [b,a]

**4.for of**

for…of用来遍历具有可迭代属性的对象的（即具有遍历器Iterator，原型中有Symbol.iterator方法），例如Array、String、Map、Set、arguments、DOM data structues，但是Object对象不行，因为Object对象没有实现这个接口。

如何让对象可以被for of 遍历，当然是给它添加遍历器，代码如下：

Object.prototype[Symbol.iterator] = function() {
        let _this = this
        let index = 0
        let length = Object.keys(_this).length
        return {
            next:() => {
                let value = _this[index]
                let done = (index >= length)
                index++
                return {value,done}
            }
        }
    }

参考文章：  
https://segmentfault.com/q/1010000010317919  
https://blog.csdn.net/WDCCSDN/article/details/81076397  
http://blog.zhangbing.club/Javascript/for-of%E5%BE%AA%E7%8E%AF%E5%AF%B9%E8%B1%A1/

for of、for in、foreach、Object.keys、Object.getOwnProperty

for of、for in、foreach主要是用于循环

Object.keys、Object.getOwnProperty主要是获取属性

hasOwnProperty和in用来检查对象中是否存在某个属性

**一、forEach循环遍历**

常用遍历数组方法：

for (var index = 0; index < myArray.length; index++) {
      console.log(myArray[index]);
    }

自JavaScript5之后可以使用内置的forEach方法：

myArray.forEach(function (value) {
      console.log(value);
    });

**二、for-in循环遍历**

for-in循环实际是为循环”enumerable“（可枚举）对象而设计的：

for–in主要是用来循环带有字符串key的对象的方法。也可以循环数组，但是得到的是下标，当然也可以用下标索引到对应数值。

//循环对象
    var obj = {a:1, b:2, c:3};
        
    for (var prop in obj) {
      console.log("obj." + prop + " = " + obj[prop]);
    }
    
    obj.a = 1
    obj.b = 2
    obj.c = 3
    
    //循环数组
    var arr1=["a",66,8,24];
    for(arr in arr1){console.log(arr)}
    0
    1
    2
    3
    for(arr in arr){console.log(arr1[arr])}
    a
    66
    8
    24

**三、for-of循环遍历**

//1.循环一个数组（Array）
    let iterable = [10, 20, 30];
    for (let value of iterable) {
      console.log(value);
    }
    // 10
    // 20
    // 30
    
    //2.循环一个字符串
    let iterable = "boo";
    for (let value of iterable) {
      console.log(value);
    }
    // "b"
    // "o"
    // "o"
    
    //3.循环一个Map：
    let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);
    for (let [key, value] of iterable) {
      console.log(value);
    }
    // 1
    // 2
    // 3
    
    for (let entry of iterable) {
      console.log(entry);
    }
    // [a, 1]
    // [b, 2]
    // [c, 3]
    
    //4.循环一个set：
    let iterable = new Set([1, 1, 2, 2, 3, 3]);
    for (let value of iterable) {
      console.log(value);
    }
    // 1
    // 2
    // 3
    
    //5.循环一个 DOM collection（节点）
    const lis = document.querySelectorAll('li');
    for(var li of lis){
    	li.addEventListener('click',function(){
    		this.classList.taggle('completed');
    	})
    }
    
    //6.循环一个拥有enumerable属性的对象（Object.keys() 方法会返回索引组成的数组）
    for–of循环并不能直接使用在普通的对象上，但如果我们按对象所拥有的属性进行循环，可使用内置的Object.keys()方法：
    for (var key of Object.keys(someObject)) {
      console.log(key + ": " + someObject[key]);
    }
    
    //7.循环一个生成器(generators)
    function* fibonacci() { // a generator function
      let [prev, curr] = [0, 1];
      while (true) {
        [prev, curr] = [curr, prev + curr];
        yield curr;
      }
    }
    for (let n of fibonacci()) {
      console.log(n);
      // truncate the sequence at 1000
      if (n >= 1000) {
        break;
      }
    }

参考文章：https://www.jianshu.com/p/f8a8e4c8543a

**四、Object.keys**

Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和使用 for…in 循环遍历该对象时返回的顺序一致 。

var obj = {a:1, b:2, c:3};
    Object.keys(obj);
    //输出结果
    ["a", "b", "c"]
    
    var arr3 = [1,2,3,4,5,6]
    Object.keys(arr3)
    //输出结果
     ["0", "1", "2", "3", "4", "5"]

**五、Object.getOwnProperty**

用于返回对象的自有属性，包括可枚举和不可枚举的

输出如下：

![在这里插入图片描述][20190428092925731.png]

参考文章：  
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global\_Objects/Object/keys  
https://segmentfault.com/a/1190000007908692?\_ea=1493826

Object.keys(…)会返回一个数组，包含所有可枚举属性， Object.getOwnPropertyNames(…)会返回一个数组，包含所有属性，无论它们是否可枚举。

**六、Object.values**

ES6新增的Object.values（取值）

该方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键值。

let obj = {a:0,b:1,c:2,d:3}
    let valuesArray = Object.values(obj)
    console.log("valuesArray:",valuesArray)

![在这里插入图片描述][20190602114551855.png]

**5.ES6 数组对象**

Array.from()从类数组对象或者可迭代对象中创建一个新的数组实例。

Array.of()根据一组参数来创建新的数组实例，支持任意的参数数量和类型。

**Array.from()**

Array.from() 方法从一个类似数组或可迭代对象中创建一个新的数组实例。

console.log(Array.from('foo'));
    Array ["f", "o", "o"]
    
    console.log(Array.from([1, 2, 3], x => x + x));
    Array [2, 4, 6]

Array.from() 可以通过以下方式来创建数组对象：  
1.伪数组对象（拥有一个 length 属性和若干索引属性的任意对象）  
2.可迭代对象（可以获取对象中的元素,如 Map和 Set 等）

看下面实例：

1.Array from a String
    Array.from('foo'); 
    // ["f", "o", "o"]
    
    2.Array from a Set
    let s = new Set(['foo', window]); 
    Array.from(s); 
    // ["foo", window]
    
    3.Array from a Map
    let m = new Map([[1, 2], [2, 4], [4, 8]]);
    Array.from(m); 
    // [[1, 2], [2, 4], [4, 8]]
    
    4.Array from an Array-like object (arguments)
    function f() {
      return Array.from(arguments);
    }
    f(1, 2, 3);
    // [1, 2, 3]
    
    const todos = document.querySelectorAll('li');
    const todoArr = Array.from(todos);
    const names = todos.map(todo => todo.textContent);
    
    //上面可以简写为
    const todos = document.querySelectorAll('li');
    const names = Array.from(todos,todo => todo.textContent);
    
    function(){
    	return Array.from(arguments).reduce((prev,curr) => prev+curr,0)
    }
    
    //5.在Array.from中使用箭头函数
    Array.from([1, 2, 3], x => x + x);  
    // x => x + x代表这是一个函数，只是省略了其他的定义，这是一种Lambda表达式的写法
    // 箭头的意思表示从当前数组中取出一个值，然后自加，并将返回的结果添加到新数组中    
    // [2, 4, 6]

数组去重合并 \[\].concat.apply(\[\]

function combine(){ 
        let arr = [].concat.apply([], arguments);  //没有去重复的新数组 
        return Array.from(new Set(arr));
    } 
    
    var m = [1, 2, 2], n = [2,3,3]; 
    console.log(combine(m,n));                     // [1, 2, 3]

这里不用apply用call可以不？答案是不行！因为apply的特殊性，它是apply（this，\[arr1,arrr2,arr3\]）这样来传参的，它的第二个参数就是以一个数组形式进行传参，所以很明显很符合我们之前的题目设定，所以\[\[12,21\],\[1,2,3\],\[2,3,4\]\]=>\[arr1,arrr2,arr3\] ，arr1=>\[12,21\]; arr2=>\[1,2,3\]; arr3=>\[2,3,4\]; apply会分别依次把参数传过去，之后运用concat来把这些单独的数组相连接变成了一个数组。

参考文章：https://blog.csdn.net/Hathaway2114/article/details/86542010

\[\].forEach.call() 方法

\[\]就是个数组，而且是用不到的空数组。用来就是为了访问它的数组相关方法，比如.forEach。这是一种简写，完整的写法应该是这样：

Array.prototype.forEach.call(...);

很显然，简写更方便。

至于forEach 方法，它可以接受一个函数参数：

[1,2,3].forEach(function (num) { console.log(num); });

上面的这句代码中，我们可以访问this对象，也就是\[1,2,3\]，可以看出，这个this是个数组。

最后，.call是一个prototype，JavaScript函数内置的。\[.call使用它的第一个参数替换掉上面说的这个this，也就是你要传人的数组，\]其它的参数就跟forEach方法的参数一样了。

[1, 2, 3].forEach.call(["a", "b", "c"], function (item, i, arr) {
        console.log(i + ": " + item);
    });
    // 0: "a"
    // 1: "b"
    // 2: "c"

因此，\[\].forEach.call()是一种快速的方法访问forEach，并将空数组的this换成想要遍历的list。

原文：https://blog.csdn.net/heyue\_99/article/details/54343602

**Array.of()**

弥补Array（）这个构造函数的不足。

Array.of() 方法创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型。

Array.of() 和 Array 构造函数之间的区别在于处理整数参数：Array.of(7) 创建一个具有单个元素 7 的数组，而 Array(7) 创建一个长度为7的空数组（注意：这是指一个有7个空位(empty)的数组，而不是由7个undefined组成的数组）。

Array.of(7);       // [7] 
    Array.of(1, 2, 3); // [1, 2, 3]
    
    Array(7);          // [ , , , , , , ]
    Array(1, 2, 3);    // [1, 2, 3]

还有.find()、.findIndex()、.some()、.every()

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70]: /images/20220214/535ad7b9134c491298a4f91fb646808d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 1]: /images/20220214/5da4820b99574405ba4a87e1c713b9f7.png
[20190426153018653.png]: /images/20220214/261aed17cf4e410db6507d71b4285005.png
[20190426153109567.png]: /images/20220214/abf19ee6fbb94827bb01e08d978094a3.png
[20190428092925731.png]: /images/20220214/024eb75ea3c84155a6924b8496f0ab56.png
[20190602114551855.png]: /images/20220214/65ff2653d2844a42a2790228444ebd35.png