JavaScript琐碎知识点

1.For/In 循环

JavaScript for/in 语句循环遍历对象的属性：

var person={fname:"John",lname:"Doe",age:25}; 
 
for (x in person)  // x 为属性名
{
    txt=txt + person[x];
}

2.赋值运算符

if 条件语句返回 false (是我们预期的)因为 x 不等于 10:

var x = 0;
if (x == 10)

if 条件语句返回 true (不是我们预期的)因为条件语句执行为 x 赋值 10，10 为 true:

var x = 0;
if (x = 10)

if 条件语句返回 false (不是我们预期的)因为条件语句执行为 x 赋值 0，0 为 false:

var x = 0;
if (x = 0)

3.加法与连接

加法是两个数字相加。
连接是两个字符串连接。

var x = 10 + 5;          // x 的结果为 15
var x = 10 + "5";        // x 的结果为 "105"

4.浮点型数据使用注意事项

var x = 0.1;
var y = 0.2;
var z = x + y            // z 的结果为 0.3
if (z == 0.3)            // 返回 false

//输出z的结果为
0.30000000000000004

为解决以上问题，可以用整数的乘除法来解决：

var z = (x * 10 + y * 10) / 10;       // z 的结果为 0.3

5.return语句使用注意事项

JavaScript 默认是在代码的最后一行自动结束。
以下两个实例返回结果是一样的(一个有分号一个没有):

//一
function myFunction(a) {
    var power = 10  
    return a * power
}

//二
function myFunction(a) {
    var power = 10;
    return a * power;
}

JavaScript 也可以使用多行来结束一个语句。
以下实例返回相同的结果:

function myFunction(a) {
    var
    power = 10;  
    return a * power;
}

但是，以下实例结果会返回 undefined：

function myFunction(a) {
    var
    power = 10;  
    return
    a * power;
}

为什么会有这样的结果呢？因为在 JavaScript 中，实例 4 的代码与下面的代码一致：

function myFunction(a) {
    var
    power = 10;  
    return;       // 分号结束，返回 undefined
    a * power;
}

所以

return   //这个语句是完整的,因为分号是可选的
			//在缺少了分号就无法正确解析代码的时候，JavaScript 才会填补分号。

等同于
return；

6.数组中使用名字来索引

使用名字来作为索引的数组称为关联数组(或哈希)。
JavaScript 不支持使用名字来索引数组，只允许使用数字索引。

var person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
var x = person.length;         // person.length 返回 3
var y = person[0];             // person[0] 返回 "John"

在 JavaScript 中, 对象 使用 名字作为索引。
如果你使用名字作为索引，当访问数组时，JavaScript 会把数组重新定义为标准对象。
执行这样操作后，数组的方法及属性将不能再使用，否则会产生错误:

var person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
var x = person.length;         // person.length 返回 0
var y = person[0];             // person[0] 返回 undefined

7.this关键字

面向对象语言中 this 表示当前对象的一个引用。
但在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。

• 在方法中，this 表示该方法所属的对象。
• 如果单独使用，this 表示全局对象。
• 在函数中，this 表示全局对象。
• 在函数中，在严格模式下，this 是未定义的(undefined)。
• 在事件中，this 表示接收事件的元素。
• 类似 call() 和 apply() 方法可以将 this 引用到任何对象。

this详解

8.代码规范

JavaScript代码规范

9.原型对象

不能给已存在的对象构造器添加新属性

a.继承
所有 JavaScript 中的对象都是位于原型链顶端的 Object 的实例。

JavaScript 对象有一个指向一个原型对象的链。当试图访问一个对象的属性时，它不仅仅在该对象上搜寻，还会搜寻该对象的原型，以及该对象的原型的原型，依次层层向上搜索，直到找到一个名字匹配的属性或到达原型链的末尾。

Date 对象, Array 对象, 以及 Person 对象从 Object.prototype 继承。
b.添加属性和方法
有的时候我们想要在所有已经存在的对象添加新的属性或方法。
另外，有时候我们想要在对象的构造函数中添加属性或方法。
使用 prototype 属性就可以给对象的构造函数添加新的属性：

function Person(first, last, age, eyecolor) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eyecolor;
}
 
Person.prototype.nationality = "English";

//若操作，则返回undfined，因为不能给已存在对象直接添加属性
Person.nationlity = "English";

JavaScript prototype

10.window对象

1.所有浏览器都支持 window 对象。它表示浏览器窗口。
2.所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
3.全局变量是 window 对象的属性。
4.全局函数是 window 对象的方法。
5.甚至 HTML DOM 的 document 也是 window 对象的属性之一：

window.document.getElementById("header");

余下相同
document.getElementById("header");

11.src和href属性的区别

