🕢 🚖 🏉 Schauen Sie sich zunächst JavaScript-Datensätze und -Tupel an 👩🏿‍🏫 👴 👩🏻‍🎓

In diesem Beitrag werden wir kurz auf den ECMAScript-Vorschlag „Record & Tuple“ von Robin Rickard und Rick Button eingehen. Dieser Satz fügt JavaScript zwei Arten von zusammengesetzten primitiven Werten hinzu:

Datensätze (Datensätze) - die Version einfacher Objekte, unverändert und nach Wert verglichen;
Tupel - Die Version von Arrays, die unveränderlich ist und nach Wert verglichen wird.

Bild

1. Vergleich nach Wert

Jetzt vergleicht JavaScript nur primitive Datentypen nach Wert (d. H. Durch Betrachten des Inhalts), z. B. Zeichenfolgen:

> 'abc' === 'abc'
true

( ).

> {x: 1, y: 4} === {x: 1, y: 4}
false
> ['a', 'b'] === ['a', 'b']
false

«Record & Tuple» , .

, (#), — , :

> #{x: 1, y: 4} === #{x: 1, y: 4}
true

# , — , :

> #['a', 'b'] === #['a', 'b']
true

, , .

1.1. —

, , typeof:

> typeof #{x: 1, y: 4}
'record'
> typeof #['a', 'b']
'tuple'

1.2.

;
( ).

( ).

1.3.

> Record({x: 1, y: 4}) 
#{x: 1, y: 4}
> Tuple.from(['a', 'b'])
#['a', 'b']

: — (shallow). - ( ) , Record() Tuple.from() .

1.4.

> Object(#{x: 1, y: 4})
{x: 1, y: 4}
> Array.from(#['a', 'b'])
['a', 'b']

: — (shallow).

1.5.

const record = #{x: 1, y: 4};

//   
assert.equal(record.y, 4);

// 
const {x} = record;
assert.equal(x, 1);

//  spread-
assert.ok(#{...record, x: 3, z: 9} === #{x: 3, y: 4, z: 9});

1.6.

const tuple = #['a', 'b'];

//   
assert.equal(tuple[1], 'b');

//  ( — )
const [a] = tuple;
assert.equal(a, 'a');

//  spread-
assert.ok(#[...tuple, 'c'] === #['a', 'b', 'c']);

//  
assert.ok(tuple.with(0, 'x') === #['x', 'b']);

1.7. , , JavaScript — ?

, - (hash maps) (search trees), , . , . JavaScript , , :

();
().

1.8.

, , ===.
: - , , . .
: , ( ).
Map Set, , , Map Set.

2. : Set Map

2.1. Set

, , :

> [...new Set([#[3,4], #[3,4], #[5,-1], #[5,-1]])]
[#[3,4], #[5,-1]]

> [...new Set([[3,4], [3,4], [5,-1], [5,-1]])]
[[3,4], [3,4], [5,-1], [5,-1]]

2.2. Map

, Map ( WeakMap).

const m = new Map();
m.set({x: 1, y: 4}, 1);
m.set({x: 1, y: 4}, 2);
assert.equal(m.size, 2);

, : Map A .

const persons = [
  #{
    name: 'Eddie',
    address: #{
      street: '1313 Mockingbird Lane',
      city: 'Mockingbird Heights',
    },
  },
  #{
    name: 'Dawn',
    address: #{
      street: '1630 Revello Drive',
      city: 'Sunnydale',
    },
  },
  #{
    name: 'Herman',
    address: #{
      street: '1313 Mockingbird Lane',
      city: 'Mockingbird Heights',
    },
  },
  #{
    name: 'Joyce',
    address: #{
      street: '1630 Revello Drive',
      city: 'Sunnydale',
    },
  },
];

const addressToNames = new Map(); // (A)
for (const person of persons) {
  if (!addressToNames.has(person.address)) {
    addressToNames.set(person.address, new Set());
  }
  addressToNames.get(person.address).add(person.name);
}

assert.deepEqual(
  //  Map    -,
  //     assert.deepEqual().
  [...addressToNames],
  [
    [
      #{
        street: '1313 Mockingbird Lane',
        city: 'Mockingbird Heights',
      },
      new Set(['Eddie', 'Herman']),
    ],
    [
      #{
        street: '1630 Revello Drive',
        city: 'Sunnydale',
      },
      new Set(['Dawn', 'Joyce']),
    ],
  ]);

3. :

3.1. ,

Array.filter() ( B), , A.

const persons = [
  #{
    name: 'Eddie',
    address: #{
      street: '1313 Mockingbird Lane',
      city: 'Mockingbird Heights',
    },
  },
  #{
    name: 'Dawn',
    address: #{
      street: '1630 Revello Drive',
      city: 'Sunnydale',
    },
  },
  #{
    name: 'Herman',
    address: #{
      street: '1313 Mockingbird Lane',
      city: 'Mockingbird Heights',
    },
  },
  #{
    name: 'Joyce',
    address: #{
      street: '1630 Revello Drive',
      city: 'Sunnydale',
    },
  },
];

const address = #{ // (A)
  street: '1630 Revello Drive',
  city: 'Sunnydale',
};
assert.deepEqual(
  persons.filter(p => p.address === address), // (B)
  [
    #{
      name: 'Dawn',
      address: #{
        street: '1630 Revello Drive',
        city: 'Sunnydale',
      },
    },
    #{
      name: 'Joyce',
      address: #{
        street: '1630 Revello Drive',
        city: 'Sunnydale',
      },
    },
  ]);

3.2. ?

, (, previousData ), , -.

let previousData;
function displayData(data) {
  if (data === previousData) return;
  // ···
}

displayData(#['Hello', 'world']); //   
displayData(#['Hello', 'world']); //   return

3.3.

, . , Node.js assert deepEqual(). :

function invert(color) {
  return #{
    red: 255 - color.red,
    green: 255 - color.green,
    blue: 255 - color.blue,
  };
}
assert.ok(invert(#{red: 255, green: 153, blue: 51}) === #{red: 0, green: 102, blue: 204});

: , , , ( ).

4.

, # ( ) , , . :

const della = #{
  name: 'Della',
  children: #[
    #{
      name: 'Huey',
    },
    #{
      name: 'Dewey',
    },
    #{
      name: 'Louie',
    },
  ],
};

, . , , . , — , .

const della = Record({
  name: 'Della',
  children: Tuple([
    Record({
      name: 'Huey',
    }),
    Record({
      name: 'Dewey',
    }),
    Record({
      name: 'Louie',
    }),
  ]),
});

, JavaScript Tagged Collection- ( , ):

const della = Record!{
  name: 'Della',
  children: Tuple![
    Record!{
      name: 'Huey',
    },
    Record!{
      name: 'Dewey',
    },
    Record!{
      name: 'Louie',
    },
  ],
};