JavaScript 基础语法

JS基础语法

准备工作：

• 安装 node

  pycharm 安装 node 插件【如果没有】

• 浏览器执行代码

注释

• 单行注释：//

• 多行注释：

  /*
  
  */
  

变量 ！！

1. 声明变量： 使用var关键字声明一个变量。

   var a;
   

2. 变量赋值： 变量名称=变量赋值。

   a = 10;
   

3. 声明并赋值：var 变量名称 = 值;

   var a = 10;
   

定义变量的几种关键字

var: 定义的变量可以跨代码块访问

let: 定义的变量有效范围，只在代码块内

const: 用来定义常量，定义之后值是不可以修改的，只能在代码块内部访问

数据类型

1. Boolean：布尔值；

   有两个字面值：true 和 false。

2. String：字符串；

   String 数据类型表示零或多个字符序列。字符串可以使用双引号（"）、单引号（'）或反引号（`）标示。

3. Number：数值；

   表示整数和浮点值。

4. Undefined：未定义；

   Undefined 类型只有一个值，就是特殊值 undefined。当声明了变量但没有初始化时，就相当于给变量赋予了 undefined 值

5. Null：null；

   Null 类型同样只有一个值，即特殊值 null。

6. Object：对象；

   对象其实就是一组数据和功能的集合。对象通过 new 操作符后跟对象类型的名称来创建。

typeof 操作符

如何确定任意变量的数据类型？typeof 操作符就是为此而生的。对一个值使用 typeof 操作符会返回下列字符串之一：

• "undefined"表示值未定义；

• "boolean"表示值为布尔值；

• "string"表示值为字符串；

• "number"表示值为数值；

• "object"表示值为对象（而不是函数）或 null；

• "function"表示值为函数；

• "symbol"表示值为符号；

因为 typeof 是一个操作符而不是函数，所以不需要参数（但可以使用参数）。

调用typeof null 返回的是"object"。这是因为特殊值 null 被认为是一个对空对象的引用。

强制类型转换

转换为 String 类型

1. 方式一：toString()

   调用被转换数据类型的toString()方法，该方法不会影响到原变量，它会将转换的结果返回。

   但是注意：null和undefined这两个值没有toString()方法，如果调用它们的方法，会报错。

   var a = 123; 
   a_s = a.toString(); 
   console.log(typeof a); // number 
   console.log(typeof a_s); // string 
   

2. 方式二：String()

   调用String()函数，并将被转换的数据作为参数传递给函数。

   var a = 123; 
   a_s = String(a); 
   console.log(typeof a); // number 
   console.log(typeof a_s); // string
   

   使用String()函数做强制类型转换时，对于Number和Boolean实际上就是调用的toString()方法。但是对于null和undefined，就不会调用toString()方法，它会将null 直接转换为 “null”，将 undefined 直接转换为 “undefined”。

3. 方式三：拼接

   为任意的数据类型 +""。

   var a = 123; 
   a_s = a + ""; 
   console.log(typeof a); // number 
   console.log(typeof a_s); // string 
   

转换为Number 类型

1. 方式一：Number()

   Number()可以用来转换任意类型的数据。

   • 字符串 → 数字

     纯数字：转换为数字；

     包含非数字：转换为 NaN（Not a Number）；

     空字符串（含空格）：转换为 0；

   • 布尔 → 数字

     true：1

     false：0

   • null → 数字

     0

   • undefined → 数字

     NaN

2. 方式二：parseInt()

   这种方式专门用来对付字符串，parseInt() 把一个字符串转换为一个整数。

   a = "123"; 
   na = parseInt(a); 
   console.log(na); // 123
   

3. 方式三：parseFloat()

   这种方式专门用来对付字符串，parseFloat() 把一个字符串转换为一个浮点数。

   a = "123"; 
   na = parseFloat(a); 
   console.log(na); // 123
   

   注意：如果对非String使用parseInt()或parseFloat()，它会先将其转换为String然后在操作。

流程控制 ！！

分支语句

if

if (expression1) {
    statement
} else if (expression2) {
    statement
} else {
    statement
}

switch

switch (expression) {
    case value1:
        statement
        break;
    case value2:
        statement
        break;
    case value3:
        statement
        break;
    default:
        statement
}

• 这里的每个 case（条件/分支）相当于：如果表达式等于后面的值，则执行下面的语句。
• break关键字：会导致代码执行跳出 switch 语句。如果没有 break，则代码会继续匹配下一个条件。
• default关键字：用于在任何条件都没有满足时指定默认执行的语句（相当于 else语句）。

异常处理

在 JavaScript 中，异常处理是通过 try...catch 语句来实现的，用于捕获和处理运行时出现的错误。以下是一些关于异常处理的关键点：

