Redux チュートリアルで必要になったES6記法 immutableに配列やオブジェクトを変更する

Tweet

// オブジェクトを引数として受けて、それを展開する書き方
// Propertyがvalueとnameのものを展開して、valueとnameで受ける
const testFunction = ({value,name}) => (value + name)

const testObject = {
	value: "a",
	name: "b",
}

console.log(testFunction(testObject));
console.log("tesf")

//リストに新たな項目を追加する方法
const list =[0,1,2,3];

const addList = (list) => {
	return [...list,"add"];
}

console.log(addList(list));

// slice(n)はn番目を含んでそれ以降の配列を返す
var newList = list.slice(2)
//console.log(newList);

// slice(0,n)は0から、n番目を含まない、その範囲の配列を返す
var newList = list.slice(0,2)
//console.log(newList);

// slice(m,n)はmから、n番目を含まない、その範囲の配列を返す
var newList = list.slice(1,2)
//console.log(newList);

// index 番目(0から始まるやつで) の配列だけを削除するFn
const removeCounter = (list, index) => {
  // Old way:
  //return list
  //  .slice(0, index)
  //  .concat(list.slice(index + 1));

  // ES6 way:
  return [
    ...list.slice(0, index),
    ...list.slice(index + 1)
  ];
};

console.log(removeCounter(list,1))

See the Pen arrow function object by nakanishi (@nakanishi) on CodePen.

//オブジェクトにオブジェクトをマージする場合の書き方
const addObject = (lastObject, addOne) => {
	//からのオブジェクト{}に、どんどん上書きしていく
	return Object.assign({}, lastObject, addOne)
}

const lastObject = {
	name: "name",
	value: "value"
}

const add1 = {
	name: "name2",
	value: "value2"
}

const add2 = {
	newProp: "newProp"
}

//同じプロパティがあれば、上書きされる
var show = addObject(lastObject, add1);
//console.log(show);

//同じプロパティがなければ、新たにプロパティが作られる
var show = addObject(lastObject, add2);
console.log(show);

See the Pen JyjypY by nakanishi (@nakanishi) on CodePen.

function returnInt(element) {
  return parseInt(element, 10);
}

['1', '2', '3'].map(returnInt); // [1, 2, 3]
// Actual result is an array of numbers (as expected)

// Same as above, but using the concise arrow function syntax
['1', '2', '3'].map( str => parseInt(str) );