popeyesailorman/aice-cnanson

welcome to my world

aice-cnanson's Issues

关于运算符 && 和 | | 的学习

本文来源：http://www.zhangxinxu.com/wordpress/?p=3223

1&&3
return 3 （在下面做出解释）;

关于操作符，在这里再记下数据转换的规则 1 == true 0 == false

巩固基础知识：

*如果两个操作数都是数字，则进行数值比较：

var compare = 5 > 3 // true

*如果两个操作数是字符串。则比较两个字符串对应的字符编码值。大写字母的编码值全部小于小写字母的字符编码值。

var result  = "Bill" < "amy";
//ture 
B的字符编码为66，a的字符编码为97

var result  = "bill" < "amy";
//false
b排在a之后

*如果一个操作符数是数组，则将另一个转为一个数值，然后执行数值比较

比如一个字符串和数字比较，字符串会被转换为数字，然后再比较。但是两个字符串比较，就是比较字符编码：

var result1 = "23" < 3 //false "23"被转为23
var result2 = "23" < "3" //true "2"的字符编码是50，"3"的字符编码是51 

但是当字符串不能被转换为一个合理的数值时：
var result = "a" < 3; //false 因为"a"被转换为了NaN

任何操作数与NaN比较，结果都是false，所以：

var result = "a" < 3; //false
var result = "a" >= 3; //false

*相等操作符

两组操作符：相等和不相等——先转换类型再比较
　　　　　　全等和不全等——仅比较而不转换类型

var result1 = ("55" == 55)  //true 因为转换后相等
var result2 = ("55" === 55)  //false 因为不同的数据类型不相等
var result1 = ("55" != 55) // false 因为转换后相等
var result2 = ("55" !== 55) // true 因为不同的数据类型不相等 

在转换不同的数据类型时相等不等遵循以下基本规则：

*如果有一个操作数是布尔值，则在比较相等性前先将其转换为数值： false转换为0，true转为1；

逻辑与(&&) ：

1）如果第一个操作数为对象，则返回第二个操作数；

2. 如果第二个操作数是对象，只有在第一个操作数的求值结果为true的情况下，才会返回该对象；

3）如果两个操作数都是对象，则返回第二个操作数；

4. 如果有一个为null，则返回null；若有一个为NaN，则返回NaN, 若有一个为undefined，则返回undefined

逻辑与操作属于短路操作，只要第一个为false。第二个不论什么结果都不可能为true；

逻辑或( | | ) :

1） 如果第一个操作数为对象，则返回第一个操作数；

2） 如果第一个操作数求值结果为false，则返回第二操作数；

3）如果两个操作数都是对象，则返回第一个操作数；

4）如果有两个为都null，则返回null；若有两个为都NaN，则返回NaN, 若两个都为undefined，则返回undefined

逻辑或也属于短路操作，如果第一个操作数求值结果为true，就不会对第二个操作数求值了；

1 && 3  // return 3 
2 && 3  // return 3 
0 && 3 // return 0
-1 && 3 // return 3

true &&  3 // return true 
false &&  3 // return false
true ||  3 // return true 
false ||  3 // return 3

1 || 3 // return 1
2 || 3 // return 2
0 || 3 // return 3 
-1 || 3 // return -1

既然false==0，false && 3 //return false

那么 false && 3 == 0 是否成立？？是否return true ？

答案是 ：false；

因为 == 运算符优先于 && 运算符

即先 ：运算 3 == 0 // false 因为只有 false == 0 和 0 == 0；
然后： 运算 false && false // false

摘抄运算符顺序表：

综上总结简单记法：

2 长得像 && 只有当&&前面有 0 或者 false null 或者 undefined 则返回第一项 ，其他后面不管是什么都返回 第二项；

1 长得像 | | 只有当 | | 前面有 0 或者 false null 或者 undefined 则返回第二项 ，其他后面不管是什么都返回 第一项；

实用性

