コードチェックによるES 6オブジェクトと配列構文(展開演算子、非構造化)
41373 ワード
const name = 'mike';
const obj = {
age: 21,
name,
// 새로 만들려는 객체의 속성값 일부가 이미 변수로 존재하면 간단하게 변수 이름만 적어 준다.
getName() { return this.name },
//속성값이 함수이면 function 키워드 없이 함수명만 적어도 된다.
};
function makePerson1 (age, name) {
return { age:age, name: name };
}
function makePerson2 (age, name) {
return { age, name }
}
const name = 'mike';
const age = 21;
console.log('name =', name, ', age =', age); // name = mike, age = 21
console.log({ name, age }); // { name: 'mike', age: 21 }
function makeObject1(key, value) {
const obj = {};
obj[key] = value;
return obj;
}
function makeObject2(key, value){
return { [key]: value };
}
計算されたアトリビュート名を使用して、構成部品の臍帯値を変更します.class MyComponent extends React.Component {
state = {
count1: 0,
count2: 0,
count3: 0,
};
// ...
onClick = index => {
const key = `count${index}`;
const value = this.state[key];
this.setState({ [key]: value + 1 });
};
}
// 리액트 클래스 문법 공부 시 다시 확인하기.
Math.max(1, 3, 7, 9); // 동적으로 매개변수 전달 X
const numbers = [1, 3, 7, 9];
Math.max(...numbers); // 동적으로 매개변수 전달 O
// 9 , 일반 배열을 Math.max에 넣으면 NaN이 출력
△書くのが面倒で、操作性も悪い.
const numbers = [-1, 5, 11, 3];
Math.max.apply(null, numbers); // 11
//가독성이 떨어지므로, rest파라미터를 사용하는 Math.max(...numbers)를 사용하자.
24.展開演算子を使用して配列とオブジェクトをコピーするconst arr1 = [1, 2, 3];
const obj1 = { age: 23, name: 'mike' };
const arr2 = [...arr1];
const obj2 = { ...obj1 };
arr2.push(4); // [1, 2, 3, 4] 원래 배열 영향 X
obj2.age = 80; // { age; 80, name: 'mike' } 원래 객체 영향X
[1, ...[2, 3], 4]; // [1, 2, 3, 4]
new Date (...[2020, 6, 24]); // 2020년 6월 24일
const obj1 = { age: 21, name: 'mike'};
const obj2 = { hobby: 'soccer' };
const obj3 = { ...obj1, ...obj2 }
console.log(obj3); // { age: 21, name: 'mike', hobby: 'soccer' }
const obj1 = { x: 1, x: 2, y: 'a' }; // {x: 2, y: 'a'}
const obj2 = { ...obj1, y: 'b' }; // { x: 2, y: 'b'}
28.const非構造化の単純コードconst arr = [1, 2];
const [a, b] = arr;
console.log(a); // 1
console.log(b); // 2
let a, b;
[a, b] = [1, 2];
const arr= [1];
const [a= 10, b= 20] = arr
console.log(a); // 1
console.log(b); // 20
最初の変数の属性値が存在するため、属性値はそのまま割り当てられます.2番目の変数の属性値は定義されていないため、デフォルト値20が割り当てられます.
31.非構造化配列を用いて2つの変数の値を交換する
let a = 1;
let b = 2;
[a, b] = [b, a];
console.log(a); // 2
console.log(b); // 1
32.カンマを使用して特定の属性値をスキップconst arr = [1, 2, 3];
const [a, , c] = arr;
console.log(a); // 1
console.log(c); // 3
残りの値const arr = [1, 2, 3];
const [first, ...rest1] = arr;
console.log(rest1); // [2, 3]
const [a, b, c, ...rest2] = arr;
console.log(rest2); // []
const obj = { age: 21, name: 'mike' }
const { age, name } = obj;
console.log(age); // 21
console.log(name); // mike
35.客体非構造化では、属性名が重要である.const obj = { age: 21, name: 'mike' }
const { age, name } = obj;
const { name, age } = obj;
const { a, b } = obj;
オブジェクトの非構造化では,順序は無意味であるため,a,bの結果値は同じである.オブジェクト非構造化における別名
const obj = { age: 21, name: 'mike' }
const { age: theAge, name } = obj;
console.log(theAge); // 21
console.log(age); // 참조 에러
const obj = { age: undefined, name: null, grade: 'A' }
const { age = 0, name = 'noName', grade = 'F' } = obj;
console.log(age); // 0
console.log(name); // null
console.log(grade); // A
ageはundefinedなので、デフォルト値に入ります.nameのプロパティ値はnullなので、デフォルト値は含まれません.
const obj = { age: undefined, name: 'mike' }
const { age: theAge = 0, name } = obj;
console.log(theAge); // 0
function getDefaultAge() {
console.log('hello');
return 0;
}
const obj = { age: 21, grade: 'A' };
const { age= getDefaultAge(), grade } = obj; // hello출력 되지 않음.
console.log(age); // 21
40.オブジェクトの非構造化において、個別のオブジェクトとして他の属性を作成します.const obj = { age: 21, name: 'mike', grade: 'A' }
const { age, ...rest } = obj;
console.log(rest); // { name: 'mike', grade: 'A' }
const people = [{ age: 21, name: 'mike' }, { age: 51, name: 'sara'}]
for (const { age, name } of people )
// ...
const obj = { name: 'mike', mother: { name: 'sara' } };
const {
name,
mother: { name: motherName },
} = obj;
console.log(name); // mike
console.log(motherName); // sara
console.log(mother); // 참조 에러
const [{ prop: x } = { prop: 123 } ] = [];
console.log(x); // 123
const [{ prop: x } = { prop: 123 } ] = [{}];
console.log(x); // undefined
最初のコードの{prop:x}は、配列の最初の要素を指します.{prop:123}はデフォルト値を定義します.最初の要素が存在しないため、デフォルト値が割り当てられます.2番目の配列の最初の要素が存在するため、デフォルト値は指定されません.最初の要素にはpropという属性名が存在しないため、xにundefinedを指定します.
const index = 1;
const { [`key${index}`]: valueOftheIndex } = { key1: 123 };
console.log(valueOftheIndex); // 123
const obj = {};
const arr = [];
({ foo: obj.prop, bar: arr[0] } = { foo: 123, bar: true });
console.log(obj); // {prop: 123}
console.log(arr); // [true]
Reference
この問題について(コードチェックによるES 6オブジェクトと配列構文(展開演算子、非構造化)), 我々は、より多くの情報をここで見つけました https://velog.io/@findmytrueself/코드를-통해-확인하는-ES6-객체와-배열-문법-전개연산자-비구조화テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol