【技術積累】JavaScript中的基礎語法【一】

来源:https://www.cnblogs.com/yyyyfly1/archive/2023/07/16/17557554.html
-Advertisement-
Play Games

博客推行版本更新,成果積累制度,已經寫過的博客還會再次更新,不斷地琢磨,高質量高數量都是要追求的,工匠精神是學習必不可少的精神。因此,大家有何建議歡迎在評論區踴躍發言,你們的支持是我最大的動力,你們敢投,我就敢肝 ...


Math對象

JavaScript中的Math對象是一個內置的數學對象,表示對數字進行數學運算的方法和屬性的集合。

Math對象不是一個構造函數,所以不能使用new關鍵字來創建一個Math對象的實例。它包含了一些常見的數學運算函數和常量,可以直接通過Math對象來調用。

以下是Math對象的一些常用方法:

  1. Math.abs(x) 返回x的絕對值。

  2. Math.ceil(x) 返回大於或等於給定數字x的最小整數,且為整數。

  3. Math.floor(x) 返回小於或等於給定數字x的最大整數,且為整數。

  4. Math.round(x) 返回給定數字x的四捨五入值為最接近的整數。

  5. Math.max(x1, x2, ..., xn) 返回給定一組數字中的最大值。

  6. Math.min(x1, x2, ..., xn) 返回給定一組數字中的最小值。

  7. Math.sqrt(x) 返回給定數字x的平方根。

  8. Math.pow(x, y) 返回x的y次冪的結果。

  9. Math.random() 返回一個大於等於0且小於1的隨機數。

  10. Math.sin(x), Math.cos(x), Math.tan(x) 返回給定角度x的正弦值、餘弦值和正切值。

  11. Math.log(x) 返回給定數字x的自然對數。

  12. Math.exp(x) 返回給定數的指數值。

  13. Math.PI 表示圓周率π的常量。

  14. Math.E 表示自然對數的底e的常量。

註意:Math對象的所有方法和屬性都是靜態的,即可以直接通過Math對象進行調用,而不需要創建Math對象的實例。

Math.abs(x)

方法解釋:返回x的絕對值。

示例代碼:

   const x = -5;
   const absX = Math.abs(x);
   console.log(absX); // 輸出 5

代碼解釋:該示例中,通過Math.abs方法獲取變數x的絕對值。傳入負數-5時,返回其絕對值5。最後將結果列印到控制台。

Math.ceil(x)

方法解釋:返回大於或等於給定數字x的最小整數,且為整數。

示例代碼:

   const x = 4.2;
   const ceilX = Math.ceil(x);
   console.log(ceilX); // 輸出 5

代碼解釋:該示例中,通過Math.ceil方法對變數x進行向上取整操作。傳入小數4.2時,返回最小的整數5。最後將結果列印到控制台。

Math.floor(x)

方法解釋:返回小於或等於給定數字x的最大整數,且為整數。

示例代碼:

   const x = 4.8;
   const floorX = Math.floor(x);
   console.log(floorX); // 輸出 4

代碼解釋:該示例中,通過Math.floor方法對變數x進行向下取整操作。傳入小數4.8時,返回最大的整數4。最後將結果列印到控制台。

Math.round(x)

方法解釋:返回給定數字x的四捨五入值為最接近的整數。

示例代碼:

   const x = 4.4;
   const roundX = Math.round(x);
   console.log(roundX); // 輸出 4

代碼解釋:該示例中,通過Math.round方法對變數x進行四捨五入操作。傳入小數4.4時,返回最接近的整數4。最後將結果列印到控制台。

Math.max(x1, x2, ..., xn)

方法解釋:返回給定一組數字中的最大值。

示例代碼:

   const maxNum = Math.max(3, 9, 5, 2, 7);
   console.log(maxNum); // 輸出 9

代碼解釋:該示例中,通過Math.max方法找出一組數字中的最大值。傳入數字3, 9, 5, 2, 7時,返回最大值9。最後將結果列印到控制台。

Math.min(x1, x2, ..., xn)

方法解釋:返回給定一組數字中的最小值。

示例代碼:

   const minNum = Math.min(3, 9, 5, 2, 7);
   console.log(minNum); // 輸出 2

代碼解釋:該示例中,通過Math.min方法找出一組數字中的最小值。傳入數字3, 9, 5, 2, 7時,返回最小值2。最後將結果列印到控制台。

Math.sqrt(x)

方法解釋:返回給定數字x的平方根。

示例代碼:

   const x = 16;
   const sqrtX = Math.sqrt(x);
   console.log(sqrtX); // 輸出 4

代碼解釋:該示例中,通過Math.sqrt方法計算變數x的平方根。傳入數字16時,返回其平方根4。最後將結果列印到控制台。

Math.pow(x, y)

方法解釋:返回x的y次冪的結果。

示例代碼:

   const x = 2;
   const y = 3;
   const powResult = Math.pow(x, y);
   console.log(powResult); // 輸出 8

代碼解釋:該示例中,通過Math.pow方法計算變數x的y次冪。傳入x=2, y=3時,返回2的3次冪結果為8。最後將結果列印到控制台。

Math.random()

