Advanced Javascript tips and tricks(code.google.com)

311 pointsby ck215 anni fa35 comments

code.google.com

Advanced Javascript tips and tricks

http://code.google.com/p/jslibs/wiki/JavascriptTips#language_advanced_Tips_&_Tricks

11 comments

tlrobinson15 anni fa

Most of these tricks involve non-standard features of Mozilla's dialect of JavaScript.

ck215 anni fa

There is a handy index of them all near the bottom:

http://code.google.com/p/jslibs/wiki/JavascriptTips#delete_a...

yid15 anni fa

Wow, I'm seriously overjoyed to discover the "yield" operator, which I did not know existed (it barely shows up anywhere!). No more hackishly using window.setTimeout() to yield in JS pseudo-thread simulations!

ck215 anni fa

Just note the small print that yield is JS 1.7

Firefox 2 was the first to have JS 1.7 but I dunno if any version of IE has yield, maybe IE9 ?

masklinn15 anni fa

Javascript 1.x where x > 5 are proprietary extensions of Mozilla.

Some of those extensions (e.g. Array Extras) trickled into the wider language, but as far as I know most of them (including let and generators) are confined to Gecko-based browsers still.

ErikCorry15 anni fa

No version of IE or Safari or Chrome has yield.

yid15 anni fa

Well, that significantly dampens my excitement...

tomstuart15 anni fa

  list = list.sort(function() Math.random() - 0.5);

Please don't shuffle an array like this. Array.prototype.sort requires the comparison function to be referentially transparent (i.e. to always return the same result when given the same two elements to compare), otherwise the sort order is undefined. For example, imagine how far from "shuffled" the resulting array will be if a bubble sort is used with a randomised comparison function.

Use a Fisher-Yates shuffle instead.

gmurphy15 anni fa

The European Browser Choice screen was a good example of where this style of sorting can come and bite you - the browser choice screen was designed to display a selection of browsers in random order, but the above sorting code unintentionally biased it towards particular browsers.

Here's a good writeup with a bunch of test runs and graphs: http://www.robweir.com/blog/2010/02/microsoft-random-browser...

omaranto15 anni fa

Fisher-Yates is a better idea, of course, since it is pretty short and runs in linear time, but if someone insists on a sort-based one-linear this should work:

  list.map(function (t) { return [Math.random(), t]; }).sort().map(function (t) { return t[1]; })

omaranto15 anni fa

Argh, I missed the edit time window: "one-linear", should be, of course, "one-liner". Fisher-Yates is O(n), but the sort makes this algorithm Omega(n log n).

__rkaup__15 anni fa

What's 'Omega'?

throw_away15 anni fa

omega() is like the opposite of O(). it means "at least" rather than "at most". — http://en.wikipedia.org/wiki/Big_Oh_notation#Family_of_Bachm...

tomstuart15 anni fa

Fisher-Yates is also in-place, just like Array.prototype.sort.

yid15 anni fa

While I agree in principle, there are many cases where you don't care about the statistical quality of a random shuffle, where brevity has its benefit.

bzbarsky15 anni fa

You don't understant. The code cited isn't even guaranteed to terminate by the spec; browsers could just go into an infinite loop if the comparison function effectively lies to them so the array never looks sorted... and this would be perfectly reasonable behavior.

So it's not that you get a bad random shuffle; it's that your code might never return from that sort() call.

And to be clear, there have been cases of "hang" bugs being reported to browser vendors in situations exactly like this one because people were writing boneheaded script like this.

photon_off15 anni fa

I think there's also an issue of performance -- it's possible, though unlikely, that the sort could take forever to complete.

yid15 anni fa

Unlikely is an understatement -- the probability of an infinite sequence of PRNG outputs that prevents any sort algorithm from terminating is negligible.

wlievens15 anni fa

What about 'taking too much time' though?

yid15 anni fa

Touche...

tolmasky15 anni fa

When? It's not like anyone is asking you to write the shuffling code by hand, so when is time so precious, and space so constrained, that it's beneficial to use this "brief" incorrect solution over taking the 5 minutes to google a correct solution and copy-pasting that?

ck215 anni fa

BTW I also just noticed Resig's next advanced JS book is almost done (finally!)

http://www.manning.com/resig/

and there is a 50% off code that is working for July 4th - july450

which makes it $16 for the early-edition PDF-only version

(or $20+$5 shipping for dead-tree version but it's $25 on amazon anyway)

If I learn just one new trick for $16 it's probably worth it.

thomas1115 anni fa

I'm not sure if it's "almost done". I bought the MEAP (early access) a long time ago, and for months nothing happened at all. Then a second author came on board to get things moving.

A few days ago I got an update from Manning:

    "What's new?
    Chapter 2, "Testing and Debugging" has been added.
    Chapter 3, "Functions are fundamental" has been revised.

    What's next?
    Our next update will be coming quickly, with revised versions of Chapter 4 on closures and Chapter 5 on object-orientation with prototypes.

I haven't bothered yet to actually look at the PDF, it sounds like it's still in a rather early stage.

niels15 anni fa

Ha ha, yep I bought the MEAP version of this book almost three years ago. Can't believe it's not finished yet.

gcb15 anni fa

inb4 duke nuken forever jokes

ErikCorry15 anni fa

Lots of the stuff in this list is only available in Mozilla browsers. It's not part of the ECMAScript standard:

yield

Optional named function arguments

let (in the 'remove an object from an array' example)

"Convert a string into a charcode list" (both methods)

toSource method on an array ("Array iteration pitfall")

etc.

ck215 anni fa

Some more goodies here:

http://stackoverflow.com/questions/724826/javascript-tips-an...

http://stackoverflow.com/questions/61088/hidden-features-of-...

perlgeek15 anni fa

I find some of them horribly obscure

     +new Date() // 1259359833574

Oh come on, magic constants? How do you check if that's the right number?

    function PrefixInteger(num, length) {

        return (num / Math.pow(10, length)).toFixed(length).substr(2);
     }

Is there no sprintf in Javascript? Or did I misunderstand what the function does?

walrus15 anni fa

"1259359833574" isn't a magic constant. JavaScript uses // for comments. The number is just an example of the possible output of the expression "+new Date()" (specifically, it was the time at which the author of that page evaluated the expression).

altano15 anni fa

Right, and it's equivalent to the more readable

    Number(new Date())

or more simply

    Date.now()

if you don't need IE8 support.

gimpf15 anni fa

> +new Date() // ...

Title: Milliseconds since epoch

s00pcan15 anni fa

Your browser likely has a javascript console, it's pretty useful:

  +new Date()
  1309882329679
  +new Date()
  1309882331551
  +new Date()
  1309882332511

gpambrozio15 anni fa

Yansky15 anni fa

I don't understand the need for the first example: Array.prototype.push.apply(a, b);

Isn't that what the concat() method is for?

tomstuart15 anni fa

Array.prototype.push.apply(a, b) modifies a in-place; a.concat(b) returns a copy of a with b appended to it.

IanDrake15 anni fa

I use the pattern listed under "Objects private and public members" frequently and feel they missed an important point.

They really should add something like:

function MyConstructor( pub, priv ) {

  var thisMyConstructor = this; //**Copy the 'this' variable**

  var privateVariable = priv;

  this.publicVariable = pub;

Otherwise "public" variables can't be accessed in private functions because "this" no longer references the object. So, from what I've learned it's always best to copy "this" to a private variable and use the private variable for consistency.