1. try 块

   try 块包含可能抛出错误的代码。如果在 try 块内发生错误，控制权将立即转移到相应的 catch 块。

2. catch 块

   catch 块用于捕获 try 块中的错误。它接受一个参数，通常命名为 error，用来保存错误对象。在 catch 块中，你可以处理错误，例如打印错误信息或采取其他恢复策略。

try{
    // 存放有可能会出现异常的代码块
    var a = 100
} catch(error){
    // try中的代码出现了异常，才会执行catch中的代码
    console.log(error.message)
    console.log('详细的错误信息：',error)
    a = 99
}

console.log(a)

循环语句

while

while (expression) {
    statement
}

for

for (initialization; expression; post - loop - expression) {
    statement
}

函数 ！！

创建函数

1. 函数声明

   function sum(num1, num2) {
       return num1 + num2;
   }
   

2. 函数表达式

   var sum = function (num1, num2) {
       return num1 + num2;
   };
   

3. Function 构造函数

   var sum = new Function("num1", "num2", "return num1 + num2");
   

4. 箭头函数

   var sum = (num1, num2) => {
       return num1 + num2;
   };
   

JavaScript 中的函数是优先编译，即函数调用可以写在函数声明之前。

函数调用

1. 直接调用

   函数名称(参数);
   等价于
   window.函数名称(参数);
   

2. 上下文调用（apply、call）

   function sum(num1, num2) {
       return num1 + num2;
   }
   
   res = sum.call(null, 1, 2)
   console.log(res); // 3
   
   res = sum.apply(null, [1, 2])
   console.log(res); // 3
   

call()和apply()这两个方法都是函数对象的方法，需要通过函数对象来调用，当对函数调用call()和apply()都会调用函数执行。

匿名函数

没有名字的函数就是匿名函数，它可以让一个变量来接收，也就是用 “函数表达式”方式创建和接收。

var fun = function () {
    alert("我是一个匿名函数");
}
fun();

自执行函数

1. ()

   (function () {
       console.log("自执行函数");
   })();
   

2. !

   !function () {
       console.log("自执行函数");
   }();
   

以上两种常见，除此之外还有“~ + -”三种少见的自执行方式。

作用域

函数内部定义的变量只能在函数内部访问，函数内部可以访问函数外部的变量。

对象 ！！

对象就是一组没有特定顺序的值。对象的每个属性或方法都由一个名称来标识，这个名称映射到一个值。

创建对象

1. var 对象名称 = new Object();

   var obj = new Object();
   console.log(obj);
   // 设置属性
   obj.name = "obj";
   // 设置方法
   obj.test = function () {
       console.log("obj 的 test 方法");
   }
   console.log(obj); // { name: 'obj', test: [Function (anonymous)] }
   

2. var 对象名称 = {}

   var obj = {
       name: "obj", test: function () {
           console.log("obj 的 test 方法");
       }
   }
   console.log(obj); // { name: 'obj', test: [Function: test] }
   

3. 构造函数

   构造函数就是一个普通的函数，创建方式和普通函数没有区别，不同的是构造函数习惯上首字母大写。

   构造函数和普通函数的还有一个区别就是调用方式的不同，普通函数是直接调用，而构造函数需要使用new关键字来调用。

   function F() {
       this.name = "obj";
       this.test = function () {
           console.log("obj 的 test 方法");
       }
   }
   
   var obj = new F();
   console.log(obj);
   

访问属性/方法

1. 对象.属性名称/方法名称

   console.log(obj.name); // obj 
   obj.test(); // obj 的 test 方法
   

2. 对象['属性/方法名称']

   console.log(obj['name']); // obj 
   obj['test'](); // obj 的 test 方法
   

3. 遍历对象

   var obj = new F();
   for (k in obj) {
       if (obj[k] instanceof Function) {
           obj[k]();
           break;
       }
       console.log(obj[k]);
   }
   

函数和对象方法中的this

• 函数中的 this

  window

  // 定义了一个函数demo
  function demo (){
      console.log('demo函数this:',this)
  }
  

• 对象方法中的this

  对象本身

  // 定义了一个对象objA
  const objA = {
      name:"张三",
      age:18,
      work(){
          console.log('这是是work方法，this:',this)
          console.log('这是是work方法，this.name:',this.name)
      }
  }
  

• 箭头函数中的this

  代表的是外层作用域的对象

  // 定义了一个对象objA
  const objA = {
      name:"张三",
      age:18,
      work2:() =>{
          console.log('这是是work2方法，this:',this)
          console.log('这是是work2方法，this.name:',this.name)
      }
  }
  

常见对象

字符串 - String

在JS中为我们提供了三个包装类，通过这三个包装类可以将基本数据类型的数据转换为对象。

