ES6 새 배열 방법 및 객체 방법

(ES6에 추가된 배열 방법 및 객체 방법) 이 단원에서는 ES6에 추가된 배열 방법을 학습합니다.

find(); 
findIndex(); 
some(); 
every(); 

대상 방법

Object.assign();  
Object.keys();  ；
Object.values();  ；
Object.entries();  ；
Object.fromEntries(); entries ；

새로 추가된 그룹 방법find()는 개발에서 우리가 자주 필요로 하는 것이 그룹의 어떤 요소를 찾는 것이다.그럼 우리가 전에 배운 방법을 사용해라. 어떤 방법을 사용하든지.쓴 코드가 적지 않을 겁니다.그리고 성능의 낭비를 피하기 위해서는 적합한 원소를 찾은 후에 이 순환을 끝내야 한다.그러면 우리는 for 순환이나 for of로만 이 일을 할 수 있도록 제한한다.

var arr = [
    {
        name: "Tom",
        age: 18
    },
    {
        name: "Jerry",
        age: 19
    },
    {
        name: "Alex",
        age: 28
    }
]

let person;

for(let val of arr){
    if(val.name === "Jerry");
    person = val;
    break;
}

그러면 ES6에서 요구에 맞는 요소를 찾는 것은 매우 간단해질 것이다.우리는 find () 함수를 사용하여 수조에서 요구에 부합되는 요소를 찾을 수 있습니다.이 방법은 함수를 수신하는데, 함수의 매개 변수는 각각 item, index,array에 대응한다

arr.find((item, index, arr) => {
    if(item == "Jerry"){
        return true;
    }
    else {
        return false;
    }
    
})

물론 우리가 더욱 아름답게 쓸 수 있는 코드는 다음과 같다.
arr.find(item=>item=="Jerry")findIndex와 마찬가지로 때때로 우리는 순환 밖에서 어떤 그룹 요소의 인덱스 값을 얻으려고 하는데 ES6 역시 우리에게 의미가 더욱 뚜렷하고 더 좋은findIndex를 제공한다.
나는 지금 이름이 알렉스인 사람이 수조에 있는 index를 갖고 싶다.그러면findIndex를 사용하면 이렇게 쓸 수 있습니다.

const index = arr.findIndex(item => name == "Alex");

some some 방법은 명지의 뜻을 보면 수조에 특정한 원소가 조건을 충족시키는지 확인하기 위한 것이다.나의 현재 수요는 수조원소 중 한 사람의 나이가 20세 이상인지 알고 싶다는 것이다.썸 방법을 사용하면 이 일을 신속하게 할 수 있다.

arr.some(item => item.age > 20) //true

이 방법은 원소 중 어떤 원소가 조건을 충족시키면true로 되돌아옵니다
every every 방법은some 방법에 대한 것입니다. 이 방법은 수조에 있는 모든 요소가 조건을 충족시켜서true로 되돌아와야 합니다. 조건이 충족되지 않으면false로 되돌아오고 순환을 종료합니다.
지금 다들 17살 이상인지 확인하고 싶어요.

arr.every(item => item.age>17); //true

새로 추가된 객체 메서드 Object.assign () 이 방법은 주로 한 대상의 속성 값을 다른 대상으로 복사하는 데 사용됩니다.여러 매개변수를 사용할 수 있습니다.이 메서드는 첫 번째 객체의 속성을 직접 수정합니다.복사된 대상을 되돌려주는 데는 이 방법이 얕은 복사를 실현하는 것이므로 주의해야 한다.

var obj1 = {
        name: 'first',
        desc: 'second'
    }

var obj2 = {
        color: 'red',
        hop: 'go'
    }

var obj3 = {
        background: 'skyblue'
    }

var obj4 = Object.assign(obj1, obj2, obj3);
console.log(obj4)   
/*
background: "skyblue"
color: "red"
desc: "second"
hop: "go"
name: "first"*/
console.log(obj1)
/*
background: "skyblue"
color: "red"
desc: "second"
hop: "go"
name: "first"*/

Object.keys(); 이 대상의 모든 속성 이름 그룹을 되돌려주기;

var obj1 = {
        name: 'first',
        desc: 'second'
    }

console.log(Object.keys(obj1))

/*
0: "name"
1: "desc"
*/

Object.values(); 이 대상의 모든 속성 값의 그룹을 되돌려주기;
var obj1 = { name: 'first', desc: 'second' }

console.log(Object.values(obj1))

/*
0: "first"
1: "second"
*/

Object.entries () 가 대상의 키 값 대수 그룹을 되돌려줍니다.

 var obj1 = {
            name: 'first',
            desc: 'second'
        }
    
console.log(Object.entries(obj1))

/*
["name", "first"],
["desc", "second"]
*/

수조도 대상에 속하고 비교적 특수한 대상에 속하기 때문에 수조 자체는entries 방법을 계승했다.따라서 이 방법은 forof와 수조를 결합하여 forof가 수조를 순환시킬 때도 index값을 얻을 수 있다.

var arr = [" ", " ", " "];

for([index, value] of arr.entries()) {
    console.log(" ", index);
    console.log(" ", value);
}

image
Object.fromEntries(); 이 방법은 entries 방법의 역연산입니다. 이 방법을 지원하는 브라우저가 많지 않습니다.

var obj = Object.fromEntries([
        ["property1", "value1"],
        ["property2", "value2"],
    ])

console.log(obj);

image는 Object 원형 대상을 추가하는 방법으로polyfill을 실현할 수 있습니다.

Object.defineProperty(Object.prototype, "fromEntries", {
        enumerable: false,
        value(arr) {
            var obj = {};
            for(var i = 0; i < arr.length; i++) {
                obj[arr[i][0]] = arr[i][1]
            }
            return obj;
        },
        configurable: true,
        writable: true
    })

전재 대상:https://juejin.im/post/5c6ea15151882562914ed501