Js学习笔记

分号

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

对代码行进行拆行

可以在文本字符串中使用反斜杠对代码行进行换行。下面的例子会正确地显示：

1 2	document.write("你好 \ 世界!");

不过，不能像这样拆行：

1 2	document.write \ ("你好世界!");

注释

采用 // 和 / / 两种。

变量

声明

JavaScript 变量均为对象。当您声明一个变量时，就创建了一个新的对象。

当您声明新变量时，可以使用 “new” 来声明其类型（首字母大写）：

var carname = new String;  //字符串
var x = new Number;        //数字  
var y = new Boolean;       //布尔
var cars = new Array;      //数组
var person = new Object;   //对象

赋值

1	var x,y,z=1;

x, y 为 undefined， z 为 1。

重新声明

如果重新声明 JavaScript 变量，该变量的值不会丢失：

1 2	var carname="Volvo"; var carname;

两条语句执行后，变量 carname 的值依然是 “Volvo”。

生存期

局部变量（函数内的变量，只能在函数内部访问它）会在函数运行以后被删除。

全局变量（函数外的变量，网页上的所有脚本和函数都能访问它）会在页面关闭后被删除。

向未声明的 JavaScript 变量分配值

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

这条语句：

1	carname="Volvo";

将声明 window 的一个属性 carname。

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

var var1 = 1; // 不可配置全局属性
var2 = 2; // 没有使用 var 声明，可配置全局属性

console.log(this.var1); // 1
console.log(window.var1); // 1

delete var1; // false 无法删除
console.log(var1); //1

delete var2; 
console.log(delete var2); // true
console.log(var2); // 已经删除 报错变量未定义

数组

创建名为 cars 的数组：

var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";

或者 (condensed array，压缩数组):

1	var cars=new Array("Saab","Volvo","BMW");

或者 (literal array，文本数组):

1	var cars=["Saab","Volvo","BMW"];

对象

对象由花括号分隔。对象的属性以 name : value 的形式来定义。属性由逗号分隔：

var person={
	firstname : "John",      //在对象中写属性
	lastname : "Doe",
	id : 5566,
	fullName : function()    //在对象中写方法
	{
       return this.firstName + " " + this.lastName;
    }
};

对象属性有两种寻址方式：

1 2	name = person.lastname; name = person["lastname"];

调用对象的方法：

name = person.fullName();   
//执行函数，返回：John Doe

name = person.fullName;     
//返回：function() { return this.firstName + " " + this.lastName; }
//调用方法时，不加括号，返回的是函数代码（相当于把方法看成属性了）

undefined 、null、typeof

undefined ：

表示变量不含有值。

是所有没有赋值变量的默认值，自动赋值。

null：

可以将变量的值设置为 null 来清空变量。

主动释放一个变量引用的对象，表示一个变量不再指向任何对象地址。

可以使用 typeof 操作符来检测变量的数据类型。

//null 和 undefined 的值相等，但类型不等：

typeof undefined             // undefined
typeof null                  // object
null === undefined           // false
null == undefined            // true

函数

函数变量

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

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

该例中， carName 在函数内，但是为全局变量。

匿名函数

函数存储在变量中，不需要函数名称，通常通过变量名来调用。

1 2	var x = function (a, b) {return a * b}; var z = x(4, 3);

自调用函数（还不太理解）

函数表达式可以 “自调用”。

自调用表达式会自动调用。

如果表达式后面紧跟 () ，则会自动调用。

不能自调用声明的函数。

通过添加括号，来说明它是一个函数表达式：

1
2
3

(function () {
    var x = "Hello!!";      // 我将调用自己
})();

以上函数实际上是一个 匿名自我调用的函数 (没有函数名)。

JavaScript 闭包

实例

var add = (function () {     
    var counter = 0;     
    return function () {return counter += 1;} 
})();   
add(); 
add(); 
add();   // 计数器为 3

实例解析

变量 add 指定了函数自我调用的返回字值。

自我调用函数只执行一次。设置计数器为 0。并返回函数表达式。

add变量可以作为一个函数使用。非常棒的部分是它可以访问函数上一层作用域的计数器。

这个叫作 JavaScript 闭包。它使得函数拥有私有变量变成可能。

计数器受匿名函数的作用域保护，只能通过 add 方法修改。函数是对象

在 JavaScript 中使用 typeof 操作符判断函数类型将返回 “function”

闭包是一种保护私有变量的机制，在函数执行时形成私有的作用域，保护里面的私有变量不受外界干扰。直观的说就是形成一个不销毁的栈环境。

箭头函数

ES6 新增了箭头函数。箭头函数的语法比普通函数更简洁。

(参数1, 参数2, …, 参数N) => { 函数声明 }

(参数1, 参数2, …, 参数N) => 表达式(单一)
// 相当于：(参数1, 参数2, …, 参数N) =>{ return 表达式; }

当只有一个参数时，圆括号是可选的：

1 2	(单一参数) => {函数声明} 单一参数 => {函数声明}

没有参数的函数应该写成一对圆括号:

1	() => {函数声明}

实例：

