day17-18进一步学习JS第一部分

最新推荐文章于 2024-07-17 22:29:12 发布

RealRecall

最新推荐文章于 2024-07-17 22:29:12 发布

阅读量152

点赞数

分类专栏：初学前端开发

本文链接：https://blog.csdn.net/RealRecall/article/details/109779835

版权

初学前端开发专栏收录该内容

46 篇文章 1 订阅

订阅专栏

笔记（学习时间：3.5小时+1.5）

一、W3School 从if-else看到异常

使用if-else和外部JS

<!DOCTYPE html>
<html>
<body>

<p>单击按钮以显示基于时间的问候语：</p>

<button id="wyc">试一试</button>

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

<script>
function myFunction() {
  var greeting;
  var time = new Date().getHours();
  if (time < 10) {
    greeting = "早安";
  } else if (time < 20) {
    greeting = "日安";
  } else {
    greeting = "晚安";
  }
  document.getElementById("demo").innerHTML = greeting;
}
document.getElementById("wyc").addEventListener("click", myFunction);
</script>

</body>
</html>

new Date().getHours() 获得当前小时时间的小时数

使用switch

<!DOCTYPE html>
<html>
<body>

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

<script>
var day;
switch (new Date().getDay()) {
  case 0:
    day = "周日";
    break;
  case 1:
    day = "周一";
    break;
  case 2:
    day = "周二";
    break;
  case 3:
    day = "周三";
    break;
  case 4:
    day = "周四";
    break;
  case 5:
    day = "周五";
    break;
  case 6:
    day = "周六";
}
document.getElementById("demo").innerHTML = "今天是" + day;
</script>

</body>
</html>

new Date().getDay() 获得当前是星期几
如果 JavaScript 遇到 break 关键词，它会跳出 switch 代码块。如果没有，即使匹配了也不会终止。
default 关键词规定不存在 case 匹配时所运行的代码。（和case并列，不必是最后一个）
Switch case 使用严格比较（===）。值必须与要匹配的类型相同。只有操作数属于同一类型时，严格比较才能为 true。

for循环

for (语句 1; 语句 2; 语句 3) {
     要执行的代码块
}

语句 1 在循环（代码块）开始之前执行。
语句 2 定义运行循环（代码块）的条件。
语句 3 会在循环（代码块）每次被执行后执行。

关于语句1

可以在语句 1 中初始化多个值（由逗号分隔）。
可以省略语句 1。本该写的分号还要有：for (; i < len; i++)。

关于语句2

可以不写，如果语句 2 返回 true，那么循环会重新开始，如果返回 false，则循环将结束。不写的话，会一直返回ture，如果此时循环中没有break，则永远不会结束循环。（本该写的分号还要有）

关于语句3

可以不写，也可以想干嘛干嘛。

for/in循环遍历属性

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 循环</h1>

<p>for/in 语句循环遍历对象的属性。</p>

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

<script>
var txt = "";
var person = {fname:"Bill", lname:"Gates", age:62}; 
var x;
for (x in person) {
  txt += person[x] + " ";
}
document.getElementById("demo").innerHTML = txt;
</script>

</body>
</html>

while循环

while (条件) {
    要执行的代码块
}

while 循环会一直循环代码块，只要指定的条件为 true。

Do/While 循环

do {
    text += "The number is " + i;
    i++;
 }
while (i < 10);

与while类似，至少执行1次。

比较 For 与 While

for语句，只写语句2 === while写条件

Break 语句

for (i = 0; i < 10; i++) {
  if (i === 3) { break; }
  text += "数字是 " + i + "<br>";
}

break 语句会中断循环，并继续执行循环之后的代码

Continue 语句

for (i = 0; i < 10; i++) {
  if (i === 3) { continue; }
  text += "数字是 " + i + "<br>";
}

如果发生指定的条件，中断（循环中）的一个迭代。

使用 JavaScript 标记语句，跳出多层循环

如需标记 JavaScript 语句，请将标签名和冒号置于语句之前