方法解釋:返回一個大於等於0且小於1的隨機數。

   const randomNum = Math.random();
   console.log(randomNum);

代碼解釋:該示例中,通過Math.random方法生成一個大於等於0且小於1的隨機數。最後將結果列印到控制台。由於每次運行結果都不確定,所以可以得到不同的隨機數。

Math.sin(x), Math.cos(x), Math.tan(x)

方法解釋:分別返回給定角度x的正弦值、餘弦值和正切值。

    const angle = 45;
    const sinValue = Math.sin(angle * (Math.PI / 180));
    const cosValue = Math.cos(angle * (Math.PI / 180));
    const tanValue = Math.tan(angle * (Math.PI / 180));
    console.log(sinValue, cosValue, tanValue);

代碼解釋:該示例中,通過Math.sin、Math.cos、Math.tan方法計算給定角度的正弦、餘弦和正切值。由於這些三角函數的參數需要弧度而非角度,所以需要將角度轉換為弧度。最後將結果列印到控制台。

Math.log(x)

方法解釋:返回給定數字x的自然對數。

示例代碼:

    const x = 10;
    const logValue = Math.log(x);
    console.log(logValue); // 輸出 2.302585092994046

代碼解釋:該示例中,通過Math.log方法計算給定數字x的自然對數。傳入數字10時,返回其自然對數結果約為2.3026。最後將結果列印到控制台。

Math.exp(x)

方法解釋:返回給定數的指數值。

示例代碼:

    const x = 2;
    const expValue = Math.exp(x);
    console.log(expValue); // 輸出 7.3890560989306495

代碼解釋:該示例中,通過Math.exp方法計算給定數字x的指數值。傳入數字2時,返回e的2次冪結果約為7.3891。最後將結果列印到控制台。

Math.PI

屬性解釋:表示圓周率π的常量。

示例代碼:

    console.log(Math.PI); // 輸出 3.141592653589793

代碼解釋:該示例中,直接輸出Math.PI屬性的值,即圓周率π的近似值3.141592653589793。

Math.E    

屬性解釋:表示自然對數的底e的常量。

示例代碼:

    console.log(Math.E); // 輸出 2.718281828459045

代碼解釋:該示例中,直接輸出Math.E屬性的值,即自然對數的底e的近似值2.718281828459045。

Math對象的這些方法和屬性可以在數學計算和處理中發揮重要的作用。

Date對象

在JavaScript中,Date對象用於處理日期和時間。

Date 對象和 Math 對象不一樣,他是一個構造函數,所以我們需要實例化後才能使用

Date對象基於UNIX時間戳,它表示自1970年1月1日午夜(格林尼治標準時間)以來經過的毫秒數。可以使用Date對象來創建特定日期和時間的實例。

以下是Date對象的幾個常見方法:

1. Date()
   - 用法:new Date()。
   - 描述:創建一個新的Date對象,表示當前的日期和時間。

2. Date(year, month, day, hours, minutes, seconds, milliseconds)
   - 用法:new Date(year, month, day, hours, minutes, seconds, milliseconds)。
   - 描述:根據給定的參數創建一個新的Date對象。

3. getDate()
   - 用法:dateObj.getDate()。
   - 描述:獲取Date對象的日期(1-31)。

4. getMonth()
   - 用法:dateObj.getMonth()。
   - 描述:獲取Date對象的月份(0-11)。

5. getFullYear()
   - 用法:dateObj.getFullYear()。
   - 描述:獲取Date對象的四位數年份。

6. getHours()
   - 用法:dateObj.getHours()。
   - 描述:獲取Date對象的小時(0-23)。

7. getMinutes()
   - 用法:dateObj.getMinutes()。
   - 描述:獲取Date對象的分鐘(0-59)。

8. getSeconds()
   - 用法:dateObj.getSeconds()。
   - 描述:獲取Date對象的秒數(0-59)。

9. getMilliseconds()
   - 用法:dateObj.getMilliseconds()。
   - 描述:獲取Date對象的毫秒數(0-999)。

10. getTime()
    - 用法:dateObj.getTime()。
    - 描述:獲取Date對象的UNIX時間戳(自1970年1月1日午夜以來的毫秒數)。

11. setDate(dayValue)
    - 用法:dateObj.setDate(dayValue)。
    - 描述:設置Date對象的日期(1-31)。

12. setMonth(monthValue)
    - 用法:dateObj.setMonth(monthValue)。
    - 描述:設置Date對象的月份(0-11)。

13. setFullYear(yearValue)
    - 用法:dateObj.setFullYear(yearValue)。
    - 描述:設置Date對象的四位數年份。

14. setHours(hourValue)
    - 用法:dateObj.setHours(hourValue)。
    - 描述:設置Date對象的小時(0-23)。

15. setMinutes(minuteValue)
    - 用法:dateObj.setMinutes(minuteValue)。
    - 描述:設置Date對象的分鐘(0-59)。

16. setSeconds(secondValue)
    - 用法:dateObj.setSeconds(secondValue)。
    - 描述:設置Date對象的秒數(0-59)。

17. setMilliseconds(millisecondValue)
    - 用法:dateObj.setMilliseconds(millisecondValue)。
    - 描述:設置Date對象的毫秒數(0-999)。

