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 开头,并使用逗号分隔变量即可:
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 变量是不允许的:
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 对象是变量的容器】
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 语句时,函数会停止执行,并返回指定的值。
// 定义函数方式一 function myFunction() { var x=5; return x; } // 定义函数方式二 var myFunction = function() { var x=5; return x; }
注意: 整个 JavaScript 并不会停止执行,仅仅是函数。JavaScript 将继续执行代码,从调用函数的地方。
函数调用将被返回值取代:var myVar=myFunction();
在您仅仅希望退出函数时 ,也可使用 return 语句。返回值是可选的:
// 如果 a 大于 b,则上面的代码将退出函数,并不会计算 a 和 b 的总和. function myFunction(a,b) { if (a>b) { return; } x=a+b }
如果函数无明确的返回值,或调用了没有参数的 return 语句,那么它真正返回的值是 undefined。
10、 作用域
变量在函数外定义,即为全局变量。全局变量有 全局作用域: 网页中所有脚本和函数均可使用。全局变量在页面关闭后销毁。
var carName = " Volvo"; // 此处可调用 carName 变量 function myFunction() { // 函数内可调用 carName 变量 }
如果您把值赋给尚未声明的变量,该变量将被自动作为 window 的一个属性。
carname="Volvo";
将声明为 window 的一个属性。非严格模式下给未声明变量赋值创建的全局变量,是全局对象的可配置属性,可以删除。
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 关键字),该变量也为全局变量。
// 此处可调用 carName 变量 function myFunction() { carName = "Volvo"; // 此处可调用 carName 变量 }
11、块作用域
通过 var 关键词声明的变量没有块作用域。在块 {} 内声明的变量可以从块之外进行访问。在 ES2015 之前,JavaScript 是没有块作用域的。可以使用 let 关键词声明拥有块作用域的变量。在块 {} 内声明的变量无法从块外访问:
{ var x = 10; } // 此处可以使用 x //=========================== { let x = 10; } // 此处不可以使用 x
使用 var 关键字重新声明变量会带来问题。在块中重新声明变量也将重新声明块外的变量,使用 let 关键字重新声明变量可以解决这个问题。
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。
console.log(name);//在此处,您可以使用name,但是name=undefined var name = "张三"; //================= console.log(name);//在此处,您不可以使用name let name = "张三";
13、for-in 语句循环遍历对象的属性:
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 */