outer:
for (-----) {
  for (-----) {
      break outer;
    }
  }
}

以上是用break跳出outer标签的多层循环块。

continue 语句（不论有无标签引用）只能用于跳过一个迭代。
break 语句，如果没有标签引用，只能用于跳出一个循环或一个switch。如果有标签引用，则 break 语句可用于跳出任意代码块。

JavaScript 中有五种可包含值的数据类型：

字符串（string）
数字（number）
布尔（boolean）
对象（object）
函数（function）

有三种对象类型：

对象（Object）
日期（Date）
数组（Array）

同时有两种不能包含值的数据类型：

null
undefined

typeof 运算符

typeof "Bill"                 // 返回 "string"
typeof 3.14                   // 返回 "number"
typeof NaN                    // 返回 "number"
typeof false                  // 返回 "boolean"
typeof [1,2,3,4]              // 返回 "object"
typeof {name:'Bill', age:62}  // 返回 "object"
typeof new Date()             // 返回 "object"
typeof function () {}         // 返回 "function"
typeof myCar                  // 返回 "undefined" *
typeof null                   // 返回 "object"

以上是使用 typeof 运算符来大致判断 JavaScript 变量的数据类型。

NaN 的数据类型是数值
null 的数据类型是对象
未定义变量和尚未赋值变量的数据类型都是 undefined
无法使用 typeof 去判断 JavaScript 对象是否是数组（或日期）
typeof 是一个运算符，类似于±*/
typeof 始终会返回字符串

constructor 属性

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

<script>
document.getElementById("demo").innerHTML = 
  "john".constructor + "<br>" +
  (3.14).constructor + "<br>" +
  false.constructor + "<br>" +
  [1,2,3,4].constructor + "<br>" +
  {name:'john', age:34}.constructor + "<br>" +
  new Date().constructor + "<br>" +
  function () {}.constructor;
</script>

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

于是可以通过检查 constructor 属性来确定某个对象是否为数组（包含单词 “Array”）
另外两种方法：
第二种：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = isArray(fruits);
function isArray(myArray) {
    return myArray.constructor.toString().indexOf("Array") > -1;// 若为真则返回true
}

indexOf啥意思？？？（我能猜个大概，以后再深究。）
我现在懂了，其意为：“回指定字符在字符串中第一次出现处的索引，如果此字符串中没有这样的字符，则返回 -1。”
第三种：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = isArray(fruits);
function isArray(myArray) {
    return myArray.constructor === Array;// 若为真则返回true
}

同理可以通过检查 constructor 属性来确定某个对象是否为日期。

使用String()把数值转换为字符串

全局方法 String() 能够把数字转换为字符串。
它可用于任意类型的数字、文字、变量或表达式

String(x)         // 从数值变量 x 返回字符串
String(123)       // 从数值文本 123 返回字符串
String(100 + 23)  // 从表达式中的数值返回字符串,返回字符串123

数字方法 toString() 同理。

x.toString()
(123).toString()
(100 + 23).toString()

在数字方法这一章，有更多可用于将数值转换为字符串的方法

toExponential() 返回字符串，对数字进行舍入，并使用指数计数法来写。Exponential（指数）
toFixed() 返回字符串，对数字进行舍入，并使用指定位数的小数来写。Fixed（固定的）
toPrecision() 返回字符串，把数字写为指定的长度。Precision（精确）

把日期转换为字符串

全局方法 String() 可将日期转换为字符串。

String(Date())      // 返回 "Wed Nov 18 2020 20:26:46 GMT+0800 (中国标准时间)"

日期方法 toString() 同理。

Date().toString()   // 返回 "Wed Nov 18 2020 20:26:46 GMT+0800 (中国标准时间)"

在日期方法这一章，有更多可用于把日期转换为字符串的方法：