這些只是Date對象的一些方法,還有其他方法可以用於操作和處理日期和時間。使用這些方法可以構建自己的日期和時間功能,例如計算時間差、格式化日期和時間等。

Date()

- 方法介紹:創建一個新的Date對象,表示當前的日期和時間。

- 案例:

  const currentDate = new Date();
  console.log(currentDate);

- 代碼解釋:這段代碼創建了一個新的Date對象,並將其賦值給currentDate變數。然後通過console.log()列印出當前的日期和時間。輸出的結果類似於 "Thu Dec 09 2021 15:34:52 GMT+0800 (China Standard Time)"。

Date(year, month, day, hours, minutes, seconds, milliseconds)

- 方法介紹:根據給定的參數創建一個新的Date對象。

- 案例:

  const specificDate = new Date(2022, 0, 1);
  console.log(specificDate);

- 代碼解釋:這段代碼根據給定的參數創建一個新的Date對象,表示2022年1月1日。通過console.log()列印出specificDate的值。輸出的結果類似於 "Sat Jan 01 2022 00:00:00 GMT+0800 (China Standard Time)"。

getDate()

- 方法介紹:獲取Date對象的日期(1-31)。

- 案例:

  const currentDate = new Date();
  const day = currentDate.getDate();
  console.log(day);

- 代碼解釋:這段代碼首先創建一個新的Date對象表示當前日期,並將其賦值給currentDate變數。然後使用getDate()方法獲取當前日期,並將其值賦給day變數。最後通過console.log()列印出當前日期的天數。

getMonth()

- 方法介紹:獲取Date對象的月份(0-11)。

- 案例:

  const currentDate = new Date();
  const month = currentDate.getMonth();
  console.log(month);

- 代碼解釋:這段代碼首先創建一個新的Date對象表示當前日期,並將其賦值給currentDate變數。然後使用getMonth()方法獲取當前日期的月份,並將其值賦給month變數。最後通過console.log()列印出當前日期的月份。註意,月份從0開始計數,所以對應的值是0-11。

getFullYear()

- 方法介紹:獲取Date對象的四位數年份。

- 案例:

  const currentDate = new Date();
  const year = currentDate.getFullYear();
  console.log(year);

- 代碼解釋:這段代碼首先創建一個新的Date對象表示當前日期,並將其賦值給currentDate變數。然後使用getFullYear()方法獲取當前日期的年份,並將其值賦給year變數。最後通過console.log()列印出當前日期的年份。

getHours()

- 方法介紹:獲取Date對象的小時(0-23)。

- 案例:

  const currentDate = new Date();
  const hours = currentDate.getHours();
  console.log(hours);

- 代碼解釋:這段代碼首先創建一個新的Date對象表示當前日期和時間,並將其賦值給currentDate變數。然後使用getHours()方法獲取當前時間的小時數,並將其值賦給hours變數。最後通過console.log()列印出當前時間的小時數。

getMinutes()

- 方法介紹:獲取Date對象的分鐘(0-59)。

- 案例:

  const currentDate = new Date();
  const minutes = currentDate.getMinutes();
  console.log(minutes);

- 代碼解釋:這段代碼首先創建一個新的Date對象表示當前日期和時間,並將其賦值給currentDate變數。然後使用getMinutes()方法獲取當前時間的分鐘數,並將其值賦給minutes變數。最後通過console.log()列印出當前時間的分鐘數。

getSeconds()

- 方法介紹:獲取Date對象的秒數(0-59)。

- 案例:

  const currentDate = new Date();
  const seconds = currentDate.getSeconds();
  console.log(seconds);

- 代碼解釋:這段代碼首先創建一個新的Date對象表示當前日期和時間,並將其賦值給currentDate變數。然後使用getSeconds()方法獲取當前時間的秒數,並將其值賦給seconds變數。最後通過console.log()列印出當前時間的秒數。

getMilliseconds()

- 方法介紹:獲取Date對象的毫秒數(0-999)。

- 案例:

  const currentDate = new Date();
  const milliseconds = currentDate.getMilliseconds();
  console.log(milliseconds);


  - 代碼解釋:這段代碼首先創建一個新的Date對象表示當前日期和時間,並將其賦值給currentDate變數。然後使用getMilliseconds()方法獲取當前時間的毫秒數,並將其值賦給milliseconds變數。最後通過console.log()列印出當前時間的毫秒數。

getTime()

- 方法介紹:獲取Date對象的UNIX時間戳(自1970年1月1日午夜以來的毫秒數)。

- 案例:

  const currentDate = new Date();
  const timestamp = currentDate.getTime();
  console.log(timestamp);

- 代碼解釋:這段代碼首先創建一個新的Date對象表示當前日期和時間,並將其賦值給currentDate變數。然後使用getTime()方法獲取當前日期和時間的UNIX時間戳,並將其值賦給timestamp變數。最後通過console.log()列印出當前日期和時間的UNIX時間戳。

setDate(dayValue)

- 方法介紹:設置Date對象的日期(1-31)。

- 案例:

  const currentDate = new Date();
  currentDate.setDate(15);
  console.log(currentDate);