可以避免if嵌套。例如，要问页面上某个dom绑定点击事件，我们需要先判断这个dom元素存不存在，我们可能会这样做：

var dom = document.querySelector("#dom");
if (dom) { dom.addEventListener("click", function() {});  }

实际上，我们可以使用&&做一些简化：

var dom = document.querySelector("#dom");
dom && dom.addEventListener("click", function() {});

test

HTML5 之 form 标签那些事

1.form表单里面都有input元素

先说关于$("input")和$(":input")的区别：
demo： https://output.jsbin.com/gogekug

发现 :input的作用是查找所有的input元素：包括 input, textarea, select 和 button 元素。而input只是查找到input标签

上面例子还有一个有趣的地方，就是在 input type 的checked属性为false的时候他也是被选中。于是有了下面的demo：

代码：

对应结果：

发现只要html标签上面有checked属性，不管它的属性值true还是false，都会被选中，除非没有checked属性，既然只要加了checked属性就会被选择，那如何将它选中取消呢？

js方法：

document.getElementById("myCheck").checked = false;

jq方法：

$("#myCheck").attr('checked','false'); 
$("#myCheck").prop('checked','false'); 

那attr()和prop()方法有什么区别呢
还是上面的例子：
代码：

attr方法：$("input").attr("checked");
结果：
console.log(checked,checked,checked,checked,undefined);

prop方法: $("input").prop("checked");
结果：
console.log(true,true,true,true,false);

发现，用attr() 取到input的checked属性值时为checked，而用prop()方法返回的则是布尔值。
为何用attr()取到checked的属性值为checked而不是true或者false

测试用attr() 取到不同属性来看看：
代码：
<input id="a" type="checkbox" checked data-index="1">
方法：

$("input").attr('type');
$("input").attr('checked');
$("input").attr('data-index');

结果：
console.log('checkbox','checked',1);
跟上面一样，而用prop()方法来取到不同的属性来看看：
代码：
<input id="a" type="checkbox" checked data-index="1">

方法：

$("input").prop('type');
$("input").prop('checked');
$("input").prop('data-index');

结果：
console.log('type','true','undefined');