// ES5 
var x = function(x, y) {      
    return x * y; 
}   
// ES6 
const x = (x, y) => x * y;

参数规则

显式参数（形参）、隐式参数（实参）

JavaScript 函数定义显式参数时没有指定数据类型。

JavaScript 函数对隐式参数没有进行类型检测。

JavaScript 函数对隐式参数的个数没有进行检测。

let关键字

let 声明的变量只在其声明的块或子块中可用，这一点，与 var 相似。二者之间最主要的区别在于 var 声明的变量的作用域是整个封闭函数。

let 和 var 的区别代码实例：

function varTest() {
  var x = 1;
  if (true) {
    var x = 2;  // 同样的变量!
    console.log(x);  // 2
  }
  console.log(x);  // 2
}

function letTest() {
  let x = 1;
  if (true) {
    let x = 2;  // 不同的变量
    console.log(x);  // 2
  }
  console.log(x);  // 1
}

在相同的作用域或块级作用域中，不能使用 let 关键字来重置 var 关键字声明的变量:

var x = 2;       // 合法
let x = 3;       // 不合法

{
    var x = 4;   // 合法
    let x = 5   // 不合法
}

const关键字

使用 const 声明的是常量，其值一旦被设定便不可被更改。

常见的HTML事件

下面是一些常见的HTML事件的列表:

事件	描述
onchange	HTML 元素改变
onclick	用户点击 HTML 元素
onmouseover	用户在一个HTML元素上移动鼠标
onmouseout	用户从一个HTML元素上移开鼠标
onkeydown	用户按下键盘按键
onload	浏览器已完成页面的加载

字符串

字符串可以是对象

通常， JavaScript 字符串是原始值，可以使用字符创建：

1	var x = "John"

但我们也可以使用 new 关键字将字符串定义为一个对象：

1	var y = new String("John")

1 2	typeof x // 返回 String typeof y // 返回 Object

建议：不要创建 String 对象。它会拖慢执行速度，并可能产生其他副作用：

var x = "John";              
var y = new String("John");

(x === y) 
/* 
	结果为 false，因为 x 是字符串，y 是对象
	=== 为绝对相等，即数据类型与值都必须相等。
*/

关于更多字符串对象，请访问菜鸟String对象

For/In 循环

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

var person={fname:"John",lname:"Doe",age:25};    

for (x in person) {      // x 为属性名   
    txt=txt + person[x]; 
}
//txt最终为：JohnDoe25

js数据类型

在 JavaScript 中有 5 种不同的数据类型：

string
number
boolean
object
function

3 种对象类型：

Object
Date
Array

2 个不包含任何值的数据类型：

null
undefined

请注意：

NaN 的数据类型是 number
数组(Array)的数据类型是 object
日期(Date)的数据类型为 object
null 的数据类型是 object
未定义变量的数据类型为 undefined

类型转换

String(x)         // 将变量 x 转换为字符串并返回
x.toString()

Number("3.14")    // 返回 3.14
Number(" ")       // 返回 0 
Number("")        // 返回 0
Number("99 88")   // 返回 NaN

5 + null    // 返回 5         null 转换为 0
"5" + null  // 返回"5null"   null 转换为 "null"
"5" + 1     // 返回 "51"      1 转换为 "1"  
"5" - 1     // 返回 4         "5" 转换为 5

提升（hoisting）

提升（Hoisting）是 JavaScript 默认将当前作用域提升到前面去的行为。提升（Hoisting）应用在变量的声明与函数的声明。

变量提升

JavaScript 中，函数及变量的声明总是会被解释器悄悄地被”提升”到函数的最顶部。也就是说，哪怕变量在使用后才声明，也没事（有声明就好~）。

但

声明的时候顺便初始化了（如var y = 7;），此时不会被“提升”。

函数提升

函数可以在声明之前调用：

myFunction(5);  //先调用

function myFunction(y) {  //再声明
    return y * y;
}

使用表达式定义函数时无法提升。

“use strict”

JavaScript 严格模式（strict mode）即在严格的条件下运行。

实例1

"use strict";
myFunction();

function myFunction() {
    y = 3.14;   // 报错 (y 未定义)
}

实例2

x = 3.14;       // 不报错 
myFunction();

function myFunction() {
   "use strict";
    y = 3.14;   // 报错 (y 未定义)
}

为什么使用严格模式:

消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;
消除代码运行的一些不安全之处，保证代码运行的安全；
提高编译器效率，增加运行速度；
为未来新版本的Javascript做好铺垫。

“严格模式”体现了Javascript更合理、更安全、更严谨的发展方向，包括IE 10在内的主流浏览器，都已经支持它，许多大项目已经开始全面拥抱它。

另一方面，同样的代码，在”严格模式”中，可能会有不一样的运行结果；一些在”正常模式”下可以运行的语句，在”严格模式”下将不能运行。掌握这些内容，有助于更细致深入地理解Javascript，让你变成一个更好的程序员。

更多限制，点击此处

浮点型数据

JavaScript 中的所有数据都是以 64 位浮点型数据(float) 来存储。

所有的编程语言，包括 JavaScript，对浮点型数据的精确度都很难确定：

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

Gwofoo's blog