getDate() 获得以数值计（1-31）的日
getDay() 或者以数值计（0-6）的周（星期几）
getFullYear() 获得四位的年（yyyy）
getHours() 获得时（0-23）
getMilliseconds() 获得毫秒（0-999）
getMinutes() 获得分钟（0-59）
getMonth() 获得月（0-11）
getSeconds() 获得秒（0-59）
getTime() 获得时间（1970 年 1 月 1 日以来的毫秒）

把字符串转换为数值

全局方法 Number() 可把字符串转换为数字。

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

空的字符串转换为 0。
其他字符串将转换为 NaN（Not a number，不是数字）。

在数字方法这一章中，您将找到更多可用于把字符串转换为数字的方法：

parseFloat() 解析字符串并返回浮点数。
parseInt() 解析字符串并返回整数。

一元的 + 运算符可用于把变量转换为数字：

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

如果无法转换变量，则仍会成为数字，但是值为 NaN（Not a number）：

var y = "Bill";   // y 是字符串
var x = + y;      // x 是数字 (NaN)

把布尔转换数值

Number(false)     // 返回 0
Number(true)      // 返回 1

把日期转换为数字

d = new Date();
Number(d) // 返回 1605702406847

日期方法 getTime() 同理：

d = new Date();
d.getTime() // 返回 1605702406847

自动类型转换

如果 JavaScript 尝试操作一种“错误”的数据类型，它会试图将该值转换为“正确”的类型。结果并不总是你所期望的：

5 + null    // 返回 5         因为 null 被转换为 0
"5" + null  // 返回 "5null"   因为 null 被转换为  "null"
"5" + 2     // 返回 52        因为 2 被转换为 "2"
"5" - 2     // 返回 3         因为 "5" 被转换为 5
"5" * "2"   // 返回 10        因为 "5" 和 "2" 被转换为 5 和 2

自动字符串转换

JavaScript 自动调用变量的 toString() 函数，当您试图“输出”对象或变量时：

document.getElementById("demo").innerHTML = myVar;

// 如果 myVar = {name:"Fjohn"}  // toString 转换为 "[object Object]"
// 如果 myVar = [1,2,3,4]       // toString 转换为 "1,2,3,4"
// 如果 myVar = new Date()      // toString 转换为 "Wed Nov 18 2020 20:26:46 GMT+0800 (中国标准时间)"
数字和布尔也会被转换，但并不明显：
// 如果 myVar = 123             // toString 转换为 "123"
// 如果 myVar = true            // toString 转换为 "true"
// 如果 myVar = false           // toString 转换为 "false"

JavaScript 类型转换表

感觉没必要背，以后用到再查。
JavaScript 类型转换表（点开以后在下面）

JS位运算

补充知识：二进制数的编码

（32 位有符号整数）
（B：二进制。D：十进制。H：十六进制）
1.机器数
一个数在计算机中的表示形式叫做机器数，而这个数本身称为这个机器数的真值
例如，有符号二进制整数运算时：机器数N=111000 它的真值N=-11000
2.原码
正数的符号用“0”表示，负数的符号用“1”表示，符号位之后表示数值的大小，这种表示方法称为原码。
0的源码有两种形式（正负零）
3.反码
正数的反码等于原码。
负数的反码符号位为1，数值位按位求反。
零的反码也有两种表示方法。
4.补码
正数同上
负数的反码符号位为1，数值位等于反码的数值位的低位加1
零的补码唯一

一个数的补码的补码等于原码

非十进制运算

屠龙秘诀：列竖式

带符号的二进制数运算

原码虽然比较简单，直观，但采用原码计算进行加减运算时，要求计算机的运算电路非常复杂；如果采用补码，就可以把减法运算变成加法运算，省略了减法器，使硬件电路大大简化。

取补码后，两数相减转换为了一个数加上另一个特殊的数，可以计算出减计算的结果。

回到位运算

00000000000000000000000000000101 (5)
11111111111111111111111111111010 (~5 = -6)

