JavaScript精髓笔记（从Java到JavaScript） -

标注有星号（*）的章节不是重点章节，可粗略阅读。

一、JavaScript引入外部的js文件

要在JavaScript中引入外部js文件，可以在JavaScript的顶部添加如下代码：

// xxx.js表示外部js文件的路径
document.write("<script language=javascript src='xxx.js'></script>");

二、undefined 和 null

undefined和null是有区别的。undefined 表示声明了变量但未赋值。null表示赋值为null，但这也是已赋值了。

var person; // undefined，声明变量但未赋值
var cat = null; // null，赋值为null

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

三、JavaScript对象

JavaScript和Java一样，也是面向对象编程。JavaScript对象可以看作是键值对（键值包括属性和方法）的容器，只存储键值对，该键被称为对象属性。方法也可用键值对的方式在对象里定义，所以说JavaScript是键值对的容器。访问时类似Java的Map或对象的访问。如下：

var person = {
    name: 'lan',
    age: 12,
    edit: function(){
        // ...
    }
}

var name0 = person.name;
var name1 = person['name']; // 和person.name的值一样

另外，所有的DOM元素都可以看做是对象，访问DOM的属性（不包括自定的属性），和访问对象的属性的方式一样。

<button id="aaa" value="hello" sortId="123" onclick="show(this);">点我后我就消失了</button>
<script>
    function(buttonObj) {
        console.log(buttonObj.id); // aaa
        console.log(buttonObj.value); // hello
        console.log(buttonObj.sortId); // undefined，由于button不是sortId属性，所以输出undefined（即使在button元素上自定义sortId的值）
    }
</script>

*在 JavaScript 中函数也是对象，对象则有方法，其中call()和apply()是函数对象的两个自带的方法，可以切换函数执行的上下文环境（context）。在下文的章节“this关键字”中会讲到。

四、JavaScript中函数（function）和方法（method）的区别

JavaScript中，函数和方法是有区别的。函数是全局的，方法是在对象中的特殊属性。

function createPerson() { // 此为函数，是全局的。
    // ...
}

var person = {
    name: 'lan',
    age: 12,
    edit: function(){ // 此为方法，与对象的edit属性绑定的函数，所以说方法是对象中的特殊属性。
        // ...
    };
    create: createPerson(); // 和函数createPerson()绑定
}

五、常见的HTML事件

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

六、不同类型的循环

JavaScript 支持不同类型的循环：

for - 循环代码块一定的次数
for/in - 循环遍历对象的属性
while - 当指定的条件为 true 时循环指定的代码块
do/while - 同样当指定的条件为 true 时循环指定的代码块

七、获取字符串或数组的长度

获取字符串或数组的长度，都是可以直接使用对象的length属性。

// 获取字符串或数组的长度
var str = 'hello, world';
console.log(str.length);

var colors = ['red','white','black','blue'];
console.log(colors.length);

八、等于（==）和绝对等于（===）

等于（==）表示值相等，绝对等于（===）表示值和类型都相等。

null === undefined           // false
null == undefined            // true

var x = "John";              
var y = new String("John");
x == y // true
x === y // false，因为 x 是字符串，y 是对象

九、正则表达式

参考https://www.runoob.com/js/js-regexp.html

test()方法检测一个字符串是否匹配某个正则表达式。匹配则返回true。

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

十、调试

在JavaScript中添加debugger关键字，然后在控制台中调试。参考https://www.runoob.com/js/js-debugging.html

var x = 15 * 5;
debugger;
document.getElementbyId("demo").innerHTML = x;

十一、严格模式*

严格模式下不能使用未声明的变量，不允许删除变量或对象，不允许删除函数，不允许变量重名，不允许使用八进制，不允许使用转义字符，不允许对只读属性赋值，不允许对一个使用getter方法读取的属性进行赋值，不允许删除一个不允许删除的属性（系统属性等），变量名不能使用 "eval" 字符串，变量名不能使用 "arguments" 字符串，等等。

添加 “use strict;”来声明严格模式。可以在函数内部作局部声明，也可以在函数外作全局声明。

