JavaScript 小细节(一)

1、如需在 HTML 页面中插入 JavaScript，请使用 <script> 标签。

那些老旧的实例可能会在 <script> 标签中使用 type="text/javascript"。现在已经不必这样做了。JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。

 

2、也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。如需使用外部文件，请在 <script> 标签的 "src" 属性中设置该 .js 文件：

外部 JavaScript 文件的文件扩展名是 .js。外部脚本不能包含 <script> 标签。

 

3、JavaScript 输出语句：

• 使用 window.alert() 弹出警告框。
• 使用 document.write() 方法将内容写到 HTML 文档中。
• 使用 innerHTML 写入到 HTML 元素。
• 使用 innerText 写入到 HTML 元素。
• 使用 console.log() 写入到浏览器的控制台。

4、JavaScript 字面量

• 字符串（String）字面量 可以使用单引号或双引号；
• 数字（Number）字面量 可以是整数或者是小数，或者是科学计数(e)。如：123e5 == 12300000；
• 数组（Array）字面量 定义一个数组：[40, 100, 1, 5, 25, 10]；
• 对象（Object）字面量 定义一个对象：{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}；
• 函数（Function）字面量 定义一个函数：function myFunction(a, b) { return a * b;}

5、分号用于分隔 JavaScript 语句。通常我们在每条可执行的语句结尾添加分号。使用分号的另一用处是在一行中编写多条语句。

【在 JavaScript 中，用分号来结束语句是可选的。】

 

6、您可以在一条语句中声明很多变量。该语句以 var 开头，并使用逗号分隔变量即可：

?

1 2 3 4 5 6

var lastname="Doe", age=30, job="carpenter";   //声明也可横跨多行： var lastname="Doe", 　　age=30, 　　job="carpenter";

【一条语句中声明的多个变量不可以同时赋同一个值:var x,y,z=1;  执行结果是====> x,y 为 undefined， z 为 1。】

 

7、如果重新声明 JavaScript 变量，该变量的值不会丢失，在以下两条语句执行后，变量 carname 的值依然是 "Volvo".

在相同的作用域，或在相同的块中，通过 let 重新声明一个 var 变量是不允许的：

?

1 2 3 4 5 6 7 8 9 10 11 12

var carname="Volvo"; var carname; // Volvo   //ES2015 引入了两个重要的 JavaScript 新关键词：let 和 const let name = '张三'; // 报错:Uncaught SyntaxError: Identifier 'name' has already been declared // 标识符“name”已经被声明  let name;   // const username // 报错,常量定义的时候必须赋值 const username = 'Tom'; // username = 'zhangsan';//  报错,常量不能被重新赋值

　　

8、对象也是一个变量，但对象可以包含多个值（多个变量），每个值以 name:value 对呈现。【JavaScript 对象是变量的容器】 

?

1 2 3 4 5 6 7 8 9 10 11 12 13

var car = {name:"Fiat", model:500, color:"white"};   //定义 JavaScript 对象可以跨越多行，空格跟换行不是必须的： var person = {   　　 firstName:"John",   　　 lastName:"Doe",  　　  age:50,  　　  eyeColor:"blue" 　　};   //两种方式访问对象属性: person.firstName; person["lastName"];

　　

9、有时，我们会希望函数将值返回调用它的地方。通过使用 return 语句就可以实现。在使用 return 语句时，函数会停止执行，并返回指定的值。

?

1 2 3 4 5 6 7 8 9 10 11 12 13

// 定义函数方式一 function myFunction() {     var x=5;     return x; }   // 定义函数方式二 var myFunction = function() {     var x=5;     return x; }

注意： 整个 JavaScript 并不会停止执行，仅仅是函数。JavaScript 将继续执行代码，从调用函数的地方。

函数调用将被返回值取代：var myVar=myFunction();

 

在您仅仅希望退出函数时 ，也可使用 return 语句。返回值是可选的：

?

1 2 3 4 5 6 7

// 如果 a 大于 b，则上面的代码将退出函数，并不会计算 a 和 b 的总和. function myFunction(a,b) { 　　if (a>b) { 　　　　return; 　　} 　　 x=a+b }

如果函数无明确的返回值，或调用了没有参数的 return 语句，那么它真正返回的值是 undefined。

 

10、 作用域

变量在函数外定义，即为全局变量。全局变量有 全局作用域: 网页中所有脚本和函数均可使用。全局变量在页面关闭后销毁。

?

1 2 3 4 5 6 7 8 9

var carName = " Volvo";   // 此处可调用 carName 变量   function myFunction() {   　　// 函数内可调用 carName 变量   }

　　

如果您把值赋给尚未声明的变量，该变量将被自动作为 window 的一个属性。

carname="Volvo";

将声明为 window 的一个属性。非严格模式下给未声明变量赋值创建的全局变量，是全局对象的可配置属性，可以删除。

?

1 2 3 4 5 6 7 8 9 10 11 12 13

var var1 = 1; // 不可配置全局属性 var2 = 2; // 没有使用 var 声明，可配置全局属性;只在当前的sript标签内可使用   console.log(this.var1); // 1 console.log(window.var1); // 1 console.log(window.var2); // 2   delete var1; // false 无法删除 console.log(var1); //1   delete var2; console.log(delete var2); // true console.log(var2); // 已经删除 报错变量未定义

　　

如果变量在函数内没有声明（没有使用 var 关键字），该变量也为全局变量。

?

1 2 3 4 5 6 7

// 此处可调用 carName 变量   function myFunction() {   　　carName = "Volvo"; // 此处可调用 carName 变量   }

 

11、块作用域　　

 通过 var 关键词声明的变量没有块作用域。在块 {} 内声明的变量可以从块之外进行访问。在 ES2015 之前，JavaScript 是没有块作用域的。可以使用 let 关键词声明拥有块作用域的变量。在块 {} 内声明的变量无法从块外访问：

?

1 2 3 4 5 6 7 8 9

{   var x = 10; } // 此处可以使用 x //=========================== {   let x = 10; } // 此处不可以使用 x

 

使用 var 关键字重新声明变量会带来问题。在块中重新声明变量也将重新声明块外的变量,使用 let 关键字重新声明变量可以解决这个问题。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

var x = 10; // 此处 x 为 10 {   var x = 6;   // 此处 x 为 6 } // 此处 x 为 6   //===========================   var x = 10; // 此处 x 为 10 {   let x = 6;   // 此处 x 为 6 } // 此处 x 为 10

 

12、通过 var 声明的变量会提升到顶端,您可以在声明变量之前就使用它.　

通过 let 定义的变量不会被提升到顶端,在声明 let 变量之前就使用它会导致 ReferenceError。

?

1 2 3 4 5 6 7

console.log(name);//在此处，您可以使用name，但是name=undefined var name = "张三";   //=================   console.log(name);//在此处，您不可以使用name let name = "张三";

　　　

13、for-in 语句循环遍历对象的属性：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

var person = {     fname: "Bill",     lname: "Gates",     age: 56 }; // for-in 遍历对象: x为对象属性的key, person[x] 为对象属性的value for (x in person) {     console.log(x + ": " + person[x]) } /* 控制台输出结果: fname: Bill lname: Gates age: 56 */