JavaScript the good parts

Transcript

1. JavaScript The Good Parts Douglas Crockford Presented By : Hossein Rahmani
2. Arrays O An array is a linear allocation of memory in which elements are accessed by integers that are used to compute offsets. O Array can be very fast data structure . O JavaScript does not have this kind of array .
3. Arrays O JavaScript Provides an object like array O It converts array subscripts into string that are used to make properties. O Slower that real array , but more convenient to use. O Arrays have some useful methods.
4. Arrays : Array Literals var empty =[]; var numbers = [‘zero’ , ‘one’ , ‘two’ , ‘three’ , ‘four’ , ‘five’ , ‘six’ , ‘seven’ , ‘eight’ , ‘nine’]; empty[1] // undefined numbers[1] // one empty.length // 0 numbers.length // 10
5. Arrays : Array Literals var numbers_object = { ‘0’ : ‘zero’, ‘1’ : ‘one’ , ‘2’ : ‘two’, ‘3’ : ‘three’, ‘4’ : ‘four’ , ‘5’ : ‘five’, ‘6’ : ‘six’, ‘7’ : ‘seven’ , ‘8’ : ‘eight’, ‘9’ : ‘nine’ }; This object similar to numbers array but does not have array methods (length , split , …)
6. Arrays : Length O JavaScript's array length is not upper bound. O The largest integer property name plus one. O This is not necessarily the number of properties in the array. var myArray = []; myArray.length // 0 myArray[1000] = true; myArray.length // 1001
7. Arrays : Length O http://jsfiddle.net/rahmani/vGzUk O The length can be set explicitly. O making the length larger does not allocate more space. O making the length smaller will cause delete subscript greater than or equal.
8. Arrays : Length var numbers = ['zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seve n', 'eight', 'nine']; alert(numbers.join(',')); numbers.length = 3; alert(numbers.join(','));​ http://jsfiddle.net/rahmani/p35xv/1/
9. Arrays : Length O http://jsfiddle.net/rahmani/LmEae/ var numbers = ['zero', 'one', 'two']; document.write(numbers.join(',')); document.write("<br />"); numbers[numbers.length] = 'shi'; document.write(numbers.join(',')); document.write("<br />"); numbers.push('go'); document.write(numbers.join(','));
10. Arrays : Delete var numbers = ['zero', 'one', 'two', 'three']; delete numbers[2]; var numbers2 = ['zero', 'one', 'two', 'three']; numbers2.splice(2, 1); http://jsfiddle.net/rahmani/YUyG9/
11. Array : Enumeration O for in makes no guarantee about the order of properties of an array. O for statement avoid these problem. var i; for (i=0; i< myArray.length; i +=1){ document.writeln(myArray[i]); }
12. Array : Confusion O A common error in JavaScript programs is to use an object when an array is required or an array when an object is required. How to determine is this an array or not?
13. Array : Confusion var is_array = function(value) { return value && typeof value === 'object' && typeof value.length === 'number' && typeof value.splice === 'function' && !(value.propertyIsEnumerable('length')); }; http://jsfiddle.net/rahmani/RgCTd
14. Array : Methods O array.concat(item …) var a = ['a', 'b', 'c']; var b = ['x', 'y', 'z']; var c = a.concat(b, true); // c is ['a', 'b', 'c', 'x', 'y', 'z', true] http://jsfiddle.net/rahmani/EHAWK/
15. Array : Methods O array.join(separator) The join method makes a string from an array. The default separator is ',‘ var a = ['a', 'b', 'c']; var c = a.join(''); // c is 'abc'; If you are assembling a string from a large number of pieces, it is usually faster to put the pieces into an array and join them than it is to concatenate the pieces with the + operator
16. Array : Methods O array.pop( ) The pop and push methods make an array work like a stack. The pop method removes and returns the last element in this array. If the array is empty, it returns undefined. var a = ['a', 'b', 'c']; var c = a.pop( ); // a is ['a', 'b'] & c is 'c'
17. Array : Methods O array.push(item…) The push method appends items to the end of an array. It returns the new length of the array. var a = ['a', 'b', 'c']; var b = ['x', 'y', 'z']; var c = a.push(b, true); // a is ['a', 'b', 'c', ['x', 'y', 'z'], true] // c is 5;
18. Array : Methods O array.reverse( ) var a = ['a', 'b', 'c']; var b = a.reverse( ); // both a and b are ['c', 'b', 'a']
19. Array : Methods O array.shift( ) It removes the first element from an array and returns it. If the array is empty, it returns undefined. Shift is usually much slower than pop. var a = ['a', 'b', 'c']; var c = a.shift( ); // a is ['b', 'c'] & c is 'a'
20. Array : Methods O array.slice(start, end) Its makes a shallow copy of a portion of an array. The end parameter is optional, and the default is array.length. If either parameter is negative, array.length will be added to them. If start is greater than or equal to array.length, the result will be a new empty array. var a = ['a', 'b', 'c']; var b = a.slice(0, 1); // b is ['a'] var c = a.slice(1); // c is ['b', 'c'] var d = a.slice(1, 2); // d is ['b']
21. Array : Methods O array.sort(comparefn) It sorts arrays of numbers incorrectly. var n = [4, 8, 15, 16, 23, 42]; n.sort( ); // n is [15, 16, 23, 4, 42, 8]
22. Array : Methods O Correct sort for array of numbers O http://jsfiddle.net/rahmani/9xKX8/ O Array sort for simple types ( int , string) O http://jsfiddle.net/rahmani/PaN9z/ O Array sort for objects O http://jsfiddle.net/rahmani/X6XX4/2/
23. Array : Methods O array.splice(start, deleteCount, item…) removes elements from an array, replacing them with new items. It returns an array containing the deleted elements. var a = ['a', 'b', 'c']; var r = a.splice(1, 1, 'ache', 'bug'); // a is ['a', 'ache', 'bug', 'c'] // r is ['b'] Example: Delete a record from json array http://jsfiddle.net/rahmani/7hGR9/
24. Array : Methods O Delete a record from json array O http://jsfiddle.net/rahmani/7hGR9/ O Search in json array O http://jsfiddle.net/rahmani/ZE3pn/
25. Array : Methods O array.unshift(item…) It’s like the push method except that it shoves the items onto the front of this array instead of at the end. It returns the array’s new length. var a = ['a', 'b', 'c']; var r = a.unshift('?', '@'); // a is ['?', '@', 'a', 'b', 'c'] // r is 5