发现：
第一类，自定义的属性：
有该属性和属性值：用attr()方法返回它的属性值，prop()方法返回undefined；
有该属性无属性值(包括属性值为空）：用attr()方法返回空字符串 : ''，prop()方法返回undefined；
无该属性：attr() 返回空字符串，prop()返回undefined；

第二类，元素固有属性：
有该属性和属性值：用attr()和prop()方法，都可以获取到他到属性值，如id ,class,type,title等；
有该属性无属性值(包括属性值为空）：用attr()方法返回空字符串 : ''，prop()方法返回空字符串: ''；
无该属性：attr()返回undefined，prop返回空字符串；

第三类：checked,selected属性：
有该属性和属性值：用attr()方法返回checked和selected，用prop()方法返回true（不管属性值为false或者true）；
有该属性无属性值：用attr()方法返回checked和selected，用prop()方法返回true；
无该属性：attr()返回undefined，prop()返回false;

第四类： novalidate属性：
有该属性和属性值：attr()返回novalidate，prop()返回undefined;
有该属性无属性值:attr()返回''，prop()返回undefined;
无该属性：attr()返回undefined，prop()返回undefined;

总结：
attr: attr("属性"); 只能获取已设置在元素本身上的属性值，包括固有属性和新增属性，没有设置的属性结果返回undefined，设置了属性，没有设置属性值的返回空字符串；
prop: prop("属性") ; 只能获取固有属性的属性值（html上有这个属性则返回true，html上无这个属性则返回false，不管这个属性的属性值为true还是false），新增属性的属性值无法被获取到；

2.关于设置属性：
attr： attr("属性名","属性值"); 既可以设置元素固有的属性，也可以设置元素本来不存在的属性；
prop: prop("属性名","属性值"); 只能设置固有的html属性；

attr和prop使用版本不同，jquery1.6之前只有attr，jquery1.6之后才有prop。

三、关于form表单的novalidate属性
Internet Explorer 10、Firefox、Opera 和 Chrome 都支持 novalidate 属性。
注意：在 Safari 和 Internet Explorer 9 及之前的版本中不支持 novalidate 属性。

虽然兼容性不怎么好，但是我们可以用在h5上面

novalidate 属性是 HTML5 中的新属性。novalidate 属性规定当提交表单时不对表单数据（输入）进行验证。novalidate为HTML5表单内置的属性（W3C草案），可以让现代浏览器（IE10+, FireFox, Chrome, Opera等）默认不对表单做验证（忽略required, pattern等）
http://output.jsbin.com/vefosew
demo: http://output.jsbin.com/nedigup

insertAdjacentHTML 和 before() 和 insertBefore()

正则反向引用

([a-zA-Z])\1 表示匹配到相同的a或z（大小写不限制）
([a-z])\1{2} 表达连续三个相同的小写字母。

html() val() text()区别

代码：

<div>我是文本内容<p>我是段落</p></div>
<div>我是文本内容</div>
<div>我是文本内容</div>
<div>我是文本内容</div>

执行：

var text = $("div").text();
var html = $("div").html();
var val = $("input").val();

结果：

.val()方法和.html()相同，.html()除了文本内容还会获取html标签，如果其应用在多个元素上时，只能读取第一个表单元素的"value"值，但是.text()和他们不一样，如果.text()应用在多个元素上时，将会读取所有选中元素的文本内容。

jq测试

1.如何设置默认所有的ajax请求返回格式是json?
$.ajax({
url: url,
data: data,
success: callback,
dataType: json
});

dataType
类型：String 可用值:
"xml": 返回 XML 文档，可用 jQuery 处理。
"html": 返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行。
"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 "cache" 参数。注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。（因为将使用 DOM 的 script标签来加载）
"json": 返回 JSON 数据 。
"jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
"text": 返回纯文本字符串

2.ajax中tranditional参数是什么作用？
这个属性默认是false,jquery会深度序列化这个对象，以适应PHP等框架，我们可以通过设置tradtional为true阻止深度序列化，

3.哪些情况会触发ajax的error回调？
返回数据类型不是JSON； 网络中断； 后台响应中断

4.如果想要请求jsonp数据格式，该如何设置？

什么是跨域：
所谓同源是指，域名，协议，端口均相同，不明白没关系，举个栗子：
http://www.123.com/index.html 调用 http://www.123.com/server.php （非跨域）
http://www.123.com/index.html 调用 http://www.456.com/server.php （主域名不同:123/456，跨域）
http://abc.123.com/index.html 调用 http://def.123.com/server.php （子域名不同:abc/def，跨域）

凡是拥有”src”这个属性的标签都拥有跨域的能力，比如<script>、、<iframe>
在js的<script>标签中似乎不会涉及到跨域的问题，所以我们就利用<script>标签将向不同域提交HTTP请求。这种技术就叫做jsonp。
JSONP(JSON with Padding) 是一种跨域请求方式。主要原理是利用了script 标签可以跨域请求的特点，由其 src 属性发送请求到服务器，服务器返回 js 代码，网页端接受响应，然后就直接执行了，和通过 script 标签引用外部文件的原理是一样的。JSONP不支持POST请求仅仅执行GET请求。
传递一个callback参数给跨域服务端，然后跨域服务端返回数据时会将这个callback参数作为函数名来包裹住json数据即可。
跨域服务端提供的js脚本动态生成，这样调用者可以传一个参数过去告诉跨域服务端“我想要一段调用XXX函数的js代码，请你返回给我”，于是跨域服务器就可以按照客户端的需求来生成js脚本并响应了。

跨域服务器
文件：flightResult.php
代码：
flightHandler({
"code":"CA1998",
"price": 1780,
"tickets": 5
});

本地:
js:

<script type="text/javascript"> 
    var flightHandler = function(data){
        alert('你查询的航班结果是：票价 ' + data.price + ' 元，' + '余票 ' + data.tickets + ' 张。');
    };  
    var url = "跨域服务器/flightResult.php?code=CA1998&callback=flightHandler";
    var script = document.createElement('script'); 
    script.setAttribute('src', url); 
    document.getElementsByTagName('head')[0].appendChild(script); 
</script>

jq:

<script type="text/javascript">  
    $.ajax({  
        url:"跨域服务器/flightResult.php",  
        dataType:'jsonp',  
        data:'',  
        jsonp:'callback',  
        //jsonpCallback:"flightHandler",//可选，jQuery把返回放到success里了。默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据  
        success:function(data) {  
            alert('你查询的航班结果是：票价 ' + data.price + ' 元，' + '余票 ' + data.tickets + ' 张。');
        },  
        timeout:3000  
    });  
</script>  

5.$.getScript作用是什么？
API：http://jquery.cuishifeng.cn/jQuery.getScript.html
通过 HTTP GET 请求载入并执行一个 JavaScript 文件。
## 参数
url,[callback]
url:待载入 JS 文件地址。
callback:成功载入后回调函数。
## demo：
$.getScript("https://qidian.gtimg.com/yuewen/v1/js/jquery.min.js", function(){
alert('我加载并执行了jquery.min.js.js');
});

如何形象地解释 JavaScript 中 map、foreach、reduce 间的区别？

转载：

如何形象地解释 JavaScript 中 map、foreach、reduce 间的区别？

将时间戳转换成日期格式

var date = new Date(时间戳); //获取一个时间对象

1. 下面是获取时间日期的方法，需要什么样的格式自己拼接起来就好了
   date.getFullYear(); // 获取完整的年份(4位,1970)
   date.getMonth(); // 获取月份(0-11,0代表1月,用的时候记得加上1)
   date.getDate(); // 获取日(1-31)
   date.getTime(); // 获取时间(从1970.1.1开始的毫秒数)
   date.getHours(); // 获取小时数(0-23)
   date.getMinutes(); // 获取分钟数(0-59)
   date.getSeconds(); // 获取秒数(0-59)

例子：
// 比如需要这样的格式 yyyy-MM-dd hh:mm:ss
var date = new Date(1398250549490);
Y = date.getFullYear() + '-';
M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
D = date.getDate() + ' ';
h = date.getHours() + ':';
m = date.getMinutes() + ':';
s = date.getSeconds();
console.log(Y+M+D+h+m+s);
// 输出结果：2014-04-23 18:55:49

2. 将日期格式转换成时间戳
   var strtime = '2014-04-23 18:55:49:123';
   var date = new Date(strtime); //传入一个时间格式，如果不传入就是获取现在的时间了，这样做不兼容火狐。
   // 可以这样做
   var date = new Date(strtime.replace(/-/g, '/'));

// 有三种方式获取，在后面会讲到三种方式的区别
time1 = date.getTime();
time2 = date.valueOf();
time3 = Date.parse(date);

/*
三种获取的区别：
第一、第二种：会精确到毫秒
第三种：只能精确到秒，毫秒将用0来代替
比如上面代码输出的结果(一眼就能看出区别)：
1398250549123
1398250549123
1398250549000
*/
3. Date()参数形式有7种

new Date("month dd,yyyy hh:mm:ss");

new Date("month dd,yyyy");

new Date("yyyy/MM/dd hh:mm:ss");

new Date("yyyy/MM/dd");

new Date(yyyy,mth,dd,hh,mm,ss);

new Date(yyyy,mth,dd);

new Date(ms);

比如：

new Date("September 16,2016 14:15:05");

new Date("September 16,2016");

new Date("2016/09/16 14:15:05");

new Date("2016/09/16");

new Date(2016,8,16,14,15,5); // 月份从0～11

new Date(2016,8,16);

new Date(1474006780);

dom 和 jq

1.ECMAScirpt 变量有两种不同的数据类型：基本类型，引用类型

关于基本类型和引用类型，这篇文章已经做了详细的讲解：
https://segmentfault.com/a/1190000002789651

文中关于基本类型和引用类型的图解：

基本类型是存放在栈区的（栈区指内存里的栈内存）：

var name = 'yangfan';
var city = 'shanghai';
var age = 22;

引用类型的值是同时保存在栈内存和堆内存中的对象：

jquery对象就是一个类数组对象，属于引用类型，引用类型的值是同时保存在栈内存和堆内存中的：

var person1 = {name:'yangfan'};
var person2 = {name:'yangfan1'};
var person3 = {name:'yangfan2'};

jquery对象转换成dom对象的方法，即[index]和get(index)：
var $dom = $("#dom"); // jquery对象
var dom = $("#dom")[0]; //dom对象
var dom = $("#dom").get(0); //dom对象

dom对象转换为jquery对象
对于一个dom对象。只需要用$()把dom对象包装起来，就可以获得一个jquery对象
var dom = document.getElementById('dom');
var $dom = $(dom); // jquery对象

类数组对象是引用类型
引用类型时按引用访问的，换句话说就是比较两个对象的堆内存中的地址是否相同，那很明显，两个类数组在堆内存中地址是不同的:

var elA = $("body");
var elB = $("body");
elA == elB  //  false 

复制基本类型不会改变其值：

var a = 5;
var b = a;
a = 6;
console.log(a);  // 6
console.log(b);  // 5

复制引用类型保存在变量中的是对象在堆内存中的地址

所以，与简单赋值不同，这个值的副本实际上是一个指针，而这个指针指向存储在堆内存的一个对象。那么赋值操作后，两个变量都保存了同一个对象地址，则这两个变量指向了同一个对象。因此，改变其中任何一个变量，都会相互影响：

var a = {x:5,y:7}
var b = a;
a.x = 8;
console.log(a);   //  {x: 8,y:7}
console.log(b);  //   {x: 8,y:7}

2. .eq(0)和.get(0) 一个是jq的方法，一个是dom的方法，若要改变body的背景颜色：

var elA = $("body").eq(0);
elA.css('background-color','red');
var elB = $("body").get(0);
elB.style.backgroundColor = 'blue';

3..each()方法里面传入两个参数，一个是索引，一个是值
a：代表索引即key值
b：代表值即value

elA.each(function(a,b) {
   console.log(this);
   console.log(a);
   console.log(b);
});

结果：

测试：

var person = {
	'name': 'yang',
	'age': '22',
	'city': 'shanghai'
};

for (var i in person) {
        console.log(i);     //  name age city 
	console.log(person[i]);   //  yang 22 shanghai
}

类数组里面不像数组，是有顺序之分的。如：若要获取person的名字：
person.name 或 person['name']
但如果对象的key值为数字的话：

var person = {
	0: 'yang',
	1: '22',
	'city': 'shanghai'
};
console.log(person[0]); 

就要写成 person[0] 这种形式不能写成 person.0;

4. .data() api : http://api.jquery.com/data/
   .data() 和 .attr() 的区别实际上就是 dom 和 jq 的区别

elA.data('someKey','someValue');    //jq 设置
console.log(elB.data('someKey'));  //jq获得 someValue

console.log(elA.attr('data-someKey')); //   通过他的dom获得  undefined
console.log(document.body.someKey);   //  通过他的dom 获得  undefined

elB.attr('data-key','someValue2');  // 设置dom
console.log(elA.data('key')); // jq 获得 someValue2
console.log(elB.data('key')); // jq 获得 someValue2

即：
使用 attr() 每次都从DOM元素中取属性的值，或设置值且显示在html标签上，用jq的 .data()属性可以获取其属性值；
使用 .data() 是从将其属性值保存在内存中，不会显示在html上 用.attr()方法获得不到其属性；

同时从性能的角度来说，建议使用$.data()来进行set和get操作，因为它仅仅修改的Jquey对象的属性值，不会引起额外的DOM操作。