1. String()：可以将基本数据类型字符串转换为String对象；

2. Number()：可以将基本数据类型的数字转换为Number对象；

3. Boolean()：可以将基本数据类型的布尔值转换为Boolean对象；

字符串常见方法

1. charCodeAt()：该方法获取指定位置字符的字符编码（Unicode编码）

   var res = "a".charCodeAt();
   console.log(res) // 97
   

2. fromCharCode()：该方法接受任意多个数值，并返回将所有数值对应的字符拼接起来的字符串

   var res = String.fromCharCode(97);
   console.log(res); // a
   

3. indexof()：该方法可以检索一个字符串中是否含有指定内容，如果字符串中含有该内容，则会返回其第一次出现的索引，如果没有找到指定的内容，则返回-1

   console.log("alice".indexOf("l")); // 1
   

4. slice()：可以从字符串中截取指定的内容，不会影响原字符串，而是将截取到内容返回

   console.log("alice".slice(1,3)); // li
   

5. split()：该方法可以将一个字符串拆分为一个数组，需要一个字符串作为参数，将会根据该字符串去拆分数组

   console.log("alice".split("")); // [ 'a', 'l', 'i', 'c', 'e' ]
   

JSON

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，它基于 JavaScript 语言的一个子集，采用完全独立于语言的文本格式，易于人阅读和编写，同时也易于机器解析和生成。

数据结构

• 对象： 由花括号 {} 包围，键值对组成，键和值之间用冒号 : 分隔，键值对之间用逗号 , 分隔。键必须是字符串，用双引号包围。
• 数组： 由方括号 [] 包围，元素之间用逗号 , 分隔。

转换

• JSON.stringify(value[, replacer[, space]])：将 JavaScript 值转换为 JSON 字符串。
• JSON.parse(text[, reviver])：将 JSON 字符串转换回 JavaScript 值。

let obj = {
    name:"张三",
    age:18,
    sex:"男",
    datas:[11,22,33,44,55,66],
    skill(){
        console.log('12345678')
    }
}

// 1、将js的对象转换为json数据
const res = JSON.stringify(obj)
console.log(res)

// 2、将json数据转换为js对象
data = '{"name":"张三","age":18,"sex":"男","datas":[11,22,33,44,55,66]}'
const res2 = JSON.parse(data)
console.log(res2)

数组 - Array ！！

Array数组是一组有序的数据，但跟其他语言不同的是，数组中每个槽位可以存储任意类型的数据。这意味着可以创建一个数组，它的第一个元素是字符串，第二个元素是数值，第三个是对象。数组也是动态大小的，会随着数据添加而自动增长。

创建数组

1. Array 构造函数

   var colors = new Array(); // 可以省略 new
   

   以给 Array 构造函数传入要保存的元素

   var colors = new Array("red", "blue", "green");
   

2. 使用数字字面量

   var colors = ["red", "blue", "green"];
   

数组常用方法

1. shift()：该方法可以删除数组的第一个元素，并将被删除的元素作为返回值返回

   var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
   console.log(arr.shift()); // 1
   console.log(arr); // [2, 3, 4, 5,6, 7, 8, 9]
   

2. pop()：该方法可以删除数组的最后一个元素，并将被删除的元素作为返回值返回

   var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9] 
   console.log(arr.pop()); // 9
   console.log(arr); // [1, 2, 3, 4,5, 6, 7, 8]
   

3. unshift()：该方法向数组开头添加一个或多个元素，并返回新的数组长度

   var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
   console.log(arr.unshift(66)); // 10 
   console.log(arr); // [66, 1, 2, 3, 4,5, 6, 7, 8, 9]
   

4. push()：该方法可以向数组的末尾添加一个或多个元素，并返回数组的新的长度

   var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
   console.log(arr.push(99)); // 10
   console.log(arr); // [1, 2, 3, 4, 5,6, 7, 8, 9, 99]
   

5. forEach()：该方法可以用来遍历数组

   var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
   arr.forEach(function (value, index, array) {
       console.log(value); // 当前元素
       console.log(index); // 当前元素索引
       console.log(array); // 当前数组
   });
   

时间 - Date

在 JavaScript 中使用 Date 对象来表示一个时间，如果直接使用构造函数创建一个 Date 对象，则会封装为当前代码执行的时间。

getTime() 返回日期的毫秒表示（时间戳）：

var date = new Date(); 
console.log(date); // console.log(date); 
console.log(date.getTime());//获取时间戳

正则 - RegExp

创建正则对象

1. 使用 RegExp 构造函数创建

   var pattern = new RegExp('hello', 'i');
   

   • 第一个参数：正则表达式模式（匹配的规则）

   • 第二个参数：正则表达式标志

     g ：全局搜索，即不仅仅在找到第一个匹配项后停止，而是继续查找字符串中的所有匹配项。

     i ：不区分大小写搜索。

     ig ：忽略大小写且全局匹配模式。