- 代碼解釋:這段代碼首先創建一個新的Date對象表示當前日期和時間,並將其賦值給currentDate變數。然後使用setDate()方法將日期設置為15。最後通過console.log()列印出修改後的Date對象。

setMonth(monthValue)

- 方法介紹:設置Date對象的月份(0-11)。

- 案例:

  const currentDate = new Date();
  currentDate.setMonth(2);
  console.log(currentDate);

- 代碼解釋:這段代碼首先創建一個新的Date對象表示當前日期和時間,並將其賦值給currentDate變數。然後使用setMonth()方法將月份設置為2(表示3月)。最後通過console.log()列印出修改後的Date對象。

setFullYear(yearValue)

- 方法介紹:設置Date對象的四位數年份。

- 案例:

  const currentDate = new Date();
  currentDate.setFullYear(2023);
  console.log(currentDate);

- 代碼解釋:這段代碼首先創建一個新的Date對象表示當前日期和時間,並將其賦值給currentDate變數。然後使用setFullYear()方法將年份設置為2023。最後通過console.log()列印出修改後的Date對象。

setHours(hourValue)

- 方法介紹:設置Date對象的小時(0-23)。

- 案例:

  const currentDate = new Date();
  currentDate.setHours(12);
  console.log(currentDate);

- 代碼解釋:這段代碼首先創建一個新的Date對象表示當前日期和時間,並將其賦值給currentDate變數。然後使用setHours()方法將小時設置為12。最後通過console.log()列印出修改後的Date對象。

setMinutes(minuteValue)

- 方法介紹:設置Date對象的分鐘(0-59)。

- 案例:

  const currentDate = new Date();
  currentDate.setMinutes(30);
  console.log(currentDate);

- 代碼解釋:這段代碼首先創建一個新的Date對象表示當前日期和時間,並將其賦值給currentDate變數。然後使用setMinutes()方法將分鐘設置為30。最後通過console.log()列印出修改後的Date對象。

setSeconds(secondValue)

- 方法介紹:設置Date對象的秒數(0-59)。

- 案例:

  const currentDate = new Date();
  currentDate.setSeconds(45);
  console.log(currentDate);

- 代碼解釋:這段代碼首先創建一個新的Date對象表示當前日期和時間,並將其賦值給currentDate變數。然後使用setSeconds()方法將秒數設置為45。最後通過console.log()列印出修改後的Date對象。

setMilliseconds(millisecondValue)

- 方法介紹:設置Date對象的毫秒數(0-999)。

- 案例:

  const currentDate = new Date();
  currentDate.setMilliseconds(500);
  console.log(currentDate);

- 代碼解釋:這段代碼首先創建一個新的Date對象表示當前日期和時間,並將其賦值給currentDate變數。然後使用setMilliseconds()方法將毫秒數設置為500。最後通過console.log()列印出修改後的Date對象。

這些方法可以幫助您在JavaScript中處理日期和時間。通過使用這些方法,您可以獲取特定的日期和時間信息、設置日期和時間,以及執行其他與日期和時間相關的操作。

數組對象

JavaScript中的數組對象是一種特殊的對象,用於存儲和操作多個值。它是一種有序的集合,可以包含任意類型的數據,包括數字、字元串、對象、函數等。

以下是JavaScript數組對象常用的方法:

1. push(): 向數組末尾添加一個或多個元素,並返回新的長度。
2. pop(): 刪除並返回數組的最後一個元素。
3. shift(): 刪除並返回數組的第一個元素。
4. unshift(): 向數組的開頭添加一個或多個元素,並返回新的長度。
5. concat(): 連接兩個或多個數組,並返回新的數組。
6. slice(): 返回一個新的數組,包含從開始到結束(不包括結束)的部分數組。
7. splice(): 從指定位置刪除或替換元素,並返回被刪除的元素。
8. indexOf(): 返回指定元素在數組中的第一個匹配位置的索引,如果不存在則返回-1。
9. lastIndexOf(): 返回指定元素在數組中的最後一個匹配位置的索引,如果不存在則返回-1。
10. join(): 將數組的所有元素連接成一個字元串,並返回該字元串。
11. reverse(): 顛倒數組中元素的順序。
12. sort(): 對數組元素進行排序,預設按照Unicode編碼排序。
13. filter(): 創建一個新數組,包含滿足條件的所有元素。
14. map(): 創建一個新數組,包含對原數組中的每個元素進行操作後的結果。
15. forEach(): 對數組中的每個元素執行指定的函數。
16. reduce(): 從左到右對數組中的元素進行累積操作,返回一個最終值。
17. reduceRight(): 從右到左對數組中的元素進行累積操作,返回一個最終值。

除了上述方法,數組對象還有一些其他的屬性和方法,如length屬性用於獲取數組的長度,toString()方法用於將數組轉換為字元串,等等。

push()

方法介紹:push() 方法向數組的末尾添加一個或多個元素,並返回新的長度。

案例代碼:

let fruits = ['apple', 'banana'];
let length = fruits.push('orange', 'kiwi');
console.log(fruits); // 輸出:['apple', 'banana', 'orange', 'kiwi']
console.log(length); // 輸出:4