x = 0; // 不报错
function test() {
    use strict;
    y = 0;// 严格模式下，该处会报错。
}

十二、使用误区*

switch语句会使用绝对等于（===）进行比较

var x = 10;
switch(x) {
    case "10": alert("Hello"); // 不会进入此处
}

浮点型数据使用注意事项。所有的编程语言，包括 JavaScript，对浮点型数据的精确度都很难确定。

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

z = (x * 10 + y * 10) / 10;  // z 的结果为 0.3
if (z == 0.3)            // 返回 true

定义数组元素时，最后一个元素后面添加逗号，部分浏览器识别数组的长度时有差异。

var colors = [5, 6, 7,]; //这样数组的长度可能为3 也可能为4。

定义对象时，最后的属性不能加逗号。

var person = {name:"Mike", age:12, weight:60,}; // 错误的定义方式，最后一个属性尾部有逗号
var cat = {name:"John", age:2, weight:10}; // 正确的定义方式

十三、表单验证

document.forms

通过document.forms[formName][InputName]获取表单名为formName，name为inputName的input元素。

<form name="myForm" onsubmit="validateForm()">
    <input name="myName">
</form>
<script>
    function validateForm(){
        var myName = document.forms["myForm"]["myName"];
        if(nyName == null || myName == "") {
            alert("myName为空");
            return false;
        }
    }

</script>

验证input元素的API*

参考https://www.runoob.com/js/js-validation-api.html

约束验证input元素的方法

方法

描述

checkValidity()

验证input元素的value是否合法，合法则返回true

setCustomValidity()

设置 input 元素的 validationMessage 属性，该属性是input元素的value非法时的错误提示信息，有默认值。

使用 setCustomValidity()设置了自定义错误提示信息后，validity.customError 就会变成true（validity是input元素的属性，会在下文中讲到），则 checkValidity()方法总是会返回false。如果要重新判断需要取消自定义提示，方式如下：

setCustomValidity('');

setCustomValidity(null);

setCustomValidity(undefined);

<input id="inputObj" type="number" min="100" max="300" required>
<button onclick="myFunction()">验证</button>

<p id="demo"></p>
 
<script>
function myFunction() {
    var $inputObj = document.getElementById("inputObj");
    if ($inputObj.checkValidity() == false) {
        document.getElementById("demo").innerHTML = $inputObj.validationMessage; // validationMessage有默认值。
    }
}
</script>

约束验证input元素的属性

属性	描述
validity	布尔类型，input元素的value的值合法时返回true。该属性包含一系列子属性，下文中会讲到。
validationMessage	input元素非法时浏览器的错误提示信息
willValidate	指定input元素的value是否需要验证

validity属性的子属性

input元素的validity属性包含着一些列的子属性，例如customError、patternMismatch、valueMissing、typeMismatch、valid，等等。参考https://www.runoob.com/js/js-validation-api.html

十四、this关键字

JavaScript的this关键字不是固定不变的，而是随着环境的改变而改变的。

在方法中，this表示该方法所属的对象，控制台输出为[Object Object]。
如果单独使用，this表示全局（Global）对象，函数的所属者默认绑定到 this 上。在浏览器中，window就是全局对象，控制台输出为[object Window]。
在函数中，this表示全局对象，但严格模式下，this是未定义的（undefined）。
在事件中，this表示接收事件的元素。

<button onclick="this.style.display='none'">点我后我就消失了</button>

类似 call() 和 apply() 方法可以将函数对象中的this引用到任何的对象。

var person1 = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
var person2 = {
  firstName:"John",
  lastName: "Doe",
}
person1.fullName.call(person2);  // 返回 "John Doe"。call()方法将fullName()方法中的this（切换前是person1）切换成person2。

十五、let和const关键字

let 声明的变量只在 let 命令所在的代码块（包括循环块，但不包括函数块）内有效。const 声明一个只读的常量，一旦声明，在其同级的块作用域内，该常量值（可能是对象或数组的引用）就不能改变，与 Java 的 static 相似。

