Skip to content

Latest commit

 

History

History
576 lines (389 loc) · 11.7 KB

09.1.array.objects.md

File metadata and controls

576 lines (389 loc) · 11.7 KB
Raw
title
Fyrirlestur 9.1 – JavaScript array og objects

Fyrirlestur 9.1 – JavaScript array og objects

Vefforritun 1 — TÖL107G

Ólafur Sverrir Kjartansson, osk@hi.is

Samansöfn af gögnum

  • Til þess að geta skrifað forrit þurfum við yfirleitt leið til þess að hópa saman gögnum
  • Fylki (arrays) og hlutir (objects) leyfa okkur að gera það

Array

  • Fylki leyfa okkur að safna hlutum í raðaða lista
  • Búum til array með []
    • const list = [];
  • Nálgumst gildi innan fylkis með bracket notation
    • Nálgumst eftir index, byrjar frá 0
    • array[0] nálgast fyrsta stak í index 0, array[1] annað stak í index 1 o.s.fr.
  • length skilar fjölda staka í fylki, frá 0 til stærsta index

Aðeins um const

  • const eru block scoped fastar sem banna endurskilgreiningu á grunngildi
    • Getum bætt við fylki sem eru skilgreindir með const
    • Getum ekki breytt grunngildi úr array yfir í t.d. streng
  • Góður vani að skilgreina sem flestar breytur með const
    • Minnkar líkur á að við blöndum saman týpum
    • Að breyta ekki gildum breyta getur dregið úr böggum
const list = [1, 2, 3];

list.length; // 3

list[100] = 1; // má þó skilgr sem const

list.length; // 101

list = ''; // TypeError

Properties

  • Næstum öll JavaScript gildi hafa property (eigindi)
    • 'foo'.length, Math.min()
  • Öll nema null og undefined
  • Property nálgumst við með:
    • . – dot notation
    • ['foo'] – bracket notation
  • Notum yfirleitt dot notation nema:
    • Þegar við erum að vinna með property sem heita einhverju sem er óleyfilegt breytunafn
    • Þegar við notum breytu til að vísa í property
  • Property innihalda gildi en ef það er function köllum við það method 
const a = 'hello world';
a.length; // 11
a['length']; // 11
a.toUpperCase(); // "HELLO WORLD"

Array methods

const foo = [0, 1, 2];
foo[0]; // 0
foo.push('foo'); // 4
foo.join(', '); // '0, 1, 2, foo'
foo.pop(); // 'foo'

Object

  • Byrjum á að hugsa um object í JavaScript sem geymslu fyrir gildi þar sem gildi á sér nafn
  • Skilgreinum með {}, innan þess skilgreinum við eigindi hluts með heiti: gildi
    • Ef heiti er óleyfilegt breytunafn skilgreinum við sem streng
    • gildi eru öll leyfileg gildi
  • Eigindi eru oftast skilgreind eitt per línu til að auka lesanleika
    • Seinasta eigindi má hafa kommu á eftir sér, kallað trailing comma
  • Ef við biðjum um eigindi sem ekki er skilgreint á hlut fáum við undefined
  • Mjög ólíkt object í Java
const person = {
  name: 'Jón Jónsson',

  // óleyfilegt breytunafn
  'home-address': 'Aðalgata 1',
  age: 100,
  registered: true,

  // trailing comma
  interests: ['foo', 'bar', 'baz', ],
};
const a = {};
a['1%-foo']; // undefined
a.1%-foo; // SyntaxError
const key = 'bar';
a[key] = 'baz';
a[key]; // baz
a.bar; // baz

delete

  • delete er unary operator sem eyðir eigindi af hlut
  • Getum eytt gögnum með delete
  • Skilar boolean sem segir til um hvort eigindi hafi verið eytt

in

  • in er binary operator sem segir til um hvort eigindi sé á hlut
  • Skilar boolean
  • Ef við setjum property sem undefined eða null er það samt sem áður enn þá tengt hlutnum og in skilar true
const obj = { foo: 1 };
obj.foo; // 1
'foo' in obj; // true
obj.bar = 'foo'; // "foo"
obj['foo-bar'] = true; // true
delete obj.foo; // true
'foo' in obj; // false
obj; // { bar: "foo", foo-bar: true}
const foo = { x: 1, y: 2, z: 3 };
Object.keys(foo); // ['x', 'y', 'z']
Object.values(foo); // [1, 2, 3]
Object.freeze(foo);
delete foo.x; // false
// afritum foo yfir í bar
const bar = Object.assign({}, foo);
const baz = { a: true, x: 9 };

