Data Structures in javaScript 2015
-
Upload
nir-kaufman -
Category
Technology
-
view
1.071 -
download
0
Transcript of Data Structures in javaScript 2015
![Page 1: Data Structures in javaScript 2015](https://reader033.fdocuments.us/reader033/viewer/2022052915/587776ca1a28ab5b568b6eb9/html5/thumbnails/1.jpg)
DATA STRUCTURES IN JAVASCRIPT 2015
Nir Kaufman
![Page 2: Data Structures in javaScript 2015](https://reader033.fdocuments.us/reader033/viewer/2022052915/587776ca1a28ab5b568b6eb9/html5/thumbnails/2.jpg)
Nir Kaufman
- AngularJS evangelist - International speaker - Guitar player
Head of Angular Development @ 500Tech
*Photoshop
![Page 3: Data Structures in javaScript 2015](https://reader033.fdocuments.us/reader033/viewer/2022052915/587776ca1a28ab5b568b6eb9/html5/thumbnails/3.jpg)
![Page 4: Data Structures in javaScript 2015](https://reader033.fdocuments.us/reader033/viewer/2022052915/587776ca1a28ab5b568b6eb9/html5/thumbnails/4.jpg)
![Page 5: Data Structures in javaScript 2015](https://reader033.fdocuments.us/reader033/viewer/2022052915/587776ca1a28ab5b568b6eb9/html5/thumbnails/5.jpg)
INTRO
![Page 6: Data Structures in javaScript 2015](https://reader033.fdocuments.us/reader033/viewer/2022052915/587776ca1a28ab5b568b6eb9/html5/thumbnails/6.jpg)
DATA STRUCTURES ARE IMPORTANT
![Page 7: Data Structures in javaScript 2015](https://reader033.fdocuments.us/reader033/viewer/2022052915/587776ca1a28ab5b568b6eb9/html5/thumbnails/7.jpg)
https://www.amazon.com/Algorithms-Structures-Prentice-Hall-Automatic-Computation/dp/0130224189
![Page 8: Data Structures in javaScript 2015](https://reader033.fdocuments.us/reader033/viewer/2022052915/587776ca1a28ab5b568b6eb9/html5/thumbnails/8.jpg)
JAVASCRIPT GOT JUST ARRAYS…
![Page 9: Data Structures in javaScript 2015](https://reader033.fdocuments.us/reader033/viewer/2022052915/587776ca1a28ab5b568b6eb9/html5/thumbnails/9.jpg)
WE NEED MORE.
MAPSSETS
LISTS
STACKSQUEUESTREES
![Page 10: Data Structures in javaScript 2015](https://reader033.fdocuments.us/reader033/viewer/2022052915/587776ca1a28ab5b568b6eb9/html5/thumbnails/10.jpg)
2015
![Page 12: Data Structures in javaScript 2015](https://reader033.fdocuments.us/reader033/viewer/2022052915/587776ca1a28ab5b568b6eb9/html5/thumbnails/12.jpg)
AGENDAArray improvements
Introduction to Sets
Introduction to Maps
Next steps
![Page 13: Data Structures in javaScript 2015](https://reader033.fdocuments.us/reader033/viewer/2022052915/587776ca1a28ab5b568b6eb9/html5/thumbnails/13.jpg)
CODE? OR BORED?
![Page 14: Data Structures in javaScript 2015](https://reader033.fdocuments.us/reader033/viewer/2022052915/587776ca1a28ab5b568b6eb9/html5/thumbnails/14.jpg)
ENTER ARRAYS
![Page 15: Data Structures in javaScript 2015](https://reader033.fdocuments.us/reader033/viewer/2022052915/587776ca1a28ab5b568b6eb9/html5/thumbnails/15.jpg)
Array.of()creates a new Array instance with a variable number of arguments
![Page 16: Data Structures in javaScript 2015](https://reader033.fdocuments.us/reader033/viewer/2022052915/587776ca1a28ab5b568b6eb9/html5/thumbnails/16.jpg)
Array.of(50); => [50]
Array(50); => [undefined X 50]
![Page 17: Data Structures in javaScript 2015](https://reader033.fdocuments.us/reader033/viewer/2022052915/587776ca1a28ab5b568b6eb9/html5/thumbnails/17.jpg)
Array.from()creates a new Array instance from an array-like or iterable object.
![Page 18: Data Structures in javaScript 2015](https://reader033.fdocuments.us/reader033/viewer/2022052915/587776ca1a28ab5b568b6eb9/html5/thumbnails/18.jpg)
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); }
![Page 19: Data Structures in javaScript 2015](https://reader033.fdocuments.us/reader033/viewer/2022052915/587776ca1a28ab5b568b6eb9/html5/thumbnails/19.jpg)
function sum(...numbers) { return numbers.reduce((total, num) => total += num) }
rest parameter
![Page 20: Data Structures in javaScript 2015](https://reader033.fdocuments.us/reader033/viewer/2022052915/587776ca1a28ab5b568b6eb9/html5/thumbnails/20.jpg)
const numbers = Array.of(1,2,3,4,5,6); numbers.find( num => num > 4 ); => 5
Array.find()
![Page 21: Data Structures in javaScript 2015](https://reader033.fdocuments.us/reader033/viewer/2022052915/587776ca1a28ab5b568b6eb9/html5/thumbnails/21.jpg)
const colors = Array.of("red", "green"); colors.findIndex(color => color === "green" ); => 1
Array.findIndex()
![Page 22: Data Structures in javaScript 2015](https://reader033.fdocuments.us/reader033/viewer/2022052915/587776ca1a28ab5b568b6eb9/html5/thumbnails/22.jpg)
const numbers = [1, 2, 3, 4, 5]; numbers.fill(1); => [1, 1, 1, 1, 1]
Array.fill()
![Page 23: Data Structures in javaScript 2015](https://reader033.fdocuments.us/reader033/viewer/2022052915/587776ca1a28ab5b568b6eb9/html5/thumbnails/23.jpg)
const numbers = [1, 2, 3, 4 ]; numbers.copyWithin(2, 0); => [1, 2, 1, 2]
Array.copyWithin()
![Page 24: Data Structures in javaScript 2015](https://reader033.fdocuments.us/reader033/viewer/2022052915/587776ca1a28ab5b568b6eb9/html5/thumbnails/24.jpg)
USE CASE??
![Page 25: Data Structures in javaScript 2015](https://reader033.fdocuments.us/reader033/viewer/2022052915/587776ca1a28ab5b568b6eb9/html5/thumbnails/25.jpg)
ENTER TYPED ARRAYSspecial-purpose arrays designed to work with
numeric types. provide better performance
for arithmetic operations
![Page 26: Data Structures in javaScript 2015](https://reader033.fdocuments.us/reader033/viewer/2022052915/587776ca1a28ab5b568b6eb9/html5/thumbnails/26.jpg)
a memory location that can contains a specified number of bytes
const buffer = new ArrayBuffer(8); buffer.byteLength; => 8
ArrayBuffer()
![Page 27: Data Structures in javaScript 2015](https://reader033.fdocuments.us/reader033/viewer/2022052915/587776ca1a28ab5b568b6eb9/html5/thumbnails/27.jpg)
Interface for manipulating array buffers
const buffer = new ArrayBuffer(8); const view = new DataView(buffer); view.setFloat32(2,8); view.getFloat32(2); // => 8
DataView()
![Page 28: Data Structures in javaScript 2015](https://reader033.fdocuments.us/reader033/viewer/2022052915/587776ca1a28ab5b568b6eb9/html5/thumbnails/28.jpg)
new Int8Array(8); new Int16Array(8); new Int32Array(8); new Float32Array(8); new Float64Array(8); new Uint8Array(8); new Uint8ClampedArray(8);
Type-Specific views
![Page 29: Data Structures in javaScript 2015](https://reader033.fdocuments.us/reader033/viewer/2022052915/587776ca1a28ab5b568b6eb9/html5/thumbnails/29.jpg)
ARRAYS ARE POWERFUL
![Page 30: Data Structures in javaScript 2015](https://reader033.fdocuments.us/reader033/viewer/2022052915/587776ca1a28ab5b568b6eb9/html5/thumbnails/30.jpg)
DO WE NEED MORE?
![Page 31: Data Structures in javaScript 2015](https://reader033.fdocuments.us/reader033/viewer/2022052915/587776ca1a28ab5b568b6eb9/html5/thumbnails/31.jpg)
![Page 32: Data Structures in javaScript 2015](https://reader033.fdocuments.us/reader033/viewer/2022052915/587776ca1a28ab5b568b6eb9/html5/thumbnails/32.jpg)
TEST YOURSELFHow to create an array without duplicates?
How to test for item existence?
How to remove an item from an array?
![Page 33: Data Structures in javaScript 2015](https://reader033.fdocuments.us/reader033/viewer/2022052915/587776ca1a28ab5b568b6eb9/html5/thumbnails/33.jpg)
ENTER SETS
![Page 34: Data Structures in javaScript 2015](https://reader033.fdocuments.us/reader033/viewer/2022052915/587776ca1a28ab5b568b6eb9/html5/thumbnails/34.jpg)
ORDERED LIST OF UNIQUE VALUES
![Page 35: Data Structures in javaScript 2015](https://reader033.fdocuments.us/reader033/viewer/2022052915/587776ca1a28ab5b568b6eb9/html5/thumbnails/35.jpg)
const colors = new Set(); colors.add('Red'); colors.add('Green'); colors.add(‘Blue');colors.size; // => 3
Create a Set and add element
![Page 36: Data Structures in javaScript 2015](https://reader033.fdocuments.us/reader033/viewer/2022052915/587776ca1a28ab5b568b6eb9/html5/thumbnails/36.jpg)
const names = new Set(); names.add('nir'); names.add('chen'); names.has('nir'); names.delete('nir'); names.clear();
Test, delete and clear
![Page 37: Data Structures in javaScript 2015](https://reader033.fdocuments.us/reader033/viewer/2022052915/587776ca1a28ab5b568b6eb9/html5/thumbnails/37.jpg)
const colors = new Set(); colors.add('Red'); colors.add('Green'); colors.forEach( (value, index) => { console.log(`${value}, ${index}`) });
Iterate over a Set
![Page 38: Data Structures in javaScript 2015](https://reader033.fdocuments.us/reader033/viewer/2022052915/587776ca1a28ab5b568b6eb9/html5/thumbnails/38.jpg)
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
![Page 39: Data Structures in javaScript 2015](https://reader033.fdocuments.us/reader033/viewer/2022052915/587776ca1a28ab5b568b6eb9/html5/thumbnails/39.jpg)
let set = new Set(['Red', 'Green']); let array = [...set]; console.log(array); // => [ 'Red', 'Green']
Set - Array conversation
![Page 40: Data Structures in javaScript 2015](https://reader033.fdocuments.us/reader033/viewer/2022052915/587776ca1a28ab5b568b6eb9/html5/thumbnails/40.jpg)
![Page 41: Data Structures in javaScript 2015](https://reader033.fdocuments.us/reader033/viewer/2022052915/587776ca1a28ab5b568b6eb9/html5/thumbnails/41.jpg)
Create an ‘eliminateDuplicates’
function for arrays
![Page 42: Data Structures in javaScript 2015](https://reader033.fdocuments.us/reader033/viewer/2022052915/587776ca1a28ab5b568b6eb9/html5/thumbnails/42.jpg)
function eliminateDuplicates(items){ return [...new Set(items)]; }
solution
![Page 43: Data Structures in javaScript 2015](https://reader033.fdocuments.us/reader033/viewer/2022052915/587776ca1a28ab5b568b6eb9/html5/thumbnails/43.jpg)
WEAK SETSHolds a weak reference to values.
Can only contain Objects.
Expose only: add, has and remove methods.
Values can’t be access…
![Page 44: Data Structures in javaScript 2015](https://reader033.fdocuments.us/reader033/viewer/2022052915/587776ca1a28ab5b568b6eb9/html5/thumbnails/44.jpg)
USE CASE??
![Page 45: Data Structures in javaScript 2015](https://reader033.fdocuments.us/reader033/viewer/2022052915/587776ca1a28ab5b568b6eb9/html5/thumbnails/45.jpg)
Create a WeakSet for for ‘tagging’ objects
instances and track their existence without
mutating them.
![Page 46: Data Structures in javaScript 2015](https://reader033.fdocuments.us/reader033/viewer/2022052915/587776ca1a28ab5b568b6eb9/html5/thumbnails/46.jpg)
![Page 47: Data Structures in javaScript 2015](https://reader033.fdocuments.us/reader033/viewer/2022052915/587776ca1a28ab5b568b6eb9/html5/thumbnails/47.jpg)
const map = Object.create(null); map.position = 0; if (map.position) { // what are we checking? }
property existence or zero value?
![Page 48: Data Structures in javaScript 2015](https://reader033.fdocuments.us/reader033/viewer/2022052915/587776ca1a28ab5b568b6eb9/html5/thumbnails/48.jpg)
const map = Object.create(null); map[1] = 'Nir'; map['1'] = "Ran"; console.log(map[1]); console.log(map['1']);
two entries?
![Page 49: Data Structures in javaScript 2015](https://reader033.fdocuments.us/reader033/viewer/2022052915/587776ca1a28ab5b568b6eb9/html5/thumbnails/49.jpg)
ENTER MAPS
![Page 50: Data Structures in javaScript 2015](https://reader033.fdocuments.us/reader033/viewer/2022052915/587776ca1a28ab5b568b6eb9/html5/thumbnails/50.jpg)
ORDERED LIST OF KEY-VALUE PAIRS
![Page 51: Data Structures in javaScript 2015](https://reader033.fdocuments.us/reader033/viewer/2022052915/587776ca1a28ab5b568b6eb9/html5/thumbnails/51.jpg)
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
![Page 52: Data Structures in javaScript 2015](https://reader033.fdocuments.us/reader033/viewer/2022052915/587776ca1a28ab5b568b6eb9/html5/thumbnails/52.jpg)
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
![Page 53: Data Structures in javaScript 2015](https://reader033.fdocuments.us/reader033/viewer/2022052915/587776ca1a28ab5b568b6eb9/html5/thumbnails/53.jpg)
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.forEach( (value, key) => { console.log(value, key); });
Iterate over a Map
![Page 54: Data Structures in javaScript 2015](https://reader033.fdocuments.us/reader033/viewer/2022052915/587776ca1a28ab5b568b6eb9/html5/thumbnails/54.jpg)
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
![Page 55: Data Structures in javaScript 2015](https://reader033.fdocuments.us/reader033/viewer/2022052915/587776ca1a28ab5b568b6eb9/html5/thumbnails/55.jpg)
WEAK MAPSHolds a weak reference to key
The key must be an object
Expose get and set.
![Page 56: Data Structures in javaScript 2015](https://reader033.fdocuments.us/reader033/viewer/2022052915/587776ca1a28ab5b568b6eb9/html5/thumbnails/56.jpg)
USE CASE??
![Page 57: Data Structures in javaScript 2015](https://reader033.fdocuments.us/reader033/viewer/2022052915/587776ca1a28ab5b568b6eb9/html5/thumbnails/57.jpg)
Create a WeakMap for mapping DOM
elements to objects. when the element will
destroyed, the data will freed
![Page 58: Data Structures in javaScript 2015](https://reader033.fdocuments.us/reader033/viewer/2022052915/587776ca1a28ab5b568b6eb9/html5/thumbnails/58.jpg)
EXTEND
![Page 59: Data Structures in javaScript 2015](https://reader033.fdocuments.us/reader033/viewer/2022052915/587776ca1a28ab5b568b6eb9/html5/thumbnails/59.jpg)
ES6 ENABLES SUBCLASSING
OF BUILT-IN TYPES
![Page 60: Data Structures in javaScript 2015](https://reader033.fdocuments.us/reader033/viewer/2022052915/587776ca1a28ab5b568b6eb9/html5/thumbnails/60.jpg)
QUEUE DEFINEDenqueue
dequeue
peek
isEmpty
![Page 61: Data Structures in javaScript 2015](https://reader033.fdocuments.us/reader033/viewer/2022052915/587776ca1a28ab5b568b6eb9/html5/thumbnails/61.jpg)
CODE? OR BORED?
![Page 62: Data Structures in javaScript 2015](https://reader033.fdocuments.us/reader033/viewer/2022052915/587776ca1a28ab5b568b6eb9/html5/thumbnails/62.jpg)
class Queue extends Array { enqueue(element) { this.push(element) } dequeue() { return this.shift(); } peek() { return this[0]; } isEmpty() { return this.length === 0; } }
![Page 63: Data Structures in javaScript 2015](https://reader033.fdocuments.us/reader033/viewer/2022052915/587776ca1a28ab5b568b6eb9/html5/thumbnails/63.jpg)
NEXT STEPS
![Page 65: Data Structures in javaScript 2015](https://reader033.fdocuments.us/reader033/viewer/2022052915/587776ca1a28ab5b568b6eb9/html5/thumbnails/65.jpg)
![Page 66: Data Structures in javaScript 2015](https://reader033.fdocuments.us/reader033/viewer/2022052915/587776ca1a28ab5b568b6eb9/html5/thumbnails/66.jpg)
THANK YOU!
@nirkaufman
il.linkedin.com/in/nirkaufman
github.com/nirkaufman
ANGULARJS IL
meetup.com/Angular-AfterHours/
meetup.com/AngularJS-IL
Nir Kaufman