解釋:在上述代碼中,我們定義了一個名為fruits的數組,然後使用push()方法向數組末尾添加了兩個元素'orange'和'kiwi'。最後,我們通過console.log()列印出了修改後的數組和新的長度。

pop()

方法介紹:pop() 方法刪除並返回數組的最後一個元素。
案例代碼:

let fruits = ['apple', 'banana', 'orange'];
let lastFruit = fruits.pop();
console.log(fruits); // 輸出:['apple', 'banana']
console.log(lastFruit); // 輸出:'orange'

解釋:在上述代碼中,我們定義了一個名為fruits的數組,然後使用pop()方法刪除了數組的最後一個元素'orange'。最後,我們通過console.log()列印出了修改後的數組和被刪除的元素。

shift()

方法介紹:shift() 方法刪除並返回數組的第一個元素。

案例代碼:

let fruits = ['apple', 'banana', 'orange'];
let firstFruit = fruits.shift();
console.log(fruits); // 輸出:['banana', 'orange']
console.log(firstFruit); // 輸出:'apple'

解釋:在上述代碼中,我們定義了一個名為fruits的數組,然後使用shift()方法刪除了數組的第一個元素'apple'。最後,我們通過console.log()列印出了修改後的數組和被刪除的元素。

unshift()

方法介紹:unshift() 方法向數組的開頭添加一個或多個元素,並返回新的長度。
案例代碼:

let fruits = ['banana', 'orange'];
let length = fruits.unshift('apple', 'kiwi');
console.log(fruits); // 輸出:['apple', 'kiwi', 'banana', 'orange']
console.log(length); // 輸出:4

解釋:在上述代碼中,我們定義了一個名為fruits的數組,然後使用unshift()方法向數組開頭添加了兩個元素'apple'和'kiwi'。最後,我們通過console.log()列印出了修改後的數組和新的長度。

concat()

方法介紹:concat() 方法用於連接兩個或多個數組,並返回一個新的數組。
案例代碼:

let fruits1 = ['apple', 'banana'];
let fruits2 = ['orange', 'kiwi'];
let combinedFruits = fruits1.concat(fruits2);
console.log(combinedFruits); // 輸出:['apple', 'banana', 'orange', 'kiwi']

解釋:在上述代碼中,我們定義了兩個數組fruits1和fruits2,然後使用concat()方法將它們連接起來,形成一個新的數組combinedFruits。最後,我們通過console.log()列印出了新的數組。

slice()

方法介紹:slice() 方法返回一個新的數組,包含從開始到結束(不包括結束)的部分數組。

案例代碼:

let fruits = ['apple', 'banana', 'orange', 'kiwi'];
let slicedFruits = fruits.slice(1, 3);
console.log(slicedFruits); // 輸出:['banana', 'orange']

解釋:在上述代碼中,我們定義了一個名為fruits的數組,然後使用slice()方法從索引1開始(包括索引1)到索引3結束(不包括索引3)獲取了一個新的數組slicedFruits。最後,我們通過console.log()列印出了新的數組。

splice()

方法介紹:splice() 方法從指定位置刪除或替換元素,並返回被刪除的元素。

案例代碼:

let fruits = ['apple', 'banana', 'orange', 'kiwi'];
let removedFruits = fruits.splice(1, 2, 'grape', 'melon');
console.log(fruits); // 輸出:['apple', 'grape', 'melon', 'kiwi']
console.log(removedFruits); // 輸出:['banana', 'orange']

解釋:在上述代碼中,我們定義了一個名為fruits的數組,然後使用splice()方法從索引1開始刪除了2個元素,併在該位置插入了'grape'和'melon'。最後,我們通過console.log()列印出了修改後的數組和被刪除的元素。

indexOf()

方法介紹:indexOf() 方法返回指定元素在數組中的第一個匹配位置的索引,如果不存在則返回-1。

案例代碼:

let fruits = ['apple', 'banana', 'orange', 'kiwi'];
let index = fruits.indexOf('orange');
console.log(index); // 輸出:2

解釋:在上述代碼中,我們定義了一個名為fruits的數組,然後使用indexOf()方法查找'orange'在數組中的索引位置。最後,我們通過console.log()列印出了索引值。

lastIndexOf()

方法介紹:lastIndexOf() 方法返回指定元素在數組中的最後一個匹配位置的索引,如果不存在則返回-1。

案例代碼:

let fruits = ['apple', 'banana', 'orange', 'kiwi', 'orange'];
let index = fruits.lastIndexOf('orange');
console.log(index); // 輸出:4

解釋:在上述代碼中,我們定義了一個名為fruits的數組,然後使用lastIndexOf()方法查找'orange'在數組中的最後一個匹配位置的索引。最後,我們通過console.log()列印出了索引值。

join()

方法介紹:join() 方法將數組的所有元素連接成一個字元串,並返回該字元串。
案例代碼:

let fruits = ['apple', 'banana', 'orange'];
let joinedString = fruits.join(', ');
console.log(joinedString); // 輸出:'apple, banana, orange'

