ES6数组得扩展与对象的扩展

1.forEach

格式：

 //第一个参数为函数//函数的第一个参数 是遍历的当前元素//函数的第二个参数 当前元素的下标//函数的第三个元素 数组本身//第二个参数为：函数中this指向。arr.forEach(function(item,index,arr){},obj) //obj指函数中的this指向

 var arr = {"千与千寻","肖申克的救赎","谁先爱上他的","哈尔的移动城堡","海上钢琴师"}var lis = document.querySelectorAll("li")arr.forEach(function(item,index,self){// console.log("电影名:"+item+",下标为："+index);this[index].innerHTML = item;},lis);

2.map方法

map 映射含义，用法与forEach基本类似
可以在函数中定义返回值，返回是一个数组。

 var arr = [{name:"千与千寻",score:"8.6"},{name:"肖申克的救赎",score:"9.6"},{name:"谁先爱上他的",score:"8.3"},{name:"哈尔的移动城堡",score:"8.9"},{name:"海上钢琴师",score:"9.0"}]var arr2 = arr.map(function(item){return item.score;});console.log(arr2);

3.Array.from()

Array.from 方法可以将类似数组得对象转为真正的数组，比如：Dom获取的伪数组，arguments对象。

 let lis = document.querySelectorAll("li");console.log(lis);var arr = Array.from(lis);console.log(arr);function sort(){var args = Array.from(arguments);return args.sort();}console.log(sort(6,3,5));

 let likeArr = {length:3,"0":"hello","1":"word","2":"你好"}let arr = Array.from(likeArr);console.log(arr);

4.Array.of()

Array.of()方法将一组指，转为数组。

 let arr = Array.of(1，2，3);console.log(arr);let arr2 = new Array(3);console.log(arr2);

5.copywithin()

将指定位置的内容复制到其他位置（复制会覆盖原有的内容）然后返回当前数组。

格式

 //target：必需，从该位置进行覆盖//start：可选，从该位置开始读取数据，默认为0。如果为负数，表示倒数。//end:可选 到该位置结束读取数据，默认为数组的长度。如果为负数，表示倒数、arr.copyWithin(target,[start],[end]){}

6.find()和findindex()

find 方法，找到第一个符合条件的数组元素。

 arr.find(function(item,indedx,arr){//条件判断})

 var arr = [1,6,-10,-9].find(function(item){return item < 0;})// ES6箭头函数写法var arr = [1,6,-10,-9].find(item=>item < 0)console.log(arr);

findindex，找到第一个符合条件的数组元素的下标。

 var arr = [1,6,-10,-9].findIndex(item=>item < 0)console.log(arr);

7.keys(),values(),entries()

这三个方法主要用于数组遍历。配合for…of循环。
keys():对键名的遍历
valies():对键值得遍历
entries()对键值对进行遍历

8.for…of循环

 //格式//item 指遍历的当前元素//arr 指遍历数组for(const item of arr){console.log(item);}var arr = ["a","b"]for(const item of arr){console.log(item)}

 var arr = ["a","b"]for (const item of arr.keys()){console.log(item);}// 0 1 for(const item of arr.values()){console。log(item);}//[0,"a"][1,"b"]

9.includes()

该方法可以判断数组是否包含指定的值。
格式：

 //arr;数组//value:判断数组中是否包含指定的值arr.inclues(value,target)```返回值：布尔值true为包含，false为不包含```javascriptvar arr = [1,2,3]console.log( [1,2,3].includes(2)); //trueconsole.log( [1,2,3].includes("2")); //falseconsole.log([1,2,3].includes(2,1));//trueconsole.log([1,2,3].includes(2,2));//false

 var arr = [1,2,3]var index = arr.indexOf(2);if(index !== -1){console.log("该值已包含");}else{console.log("该值不包含");}

9.1includes方法与indexOf()方法的区别

01.indexOf 返回的是下标。includes返回的是布尔值
02.indexOf用来判断是否包含不够语义化，不够直观
03.对于NaN是有误判的

10.对象扩展方法

10.1Object.Assign()

assgin()用于对对象的合并
格式：

//第一个参数后面的所有参数，合并第一个参数
Object.assign(target,obj1,obj2)

 const target = {name:'奥黛丽·赫本'}const obj1 = {age:'20'}const obj2 = {sex:'女'}Object.assign(target,obj1,obj2);console.log(target);

10.2浅拷贝

只拷贝复合数据的内存地址，拷贝后的变量让然指向原本的对象

10.3深拷贝

生成新的对象，新对象和就对象的值完全相同，然后新对象的地址复制。
assign方法时浅拷贝，也就是说，如果被合并的对象中有一个属性为对象，那么target对象拷贝得到的是这个对象的内存地址。

10.4同名属性

const obj1 = {name:"奥黛丽",age:"20",son:{name:"卢卡·多蒂",age:"40"}
}
const obj2 = {name:"赫本"
}
const target = {name:"奥黛丽·赫本",sex:"女"
};
Object.assign(target,obj1,obj2);
console.log(target);

遇到同名属性，则后面的参数对象中的属性会将前面的属性覆盖

10.5用在数组上

用在数组上时，会将数组视为对象

 var arr1 = [10,20,30];// arr1 = {//     "0":"a",//     "1":"b",//     "2":30// }var arr2 = ["a","b"];// arr2 = {//     "0":"a",//     "1":"b"// }Object.assign(arr1,arr2);console.log(arr1);//a,b,30

11. 集合

11.1 什么是集合

1.无序
2.不重复

11.2 set

ES6的新的数据结构，类似于数组，但是元素是唯一的，而且没有顺序

创建set

 ler s = new set();

添加元素的两种方式

 let s = new Set([30,40]);s.add(10)s.add(20)

let s = new Set([30,40]);
s.add(10)
s.add(20)
s.add(10)
s.add(true)
s.add("10")
s.add("10")
s.add(new String("hello"));
s.add(new String("hello"));
console.log(s);
//30,40,10,20,tue,"10",String,String

11.3属性和方法

size属性

返回该set集合中的元素个数

set.size();

add(value)
往set集合中添加一个元素，返回Set本身。
delete(value)
删除指定的值，返回一个布尔值，表示删除是否成功。
has(value)
判断指定的值是否在set中存在，返回一个布尔值。
clear()
清除所有元素，没有返回值。

11.4 补充

set转为数组得方法

Array.from 方法可以将set转为数组。

const arr = Array.from(s);

rest参数

const arr2 = [...s];

给数组去重

 var arr = [10,20,20,30,50,30];//10,20,30,50var set = new Set(arr);arr = Array.from(set);console.log(arr);//封装成一个数组去重的方法function noDupli(array){return Array.from(new Set(array));}

11.5 遍历操作

keys()
返回键遍历器
values()
返回键的值得遍历器
entries()
返回键值对的遍历器

 for (const item of set.keys()) {console.log(item);}for (const item of set.values()) {console.log(item);}for (const item of set.entries()) {console.log(item);}for (const item of set){console.log(item);}

12. map

是键值对的集合，与对象中的属性与属性很类似，但是对象中的属性名只能是字符串，值–值的对应，字符串–值的对应

创建map

 let map = new Map();

添加元素的方式

let map = new Map();map.set("数数","一二三四")map.set("马老师","好自为之")map.set("麦兜","鱼丸粗面")let map = new Map([["name","周润发"],["age","40"]]);

唯一性
键的唯一性，而不是值的唯一。

 map.set("数数","一二三四")map.set("马老师","好自为之")map.set("马老师","年轻人不讲武德")// map.set("浑元形意太极拳掌门","好自为之")map.set("麦兜","鱼丸粗面")

12.1 属性方法

size
返回map中有多少键值对
set(key,value)
往map集合中添加一个key - value的键值对，返回map本身，如果key存在，原值会被覆盖。
delete(key)
通过键查找对应的键值对，将其删除，返回一个布尔值，表示删除是否成功。
has(key)
判断指定的键是否在map中存在，返回一个布尔值
clear()
清楚所有元素没有返回值
get(key)
读取key对应的键值，如果找不到，返回undefined

13 遍历操作

keys()
返回键名遍历器
values()
返回键的值的遍历器
entries()
返回键值对的遍历器

14 对象的扩展

14.1对象属性的简洁表示法

ES6可以在对象的大括号中，直接写入变量和函数，作为对象的属性和方法。如果属性名与变量名相同，则可以简写，只写属性名即可。

 var name = "赫本"var obj = {name}//相当于var obj = {name:name}

 function fn(a,b){return {a,b};}var obj = fn("hello","word");console.log(obj);

14.2方法简写

在对象中，可以对方法进行简写

 let obj = {fn(){console.log("今晚九点，海岛集合。");}}//相等于let obj = {fn:function(){console.log("今晚九点，海岛集合。");}}

简写只适用于普通方法，构造函数不能简写

14.3属性名表达式

拆分的功能，如果是对象，则将对象中的所有属性遍历出来，如果是数组，则将所有元素遍历出来

 let a = {x:1,y:2}let b = {...a}console.log(b);let arr = [10,20,30];let c = {...arr}console.log(c["0"]);