JS学习笔记_Day 3

1. JavaScript while 循环

while 循环会在指定条件为 true 时循环执行代码块

while (条件)
{
    code
}

do/while 循环会在检查条件是否为 true 之前执行一次代码块，然后如果条件为 true 的话，就会重复这个循环。

for: 比较适合遍历数组,字符串等等。
for in: 比较适合遍历对象，遍历对象时使用这个再合适不过了。
while: while 的话，与 for 的使用场景差不多。唯一不同的是，遍历的条件必须满足。
do while: 至少执行一边的循环，遍历数组和字符串也是很方便。

2. JavaScript break 和 continue 语句

break 语句

for (i=0;i<10;i++)
{
    if (i==3)
    {
        break;
    } 
    x=x + "The number is " + i + "<br>";
}

花括号可以省略

continue 语句

for (i=0;i<=10;i++)
{
    if (i==3) continue;
    x=x + "The number is " + i + "<br>";
}

通过标签引用break 和 continue 语句

更多

3. JavaScript typeof, null, 和 undefined

typeof 操作符

可以使用 typeof 操作符来检测变量的数据类型。如果对象是 JavaScript Array 或 JavaScript Date ，我们就无法通过 typeof 来判断他们的类型，因为都是 返回 object。

typeof "John"                 // 返回 string
typeof 3.14                   // 返回 number
typeof NaN                    // 返回 number
typeof false                  // 返回 boolean
typeof [1,2,3,4]              // 返回 object
typeof {name:'John', age:34}  // 返回 object
typeof new Date()             // 返回 object
typeof function () {}         // 返回 function
typeof myCar                  // 返回 undefined (如果 myCar 没有声明)
typeof null                   // 返回 object

constructor 属性返回所有 JavaScript 变量的构造函数。

"John".constructor                 // 返回函数 String()  { [native code] }
(3.14).constructor                 // 返回函数 Number()  { [native code] }
false.constructor                  // 返回函数 Boolean() { [native code] }
[1,2,3,4].constructor              // 返回函数 Array()   { [native code] }
{name:'John', age:34}.constructor  // 返回函数 Object()  { [native code] }
new Date().constructor             // 返回函数 Date()    { [native code] }
function () {}.constructor         // 返回函数 Function(){ [native code] }

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

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

解释
1、myArray 是函数 isArray 的参数，这里调用函数的时候，会传来数组 fruits。
2、constructor 是一个属性，构造函数属性，不同类型的数据，会得到相应不同的值。因为 myArray 是个数组，这里的 myArray.constructor 的值就是 function Array() { [native code] }。(如果 myArray 是个字符串，myArray.constructor 的值就是function String() { [native code] }。还有 number，boolean，object，等等。)
3、toString() 是个方法，变字符串的方法，这里把 function Array() { [native code] } 变成字符串，为了后面好检索。
4、indexOf(“Array”) 是个方法，检索字符串，这里看字符串 function Array() { [native code] } 里有没有Array，有就返回首次出现的位置，是一个数值，这里是 9。如果出现在第一个字符，会返回 0。空格参与计数。如果没有找到，就返回 -1。只要 >-1，就说明有 Array，就能判断原来那个函数调用传来的 fruits 是一个数组。如果 myArray.constructor.toString().indexOf(“Object”)>-1，那么 myArray 就是一个 Object 对象。不过那样地话，这个参数的名字就没取好了，应该叫做 myObject。

null / undefined

undefined 是未定义（就是变量没有初始化），null 是一个变量初始化了，但是什么值都没给，只给了一个空对象；进一步说，undefined 与 null是值相等，类型不相等。

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

何时使用null? 当使用完一个比较大的对象时，需要对其进行释放内存时，设置为null。

4. JavaScript 类型转换

JavaScript 变量可以转换为新变量或其他数据类型：

• 通过使用 JavaScript 函数
• 通过 JavaScript 自身自动转换

全局方法 String() / Number方法 toString() 可以将数字转换为字符串

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

x.toString()
(123).toString()

全局方法 String() / Boolean方法 toString() 可以将数字转换为字符串

全局方法 String() / Date方法 toString() 可以将数字转换为字符串

一元运算符 + （Operator + 可用于将变量转换为数字）

var y = "5";      // y 是一个字符串
var x = + y;      // x 是一个数字

更多

5. JavaScript 正则表达式

正则表达式（英语：Regular Expression，在代码中常简写为regex、regexp或RE）使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。正则表达式是由一个字符序列形成的搜索模式。搜索模式可用于文本搜索和文本替换。

/正则表达式主体/修饰符(可选)

使用字符串方法：在JS中，正则表达式通常用于两个字符串方法，search() 和 replace()

• search() 方法使用正则表达式搜索 “Runoob” 字符串；

function myFunction() {
    var str = "Visit Runoob!"; 
    var n = str.search(/Runoob/i);
    document.getElementById("demo").innerHTML = n;
}

• search() 方法使用字符串作为参数，字符串参数会转换为正则表达式：

var str = "Visit Runoob!"; 
var n = str.search("Runoob");

• replace() 方法使用正则表达式将字符串中的 hehe 替换为 haha :

var str = document.getElementById("demo").innerHTML; 
var txt = str.replace(/microsoft/i,"Runoob"); 					//输出结果haha

正则表达式修饰符

i 不区分(ignore)大小写；
g 全局(global)匹配；
m 多(more)行匹配；

博客：https://blog.csdn.net/qq_36340642/article/details/79352876

使用 RegExp 对象

var patt=new RegExp(pattern,modifiers);

或者更简单的方式:

var patt=/pattern/modifiers;

JavaScript RegExp 参考手册

6. JavaScript 错误 - throw、try 和 catch

try 语句测试代码块的错误。
catch 语句处理错误。
throw 语句创建自定义错误。
finally 语句在 try 和 catch 语句之后，无论是否有触发异常，该语句都会执行。

7. JavaScript 调试JavaScript 变量提升

console.log() 方法

debugger 关键字

8. JavaScript 变量提升

变量提升：JavaScript 中，函数及变量的声明都将被提升到方法体的最顶部。JS只有声明的变量会提升，初始化的不会。

9. JavaScript 严格模式(use strict)

“use strict” 的目的是指定代码在严格条件下执行。严格模式下不能使用未声明的变量。

JavaScript JSON

JSON (JavaScript Object Notation) 是用于存储和传输数据的格式。JSON 通常用于服务端向网页传递数据 。JSON是独立的语言 *

1. JavaScript HTML DOM

HTML DOM (文档对象模型)：当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

通过标签名查找 HTML 元素

var x=document.getElementById("intro");

通过标签名查找 HTML 元素

var x=document.getElementById("main");
var y=x.getElementsByTagName("p");

通过类名找到 HTML 元素

var x=document.getElementsByClassName("intro");

2. HTML DOM - 改变 HTML

改变 HTML 输出流

在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。

<!DOCTYPE html>
<html>
<body>

<script>
document.write(Date());
</script>

</body>
</html>

改变 HTML 内容

修改 HTML 内容的最简单的方法是使用 innerHTML 属性。

document.getElementById(id).innerHTML=新的HTML

改变 HTML 属性

document.getElementById(id).attribute=新属性值

JavaScript 库 - jQuery、Prototype、MooTools