// afritum foo yfir í baz, yfirskrifar
Object.assign(baz, foo);

Array er hlutur

  • array er object!
  • Til að athuga hvort eitthvað sé í alvöru array getum við notað Array.isArray()
const a = [1, 2, 3];
typeof a; // "object"
Array.isArray(a); // true

Samanburður

  • Ef við berum saman hluti fáum við true þá og því aðeins að það séu nákvæmlega sömu hlutirnir
    • Bendi á sama hlutinn í minni
  • Að athuga hvort tveir hlutir líti eins út er kallað deep comparsion og er ekki stutt í JavaScript, aðeins shallow comparison
const foo = { a: 1 };
foo === { a: 1 }; // false
const bar = foo;
foo === bar; // true
const baz = { a: 1 };
foo === baz; // false;
// sama gildir fyrir fylki
const list = [1, 2, 3];
const list2 = [1, 2, 3];

list === list2; // false

Array og for lykkjur

  • Getum notað for lykkjur og haldið utan um index í fylkinu
  • for of lykkjur leyfa okkur að sækja hvert stak í röð án bókhalds
    • Getum þó ekki breytt gildinu
const items = [1, 2, 3, 4, 5];

for (let i = 0; i < items.length; i++) {
  items[i] *= 2;
}
items; // [2, 4, 6, 8, 10]
const items = [1, 2, 3, 4, 5];

for (const item of items) {
  console.log(item);
}
1, 2, 3, 4, 5

Rest parameters

  • Ef við skilgreinum parameter í falli með ... fyrir framan er það rest parameter
    • (parameter er skilgreiningin, argument er raun gildið sem sent er inn)
  • Inniheldur rest af argumentum þegar kallað er í fallið
  • Kemur í staðinn fyrir arguments hlut í föllum
    • Arrow functions hafa ekki arguments hlut en geta notað rest parameter
function foo(x, y, ...rest) {
  return x + y + rest.length;
}

foo(1, 2); // 3
foo(1, 2, 3, 4); // 5
function avg(...rest) {
  let sum = 0;
  for (const i of rest) {
    sum += i;
  }
  return sum / rest.length;
}

Spread operator

  • Ef við notum ... fyrir utan parameter í föllum kallast það spread operator
  • Dreifir úr breytu
  • Getum dreift úr string og array, ekki object, number og öðrum gildum
const list = [1, 2, 3];
console.log(...list); // 1 2 3

// sama og að hafa gert
console.log(1, 2, 3);
function sum(x, y, z) {
  return x + y + z;
}
sum(...list); // 6

// sama og að hafa gert
sum(1, 2, 3);
// getum gert í bland við önnur argument
avg(1, ...list, 10); // 3.4

[1, ...list, 10]; // [1, 1, 2, 3, 10]

// afritum fylki
[...list]; // [1, 2, 3]

Destructuring

  • Niðurbrot á fylkjum og hlutum í breytur
  • Virkar einsog maður myndi halda, dreifir úr hlutum í þær breytur sem maður vill
  • Getum skilgreint sjálfgefin gildi
  • Fáum undefined ef ekkert gildi passar, ekki villu
const list = [1, 2, 3];
const [a, , b] = list;
console.log(a, b); // 1 3
const obj = { foo: 1, bar: 'baz' };
const { foo, bar, baz } = obj;

// 1 "baz" undefined
console.log(foo, bar, baz);

Object eigindi

  • Þurfum ekki að skilgreina bæði lykil og gildi ef þau heita það sama
  • Getum skilgreint eigindi með segð ef við höfum innan []
  • Þurfum ekki að skilgreina föll á hlutum með function
const a = '1';
const b = '2';
const c = { a, b }; // { a: "1", b: "2" };
const d = {
  foo: 'bar',

  // eigindi úr segð
  [`foo${c.a}`]: 'bar',
};

d; // { foo: "bar", foo1 : "bar" }
const utils = {

  // í staðinn fyrir sum: function (x, y)
  sum(x, y) {
    return x + y;
  },
};

utils.sum(1, 2); // 3