JavaScript 基础

欢迎光临我的博客[http://poetize.cn]，前端使用Vue2，聊天室使用Vue3，后台使用Spring Boot

前言

JavaScript 函数是一种 JavaScript 代码块，它可以在调用时被执行。

在 HTML 中，JavaScript 代码必须位于 标签之间。

<script>
function fun() {
    document.getElementById("demo").innerHTML = "js";
}

foo();
</script>

引入外部js

<script src="/js/myScript1.js"></script>

JavaScript 输出

• 使用 window.alert() 写入警告框

• 使用 document.write() 写入 HTML 输出
  提示：document.write() 方法仅用于测试。在 HTML 文档完全加载后使用 document.write() 将删除所有已有的 HTML

• innerHTML写入 HTML 元素。也就是从对象的起始位置到终止位置的全部内容,包括Html标签
innerText: 从起始位置到终止位置的内容, 但它去除Html标签

• 使用 console.log() 写入浏览器控制台

<script> 
document.getElementById("demo").innerText="AAA"; 
document.getElementById("demo").innerHTML="<font color=#ff0000>AAA</font>";
</script>

JavaScript 数据类型

Infinity（或 -Infinity）是 JavaScript 在计算数时超出最大可能数范围时返回的值：`typeOf Infinity` 返回 `number`

NaN 属于 JavaScript 保留词，指示某个数不是合法数：
var x = NaN;    var y = 5;    var z = x + y;    // z 将是 NaN    
typeof NaN;    // 返回 "number"

Undefined 与 null 的值相等，但类型不相等：
var x;               //值是 undefined，undefined类型
任何变量均可通过设置值为 undefined 进行清空。其类型也将是 undefined。

var person = null;           // 值是 null，但是类型仍然是对象
typeof null                  // 返回 "object"

typeof function myFunc(){}   // 返回 "function"

var x = true;    //布尔值
var car = "";                // 值是 ""，类型是 "string"
var length = 7;                             // 数字
var lastName = "Gates";                      // 字符串
当数值和字符串相加时，JavaScript 将把数值视作字符串。

var cars = ["Porsche", "Volvo", "BMW"];         // 数组
var x = {firstName:"Bill", lastName:"Gates"};    // 对象 

当在 HTML 页面中使用 JavaScript 时，JavaScript 能够“应对”这些事件。

<button onclick='document.getElementById("demo").innerHTML=Date()'>现在的时间是？</button>
注：JavaScript 代码通常有很多行。事件属性调用函数更为常见：<button onclick="displayDate()">现在的时间是？</button>

特殊字符

反斜杠转义字符把特殊字符转换为字符串字符：

\'	'	单引号
\"	"	双引号
\\	\	反斜杠

字符串

1. indexOf() 方法返回字符串中指定文本首次出现的首字母索引（位置）：
        var pos = str.indexOf("China");
2. lastIndexOf() 方法返回指定文本在字符串中最后一次出现的首字母索引：
        var pos = str.lastIndexOf("China");
        注：如果未找到文本， indexOf() 和 lastIndexOf() 均返回 -1。
3. search() 方法搜索特定值的字符串，并返回匹配的首字母位置：
        var pos = str.search("locate");
4. 提取部分字符串(不包括尾索引)
        裁剪字符串中位置 7 到位置 13 的片段：
            var res = str.slice(7,13);    //如果某个参数为负，则从字符串的结尾开始计数。
        如果省略第二个参数，则该方法将裁剪字符串的剩余部分：var res = str.slice(7);
        substring() 类似于 slice()，第二个参数规定被提取部分的长度：
            var res = str.substr(7,6);    //如果省略第二个参数，则该 substr() 将裁剪字符串的剩余部分。
5. 替换字符串内容：
        var n = str.replace("Microsoft", "W3School");    //默认地，replace() 只替换首个匹配
6. 转换为大写和小写：
        var text2 = text1.toUpperCase();    // text2 是被转换为大写的 text1
7. trim() 方法删除字符串两端的空白符：
        var str = "       Hello World!        ";str=str.trim();
8. 提取字符串字符:
        var str = "HELLO WORLD";str.charAt(0);            // 返回 H
9. 方法返回字符串中指定索引的字符 unicode 编码：
        var str = "HELLO WORLD";str.charCodeAt(0);         // 返回 72
10. 把字符串转换为数组：
        var txt = "a,b,c,d,e";    // 字符串    
        txt.split(",");    // 用逗号分隔    
        txt.split(" ");    // 用空格分隔
        txt.split("");    // 分隔为字符
11. 在所有数字运算中，JavaScript 会尝试将字符串转换为数字：
        var x = "100";    var y = "10";    var z = x / y;     // z 将是 10
12. toString() 返回字符串：
        var x = 123;    x.toString();    // 从变量 x 返回 123

数值

在 JavaScript 内部使用 valueOf() 方法可将 Number 对象转换为原始值：var x = 123; x.valueOf(); // 从变量 x 返回 123
Number() 可用于把 JavaScript 变量转换为数值：

x = true;
Number(x);        // 返回 1
x = false;     
Number(x);        // 返回 0
x = new Date();
Number(x);        // 返回 1404568027739
x = "10"
Number(x);        // 返回 10
x = "10 20"
Number(x);        // 返回 NaN

parseInt() 解析一段字符串并返回数值。允许空格。只返回首个数字：

parseInt("10");         // 返回 10
parseInt("10.33");      // 返回 10
parseInt("10 20 30");   // 返回 10
parseInt("10 years");   // 返回 10
parseInt("years 10");   // 返回 NaN

数组

数组是对象，数组元素可以是对象：myArray[0] = Date.now;

1. var x = arr.length;   // length 属性返回元素的数量

2. var y = arr.sort();   // sort() 方法对数组进行排序（字母顺序）

3. 遍历数组元素："for" 循环或者
Array.foreach() 函数：
arr.forEach(myFunction);
function myFunction(value) {
  text += "<li>" + value + "</li>";
}

4. 添加数组元素：arr.push("Lemon"); 

5. 把数组转换为字符串：toString()

6. join() 方法也可将所有数组元素结合为一个字符串：
arr.join(" * ");    //Banana * Orange * Apple * Mango

7. pop() 方法从数组中删除最后一个元素，pop() 方法返回“被弹出”的值
push() 方法（在数组结尾处）向数组添加一个新的元素，方法返回新数组的长度

8. shift() 方法返回被“位移出”的字符串（在开头）：
var fruits = ["Banana", "Orange", "Apple", "Mango"];    
fruits.shift();    // 返回 "Banana"
unshift() 方法（在开头）向数组添加新元素，并“反向位移”旧元素,返回新数组的长度：
var fruits = ["Banana", "Orange", "Apple", "Mango"];    
fruits.unshift("Lemon");    // 向 fruits 添加新元素 "Lemon"

9. splice() 方法可用于向数组添加新项：
arr.splice(2, 0, "Lemon", "Kiwi");    
arr.splice(0, 1);        // 删除 fruits 中的第一个元素
第一个参数（2）定义了应添加新元素的位置（拼接）。
第二个参数（0）定义应删除多少元素。
其余参数（“Lemon”，“Kiwi”）定义要添加的新元素。
splice() 方法返回一个包含已删除项的数组

10. 合并（连接）数组：
var myGirls = ["Cecilie", "Lone"];
var myBoys = ["Emil", "Tobias", "Linus"];
var myChildren = myGirls.concat(myBoys);   // 连接 myGirls 和 myBoys
concat() 方法不会更改现有数组。它总是返回一个新数组。
concat() 方法可以使用任意数量的数组参数。

11. 裁剪数组：slice() 方法创建新数组。它不会从源数组中删除任何元素。
var arr1 = arr.slice(1);     //截取索引1及以后的元素创建新数组
var arr1= arr.slice(1, 3);    //当给slice（）方法赋予两个参数时，它从start参数中选择数组元素，直到（但不包括）end参数

12. sort() 方法以字母顺序对数组进行排序
反转数组：reverse() 方法反转数组中的元素。
数字排序：sort默认以字符串方式排序
修正：
var points = [40, 100, 1, 5, 25, 10];    
points.sort(function(a, b){return a - b}); 

13. Array.map()
map() 方法通过对每个数组元素执行函数来创建新数组，map() 方法不会更改原始数组：
var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);
function myFunction(value, index, array) {
  return value * 2;
}