2. 使用字面量创建

   var pattern = /hello/i;
   

正则表达式方法

1. test(str)：检查字符串str中是否有匹配该正则表达式的文本，返回 true 或 false。

   var pattern = new RegExp('hello', 'i');
   str = "hello world";
   var res = pattern.test(str);
   console.log(res); // true
   
   var pattern = /hello/i;
   str = "hello world";
   var res = pattern.test(str);
   console.log(res); // true
   

2. exec(str)： 在字符串 str 中执行正则表达式匹配，并返回一个数组，其中包含了匹配的结果。如果没有匹配项，则返回 null。

   var pattern = new RegExp('hello', 'i');
   str = "hello world";
   var res = pattern.exec(str);
   console.log(res); // 'hello', index: 0, input: 'hello world', groups: undefined ]
   
   var pattern = /hello/i
   str = "hello world";
   var res = pattern.exec(str);
   console.log(res); // 'hello', index: 0, input: 'hello world', groups: undefined ]
   

定时器

setTimeout

setTimeout() 用于指定在一定时间后执行某些代码，它返回一个代表定时器的 ID。

let timerId = setTimeout(func|code, delay, [arg1, arg2, ...]);

参数：

• func|code：要执行的函数或要执行的代码字符串。
• delay：在执行函数或代码之前要等待的 毫秒数 。
• [arg1, arg2, ...]：（可选）传递给函数的参数列表。

示例：

setTimeout(function () {
    console.log('这个消息将在2秒后显示');
}, 2000);

setInterval

setInterval()用于指定每隔一段时间执行某些代码（重复执行），它返回一个代表定时器的 ID。

let intervalId = setInterval(func|code, delay, [arg1, arg2, ...]);

参数与 setTimeout 的一样。

示例：

let counter = 0;
const intervalId = setInterval(function () {
    console.log('这个消息将每秒显示一次，计数器值：', counter++);
}, 1000);

清除定时器

• 使用 clearTimeout(timerId) 来清除由 setTimeout 创建的定时器。
• 使用 clearInterval(intervalId) 来清除由 setInterval 创建的定时器。

异步请求

AJAX（Asynchronous JavaScript and XML）是一种在不重新加载整个网页的情况下，能够更新部分网页的技术。虽然名称中包含 XML，但现代的 AJAX 实现通常使用 JSON 或其他数据格式代替 XML。

原生 ajax

开始 ajax 请求的第一步创建一个 XMLHttpRequest 对象，这个对象是浏览器提供的 API，用于与服务器进行异步通信。

function getData() {
    // 1、创建一个请求对象
    xhr = new XMLHttpRequest();
    // 2、通过open方法设置请求的url和请求的参数
    xhr.open('GET', 'http://localhost:3000/api/data', true);
    // 3、设置ajax请求发送之后的回调函数
    xhr.onload = function () {
        console.log('响应状态码:', xhr.status);
        console.log('响应体内容', xhr.responseText);
    }
    // 4、请求头的设置
    xhr.setRequestHeader('token', '12345678');

    // 5、发送请求
    xhr.send();
}

• open()：设置请求类型（GET、POST等）、URL和是否异步执行；
• setRequestHeader()：设置请求头；
• send()：发送请求，该函数的参数是请求的参数。

jQuery ajax

‌jQuery AJAX‌ 是 jQuery 库提供的一组用于执行异步 HTTP 请求的方法，它封装了浏览器原生的 XMLHttpRequest 对象，简化了客户端与服务器之间的数据交互操作。

使用 jQuery ajax 时，需要先获取 jQuery 库，可以直接导入在线的 jQuery：

function getData() {
    $.ajax({
        url: "http://localhost:3000/api/data",
        type: "get",
        headers: {
            'token': '12345678'
        },
        success: function (response, textStatus, jqXHR) {
            console.log('响应状态码:', jqXHR.status);
            console.log('响应状态:', textStatus);
            console.log('响应体:', response);
        }
    });
}

• url：表示目标请求的 url。
• type：表示发送请求的方式；
• headers：表示设置的请求头；
• success：表示请求成功后回调的方法。

Fetch API

Fetch API 提供了一种更简单、更强大的方式来进行 HTTP 请求，相比传统的 XMLHttpRequest 更加现代化和易于使用。

async function getData() {
    let url = 'http://localhost:3000/api/data'
    let config = {
        method: "GET",
        headers: {
            "token": "12345678"
        }
    };
    try {
        const response = await window.fetch(url, config)
        console.log('请求成功:', response)
    } catch (error) {
        console.log('请求发送出现错误了:', error)
    }
}