JS——基础知识

语句语法：

语法：

  • 与 Java 一样，变量、函数名、运算符以及其他一切东西都是区分大小写的。
  • ECMAScript 中的变量无特定的类型，可以随时改变变量所存数据的类型。

语句：

  • JavaScript 语句由：值、运算符、表达式、关键词和注释构成。
  • 程序员们常常喜欢把一行代码行控制在 80 个字符以内。
  • 下方单词是关键词，指的是保留的单词。保留词无法用作变量名。
语句 描述 实例
分号
  • 分号分隔JavaScript语句
  • 允许在同一行写多条语句。
  • 在每一条语句中都建议使用

a = 5; b = 6; c = a + b;
空白
  • JavaScript 会忽略多个空格。您可以向脚本添加空格，以增强可读性。
  • 在运算符旁边（ = + - * / ）添加空格是个好习惯

var x = y + z;
折行
  • 如果 JavaScript 语句太长，对其进行折行的最佳位置是某个运算符。

document.getElementById("demo").innerHTML =
 "Hello Kitty.";
代码块
  • 代码块的作用是定义一同执行的语句。

function myFunction() {
    document.getElementById("demo").innerHTML = "Hello Kitty.";
    document.getElementById("myDIV").innerHTML = "How are you?";
}
break 终止 switch 或循环。  
continue 跳出循环并在顶端开始。  
debugger 停止执行 JavaScript，并调用调试函数（如果可用）。  
do ... while 执行语句块，并在条件为真时重复代码块。  
for 标记需被执行的语句块，只要条件为真。  
function 声明函数。  
if ... else 标记需被执行的语句块，根据某个条件。  
return 退出函数。  
switch 标记需被执行的语句块，根据不同的情况。  
try ... catch 对语句块实现错误处理。  
var 声明变量。  

JavaScript类型：

在 JavaScript 中有 5 种不同的可以包含值的数据类型：
  • string
  • number
  • boolean
  • object
  • function
有 6 种类型的对象：
  • Object
  • Date
  • Array
  • String
  • Number
  • Boolean
以及 2 种不能包含值的数据类型：
  • null
  • undefined
typeof "Bill"                 // 返回 "string"
typeof 3.14                   // 返回 "number"
typeof NaN                    // 返回 "number"
typeof false                  // 返回 "boolean"
typeof [1,2,3,4]              // 返回 "object"
typeof {name:'Bill', age:19}  // 返回 "object"
typeof new Date()             // 返回 "object"
typeof function () {}         // 返回 "function"
typeof myCar                  // 返回 "undefined" *
typeof null                   // 返回 "object"

严格模式：

  • 它不算一条语句，而是一段文字表达式。
  • 使我们更容易编写“安全的”JavaScript。
  • 把之前可接受的“坏语法”转变为真实的错误。
  • 通过在脚本或函数的开头添加“use strict”来声明严格模式。
  • 在脚本开头进行声明，拥有全局作用域（脚本中的所有代码均以严格模式来执行）
"use strict";
x = 3.14;       // 这会引发错误，因为 x 尚未声明

在严格模式中不允许的事项：

"use strict";
x = 3.14;                // 这将引发错误

"use strict";
x = {p1:10, p2:20};      // 这将引发错误

"use strict";
var x = 3.14;
delete x;                // 这将引发错误

"use strict";
function x(p1, p2) {}; 
delete x;                 // 这将引发错误

"use strict";
function x(p1, p1) {};   // 这将引发错误

"use strict";
var x = 010;             // 这将引发错误

"use strict";
var x = \010;            // 这将引发错误

"use strict";
var obj = {};
Object.defineProperty(obj, "x", {value:0, writable:false});
obj.x = 3.14;            // 这将引发错误

"use strict";
var obj = {get x() {return 0} };
obj.x = 3.14;            // 这将引发错误

"use strict";
delete Object.prototype; // 这将引发错误

"use strict";
var eval = 3.14;         // 这将引发错误

"use strict";
var arguments = 3.14;    // 这将引发错误

"use strict";
with (Math){x = cos(2)}; // 这将引发错误

"use strict";
eval ("var x = 2");
alert (x);               // 这将引发错误

输出：

JavaScript 不提供任何内建的打印或显示函数。

  • 使用 window.alert() 弹警告框 
  • 使用 document.write() 写入 HTML 输出 
  • 使用 innerHTML 写入 HTML 元素 
  • 使用 console.log() 写入浏览器控制台  