14. Array.filter()方法创建一个包含通过测试的数组元素的新数组：
var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);
function myFunction(value) {
  return value > 18;
}

15. Array.indexOf()方法在数组中搜索元素值并返回其位置：var a = arr.indexOf("Apple");
以及Array.lastIndexOf()

16. 确定数组中所有数的总和：
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);
function myFunction(total, value) {
  return total + value;
}

循环

for ... in循环遍历的实际上是对象的属性名称。一个Array数组实际上也是一个对象，它的每个元素的索引被视为一个属性。
当我们手动给Array对象添加了额外的属性后，for ... in循环将带来意想不到的意外效果：

var a = ['A', 'B', 'C'];
a.name = 'Hello';
for (var x in a) {
    console.log(x);     // '0', '1', '2', 'name'
}

for ... in循环将把name包括在内，但Array的length属性却不包括在内。
for ... of循环则完全修复了这些问题，它只循环集合本身的元素：

var a = ['A', 'B', 'C'];
a.name = 'Hello';
for (var x of a) {
    console.log(x);     // 'A', 'B', 'C'
}

forEach遍历集合

a.forEach(function (element, index, array) {
    // element: 指向当前元素的值
    // index: 指向当前索引
    // array: 指向Array对象本身
    console.log(element + ', index = ' + index);
});