let 和 const 的相似点
- 二者都是块级作用域
- 都不能和它所在同级的块作用域内的其他变量或函数拥有相同的名称
let 和const 的不同点
- const 声明的常量必须初始化
- const 定义常量的值，在其同级的块作用域不能通过再赋值修改，也不能再次声明。

var a = 1;
{
    var a = 2;
}
console.log(a); // 2

let b = 1;
{
    let b = 2;
}
console.log(b); // 1

const c = 1;
{
    c = 2; // 非法
    const c = 2; // 合法
}
console.log(c); // 1

十六、JSON

语法规则
- 数据为键/值对。
- 数据由逗号分隔。
- 大括号保存对象。
- 方括号保存数组
相关函数

方法	描述
JSON.parse()	用于将一个 JSON 字符串转换为 JavaScript 对象。
JSON.stringify()	用于将 JavaScript 值转换为 JSON 字符串。

var text = '{ "sites" : [{ "name":"Runoob" , "url":"www.runoob.com" },' +
    '{ "name":"Google" , "url":"www.google.com" },' +
    '{ "name":"Taobao" , "url":"www.taobao.com" } ]}';
var obj = JSON.parse(text); // JSON转为JavaScript的对象

var person = {name: 'lan', age: 12, children: ['Mike', 'John', 'Lily']};
var personJson = JSON.stringify(person); // JavaScript对象转成JSON

void()

void()仅仅代表不返回任何值（undefined），但括号内的表达式还是会执行的。

<!-- href="javascript:void(0);"，声明了href执行javascript -->
<a href="javascript:void(0);">点击此处的链接无反应</a>
<a href="javascript:void(alert('hello'));">点击此处弹出hello</a>
<a href="#pos">定位到id为pos的元素</a>
<p id="pos">此处id为pos</p>

十七、函数

自调用函数

在函数表达式后面添加()，则会自动调用。

<p id="demo"></p>
<script>
(function () {
    document.getElementById("demo").innerHTML = "Hello! 我是自己调用的";
})(); // 函数表达式后面添加()
</script>

函数是对象

JavaScript函数有属性和方法。使用typeof操作符判断函数的类型时返回function，arguments.length 属性返回函数调用过程接收到的参数个数，toString() 方法将函数作为一个字符串，等等。

function myFunction(a, b) {
    return arguments.length;
}
var txt = myFunction.toString();

显示参数（parameters）和隐式参数（arguments）

显式参数在函数定义时列出，隐式参数在函数调用时传递给函数真正的值。隐式参数的个数和显示参数的个数可以不相等。

function add(a, b, c) { // 显示参数为三个
    if(c == null) { // c === undefined
        c = 0;
    }
    return a+b+c;
}
var res = add(10, 20); // 可以传两个参数

function multiply(a, b, c=10) { // 可以自带参数。c的默认值为10
    
}
var res = multiply(10, 20); // 2000
var res = multiply(10, 20, 1); // 200

通过函数对象的arguments属性（类型是数组），可以获取所有的隐式参数（调用时的入参）。

x = sumAll(1, 123, 500, 115, 44, 88);
 
function sumAll() {
    var i, sum = 0;
    for (i = 0; i < arguments.length; i++) { // arguments表示所有的隐式参数（调用时的入参）
        sum += arguments[i];
    }
    return sum;
}

另外需要注意JavaScript的值传递和对象传递（和Java一样）。

十八、闭包*

参考https://www.cnblogs.com/onepixel/p/5062456.html

JavaScript精髓笔记（从Java到JavaScript）

一、JavaScript引入外部的js文件

二、undefined 和 null

三、JavaScript对象

四、JavaScript中函数（function）和方法（method）的区别

五、常见的HTML事件

六、不同类型的循环

七、获取字符串或数组的长度

八、等于（==）和绝对等于（===）

九、正则表达式

十、调试

十一、严格模式*

十二、使用误区*

十三、表单验证

document.forms

验证input元素的API*

十四、this关键字

十五、let和const关键字

十六、JSON

语法规则

相关函数

void()

十七、函数

自调用函数

函数是对象

显示参数（parameters）和隐式参数（arguments）

十八、闭包*

Ta的最新文章

标签大全

阅读目录