YuShu Hsiao

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取代相同屬性名稱的資料