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"]);

總結

以上是生活随笔為你收集整理的ES6数组得扩展与对象的扩展的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。