解釋:在上述代碼中,我們定義了一個名為fruits的數組,然後使用join()方法將數組的所有元素連接成一個字元串,每個元素之間用', '分隔。最後,我們通過console.log()列印出了連接後的字元串。

reverse()

方法介紹:reverse() 方法顛倒數組中元素的順序。

案例代碼:

let fruits = ['apple', 'banana', 'orange'];
fruits.reverse();
console.log(fruits); // 輸出:['orange', 'banana', 'apple']

解釋:在上述代碼中,我們定義了一個名為fruits的數組,然後使用reverse()方法顛倒了數組中元素的順序。最後,我們通過console.log()列印出了修改後的數組。

sort()

方法介紹:sort() 方法對數組元素進行排序,預設按照Unicode編碼排序。

案例代碼:

let fruits = ['banana', 'orange', 'apple'];
fruits.sort();
console.log(fruits); // 輸出:['apple', 'banana', 'orange']

解釋:在上述代碼中,我們定義了一個名為fruits的數組,然後使用sort()方法對數組元素進行排序。由於預設按照Unicode編碼排序,所以'apple'排在了最前面。最後,我們通過console.log()列印出了排序後的數組。

filter()

方法介紹:filter() 方法創建一個新數組,包含滿足條件的所有元素。

案例代碼:

let numbers = [1, 2, 3, 4, 5];
let evenNumbers = numbers.filter(function(number) {
  return number % 2 === 0;
});
console.log(evenNumbers); // 輸出:[2, 4]

解釋:在上述代碼中,我們定義了一個名為numbers的數組,然後使用filter()方法創建了一個新數組evenNumbers,其中包含了滿足條件(偶數)的所有元素。最後,我們通過console.log()列印出了新數組。

map()

方法介紹:map() 方法創建一個新數組,包含對原數組中的每個元素進行操作後的結果。

案例代碼:

let numbers = [1, 2, 3, 4, 5];
let doubledNumbers = numbers.map(function(number) {
  return number * 2;
});
console.log(doubledNumbers); // 輸出:[2, 4, 6, 8, 10]

解釋:在上述代碼中,我們定義了一個名為numbers的數組,然後使用map()方法創建了一個新數組doubledNumbers,其中包含了對原數組中每個元素進行操作後的結果(乘以2)。最後,我們通過console.log()列印出了新數組。

forEach()

方法介紹:forEach() 方法對數組中的每個元素執行指定的函數。

案例代碼:

let fruits = ['apple', 'banana', 'orange'];
fruits.forEach(function(fruit) {
  console.log(fruit);
});

解釋:在上述代碼中,我們定義了一個名為fruits的數組,然後使用forEach()方法對數組中的每個元素執行了一個匿名函數,該函數列印出了每個水果的名稱。

reduce()

方法介紹:reduce() 方法從左到右對數組中的元素進行累積操作,返回一個最終值。

案例代碼:

let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce(function(total, number) {
  return total + number;
}, 0);
console.log(sum); // 輸出:15

解釋:在上述代碼中,我們定義了一個名為numbers的數組,然後使用reduce()方法對數組中的元素進行累積操作,最終返回它們的和。初始值為0,然後每次迭代時將當前元素與累積值相加。最後,我們通過console.log()列印出了最終值。

reduceRight()

方法介紹:reduceRight() 方法從右到左對數組中的元素進行累積操作,返回一個最終值。

案例代碼:

let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduceRight(function(total, number) {
  return total + number;
}, 0);
console.log(sum); // 輸出:15


解釋:在上述代碼中,我們定義了一個名為numbers的數組,然後使用reduceRight()方法從右到左對數組中的元素進行累積操作,最終返回它們的和。初始值為0,然後每次迭代時將當前元素與累積值相加。最後,我們通過console.log()列印出了最終值。

除了上述方法,數組對象還有一些其他的屬性和方法,如length屬性用於獲取數組的長度,toString()方法用於將數組轉換為字元串,等等。

字元串對象

JavaScript中的字元串對象是一種特殊的對象,用於表示和操作字元串。字元串對象具有許多內置的方法,用於處理和操作字元串數據。

以下是一些常用的字元串對象方法:

1. length:返回字元串的長度。
2. charAt(index):返回指定索引位置的字元。
3. charCodeAt(index):返回指定索引位置的字元的Unicode值。
4. concat(str1, str2, ...):連接兩個或多個字元串,並返回新的字元串。
5. indexOf(searchValue, startIndex):返回指定字元串在原字元串中第一次出現的索引位置,如果沒有找到則返回-1。
6. lastIndexOf(searchValue, startIndex):返回指定字元串在原字元串中最後一次出現的索引位置,如果沒有找到則返回-1。
7. slice(startIndex, endIndex):提取原字元串中指定索引範圍的子字元串,並返回新的字元串。
8. substring(startIndex, endIndex):提取原字元串中指定索引範圍的子字元串,並返回新的字元串。與slice方法類似,但不支持負數索引。
9. substr(startIndex, length):提取原字元串中從指定索引開始的指定長度的子字元串,並返回新的字元串。
10. replace(searchValue, replaceValue):將原字元串中的指定字元串或正則表達式替換為新的字元串,並返回新的字元串。
11. toLowerCase():將原字元串中的所有字元轉換為小寫,並返回新的字元串。
12. toUpperCase():將原字元串中的所有字元轉換為大寫,並返回新的字元串。
13. trim():去除原字元串中的首尾空格,並返回新的字元串。
14. split(separator, limit):將原字元串按照指定的分隔符分割成數組,並返回數組。

