记一道面试题

boss.jpeg

偶然看到这样的一道面试题，题目要求找出程序中哪些地方不合理，找出并改正，使其能够正常运行。
一开始看代码感觉没有什么问题，一切都ok（嘿嘿，原谅我是个菜鸟），仔细一看，一道简单的题里面包含了好多我们可能平时没有注意到的知识点。

1 script标签应该放在哪里，放的位置不同带来哪些不同的影响
2 代码使用严格模式，都有哪些规则
3 解构赋值
4 元素和节点的区别

形参名和函数内的变量同名

script标签应该放在哪里：
1.head：因为浏览器解析代码是从上到下开始解析的，如果script放在head中，而正好这个script中的代码需要操作或查找dom，这时候的dom还没有渲染，所以此时是会报错的。
2.body：在整个页面加载完成后解析。

严格模式：提高代码健壮性（IE10一下不支持严格模式）
1.严格模式下，不允许隐式创建全局变量

不允许变量未声明就使用
不允许删除变量或对象

"use strict";
var x = 3.14;
delete x;

不允许删除函数

"use strict";
function x(p1, p2) {}; 
delete x;                // 报错

5.不允许变量重名:

"use strict";
function x(p1, p1) {};   // 报错

解构赋值:
1.常规的赋值(右侧是数组或对象)
为数组时：右侧数组所包含的元素不必和左侧一一对应
为对象时：左侧也应该是一个对象，每一个命明属性都会从右侧查找对应的赋值

声明新变量
交换两个变量的值（[x,y] = [y,x]）

元素和节点的区别：
在DOM中，每个部分都是节点
1文档本身是文档节点
2所有 HTML 元素是元素节点
3所有 HTML 属性是属性节点
4HTML 元素内的文本是文本节点（包括回车符也是属于文本节点）
注释
元素是节点的子类，属于元素节点
1、childNodes：获取节点，不同浏览器表现不同；
　　IE：只获取元素节点；
　　非IE：获取元素节点与文本节点；
　　解决方案：if(childNode.nodeName=="#text") continue 或者 if(childNode.nodeType != '3') continue

2、children：获取元素节点，浏览器表现相同。
　　因此建议使用children。

形参名和函数内的变量同名:
1.在函数中，如果声明并赋值了的变量和形参名相同，就会替换传递进来的参数的值

function ab(x){ 
    console.log(x); 
　　 var x = 4;
    console.log(x); 
}; 
ab(3);

2.在函数中，如果函数名和形参名相同，函数会发生变量提升，所以在函数内打印形参，得到的是一个函数

function ab(x){ 
　　console.log(x); 
　　function x(){
　　　　console.log("我是函数")
　　}; 
　　console.log(x); 
}; 
ab(3);
//输出的都是函数

无论是形参还是函数中声明的变量，JS对他们的处理是没有区别的，都是保存在这个函数的变量对象中作为局部变量进行处理
当对变量进行重复声明的时候,引擎对于重复声明的变量，执行时取最近的赋之后的变量

var a = 1;
var a;
console.log(a);//1