window.alert：

以弹框的形式来显示相应内容。两种形式都可以。

<body>
<script>
window.alert('弹窗显示');
alert('弹窗显示')
</script>
</body>

document.write：

  • 显示在网页中的测试
  • 在HTML文档完全加载后使用，将会删除所有已有的HTML
<!DOCTYPE html>
<html>
<body>

<h1>我的第一张网页</h1>

<p>我的第一个段落</p>

<button onclick="document.write(5 + 6)">试一试</button>

</body>
</html>

innerHTML：

  • 该方法较多的应用于在匹配元素后，插入HTML的语言。
<body>

<h1>我的第一张网页</h1>

<p>我的第一个段落</p>

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

<script>
 document.getElementById("demo").innerHTML = 5 + 6;
</script>

</body>

console.log：

右键检查（F12）中，选择console，可以显示需要输出的相关内容。

网页查看JS：

注释：

单行注释：

在//后面的文字或行为，为单行注释，将不会执行。

// 改变标题：
 document.getElementById("myH").innerHTML = "我的第一张页面";
// 改变段落：
 document.getElementById("myP").innerHTML = "我的第一个段落。";
var x = 5;      // 声明 x，为其赋值 5
var y = x + 2;  // 声明 y，为其赋值 x + 2

多行注释：

多行注释以/*开头，以*/结尾。

/*
 下面的代码会改变
 网页中
 id = "myH" 的标题
 以及 id = "myP" 的段落：
*/
document.getElementById("myH").innerHTML = "我的第一张页面";
document.getElementById("myP").innerHTML = "我的第一个段落。";

运算符：

运算符及优先级。

值 运算符 描述 实例
20 ( ) 表达式分组 (3 + 4)
       
19 . 成员 person.name
19 [] 成员 person["name"]
19 () 函数调用 myFunction()
19 new 创建 new Date()
       
17 ++ 对数值进行递增 i++
17 -- 对数值进行递减 i--
       
16 ++ 前缀递增 ++i
16 -- 前缀递减 --i
16 ! 逻辑否 !(x==y)
16 typeof 类型 typeof x
       
15 ** 求幂 (ES7) 10 ** 2
       
14 * 乘 10 * 5
14 / 除 10 / 5
14 % 两个整数的除法产生商和余数 10 % 5
       
13 + 加，当其中有字符串格式时，属于拼接。 10 + 5 = 15      10+'5'='105'
13 - 减 10 - 5
       
12 << 通过从右推入零向左位移，并使最左边的位脱落。 x << 1，等于：0101 << 1，结果：1010
12 >> 通过从左推入最左位的拷贝来向右位移，并使最右边的位脱落。 x >> 1，等于：0101 >> 1，结果：0010
12 >>> 通过从左推入零来向右位移，并使最右边的位脱落。 x >>> 1，等于：0101 >>> 1，结果：0010
       
11 < 小于 x < y
11 <= 小于或等于 x <= y
11 > 大于 x > y
11 >= 大于或等于 x >= y
11 in 对象中的属性 "PI" in Math
11 instanceof 对象的实例 instanceof Array
11 >>&<< 连续大于或连续小于

10>5>1或1<5<10   结果为False

10>5=True,True>1=False
       
10 == 值相等 x == y
10 === 值相等并且类型相等 x === y
10 != 不相等 x != y
10 !== 严格不相等 x !== y
       
9 & 按位与（python中的and） x & y
8 ^ 按位 XOR x ^ y
7 | 按位或（python中的or） x | y
6 && 逻辑与 x && y
5 || 逻辑或 x || y
4 ? : 条件 ? "Yes" : "No"
       
3 = 赋值 x = y
3 += 赋值 x += y        等同于：x=x+y
3 -= 赋值 x -= y        等同于：x=x-y
3 *= 赋值 x *= y       等同于：x=x*y
3 %= 赋值 x %= y       等同于：x=x%y
3 <<= 赋值 x <<= y
3 >>= 赋值 x >>= y
3 >>>= 赋值 x >>>= y
3 &= 赋值 x &= y
3 ^= 赋值 x ^= y
3 |= 赋值 x |= y
       
2 yield 暂停函数 yield x
1 , 逗号 7 , 8

条件：

在JavaScript上，可以使用如下判断语句。

  • 使用 if 来规定要执行的代码块，如果指定条件为 true。
    1. 使用小写字母，大写字母会产生Js错误。