数值经过~运算后，等效于数值取相反数-1
000001是1
1111110是-2
1111111是-1
有符号二进制整数运算中，负数是正数的二进制按位取反加 1（正数也是负数的二进制按位取反加1）
如果只是取反：二进制5（00000101）加取反的数（11111010）之和等于-1（11111111）
取反加1：二进制5（00000101）加取反+1的数（11111011）之和等于零，即取反加1后，值为-5（11111011）

<<	零填充左位移	通过从右推入零向左位移，并使最左边的位脱落。
>>	有符号右位移	通过从左推入最左位的拷贝来向右位移，并使最右边的位脱落。
>>>	零填充右位移	通过从左推入零来向右位移，并使最右边的位脱落。

十进制转换为二进制

对比代码：

document.getElementById("demo").innerHTML = dec2bin(-5);
function dec2bin(dec){
  return dec.toString(2);//输出-101
}

document.getElementById("demo").innerHTML = dec2bin(-5);
function dec2bin(dec){
  return (dec >>> 0).toString(2);//输出11111111111111111111111111111011
}

使用(dec >>> 0)：带负号的二进制值，转换为了32位有符号整数。如果不使用，下一步获得的二进制的值不是32位的。
toString(n)：转换为n进制字符串。

二进制转换为十进制

document.getElementById("demo").innerHTML = bin2dec(101);
function bin2dec(bin){
  return parseInt(bin, 2).toString(10);
}

parseInt(m, n)：识别n进制内容m，将改内容转换为整型。

正则表达式

使用字符串方法 search() 来处理字符串

<h1>JavaScript 字符串方法</h1>

<p>在字符串中搜索“W3School”，并显示匹配的位置：</p>

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

<script>
var str = "Visit W3School!"; 
var n = str.search("W3School");
document.getElementById("demo").innerHTML = n;//返回值为6（从零开始数）
</script>

使用正则表达式执行搜索字符串中 “w3school” 的大小写不敏感的搜索：
（此时不用引号，用/w3School/i）：

var str = "Visit W3School!"; 
var n = str.search(/w3School/i);//i 是修饰符（把搜索修改为大小写不敏感）。
document.getElementById("demo").innerHTML = n;

使用字符串方法 replace() 处理字符串

<h1>JavaScript 字符串方法</h1>

<p>请把下面的段落中的“Microsoft”替换为“W3School”：</p>

<button id="wyc">试一试</button>

<p id="demo">请访问 Microsoft！</p>

<script>
function myFunction() {
  var str = document.getElementById("demo").innerHTML; 
  var txt = str.replace("Microsoft","W3School");
  document.getElementById("demo").innerHTML = txt;
}
document.getElementById("wyc").addEventListener("click", myFunction);
</script>

以上代码是，点击按钮时，Microsoft变为W3School。

其他内容

正则表达式方法test()

它通过模式来搜索字符串，然后根据结果返回 true 或 false。

下面的例子搜索字符串中的字符 “e”：

<h2>JavaScript 正则表达式</h2>

<p>检索下面段落中的一个 "e"：</p>

<p id="p01">The best things in life are free!</p>

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

<script>
text = document.getElementById("p01").innerHTML; 
document.getElementById("demo").innerHTML = /e/.test(text);
</script>

正则表达式方法exec()

它通过指定的模式（pattern）搜索字符串，并返回已找到的文本。

如果未找到匹配，则返回 null。

下面的例子搜索字符串中的字符 “e”：

<script>
var obj = /e/.exec("The best things in life are free!");
document.getElementById("demo").innerHTML =
"Found " + obj[0] + " in position " + obj.index + " in the text: " + obj.input;
</script>

obj.index和obj.input是啥？？？
以上两种，返回值不同。

JS异常

以后再说！

RealRecall

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
day17-18进一步学习JS第一部分

今日笔记（学习时间：）一、W3School 从if-else看到异常使用if-else和外部JS<!DOCTYPE html><html><body><p>单击按钮以显示基于时间的问候语：</p><button id="wyc">试一试</button><p id="demo"></p><script>function myFunction() { var
复制链接

扫一扫

专栏目录