記錄一些在Javascript中Array的操作
1.Filter
2.map
3.Object.assign
1.
想要在物件陣列中移除掉其中的物件(使用filter),陣列物件的宣告如下:
filter用法如下:
export class AppComponent {
//陣列也可以這樣宣告
data:Array<any>;
//陣列初始化
todoItems:TodoItem[] = [{
id:1,
value:'ToDo Item NO.1',
done:false
},
{
id:2,
value:'ToDo Item NO.2',
done:true
},
{
id:3,
value:'ToDo Item NO.3',
done:false
}];
//新增To Do List
addTodo(text:string){
this.todoItems.push({
id:(new Date()).getTime(),
value:text,
done:false
});
}
//Remove ToDoList,使用JS的filter來過濾掉陣列中要刪除的element
delTodo(id:number){
this.todoItems = this.todoItems.filter(function(ele){
return ele.id != id;
});
}
}
2.map
The map()
method creates a new array with the results of calling a provided function on every element in the calling array.
讓一個陣列 mapping 出另外一個陣列,最後會return 出一個全新的陣列,
回傳的陣列內物件會呼叫使用者定義好的function
EX:
var array1 = [1, 4, 9, 16];
// pass a function to map
const map1 = array1.map((ele) => ele * 2);
console.log(map1);
// expected output: Array [2, 8, 18, 32]
使用prototype實作map
var newCourseList = [{
"id": 511021,
"title": "React for Beginners",
"coverPng": "https://res.cloudinary.com/dohtkyi84/image/upload/v1481226146/react-cover.png",
"rating": 5
},
{
"id": 511022,
"title": "Vue2 for Beginners",
"coverPng": "https://res.cloudinary.com/dohtkyi84/image/upload/v1481226146/react-cover.png",
"rating": 5
},
{
"id": 511023,
"title": "Angular2 for Beginners",
"coverPng": "https://res.cloudinary.com/dohtkyi84/image/upload/v1481226146/react-cover.png",
"rating": 5
},
{
"id": 511024,
"title": "Webpack for Beginners",
"coverPng": "https://res.cloudinary.com/dohtkyi84/image/upload/v1481226146/react-cover.png",
"rating": 4
}
],
idAndTitle = [];
Array.prototype.mapH20 = function(callback) {
var newArray = [];
// 這裡的this 是Array
this.forEach((item) => {
newArray.push(callback(item));
});
return newArray;
};
idAndTitle = newCourseList.mapH20((item) => {
return {
id: item.id,
title: item.title
};
});
idAndTitle.forEach(item => {
console.log(item);
});
3.
Object.assign
data = [
{
id: '1',
title: 'Google',
'href-link': 'http://www.google.com.tw',
date: '2018/05/10',
content: '<p>Google Content</p>'
},
{
id: '2',
title: 'Facebook',
'href-link': 'http://www.facebook.com.tw',
date: '2018/05/11',
content: '<p>Facebook Content</p>'
}
];
EditData($event: any) {
this.data = this.data.map(item => {
if (item.id == $event.id) {
return Object.assign({}, item, $event);
}
return item;
});
透過Object.assign 產生一個新的物件
Object.assign(target, ...sources)
回傳的是{},裡面的值是先塞入item 在以$event取代相同屬性名稱的資料