if (条件) {
    如果条件为 true 时执行的代码
} 
//如果时间早于 18:00，则发出 "Good day" 的问候：
if (hour < 18) {
    greeting = "Good day";
}
  • 使用 else 来规定要执行的代码块，如果相同的条件为 false
    1. 使用else语句来规定假如条件为false时的代码块
if (条件) {
    条件为 true 时执行的代码块
} else { 
    条件为 false 时执行的代码块
}
  • 使用 else if 来规定要测试的新条件，如果第一个条件为 false
    1. 规定当首个条件为false时的新条件。
if (条件 1) {
    条件 1 为 true 时执行的代码块
} else if (条件 2) {
    条件 1 为 false 而条件 2 为 true 时执行的代码块
 } else {
    条件 1 和条件 2 同时为 false 时执行的代码块
}
  • 使用 switch 来规定多个被执行的备选代码块 
switch(表达式) {
     case n:
        代码块
        break;
     case n:
        代码块
        break;
     default:
        默认代码块
}
//计算一次 switch 表达式,把表达式的值与每个 case 的值进行对比,如果存在匹配，则执行关联代码

 break关键词：

  • 如遇到break关键词，它会跳出switch代码块
  • 将停止代码块中更多代码的执行以及case测试。

default关键词

  • 规定不存在case匹配时所运行的代码
  • case不必是switch代码块中最后一个case
  • 如果default不是switch代码块中最后一个case，请记得用break结束默认case
switch (new Date().getDay()) {
    default: 
        text = "期待周末！";
         break;
    case 6:
        text = "今天是周六";
        break; 
    case 0:
        text = "今天是周日";
}
  • 有时会使用不同的case来使用相同的代码，
switch (new Date().getDay()) {
    case 4:
    case 5:
        text = "周末快到了：）";
        break; 
    case 0:
    case 6:
        text = "今天是周末~";
         break;
    default: 
        text = "期待周末！";
} 
//使用case4和5分享相同的代码块。而0和6分享一段代码块。

this：

  • JavaScript this关键词指的是它所属的对象。他拥有不同的值，具体取决于他的使用位置。