JavaScript 日期

创建日期对象

• 创建日期对象：var d = new Date();
• 在 HTML 中显示日期对象时，会使用 toString() 方法自动转换为字符串：document.getElementById("demo").innerHTML = d;
• 方法将日期转换为 UTC 字符串（一种日期显示标准）：toUTCString()
• 方法将日期转换为更易读的格式：toLocaleString() // 2015/6/24 下午7:49:22

获取日期方法

• getTime()方法返回自 1970 年 1 月 1 日以来的毫秒数：document.getElementById("demo").innerHTML = d.getTime();
• setTime()：设置时间（从 1970 年 1 月 1 日至今的毫秒数）

Math 对象

• Math.round(x)的返回值是 x 四舍五入为最接近的整数
• Math.abs(x)返回 x 的绝对（正）值
• Math.ceil(x)的返回值是 x 上舍入最接近的整数
• Math.floor(x)的返回值是 x 下舍入最接近的整数
• Math.min() 和 Math.max() 可用于查找参数列表中的最低或最高值
• Math.random() 返回介于 0（包括） 与 1（不包括） 之间的随机数
• Math.floor(Math.random() * 10);返回 0 至 9 之间的数

let 和 const

块作用域（Block Scope）变量（和常量）：let 和 const。

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

2. var i = 7;
    for (var i = 0; i < 10; i++) {
      // 一些语句
    }
    // 此处，i 为 10

3. let i = 7;
    for (let i = 0; i < 10; i++) {
      // 一些语句
    }
    // 此处 i 为 7

4. 在相同的作用域，或在相同的块中，通过 let 重新声明一个 var 变量是不允许的：
    var x = 10;       // 允许
    let x = 6;       // 不允许

5. let x = 6;       // 允许
    {
      let x = 7;   // 允许
    }
    {
      let x = 8;   // 允许
    }

6. 您无法重新为常量数组赋值：
        const cars = ["Audi", "BMW", "porsche"];
        cars = ["Honda", "Toyota", "Volvo"];    // ERROR