JavaScript知識-函數基礎知識、匿名函數、閉包函數、箭頭函數、js內置對象和方法

来源:https://www.cnblogs.com/zxr1002/archive/2022/08/25/16625655.html
-Advertisement-
Play Games

JavaScript函數 1.函數的語法格式 function 函數名(形參1，形參2，形參3....){ // 函數註釋，解釋說明該函數用來做什麼 函數體代碼 return 返回值 } 2.無參函數 function func1(){ console.log('hello world') } fu ...


目錄

JavaScript函數

1.函數的語法格式

function 函數名(形參1，形參2，形參3....){
    // 函數註釋，解釋說明該函數用來做什麼
    函數體代碼
    return 返回值
}

2.無參函數

function func1(){
    console.log('hello world')
}

func1()    // 調用 加括弧調用與python中一樣

3.有參函數

function func2(a, b){
    console.log(a, b)
}

func2(1,2)    //調用函數(傳參)

func2(1,2,3,4,5,6)    // 多了沒關係 只要對應得數據
1 2
func2(1)    // 少了也沒關係
1 undefined

4.關鍵字arguments

arguments參數，可以獲取傳入得所有數據，也支持return和匿名函數
1.能夠獲取函數接受得索引參數

function func2(a,b){
    console.log(arguments)  // 能夠獲取函數接受得索引參數
    console.log(a,b)
}

image
2.關鍵字arguments(限制函數不能多也不能少)

function func2(a, b){
    if(arguments.length<2){
    console.log('傳少了')
    }else if (arguments.length>2){
    console.log('傳多了')
    }else{
    console.log('正常執行')
    }
}

image

5.函數返回值 關鍵字return

返回元素的個數

function index(){
   return 666, 777, 888
}
res = index();  // 一次只能返回一個值

image
把返回值做成數組形式返回（可實現多元素返回）

function index(){
    return [666, 777, 888]
}
res = index();

image
js不支持解壓賦值

6.匿名函數（沒有函數名）

function(){
console.log('所有隻有好好學習)
}
var res = function(){
console.loh('嗯，好好學習把')
}

image

7.箭頭函數

箭頭左邊的是形參  右邊是返回值
var func1 = v => v;

上面等價於下麵這句

var func1 = function(v){
   return v
}

var func2 = (arg1,arg2) => arg1+arg2
等價於
var func2 = function(arg1,arg2){
    return arg1+arg2
}

image

8.函數的全局變數與局部變數

1.局部變數：

在JavaScript函數內部聲明的變數(使用var)是局部變數，索引只能在函數內部訪問它（該變數的作用域是函數內部）。只要函數運行完畢，本地變數就會被刪除

2.全局變數：

在函數外聲明的變數是全局變數，網頁上的所有腳本和函數都能訪問它

3.變數生存周期

JavaScript變數的生命周期從它們被聲明的時候開始
局部變數會在函數運行以後被刪除
全局變數會在頁面關閉後被刪除

4.作用域

首先在函數內部查找變數，找不到則到外部函數查找，逐步找到最外層。與python作用域關係查找一模一樣

函數全局局部案例：

var city = "BeiJing";
function f() {
  var city = "ShangHai";
  function inner(){
    var city = "ShenZhen";
    console.log(city);
  }
  inner();
}

f();
shenZhen

var city = "BeiJing";
function Bar() {
  console.log(city);
}
function f() {
  var city = "ShangHai";
  return Bar;
}
var ret = f();
ret(); 

Beijing

9.閉包函數

var city = "BeiJing";
function f(){
    var city = "ShangHai";
    function inner(){
        console.log(city);
    }
    return inner;
}
var ret = f();
ret();

ShangHai

10.js內置對象和方法

JavaScript中的所有事物都是對象：字元串、數字、數組、日期，等等。在JavaScript中，對象是擁有屬性和方法的數據。
我們在學習基本數據類型的時候已經帶大家瞭解了，JavaScript中的Number對象、String對象、Array對象等。
註意var s1 = "abc"和var s2 = new String("abc")的區別：typeof s1 --> string而 typeof s2 --> Object

image

類似於python中的內置函數或者內置模塊
固定語法
    var 變數名 = new 內置對象名();

1.自定義對象

JavaScript的對象（Object）本質上是鍵值對的集合（Hash結構），但是只能用字元串作為鍵。
可以看成是我們python中的字典 但是js中的自定義對象要比python裡面的字典操作起來更加方便

2.創建自定義對象{}

var d1 = {'name' : 'jason','age' : 18}

3.第一種方式 創建自定義對象

var d = {'name':'jason','age':18}
typeof d
'object'

d['name']
'jason'

d.name
'jason'

d.age
18

4.支持for迴圈

ar d = {'name':'jason','age':18}

for(let i in d){
    console.log(i,d[i])
}
VM432:2 name jason
VM432:2 age 18

image
5.使用new()自定義對象的方式

第二種創建自定義對象的方式 需要使用關鍵字 new

var d2 = new Object()

d2.name = 'jason'
d2
{name: 'jason'}

d2['age'] = 18
d2
{name: 'jason', age: 18}

Date對象

let d3 = new Date()
Thu Aug 25 2022 20:06:32 GMT+0800 (中國標準時間)

格式化時間

d3.toLocaleString()
'2022/8/25 20:06:32'

也支持自己手動輸入時間(自定製)

let d4 = new Date('2022/08/25 12:12:45')
d4
Thu Aug 25 2022 12:12:45 GMT+0800 (中國標準時間)

image
時間對象方法

var d = new Date();
//getDate()                 獲取日
//getDay ()                 獲取星期
//getMonth ()               獲取月（0-11）
//getFullYear ()            獲取完整年份
//getYear ()                獲取年
//getHours ()               獲取小時
//getMinutes ()             獲取分鐘
//getSeconds ()             獲取秒
//getMilliseconds ()        獲取毫秒
//getTime ()                返回累計毫秒數(從1970/1/1午夜)

JSON序列化對象

1.python與js序列化與反序列化

在python中序列化反序列化
	dumps	序列化
	loads	反序列化

在js中也有序列化與反序列化
	JSON.stringify()
	JSON.parse()

2.js序列化使用

let d7 = {'name':'jason','age':18}

序列化
let res = JSON.stringify(d7)
res
'{"name":"jason","age":18}'

反序列化
JSON.parse(res)
{name: 'jason', age: 18}

3.javascript序列化基於網路發送給python

需求：如果當前js中有一個布爾值true需要基於網路發送給python程式並且讓python轉換成布爾值 如何操作

1.在js中使用JSON.stringify()序列化成json格式字元串
2.基於網路發送給python程式(自動編碼)
3.python接收 解碼並反序列化

RegExp正則對象

在python中如果需要使用正則 需要藉助re模塊
在js中需要我們取創建正則對象

1.new代表創建對象
let regl = new RegExp('^[a-zA-Z][a-zA-z0-9]{5,11}')

2.推薦使用
let reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,11}/
匹配內容
reg1.test('woshidashuaibi')
res2.test('woshidashuaibi')

3.獲取字元串裡面所有的字母s
let sss = 'nish asoswo shi'
sss.match(/s/)  // 拿到一個就停止了

4.解決拿到一個就停止的問題，使用全局匹配/g
sss.match(/s/g)  // 全局模式
(4) ['s', 's', 's', 's']

全局匹配模式：正則表達式的最後不加g則表示匹配成功就結束 加g表示全局匹配，全局匹配會有一個lastindex屬性

let reg3 = /^[a-zA-Z][a-zA-Z0-9]{5,11}/g

reg3.test('egondsb')  // 全局模式有一個lastindex屬性
true
reg3.test('egondsb')
false
reg3.test('egondsb')
true
reg3.test('egondsb')
false
如果在後面加了一個/g的時候，每一次匹配結束後，它都會等在那裡，如果再次校驗的時候，它會基於當前頁面進行再次向後移動，然後就會報false，報完false以後它會重置走到最開始位置

reg3.test('egondsb')
true
reg3.lastIndex
7
reg3.test('egondsb')
false
reg3.lastIndex
0

let reg4 = /^[a-zA-Z][a-zA-Z0-9]{5,11}/
reg4.test()

reg4.test()  //什麼都不傳 預設的是undefined
true
reg4.rest()
true

校驗時不傳參數預設傳的是undefined
reg4.test(undefined)
true

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 數組中push和concat的區別
    數組中的push和concat push的定義 向數組的末尾添加一個或更多元素，返回值為數組添加元素後的長度。 concat的定義 連接兩個或更多的數組，並返回結果。該方法不會改變現有的數組，而僅僅會返回被連接數組的一個副本。 // push方法 var a = [1,2,3]; console.l ...
  • 有意思的方向裁切 overflow: clip
    本文將介紹一個新特性，從 Chrome 90 開始，overflow 新增的一個新特性 -- overflow: clip，使用它，輕鬆的對溢出方向進行控制。 overflow: clip 為何 首先，簡單介紹下 overflow: clip 的用法。 overflow: clip: 與 overf ...
  • vue+node跨域解決方案
    跨域解決方法 後端解決 後端需要在介面位置前加入以下代碼就行拉 親測有效 這個是允許所有的功能變數名稱訪問 // 設置跨域 router.all("*", function (req, res, next) { res.header("Access-Control-Allow-Origin", "*"); ...
  • Vue刷新頁面VueX中數據清空了，怎麼重新獲取？
    Vue刷新頁面VueX數據清空了，怎麼重新獲取？ 點擊打開視頻講解更詳細 在vue中刷新頁面後，vuex中的數據就沒有了，這時我們要想使用就要重新獲取數據了， 怎麼在刷新後重新獲取數據呢？？？ 這時我們就可以寫個公共的方法，在公共頁面（可以是根頁面）判斷store倉庫中數據是否為空，若為空的話，就可 ...
  • js有了var為什麼還要有let和const？
    為什麼javascript中有那麼多聲明變數的方式，明明是弱類型的語言，確有三個關鍵字？ 最早的是var，這是es6之前的聲明方式，既然有了var為什麼還要有let 和 const呢？ 原因很簡單，這是因為var有一些問題不夠方便。 首先是作用域，在一個函數內只要聲明一個var，內部可以任意調用，比 ...
  • JavaScriptBOM與DOM
    BOM（Browser Object Model）瀏覽器對象模型 目前為止，我們已經學習了javaScript的一些簡單的語法。但是這些簡單的語法，並沒有和瀏覽器有任何交互。也就是我們還不能製作一些我們經常看到的網頁的一些交互，我們需要繼續學習BOM和DOM相關知識。 Javascript 由三部分 ...
  • JavaScript快速入門-06-函數
    6 函數 6.1 函數定義 函數可以封裝語句，然後在任何地方、任何時間執行。JavaScript中的函數使用function關鍵字聲明，主要由函數名、函數參數和函數體組成。其基本語法和聲明如下所示： 方式一： function functionName(arg0, arg1,...,argN) { ...
  • 京東頁面的響應式佈局
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 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 ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類