除了上述方法,字元串對象還可以通過索引訪問和修改字元串中的字元。例如,可以使用str[0]或str.charAt(0)來訪問字元串中的第一個字元,也可以使用str[0] = 'a'或str.charAt(0) = 'a'來修改字元串中的第一個字元。

需要註意的是,字元串對象是不可變的,即一旦創建就無法修改。每次對字元串進行操作時,都會返回一個新的字元串對象。因此,對字元串進行頻繁的修改操作可能會導致性能問題。

length方法

返回字元串的長度。

案例:

const str = "Hello World";
console.log(str.length); // 輸出:11

解釋:length方法返回字元串的長度,即字元串中字元的個數。在上述案例中,字元串"Hello World"的長度為11。

charAt方法

返回指定索引位置的字元。

案例:

const str = "Hello World";
console.log(str.charAt(4)); // 輸出:o

解釋:charAt方法接受一個索引參數,返回該索引位置上的字元。在上述案例中,字元串"Hello World"的第4個字元是"o"。

charCodeAt方法

返回指定索引位置的字元的Unicode值。

案例:

const str = "Hello World";
console.log(str.charCodeAt(1)); // 輸出:101


解釋:charCodeAt方法接受一個索引參數,返回該索引位置上字元的Unicode值。在上述案例中,字元串"Hello World"的第1個字元是"e",其Unicode值為101。

concat方法

連接兩個或多個字元串,並返回新的字元串。

案例:

const str1 = "Hello";
const str2 = "World";
const result = str1.concat(" ", str2);
console.log(result); // 輸出:Hello World

解釋:concat方法可以接受多個參數,將它們連接成一個新的字元串。在上述案例中,將字元串"Hello"和"World"連接起來,併在它們之間添加一個空格,得到新的字元串"Hello World"。

indexOf方法

返回指定字元串在原字元串中第一次出現的索引位置,如果沒有找到則返回-1。

案例:

const str = "Hello World";
console.log(str.indexOf("o")); // 輸出:4
console.log(str.indexOf("z")); // 輸出:-1

解釋:indexOf方法接受一個參數,表示要查找的字元串。它返回該字元串在原字元串中第一次出現的索引位置。如果沒有找到,則返回-1。在上述案例中,字元串"Hello World"中第一次出現字元"o"的索引位置是4,而字元"z"在字元串中不存在,所以返回-1。

lastIndexOf方法

返回指定字元串在原字元串中最後一次出現的索引位置,如果沒有找到則返回-1。

案例:

const str = "Hello World";
console.log(str.lastIndexOf("o")); // 輸出:7
console.log(str.lastIndexOf("z")); // 輸出:-1

解釋:lastIndexOf方法與indexOf方法類似,但是它從字元串的末尾開始查找指定字元串,並返回最後一次出現的索引位置。在上述案例中,字元串"Hello World"中最後一次出現字元"o"的索引位置是7,而字元"z"在字元串中不存在,所以返回-1。

slice方法

提取原字元串中指定索引範圍的子字元串,並返回新的字元串。

案例:

const str = "Hello World";
console.log(str.slice(6, 11)); // 輸出:World

解釋:slice方法接受兩個參數,表示要提取的子字元串的起始索引和結束索引(不包括結束索引位置的字元)。它返回一個新的字元串,包含原字元串中指定索引範圍的字元。在上述案例中,提取了字元串"Hello World"中從索引6到索引11之間的字元,得到新的字元串"World"。

substring方法

提取原字元串中指定索引範圍的子字元串,並返回新的字元串。

案例:

const str = "Hello World";
console.log(str.substring(6, 11)); // 輸出:World

解釋:substring方法與slice方法類似,也接受兩個參數,表示要提取的子字元串的起始索引和結束索引(不包括結束索引位置的字元)。它返回一個新的字元串,包含原字元串中指定索引範圍的字元。與slice方法不同的是,substring方法不支持負數索引。在上述案例中,提取了字元串"Hello World"中從索引6到索引11之間的字元,得到新的字元串"World"。

substr方法

提取原字元串中從指定索引開始的指定長度的子字元串,並返回新的字元串。

案例:

const str = "Hello World";
console.log(str.substr(6, 5)); // 輸出:World

解釋:substr方法接受兩個參數,表示要提取的子字元串的起始索引和長度。它返回一個新的字元串,包含原字元串中從指定索引開始的指定長度的字元。在上述案例中,從字元串"Hello World"的索引6開始提取長度為5的字元,得到新的字元串"World"。

replace方法

將原字元串中的指定字元串或正則表達式替換為新的字元串,並返回新的字元串。

案例:

const str = "Hello World";
const result = str.replace("World", "JavaScript");
console.log(result); // 輸出:Hello JavaScript


