小白学前端17
1.一个节点可以有两个文本节点吗？
可以，但是会加换行，在p元素里面一个换行会当作一个空格，而很多空格只会当作一个
2.一个很有趣的bug:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="" rel="stylesheet">
</head>
<body>
<label>请输入北京今天空气质量：</label>
<input type="text" name="atmospheredata" id="input">
<button onclick="test()">确认填写</button>
<script type="text/javascript">
function test(){
var dateelem = document.getElementById("input");
var pnode = document.getElementsByTagName("p")[0];
if(pnode ==null){ //情形1：if(pnode ===null){ >>>报错 //情形2：if(pnode ===undefined){ >>>正常
var pelem = document.createElement("p");
var ptxt = document.createTextNode("您输入的值是：");
var pnum = document.createTextNode(dateelem.value);
pelem.appendChild(ptxt);
pelem.appendChild(pnum);
document.body.appendChild(pelem);
}else{
pnode.childNodes[1].nodeValue = dateelem.value;
}
}
</script>
</body>
</html>
---当if判断写成情形1时，控制台一直在报错：TypeError: pnode is undefined，
>>>过了很久...后来反应过来了！
查阅EloquentJS:
当"=="运算符时，如果运算符两侧存在null或undefined，那么只有两边都为null或undefined时才能为true
console.log(null == undefined)
//> true
console.log(null == 0)
//> false
这一点其实非常有用，当我们想确定一个值是否为真，而非null或undefined时，直接使用"=="(或"!=")运算符来比较即可
当"==="运算符时，比较的是：是否严格相等！，
var pnode = document.getElementsByTagName("p")[0]; 此处若无p元素，则会返回undefined,
情形1时明显不严格相等，但此时pnode根本没值，却也执行了else后的语句，故一直报错
这个bug应该能引起自己多想一想...
3.面对Eloquent JS第六章的绘制表格程序，真的是看了两三天才看明白...
//test程序
var arr=[];
for(i=1;i<6;i++){
arr.push(new Text(i));
}
function Text(a){
this.a=a;
}
console.log(arr);
var test =arr.map(function(_,i){
return arr[i].a;
});
//map不接受第一个参数，相当于：
function map(array,transform){
var mapped =[];
for(var i=0;i<array.length;i++){
mapped.push(transform(i)); //原先为mapped.push(transformed(array[i]));
}
}
console.log(test);
/*
>>>
[ Text { a: 1 },
Text { a: 2 },
Text { a: 3 },
Text { a: 4 },
Text { a: 5 } ]
[ 1, 2, 3, 4, 5 ]
*/
---
总结一下：
1）书上那句：reduce函数不添加start参数，那么会使用数组的第一个元素作为起始值并从第二个元素开始执行合并操作
其实第一次的理解是对的(就是第一个数组元素加第二个数组元素)，后来是没有看到书上的函数是在function后面补上了一个0，才开始质疑人生了...
例如
row.reduce(function(max,cell){
return Math.max(max,cell.minLength());
},0);
//Test程序：
var martix = [[1,2],[3,4],[5,6]];
var fl=martix.reduce(function(a,b){
console.log(a);
console.log(b);
return a.concat(b);
});
console.log(fl);
/*
>>>
[ 1, 2 ]
[ 3, 4 ]
[ 1, 2, 3, 4 ]
[ 5, 6 ]
[ 1, 2, 3, 4, 5, 6 ]
--可以看出就相当于
var current = array[0];
for(var i=1;i<array.length;i++){curent=curent+array[i];}
书上那句话的疑惑在于，并从第二个元素开始...， 应该这样说准确点：把数组的第一个元素作为起始值并从第二个元素开始遍历
*/
2）为什么前面的函数总觉得不按套路出牌的感觉？
书中比较简单的只提了一下，构造函数返回一个对象，this也根本不着笔墨，直到看了另一本书提到的构造函数和原型链才慢慢看这程序有了眉头........
//Test程序：
function Bulid(a){
this.a = a+1;
}
var b = new Bulid(2);
console.log();
function Bulid(text){
this.text = text.split("\n");
}
var b = [];
b.push(new Bulid("##"));
console.log(b);
/*
>>>[ Bulid { text: [ '##' ] } ]
---this用在构造函数里面表示所生成的对象，且函数竟返回了一个对象且对象名为函数名
谨记：1.构造函数就是生成对象的函数；2.对象是没有名字的
然后结合前面的xxx.map(function(_,i){...}的变对象数组为普通数组的方法,一下就能豁然开朗
*/
3）原型链：每一个用构造函数生成的对象，都继承了那些属性,方法的话，这样不会内存爆表？
看了Javascript编程全解，才有了些了解，再加上W3school的javascript高级教材，就能明白一些了
额...这是一种java的错觉...(但java有静态作用域而javascript是没有的)
其实，原型链就是能避免内存浪费
--w3school:联合使用构造函数和原型方式
所有的非函数属性都在构造函数中创建，意味着又能够用构造函数的参数赋予属性默认值了。因为只创建 showColor() 函数的一个实例，所以没有内存浪费。
此外，给 oCar1 的 drivers 数组添加 "Bill" 值，不会影响到 oCar2 的数组
浙公网安备 33010602011771号