Data Structures in javaScript 2015

DATA STRUCTURES IN JAVASCRIPT 2015 Nir Kaufman

Nir Kaufman - AngularJS evangelist - International speaker - Guitar player Head of Angular Development @ 500Tech *Photoshop

https://www.amazon.com/Algorithms-Structures-Prentice-Hall- Automatic-Computation/dp/0130224189

WE NEED MORE. MAPS SETS LISTS STACKS QUEUES TREES

WE GOT A GREEN LIGHT! kangax.github.io/compat-table/es6

AGENDA Array improvements Introduction to Sets Introduction to Maps Next steps

Array.of() creates a new Array instance with a variable number of arguments

Array.of(50);  => [50] Array(50);  => [undefined X 50]

Array.from() creates a new Array instance from an array-like or iterable object.

function sum() {  const args = Array.prototype.slice.call(arguments);  return args.reduce((total, num) => total += num );  } function sum() {  const args = Array.from(arguments);  return args.reduce((total, num) => total += num);  }

function sum(...numbers) {  return numbers.reduce((total, num) => total += num)  } rest parameter

const numbers = Array.of(1,2,3,4,5,6);    numbers.find( num => num > 4 );    => 5 Array.find()

const colors = Array.of("red", "green");    colors.findIndex(color => color === "green" );    => 1 Array.findIndex()

const numbers = [1, 2, 3, 4, 5];    numbers.fill(1);    => [1, 1, 1, 1, 1] Array.fill()

const numbers = [1, 2, 3, 4 ];    numbers.copyWithin(2, 0);    => [1, 2, 1, 2] Array.copyWithin()

ENTER TYPED ARRAYS special-purpose arrays designed to work with numeric types. provide better performance for arithmetic operations

a memory location that can contains a specified number of bytes const buffer = new ArrayBuffer(8);    buffer.byteLength;    => 8 ArrayBuffer()

Interface for manipulating array buffers const buffer = new ArrayBuffer(8);  const view = new DataView(buffer);    view.setFloat32(2,8);  view.getFloat32(2);    // => 8 DataView()

new Int8Array(8);  new Int16Array(8);  new Int32Array(8);  new Float32Array(8);  new Float64Array(8);  new Uint8Array(8);  new Uint8ClampedArray(8); Type-Specific views

TEST YOURSELF How to create an array without duplicates? How to test for item existence? How to remove an item from an array?

const colors = new Set();    colors.add('Red');  colors.add('Green');  colors.add(‘Blue');   colors.size; // => 3 Create a Set and add element

const names = new Set();    names.add('nir');  names.add('chen');    names.has('nir');  names.delete('nir');  names.clear(); Test, delete and clear

const colors = new Set();    colors.add('Red');  colors.add('Green');    colors.forEach( (value, index) => {  console.log(`${value}, ${index}`)  }); Iterate over a Set

for (let item of set)    for (let item of set.keys())    for (let item of set.values())    for (let [key, value] of set.entries()) for of loop

let set = new Set(['Red', 'Green']);  let array = [...set];    console.log(array);    // => [ 'Red', 'Green'] Set - Array conversation

Create an ‘eliminateDuplicates’ function for arrays

function eliminateDuplicates(items){  return [...new Set(items)];  } solution

WEAK SETS Holds a weak reference to values. Can only contain Objects. Expose only: add, has and remove methods. Values can’t be access…

Create a WeakSet for for ‘tagging’ objects instances and track their existence without mutating them.

const map = Object.create(null);    map.position = 0;    if (map.position) {  // what are we checking?  } property existence or zero value?

const map = Object.create(null);    map[1] = 'Nir';  map['1'] = "Ran";    console.log(map[1]);  console.log(map['1']); two entries?

ORDERED LIST OF KEY-VALUE PAIRS

const roles = new Map();    const nir = {id: 1, name: "Nir"};  const ran = {id: 2, name: "ran"};    roles.set(nir, ['manager']);  roles.set(ran, ['user']);    roles.size;  // => 2 Create a Map and add element

const roles = new Map();    const nir = {id: 1, name: "Nir"};  const ran = {id: 2, name: "ran"};    roles.set(nir, ['manager']);  roles.set(ran, ['user']);    roles.has(nir);  roles.delete(nir);  roles.clear(); Test, delete and clear

for (let [key, value] of roles)     for (let key of roles.keys())     for (let value of roles.values())     for (let [key, value] of roles.entries()) for of loop

WEAK MAPS Holds a weak reference to key The key must be an object Expose get and set.

Create a WeakMap for mapping DOM elements to objects. when the element will destroyed, the data will freed

ES6 ENABLES SUBCLASSING OF BUILT-IN TYPES

QUEUE DEFINED enqueue dequeue peek isEmpty

class Queue extends Array {    enqueue(element) {  this.push(element)  }    dequeue() {  return this.shift();  }    peek() {  return this[0];  }    isEmpty() {  return this.length === 0;  }    }

egghead.io/courses/javascript-arrays-in-depth

THANK YOU! nir@500tech.com @nirkaufman il.linkedin.com/in/nirkaufman github.com/nirkaufman ANGULARJS IL meetup.com/Angular-AfterHours/ meetup.com/AngularJS-IL Nir Kaufman

Data Structures in javaScript 2015

More Related Content

What's hot

Viewers also liked

Similar to Data Structures in javaScript 2015

More from Nir Kaufman

Recently uploaded

In this document

Data Structures in javaScript 2015