解釋:replace方法接受兩個參數,第一個參數表示要替換的字元串或正則表達式,第二個參數表示替換後的新字元串。它返回一個新的字元串,其中原字元串中的指定部分被替換為新的字元串。在上述案例中,將字元串"Hello World"中的"World"替換為"JavaScript",得到新的字元串"Hello JavaScript"。

toLowerCase方法

將原字元串中的所有字元轉換為小寫,並返回新的字元串。

案例:

const str = "Hello World";
console.log(str.toLowerCase()); // 輸出:hello world

解釋:toLowerCase方法將原字元串中的所有字元轉換為小寫,並返回新的字元串。在上述案例中,將字元串"Hello World"中的所有字元轉換為小寫,得到新的字元串"hello world"。

toUpperCase方法

將原字元串中的所有字元轉換為大寫,並返回新的字元串。

案例:

const str = "Hello World";
console.log(str.toUpperCase()); // 輸出:HELLO WORLD

解釋:toUpperCase方法將原字元串中的所有字元轉換為大寫,並返回新的字元串。在上述案例中,將字元串"Hello World"中的所有字元轉換為大寫,得到新的字元串"HELLO WORLD"。

trim方法

去除原字元串中的首尾空格,並返回新的字元串。

案例:

const str = "   Hello World   ";
console.log(str.trim()); // 輸出:Hello World

解釋:trim方法去除原字元串中的首尾空格,並返回新的字元串。在上述案例中,將字元串"   Hello World   "的首尾空格去除,得到新的字元串"Hello World"。

split方法

將原字元串按照指定的分隔符分割成數組,並返回數組。

案例:

const str = "Hello,World";
const result = str.split(",");
console.log(result); // 輸出:["Hello", "World"]

解釋:split方法接受一個參數,表示要使用的分隔符。它將原字元串按照指定的分隔符分割成一個數組,並返回該數組。在上述案例中,將字元串"Hello,World"按照逗號分隔成兩個字元串,得到數組["Hello", "World"]。

以上是對字元串對象的常用方法的介紹和示例代碼。這些方法可以幫助我們對字元串進行各種操作,如查找、替換、截取等。在實際開發中,根據具體需求選擇合適的方法來處理字元串數據。

在黑夜裡夢想著光,心中覆蓋悲傷,在悲傷里忍受孤獨,空守一絲溫暖。 我的淚水是無底深海,對你的愛已無言,相信無盡的力量,那是真愛永在。 我的信仰是無底深海,澎湃著心中火焰,燃燒無盡的力量,那是忠誠永在。
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • # 使用Back推送消息到你的iPhone # 前言 我的好友看了我的博客,給我提了個需求,讓我搞個網站通知,我開始以為就是評論回覆然後發送郵件通知。不過他告訴我網站通知是,當有人評論或者留言後,會通知到我這邊來,消息是實時通知的,他說用的是Back,不需要發郵件,然後發了個GitHub鏈接給我,我 ...
  • # .NET6使用RabbitMQ學習 [TOC] ## 前提 前段時間上班無事,上網衝浪看到了消息隊列RabbitMQ,就想著學習一下,網上看了點資料在嗶哩嗶哩上看的到codeman講的一個rabbitmq的視頻,就跟著仔細學習一下,敲一下代碼。視頻地址: [rabbitmq視頻](【【2021最 ...
  • # shell腳本-lnmp一鍵部署 創建文件lnmp.sh ``` vim lnmp.sh ``` ``` #!/bin/bash #描述:LNMP網站架構部署腳本 cat /dev/null echo "創建Nginx運行用戶" groupadd www useradd -g www www - ...
  • # shell腳本-MySQL資料庫備份 ## 準備: 確保mysql服務啟動 **可以通過mysqldump命令來備份資料庫** 1.mysqldump 命令語法: 使用 mysqldump 命令備份一個資料庫的語法格式如下: ``` mysqldump -u username -p dbpass ...
  • # 一. 索引概述 ## 1. 介紹 **索引是幫助MySQL高效獲取數據的數據結構(有序)。在數據之外,資料庫系統還維護著滿足特定查找演算法的數據結構,這些數據結構以某種方式引用(指向)數據,這樣就可以在這些數據結構上實現高級查找演算法,這種數據結構就是索引。** ![](https://tcs-de ...
  • 原文地址:https://blog.csdn.net/zhanglei5415/article/details/131434931 ## 一、問題 當對含有中文的url字元串,進行NSURL對象包裝時,是不能被識別的。 不會得到期望的NSURL對象,而是返回一個nil 值 ; ```objectiv ...
  • 博客推行版本更新,成果積累制度,已經寫過的博客還會再次更新,不斷地琢磨,高質量高數量都是要追求的,工匠精神是學習必不可少的精神。因此,大家有何建議歡迎在評論區踴躍發言,你們的支持是我最大的動力,你們敢投,我就敢肝 ...
  • 今天接到粉絲私信,詢問是否可以通過Canvas繪製一些圖形,然後根據粉絲提供的模板圖,通過Canvas進行模擬繪製,通過分析發現,圖形雖然相對簡單,但是如果不藉助相應的軟體,純代碼繪製還是稍微費些時間。今天將繪製圖形源碼分享出來,僅供學習分享之用,如有不足之處,還請指正。 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...