JavaScript比较tricky的问题

JavaScript比较tricky的问题

1. 纯js

1.1object的比较

object 不能直接比较.

var a = {};
var b = {};
a==b; // false

在一个很大的function里面很容易顺手就写成这样的来比较两个object。而且不容易debug。
推荐用lodash： isEqual可以深度比较object是不是相等。

var a = { 'c': 1 };
var b = { 'c': 1 };
lodash.isEqual(a, a); // true

1.2 arguments.forEach() 报错?

arguments虽然长得像个array，用起来也像个array，但是它是个长得像array的object。这货
不是个array！！！
不是个array！！！
不是个array！！！

mdn里的解释：

The arguments object is a local variable available within all non-arrow functions.

// 经常这么用
function printArgumnets() {
  for (var i=0; i < arguments.length; i++) {
    console.log(i + ' ' +arguments[i])
  }
}
printArgumnets("a","b") 
// 0 a
// 1 b      key 是 0 和 1

//但是这么用就出错了！！！
function printArgumnets2() {
  arguments.forEach(function(arg){ // ERROR:arguments.forEach is not a function
  	console.log(arg)
  })
}
printArgumnets2("a","b") 

// 如果一定要用 forEach
function printArgumnets3() {
  [].forEach.call(arguments, function (arg) { //对forEach的执念有多深。
        console.log(arg)
    });
}
printArgumnets3("a","b") // a, b

另外： ES6里面的arrow function也用不了！

const printArgumnets4 = () => {console.log(arguments)} //Uncaught ReferenceError: arguments is not defined

有error的时候是很容易debug的，但是，当有上下文的时候，这个玩意儿会打印出一些奇怪的玩意儿。
是第一个non-arrow function的arguments。

1.2.2 长得像array的object

//一个正常的array 
var arr = ['a', 'b', 'c'];
// array like object
var obj = { 0: 'a', 1: 'b', 2: 'c' };

1.3 for…in 来遍历数组？

既然array是一个特殊的object，那么如果把object的方法用在array上似乎也不是什么罪大恶极的事情。

1.3.1 for…in loop的key到底是啥

先来个例子：

var names = ['Apple', 'Banana', 'Orange'];
for (let i in names) { 
    if (i === 0) {
        console.log(`${names[i]} is first`);
    } else {
        console.log(`${names[i]}`);
    }
}

答案：

Apple  // i === 0那个condition并没有进去。
Banana
Orange

打印一下 i 的类型， 是string，而不是number

var names = ['Apple', 'Banana', 'Orange'];
for (let i in names) { 
   console.log(typeof i); // string
}

因为在object里面所有的key都是string。 如果把array里的index用Object.keys方法提出来，也是string。

var obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.keys(obj)); // console: ['0', '1', '2']

var arr = ['a', 'b', 'c'];
console.log(Object.keys(arr)); // console: ['0', '1', '2']

1.3.2 javascript的array并不一定是连续的。

var arr = [];
arr[3] = 3;
// 遍历arr。
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

结果：

undefined
undefined
undefined
3

如果用for...in

for (let i in arr) {
    console.log(i);
}

结果：

3

差别显而易见。

1.3.3 Array.prototype

如果在prototype里定义了一个自己的function：

Array.prototype.myFunction = function() { }
var arr = [];
arr[0] = 'foo';
arr[1] = 'bar';
for(x in arr){
 console.log(arr[x]);
}

结果：

foo
bar
function() { }

for...in会遍历所有的隶属于这个Object的可遍历的变量，所以也包括了自己定义在prototype上的变量。
但是for loop就不会去遍历不属于当前array的其他变量。

for(i=0;i<arr.length;i++){
 console.log(arr[i]);
}

结果：

foo
bar

1.4 array.sort()得不到正确顺序？

The default sort order is built upon converting the elements into strings, then comparing their sequences of UTF-16 code units values.

简单来说，是按照字母顺序排序的，把所有要排序的东西都当作string来看待

[-10, -1, 0, 1, 2, -2].sort();
[1, 30, 4, 21].sort();

答案是：

[-1, -10, -2, 0, 1, 2]
[1, 21, 30, 4]

解决方案：
传一个callback function进去作为compactor：

[-1,-10,-2,0,1,2].sort(function(a, b) {
  return a - b;
});

答案：

[-10, -2, -1, 0, 1, 2]

1.5 JavaScript的array很好很强大

以下都是合法的array：

var a = ["aaa", "bbb", "ccc"];
var b = ["aaa", 1, "ccc"];
var c = [null, 1, "ccc"];
var d = [[1,2,3], 1, "ccc"];
var e = [[1,[2],3], 1, "ccc"];

一个array可以存任何东西，可以混着存。可以增减长度。永远都不会越界。总之。没有任何节操。

javascript 和html

读不到html里的元素？js放的太靠前了！

javascript 和<a href=>

遇到过一个问题，有一个按钮链接，点了之后去了另一个页面，是```<a href=“someotherpage” target="_top"`>``用的然后点浏览器上的返回按钮时，页面并没有回到前一个页面。花了两个小时时间，发现，原来这个按钮上还有一段代码用来跳转页面。在html和js的协同作用下，成功迷惑了浏览器的返回按钮。