2016-10-13 3 views
2

배열을 es6의 객체로 변환하는 더 작은 방법이 있는지 확인하려고합니다.Object to es6 javascript

function (values) // values being an array. 
{ 
    let [videos, video_count, page] = values; 
    let data = { videos, video_count, page }; 
    someFunctions(data); 
    moreFunctions(data); 
} 

를하지만, 함수, let [videos....] 부분의 첫 번째 줄을 잘라 수 있는지 궁금 해서요 : (나는 크로스 브라우저에 대해 걱정할 필요가 없습니다)

나는 현재하고 있습니다. 그리고 어떻게 든 인라인 변환합니다.

나는 mozilla: Destructuring assignment을 통해 읽었지만 거기에서 볼 수 없었습니다. (하지만 내가 잘못 이해했을 수도 있음) 나는 실제로 충분히 이해할만큼 영리하지 않다. ECMA: ES6 Spec.

나는 불가능하다고 생각하며 위의 내용이 이미 가장 간단하다. 그러나 내가 만들지 않고 도망 칠 수 있다면 videos, video_count & page tmp 변수가 더 행복 할 것입니다.

+0

그것을 옛날 방식 할 항상 수 {비디오 : 값 [0], VIDEO_COUNT : 값 [1], 페이지 : 값 [2]}; ' –

+0

그것은 내가 생각했던 것이었지만 es6 방법이 있는지보고 싶었습니다. 내가 원했던 거의 모든 것을 할 수있는 방법이있는 것처럼 보였으므로 더 많은 틈새 유스 케이스를 발견했다. – WORMSS

+0

글쎄, 당신이 당신의 재산 가치의 이름을 지어야하든간에, 그들은 아무데도 나오지 않을 것이다. –

답변

6

매개 변수는 비록 destructuring처럼 읽을 수 없습니다입니다
function myFunc([ videos, video_count, page ]) 
{ 
    let data = { videos, video_count, page }; 
    someFunctions(data); 
    moreFunctions(data); 
} 

myFunc(values); 

많이 하네. 데이터 추상화의, 그래서 여기에 당신은 열중 어떻게 든 코드가 짧아에 보이는이 기술


// basic abstraction 
 
const ratio = (n, d) => ({n, d}); 
 
const numer = ({n}) => n; 
 
const denom = ({d}) => d; 
 

 
// compound abstraction using selectors 
 
const ratioAdd = (x,y) => ratio(
 
    numer(x) * denom(y) + numer(y) * denom(x), 
 
    denom(x) * denom(y) 
 
); 
 

 
// or skip selectors if you're feeling lazy 
 
const printRatio = ({n,d}) => `${n}/${d}`; 
 

 
console.log(printRatio(ratioAdd(ratio(1,3), ratio(1,4)))); //= 7/12
를 사용하여 당신은 간다. 이 경우 은 "짧게"은 먼저 더 길게 만드는 것을 의미합니다.

// Goal: 
obuild(keys,values) //=> ourObject 

일반 절차 zip, assignobuild 우리가 필요한 것을 우리에게 제공해야합니다. 이것은 @ CodingIntigue의 대답보다 훨씬 뛰어납니다. 모든 작업을 수행하는 하나의 큰 기능이 아니기 때문입니다. 이들을 분리하여 보관하면 복잡성을 줄이고 가독성과 재사용 성을 높일 수 있습니다.`VAR 데이터 =

// zip :: [a] -> [b] -> [[a,b]] 
 
const zip = ([x,...xs], [y,...ys]) => { 
 
    if (x === undefined || y === undefined) 
 
    return []; 
 
    else 
 
    return [[x,y], ...zip(xs,ys)]; 
 
} 
 

 
// assign :: (Object{k:v}, [k,v]) -> Object{k:v} 
 
const assign = (o, [k,v]) => Object.assign(o, {[k]: v}); 
 

 
// obuild :: ([k], [v]) -> Object{k:v} 
 
const obuild = (keys, values) => zip(keys, values).reduce(assign, {}); 
 

 
let keys = ['a', 'b', 'c']; 
 
let values = [1, 2, 3]; 
 

 
console.log(obuild(keys,values)); 
 
// { 'a': 1, 'b': 2, 'c': 3 }

+0

이것은 여전히 ​​tmp 변수로 끝나나요? '가치 '가 사라졌지 만, 내가 제거하려고했던 세 가지가 여전히 존재합니다. – WORMSS

+0

@WORMSS 당신을 위해 편집했습니다 – naomik

+0

* 이것은 @ CodingIntigue의 대답 *보다 월등히 우수합니다 * - 아야. 당신은 틀린 것은 아니지만 훨씬 더 읽기 쉽습니다. – CodingIntrigue

3

주어진 속성과 이름을 사용하면 원하는 결과를 얻을 수있는 가장 짧은 방법 일 것입니다.

그러나 더 많은 필드가있는 경우 반복을 피하기 위해 reduce을 사용할 수 있습니다.

let data = values.reduce((prev, val, index) => Object.assign(prev, {[["videos", "video_count", "page"][index]]: val}), {}); 

당신은 일반적인 기능에 밖으로 그 다음 추상적 인 수 : 당신은 기능을 마우스 오른쪽 destructure 수

const values = ["test1","test2","test3"]; 
 
const mapArrayToObject = (array, fields) => 
 
    array.reduce(
 
    (prev, val, index) => Object.assign(prev, { [fields[index]]: val }), 
 
    {} 
 
); 
 
const data = mapArrayToObject(values, ["videos", "video_count", "page"]); 
 
console.log(data);