var person = {
  firstName: "Bill",
  lastName : "Gates",
  id       : 678,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

在方法中，this指的是所有者对象。

  • 在对象方法中，this指的是此方法的拥有者，在上面的例子中，this指的是person对象，对象是fullName方法的拥有者。

单独的情况下，this指的是全局对象（window）。

  • 在单独使用时，拥有者是全局对象，因此this指的是全局对象。在浏览器中，全局对象是【object Window】
var x = this;

在函数中，this指的是全局对象，（默认）

  • 在JavaScript函数中，函数的拥有者默认绑定this。因此，在函数中，this指的是全局对象【object Window】
function myFunction() {
  return this;
}

在函数中，严格模式下，this是 undefined。

  • JavaScript严格模式下不允许默认绑定。在函数中使用时，在严格模式下，this是未定义的。
"use strict";
function myFunction() {
  return this;
}

在事件中，this指的是接收事件的元素。

  • 在HTML时间处理程序中，this指的是接收此时间的HTML元素。
<button onclick="this.style.display='none'">
  点击来删除我！
</button>

作用域：

全局作用域：

  • 全局（在函数之外）声明的变量拥有全局作用域。
  • 全局变量可以在JavaScript程序中的任何位置访问。
  • 常用的为var来声明变量。
  • 在HTML中，全局作用域是window对象。通过var关键词定义的全局变量属于window对象。
  • 通过var声明的变量会提升到顶端。
var carName = "xuan";

// 此处的代码可以使用 carName

function myFunction() {
  // 此处的代码也可以使用 carName
}

window对象：

var carName = "porsche";
// 此处的代码可使用 window.carName

循环作用域：

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

重新声明变量：

允许在程序的任何位置使用var重新声明JavaScript变量。

var x = 10;
// 现在，x 为 10
 
var x = 6;
// 现在，x 为 6

函数作用域：

  • 局部（函数内）声明的变量拥有函数作用域。
  • 局部变量只能在它们被声明的函数内访问。
// 此处的代码不可以使用 carName

function myFunction() {
  var carName = "xuan";
  // code here CAN use carName
}

// 此处的代码不可以使用 carName

块作用域:

  • 通过var关键词声明的变量没有块作用域。
  • 在块{}内声明的变量可以从块之外进行访问。
  • 在WS2015之前，JavaScript是没有块作用域的。
  • 在块中重新声明变量也将重新声明块外的变量。
{ 
  var x = 10; 
}
// 此处可以使用 x

使用var关键字重新声明变量。

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

let和const：

  • ES2015引入的 两个新关键词。
  • 可以使用let关键词声明拥有块作用域的变量。即在块{}内声明的变量无法从块外访问。
  • 同样的，在块中重新声明的变量不会重新声明块外的变量。
  • 通过let关键词定义的全局变量不属于window对象。
  • 通过let定义的变量不会被提升到顶端，在声明let变量之前就使用它会倒是ReferenceError。变量从块的开头一直处于“暂时死区”直到声明为止。
  • const定义的变量与let变量类似，但不能重新赋值。
  • const变量必须在声明时直接进行赋值，无法声明后赋值。
{ 
  let x = 10;
}
// 此处不可以使用 x

块中声明的变量，不会重新声明块外的变量。

var x = 10;
// 此处 x 为 10
{ 
  let x = 6;
  // 此处 x 为 6
}
// 此处 x 为 10
var x = 10;
// 此处，x 为 10
{ 
  const x = 6;
  // 此处，x 为 6
}
// 此处，x 为 10

通过let关键词定义全局变量，不属于window对象。

let carName = "porsche";
// 此处的代码不可使用 window.carName，将会显示undefined

循环作用域：

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

如果在循环中用let声明变量i，那么只有在循环内，变量i才是可见的。

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

 重新声明：

在相同的作用域，或在相同的块中，通过let重新声明一个变量是不允许的。

var x = 10;       // 允许
let x = 6;       // 不允许

{
  var x = 10;   // 允许
  let x = 6;   // 不允许
}
let x = 10;       // 允许
let x = 6;       // 不允许

{
  let x = 10;   // 允许
  let x = 6;   // 不允许
}
let x = 10;       // 允许
var x = 6;       // 不允许

{
  let x = 10;   // 允许
  var x = 6;   // 不允许
}
let x = 6;       // 允许

{
  let x = 7;   // 允许
}

{
  let x = 8;   // 允许
}

const不能重新赋值：

const PI = 3.141592653589793;
PI = 3.14;      // 会出错
PI = PI + 10;   // 也会出错

const可以更改常量对象的属性：

// 您可以创建 const 对象：
const car = {type:"porsche", model:"911", color:"Black"};

// 您可以更改属性：
car.color = "White";

// 您可以添加属性：
car.owner = "Bill";

//无法重新为常量对象赋值
const car = {type:"porsche", model:"911", color:"Black"};
car = {type:"Volvo", model:"XC60", color:"White"};    // ERROR

//可以更改常量数组的元素
// 您可以创建常量数组：
const cars = ["Audi", "BMW", "porsche"];

// 您可以更改元素：
cars[0] = "Honda";

// 您可以添加元素：
cars.push("Volvo");

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

正则表达式：

语法：

/pattern/modifiers;

//parrern是模式，modifiers是修饰符

使用正则表达式时，不需要加入引号。

var str = "Visit W3School";
var n = str.search(/w3school/i);
var str = "Visit Microsoft!";
var res = str.replace(/microsoft/i, "W3School");

正则表达式修饰符：

修饰符 描述
i 执行对大小写不敏感的匹配。
g 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m 执行多行匹配。

test方法：

  1. 是正则表达式方法
  2. 它通过模式来搜索字符串，然后根据结果返回true或false
var patt = /e/;
patt.test("The best things in life are free!"); 

//查找字符串中是否含有e，返回true，可缩短成一行

/e/.test("The best things in life are free!");

exec方法：

  1. 通过制定的模式（pattern）搜索字符串，并返回以找到的文本。
  2. 如果未找到匹配，则返回null
/e/.exec("The best things in life are free!");

错误：

try语句允许定义一个代码块，以便在执行时检测错误。

catch语句允许定义一个要执行代码块，如果try代码块中发生错误。

try {
     供测试的代码块
}
 catch(err) {
     处理错误的代码块
}

throw语句：

允许创建自定义的错误，可以抛出字符串，数字，布尔或对象。

throw "Too big";    // 抛出文本
throw 500;          //抛出数字

配合finally使用：

try {
     // 供测试的代码块
}
 catch(err) {
     // 处理错误的代码块
} 
finally {
     // 无论结果如何都执行的代码块
}

 

posted @ 2022-11-09 17:38  新兵蛋Z  阅读(24)  评论(0)  编辑  收藏  举报