数组的扩展、对象的扩展

一、数组的扩展
...a叫做rest参数

function fn(...a){
  console.log(a);
  //arguments
}
fn(1, 2, 3, 4, 5)

var box1 = document.getElementsByTagName("div");
var box2 = document.querySelectorAll("div");
console.log(box1, box2)
console.log(...box1, ...box2)
console.log([...box1])

//不能模拟一个类数组对象来转变成为数组
var obj = {
  0:"div",
  1:"div",
  2:"div",
  "length":3
}
console.log(...obj)

let arr1 = [1, 2, 3];
console.log(Math.max.apply(null, arr1))
let arr2 = ['a', 'b', 'c']
let arr3 = arr1.concat(arr2)
console.log(arr3)
let arr4 = [...arr1, ...arr2]
console.log(arr4)
let str = "Hello";
console.log([...str])

二、Array.from().of()
Array.from方法用于将两类对象转为真正的数组

function fn(a, b, c){
  var args = Array.from(arguments);
  console.log(arguments)
  console.log(args)
}
fn(1, 2, 3)

let ps = document.querySelectorAll("p");
Array.from(ps).forEach(function (p){
  console.log(p);
});

在构建函数中，如果我们传入多个值的情况，会返回一条数组
如果传入一个值的情况，返回的是一个长度为这个值的空数组
Array.of()：这个方法的主要目的是弥补数组构造函数Array()的不足，因为参数个数的不同，会导致Array()的行为有差异

var arr = Array(1, 2, 3)
var arr1 = Array(3)
var arr2 = Array.of(3)
console.log(arr, arr1, arr2)

三、copyWithin()
它接受三个参数

• target（必需）：从该位置开始替换数据【从下标为零开始替换】
• start（可选）：从该位置开始读取数据，默认为0，如果为负值，表示倒数
• end（可选）：到该位置前停止读取数据，默认等于数组长度。如果为负值，表示倒数

console.log([1, 2, 3, 4, 5].copyWithin(0, 3));
console.log([1, 2, 3, 4, 5].copyWithin(0, 4));
console.log([1, 2, 3, 4, 5].copyWithin(0, 3, 4));

四、find()，findIndex()
find()：直到找出第一个返回值为true的成员，然后返回该成员（只返回第一个值为true的内容）

console.log([1, 5, 10, 15].find(function(value, index, arr){
  return value > 9;
}))

findIndex()：返回下标

console.log([1, 5, 10, 15].findIndex(function(value, index, arr){
  return value > 9;
}))
``
五、fill()、for...of()
fill()：fill方法使用给定值，填充一个数组。fill方法用于空数组的初始化非常方便。数组中已有的元素，会被全部抹去

console.log(['a', 'b', 'c'].fill(7))

for...of返回的是值：es6引入的作为遍历所有数据结构的统一的方法，遍历返回的值是所有值
for...in返回的是键

let arr = ['a', 'b', 'c'];
for(let key of arr){
console.log(key)
}

//keys()是对键名的遍历
for(let index of ['a', 'b'].keys()){
console.log(index);
}
//values()是对键值的遍历
for(let elem of ['a', 'b'].values()){
console.log(elem);
}
//entries()是对键值对的遍历
for(let [index, elem] of ['a', 'b'].entries()){
console.log(index, elem);
}

六、对象的扩展

let person = "zhangsan";
var json = {
person:person, //es5
person, //es6
fn:function(){ //es5

},
fn(){ //es6

},
fn1:() => true
}
console.log(json.person)
console.log(json.fn())
console.log(json.fn1())

七、对象简洁表示法

var abc = "xyz";
var obj = {
"a":1,
"b":2,
"c":3,
["a"+"b"]:888, //["a" + "b"]当成一个键值
[abc]:123,
"abc":456
}
console.log(obj.a)
console.log(obj["a"+"b"]) //不是同时来获取到两个值
console.log(obj.ab) //点操作获取值
console.log(obj[abc])
console.log(obj["abc"])
console.log(obj.xzy)

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

八、对象的方法
Object.assign()：此方法用于对象的合并，将源对象（source）的所有可枚举（可遍历）属性，复制到目标对象（target）

const target = {a:1};
const source1 = {b:2};
const source2 = {c:3};
console.log(Object.assign(target, source1, source2));

九、let与var的区别

for(var i = 0; i<divs.length; i++){
divs[i].onclick = function(){
console.log(i)
}
}
for(let i = 0;i<divs.length; i++){
divs[i].onclick = function(){
console.log(i)
}
}