我的JavaScript学习杂录

JS基础

学习JavaScript之前需要知道

• HTML 定义了网页的内容
• CSS 描述了网页的布局
• JavaScript 网页的行为

JS是脚本语言，脚本可被放置在 HTML 页面的 和 部分中，或者同时存在于两个部分中,亦或者放在外部文件（需要）

输出

JavaScript 可以通过不同的方式来输出数据：

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

拆行

可以在文本字符串中使用反斜杠对代码行进行换行

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

但不能

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

undefined 和 null

• 未使用值来声明的变量，其值实际上是 undefined。
• 如果重新声明 JavaScript 变量，该变量的值不会丢失：在以下两条语句执行后，变量 carname 的值依然是 “Volvo”：

var carname="Volvo";
var carname;

• null是空对象引用，undefined是值和类型未定义

<script>
 var x;
  var y=1;
  document.write(typeof y);//number
  document.write("
");
  y=null;
  document.write(typeof y);//object
  document.write("
");
  document.write(typeof x);//undefined
  var z=[1,2,3];
  document.write("
");
  document.write(typeof z);//object
</script>

对象

var person={
firstname : "John",
lastname  : "Doe",
id        :  5566
};

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

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

数组

• 创建数组的三种办法：

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

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

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

• 可以使用 constructor 属性来查看对象是否为数组 (包含字符串 “Array”):

function isArray(myArray) {
    return myArray.constructor.toString().indexOf("Array") > -1;
}

函数

• 带参函数

<button onclick="myFunction('Harry Potter','Wizard')">点击这里</button>
<script>
function myFunction(name,job){
    alert("Welcome " + name + ", the " + job);
}
</script>

• 变量值传递，对象引用传递

<script>
	function f1(x){
        x=100;
    }
    function objectChange(o){
        o.x=100;
    }
    var x=1;
    f1(x);
    document.write(x);//输出1
    document.write("
");
    
    var o1={
        x:1,
        y:2
    };
    objectChange(o1);
    document.write(o1.x);//输出100

</script>

• 函数表达式可以存储在变量中：

var x = function (a, b) {return a * b};
document.getElementById("demo").innerHTML = x;
//输出结果：function (a, b) {return a * b}

//这么调用
var z = x(4, 3);

以上函数实际上是一个 匿名函数，函数存储在变量中，不需要函数名称，通常通过变量名来调用。

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

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

• 函数虽然typeof返回function，不过在 JavaScript 中, 函数是对象。JavaScript 函数有它的属性和方法。

function myFunction(a, b) {
    return arguments.length;
}//arguments.length 属性返回函数接收到参数的个数。输出结果为：2

function myFunction(a, b) {
    return a * b;
}
var txt = myFunction.toString();
//toString() 方法将函数作为一个字符串返回。输出结果：function myFunction(a, b) { return a * b; }

• ES6 新增了箭头函数。

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

这是最标准的写法，有更简洁的

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

• ES6 支持函数带有默认参数，如果缺失传入参数，会被设置为undefined

function myFunction(x, y = 10) {
    // 如果不传入参数 y ，则其默认值为 10
    return x + y;
}

• JavaScript 函数有个内置的对象 arguments 对象。argument 对象包含了函数调用的参数数组。

x = findMax(1, 123, 500, 115, 44, 88);	//输出结果为500
 
function findMax() {
    var i, max = arguments[0];
    
    if(arguments.length < 2) return max;
 
    for (i = 0; i < arguments.length; i++) {
        if (arguments[i] > max) {
            max = arguments[i];
        }
    }
    return max;
}

• call() 和 apply() 是预定义的函数方法。 两个方法可用于调用函数，两个方法的第一个参数必须是对象本身。

function myFunction(a, b) {
    return a * b;
}
myObject = myFunction.call(myObject, 10, 2);     // 返回 20

function myFunction(a, b) {
    return a * b;
}
myArray = [10, 2];
myObject = myFunction.apply(myObject, myArray);  // 返回 20

两个方法都使用了对象本身作为第一个参数。 两者的区别在于第二个参数： apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入，而call则作为call的参数传入（从第二个参数开始）

在 JavaScript 严格模式(strict mode)下, 在调用函数时第一个参数会成为 this 的值， 即使该参数不是一个对象。

在 JavaScript 非严格模式(non-strict mode)下, 如果第一个参数的值是 null 或 undefined, 它将使用全局对象替代。

变量

• 如果把值赋给尚未声明的变量，该变量将被自动作为 window 的一个属性。以下语句将声明 window 的一个属性 carname，属于全局属性，可以delete。

carname="Volvo";

• 局部变量在函数执行完毕后销毁。全局变量在页面关闭后销毁。

数据类型

• 数字转换字符串
  全局方法String() 、toString()可以将数字转换为字符串。

String(123)       // 将数字 123 转换为字符串并返回

(123).toString()

• 字符串转换为数字
  全局方法 Number() 可以将字符串转换为数字。
  空字符串转换为 0。
  其他的字符串会转换为 NaN (不是个数字)

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

正则表达式

• 使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式，可用于文本搜索和文本替换。
• 语法：/正则表达式主体/修饰符(可选)
• 正则表达式通常用于两个字符串方法 : search() 和 replace()。

var str = "Visit Runoob!"; 
var n = str.search(/Runoob/i);//i是一个修饰符，指明搜索不区分大小写，结果为6

var str = document.getElementById("demo").innerHTML; 
var txt = str.replace(/microsoft/i,"Runoob");//输出为Visit Runoob!

修饰符

修饰符	描述
i	执行大小写不敏感的匹配
g	执行全局匹配
m	执行多行匹配

正则表达式模式

表达式	描述
[abc]	查找方括号之间的任何字符
[0-9]	查找任何从 0 至 9 的数字。

元字符	描述
\d	查找数字。
\s	查找空白字符。
\b	匹配单词边界。
\uxxxx	查找以十六进制数 xxxx 规定的 Unicode 字符。

量词	描述
n+	匹配任何包含至少一个 n 的字符串。
n*	匹配任何包含零个或多个 n 的字符串。
n?	匹配任何包含零个或一个 n 的字符串。

• test() 方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。

var patt = /e/;
patt.test("The best things in life are free!");//输出为true

//也可以合并
/e/.test("The best things in life are free!")

• exec() 方法用于检索字符串中的正则表达式的匹配。该函数返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。

/e/.exec("The best things in life are free!");//输出为  e

变量提升

JavaScript 中，函数及变量的声明都将被提升到函数的最顶部。JavaScript 中，变量可以在使用后声明，也就是变量可以先使用再声明。
JavaScript 只有声明的变量会提升，初始化的不会。
尽量在头部声明变量。

严格模式

• “use strict"
• 不允许使用未声明的变量
• 不允许删除变量或对象、函数
• 不允许变量重名
• 不允许使用转义字符
• 不允许对只读属性赋值

"use strict";
var obj = {};
Object.defineProperty(obj, "x", {value:0, writable:false});

obj.x = 3.14;            // 报错

• 不允许对一个使用getter方法读取的属性进行赋值

"use strict";
var obj = {get x() {return 0} };

obj.x = 3.14;            // 报错

• 不允许删除一个不允许删除的属性
• 变量名不能使用 “eval” 字符串
• 变量名不能使用 “arguments” 字符串
• 由于一些安全原因，在作用域 eval() 创建的变量不能被调用
• 禁止this关键字指向全局对象

function f(){
    return !this;
} 
// 返回false，因为"this"指向全局对象，"!this"就是false

function f(){ 
    "use strict";
    return !this;
} 
// 返回true，因为严格模式下，this的值为undefined，所以"!this"为true。

因此，使用构造函数时，如果忘了加new，this不再指向全局对象，而是报错。

function f(){
    "use strict";
    this.a = 1;
};
f();// 报错，this未定义

表单

HTML 表单验证可以通过 JavaScript 来完成。

//以下实例代码用于判断表单字段(fname)值是否存在， 如果不存在，就弹出信息，阻止表单提交


<html>
<head>
<meta charset="utf-8">
<script>
function validateForm() {
    var x = document.forms["myForm"]["fname"].value;
    if (x == null || x == "") {
        alert("需要输入名字。");
        return false;
    }
}
script>
head>
<body>

<form name="myForm" action="demo_form.php"
onsubmit="return validateForm()" method="post">
名字: <input type="text" name="fname">
<input type="submit" value="提交">
form>

body>
html>

//验证输入的数字

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<h1>JavaScript 验证输入</h1>

<p>请输入 1 到 10 之间的数字：</p>

<input id="numb">

<button type="button" onclick="myFunction()">提交</button>

<p id="demo"></p>

<script>
function myFunction() {
    var x, text;

    // 获取 id="numb" 的值
    x = document.getElementById("numb").value;

    // 如果输入的值 x 不是数字或者小于 1 或者大于 10，则提示错误 Not a Number or less than one or greater than 10
    if (isNaN(x) || x < 1 || x > 10) {
        text = "输入错误";
    } else {
        text = "输入正确";
    }
    document.getElementById("demo").innerHTML = text;
}
</script>

</body>
</html>

HTML 表单验证也可以通过浏览器来自动完成。如果表单字段 (fname) 的值为空, required 属性会阻止表单提交：

<body>

<form action="demo_form.php" method="post">
  <input type="text" name="fname" required="required">
  <input type="submit" value="提交">
form>

<p>点击提交按钮，如果输入框是空的，浏览器会提示错误信息。p>

body>

const

• const 定义的变量并非常量，并非不可变，它定义了一个常量引用一个值。使用 const 定义的对象或者数组，其实是可变的。下面的代码并不会报错：

<script>
// 创建常量对象
const car = {type:"Fiat", model:"500", color:"white"};
 
// 修改属性:
car.color = "red";
 
// 添加属性
car.owner = "Johnson";

// 显示属性
document.getElementById("demo").innerHTML = "Car owner is " + car.owner; 
</script>

//输出：Car owner is Johnson

但是我们不能对常量对象重新赋值：

const car = {type:"Fiat", model:"500", color:"white"};
car = {type:"Volvo", model:"EX60", color:"red"};    // 错误

数组也是相同：

// 创建常量数组
const cars = ["Saab", "Volvo", "BMW"];
 
// 修改元素
cars[0] = "Toyota";
 
// 添加元素
cars.push("Audi");

但是我们不能对常量数组重新赋值：

const cars = ["Saab", "Volvo", "BMW"];
cars = ["Toyota", "Volvo", "Audi"];    // 错误