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

1.新增的字符串函数

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

2.对象解构

3.数组解构

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循环遍历

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

//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

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

var obj = {"name":"Poly", "career":"it"}
Object.defineProperty(obj, "age", {value:"forever 18", enumerable:false});
Object.prototype.protoPer1 = function(){console.log("proto");};
Object.prototype.protoPer2 = 2;
console.log("Object.getOwnPropertyNames: ");
console.log(Object.getOwnPropertyNames(obj));

输出如下：

参考文章：
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) 

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()