src和href之间存在区别，能混淆使用。src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。

src：是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。

<script src ="js.js"></script>

当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，
图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

href：是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接

<link href="common.css" rel="stylesheet"/>

那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。
这也是为什么建议使用link方式来加载css，而不是使用@import方式。

12.响应式网页设计（RWD）

根据永和的浏览器环境（例如屏幕的宽度、长度、分辨率、长宽比或者移动设备的方向等），自动调整网页的版面配置，以提供最佳的显示效果。（开发人员只需开发一个网页，就可以同时适用于PC、平板电脑或智能手机等不同设备）

• 媒体查询：针对不同的媒体类型量身定做不同的样式表单。

@media screen{
	h1 {color:green}
}											//当媒体类型为screen时，就将标题一显示为绿色
@media print{
	h1 {color:red}
}											//当媒体类型为print时，就将标题一显示为红色

• 按比例缩放的元素：指定图片或对象等元素大小时，按照其父元素的大小比例进行缩放，而不是指定绝对大小

<div data-role="content">
		<img src="piece.jpg" width="100%">					//通过width="100%"指定图片的宽度为区块的100%
		<p>text</p>											//当屏幕的大小改变时，元素也按比例缩放
</div>

• 非固定的版面配置：根据浏览器的大小弹性配置网页的版面

//浏览器宽度小于等于480像素时，令版面包含column：1
@media screen and (max-width:480px){
	div {columns:1}
}

//浏览器宽度大于480像素小于768像素时，令版面包含column：2
@media screen and (min-width:480px) and (max-width:768px){
	div {columns:2}
}

//浏览器宽度大于769像素时，令版面包含column：1
@media screen and (min-width:769px){
	div {columns:3}
}

14.CSS注意事项

• 若属性的值包含英文字母、阿拉伯数字（0~9）、减号（-）或小数点以外的字符（例如空白、换行），那么属性的值前后必须 加上双引号或单引号。
• CSS会区分英文字母的大小写，和HTML不同。
• CSS的注释符号为/…/，与HTML的注释<!—>不同

15.MIME 类型

MIME (Multipurpose Internet Mail Extensions) 是描述消息内容类型的因特网标准。
MIME 消息能包含文本、图像、音频、视频以及其他应用程序专用的数据。
MIME类型

16.HTML <link> type 属性

<head>
<link rel="stylesheet" type="text/css" href="theme.css">
</head>

type 属性规定被链接文档/资源的 MIME 类型。
只有当设置了 href 属性时，才能使用该属性。
<link> 标签常用的 MIME 类型是 “text/css”，它规定样式表。

17.认识XHTML

XML：是一种标记语言，主要用途是传送、接收与处理数据，提供跨平台、跨程序的数据交换格式。
作用：扩大HTML的应用及适用性，允许用户自定义标签的属性。

制作一般的网页，使用HTML就够了，除非网页需要复杂的数据处理或链接数据库等，才可能会使用到XML。
XML区分英文字母的大小写。

XHTML：按照XML的基础，将HTML重新制定的一种标记语言。
1.包含一个或多个元素，但仅有一个根元素<html>
2.标签与属性必须是小写英文字母。
3.非空元素必须有结束标签
4.空元素语法

<img src="1.jpg"/>

5.任何属性都必须放在双引号中，包括英文字母、阿拉伯数字、减号或小数点
6.不能省略属性的默认值
7.使用id属性取代name属性

18.Math.max.apply()和Math.max的区别

• Javascript中的Math.max方法可以求出给定参数中最大的数。

> Math.max('1','2','3.1','3.2')
< 3.2
> Math.min(1,0,-1)
< -1 

但如果是数组，就不能这样调用了。

• apply 方法 (Function) (JavaScript)：调用函数，并用指定对象替换函数的 this 值，同时用指定数组替换函数的参数。

apply([thisObj[,argArray]])

thisObj
　　可选。 要用作 this 对象的对象。
argArray
　　可选。 要传递到函数的一组参数。

• Math.max.apply()使使数组也可以调用Math.max和Math.min。

function largestArray(arr){
    var result = [];			            //用于存放四个小数组中最大的数
    for (var i=0; i<arr.length; i++) {
        result.push(Math.max.apply(null, arr[i]));    //找出四个小数组中的最大值，然后插入新数组
    }
    return result;
}
document.write(largestArray([[165,2,9], [48,6,9,82],[6,5],[29658,91,2]])+"</br>");//输出结果：165,82,6,29658

19.call()、apply()、bind() 的用法

20.push()和concat（）的区别

concat()不改变数组的值，返回的是副本。
补充

21.href=”javascript:void(0);”

你所不知道的 void

22.深入浅出JavaScript之原型链&继承

23.JavaScript Errors 指南