js完整教程一 ： 基本概念和數組操作

来源:http://www.cnblogs.com/miro/archive/2016/01/04/5097778.html
-Advertisement-
Play Games

文章提綱 JS相關常識 JS基本概念 實踐 總結 JS相關常識 js是一種可以與HTML標記語言混合使用的腳本語言，其編寫的程式可以直接在瀏覽器中解釋執行。 一、組成 js是一種專門為網頁交互設計的腳本語言。由三部分組成：1.ECMAScript (ECMA-262定義)， 提供核心語言功能2.文....


文章提綱

  • JS相關常識
  • JS基本概念
  • 實踐
  • 總結

 

JS相關常識

js是一種可以與HTML標記語言混合使用的腳本語言，其編寫的程式可以直接在瀏覽器中解釋執行。

一、組成

js是一種專門為網頁交互設計的腳本語言。由三部分組成：
1.ECMAScript (ECMA-262定義)， 提供核心語言功能

2.文檔對象模型（DOM）， 提供訪問和操作網頁內容的方法和介面

3.瀏覽器對象模型（BOM）， 提供與瀏覽器交互的方法和介面

 

二、如何使用

HTML 中的腳本必須位於 <script> 與 </script> 標簽之間。

腳本可被放置在 HTML 頁面的 <body> 或 <head> 部分中。

內聯方式：

<script>

alert("My First JavaScript");

</script>

使用外部文件方式：

<script src="myScript.js"></script>

說明：

以前需要在script中加入type屬性：<script type="text/javascript">

現在已經不必這樣做了。

JavaScript 是所有現代瀏覽器中的預設腳本語言。

補充說明：

HTML 4.01為<script>定義了6個屬性

type -- 表示內容類型，預設為 text/javascript

src -- 源地址，可跨域

async -- 不保證按順序執行

defer -- 立即下載，延遲執行，按順序

charset -- 大多數瀏覽器忽略，很少用

language -- 已廢棄

 

三、語法說明

大部分和C#類似，主要有幾下幾點。

1. 聲明變數。JavaScript 是一種弱類型的腳本語言，直接用var聲明變數，變數名區分大小寫。

var message;

像這樣未經初始化的變數，會保存一個特殊的值，undefined.

 

var message="hi";

像這樣初始化變數並不會把它標記為字元串類型。

初始化的過程就是給變數賦一個值那麼簡單。

因此，可以在修改量值的同時修改值的類型，例如

var message= "hi";

message = 100 ; // 有效但不推薦

說明：

可不加 var 關鍵字聲明變數， 這個變數會成為全局變數， 建議總是使用var。

全局變數：

在方法外部聲明的變數；

方法內部，沒有加var關鍵字聲明的變數。

 

局部變數：

方法內部，使用var聲明的變數    

2. 按慣例，標誌符採用駝峰格式

3. 註釋：單行和塊級

說明：塊級註釋中間的 * 非必須，建議加，提高可讀性。

 

4. 語句

以 ; 結尾。最佳實踐：始終在控制語句中使用代碼塊，以提高可讀性。

 

基本概念

數據類型

ECMAScript中, 數據類型包括5種基本類型和1種複雜類型.

基本數據類型：Number、Boolean、String、Undefined、Null

Number包括：整數和小數(最高精度17位小數)、NaN、Infinity, -Infinity

註意：

對Number來說

1.除10進位外，還可通過8進位和16進位的字面值來表示，

如 070 表示56、0xA表示10.

2.小數為浮點類型，if(0.1+0.2 == 0.3) //不要做這樣的測試，因為     浮點數值最高精度是17位，是0.300000000000000004

另外兩個特殊基本類型的說明

Undefined：表示變數聲明但未賦值.

Null : 表示一個空的對象引用(也就是賦值為null)

 

複雜數據類型 -- Object, 這個後續文章專門再介紹。

 

typeof 操作符

查看類型時，經常會使用typeof運算符， 例如 typeof(10) 返回 number類型。

完整的返回列表

返回值

說明

undefined

未定義

boolean

布爾值

string

字元串

number

數值

object

對象或null

function

函數

 

說明：

1. 註意有一個特殊: typeof(null) 返回object

從邏輯角度看，null值表示一個空對象指針，因此typeof會返回object

2. undefined 類型只有一個值，即undefined

聲明未定義與未聲明的變數不一樣

尚未聲明過的變數只能執行一種操作，即使有typeof檢測其類型

 

理論實踐

下麵就跟著我做實驗。

基本類型

一共有以下幾種情況。

對整數來說，我們常用的一個操作就是將字元串轉變成整數。

//parseInt兩個例子

parseInt("10");            //返回 10

var n11 = parseInt('ab'); //NaN

var n12 = parseInt('11ab'); //11

 

下麵分別定義 String類型，Undefined類型，Null類型

/* 基本數據類型之String類型 */

var str = "字元串類型";

//alert(str);

 

/* 基本數據類型之Undefined類型 */

var n21; //表示變數聲明瞭但未被賦值

//alert(n21);

 

/* 基本數據類型之Null類型 */

var n31 = null; //表示空的對象引用(賦值為null)

//alert(n31);

 

引用類型

/* 引用數據類型 舉例 */

var obj = {}; //對象

var arr = [1, 2, 3]; //數組

var date = new Date(); //當前日期

//alert(date);

說明：

引用類型比較複雜，下麵專門講一下數組，其他引用類型後續文章會專門有一篇進行介紹。

數組常用操作, 重點

數組本身也是對象，js中數組與C#不一樣。

長度任意改變，每一項可以是不同類型。

下麵是數組操作的例子。

定義

數組可以用new的方式也可以用字面量來定義。

var arr1 = new Array();

var arr2 = [1, 2, 'aa', new Date(), true];

//alert(arr1.length);

//alert(arr2); //會自動轉換成string，效果等同於 arr2.toString()

添加和移除元素

從尾部：

//push和pop

var arr3 = [new Date(), false];

var res = arr3.push(1, 2, true); //push方法像數組中追加元素（返回值為新數組長度）

alert(arr3); //arr3中追加了1, 2, true三個元素

alert(res); //返回的是新數組的長度 5

var res2 = arr3.pop(); //從數據尾部移除一個元素，返回值為移除的元素

alert(arr3);

alert(res2); //返回值為移除的元素

 

從頭部：

//shift和unshift

var arr4 = [1, 2, true, new Date()];

var res4 = arr4.shift(); //從頭部移除一個元素（返回移除的元素）

 

var res5 = arr4.unshift(10, false); //從頭部插入多個元素，返回新數組元素個數

alert(res5);

 

截取

/*

splice和slice（截取相關）,返回刪除的元素

splice方法操作數組本身

slice不操作數組本身

*/

var arr5 = [1, 2, 3, 4, 5];

//splice(起始位置，截取的個數，第三個參數及以後表示：插入到截取位置的新元素)

var res6 = arr5.splice(1, 2, 3, 4, 5);

//alert(arr5); //1,3,4,5,4,5

//alert(res6); //返回刪除的元素 2，3

 

var arr6 = [1, 2, 3, 4, 5];

var res7 = arr6.slice(2, 4); //左閉右開,語法arrayObject.slice(start,end)

//alert(arr6); //和原來一樣不變

//alert(res7); //返回刪除的元素 3,4

 

拼接

concat() 方法用於連接兩個或多個數組。

該方法不會改變現有的數組，而僅僅會返回被連接數組的一個副本。

語法：arrayObject.concat(arrayX,arrayX,......,arrayX)

 

//concat 和 join 都不更改原數組

var arr7 = [1, 2, 3];

var arr8 = [true, 4, 5];

 

var res8 = arr7.concat(arr8); //合併操作，不操作原數組本身

//alert(res8); //返回合併後的數組

 

var res9 = arr7.join("-"); //join() 方法用於把數組中的所有元素放入一個字元串。不傳參數使用逗號分隔

//alert(res9); //1-2-3

 

排序 

語法：arrayObject.sort(sortby)，sortby可選，規定排序順序，必須是函數。

 

/*

sort正序排序

reverse 倒序排序（按照原來的順序反轉）

*/

var arr9 = [1, 2, 4, 3, 5];

var arr10 = [1, 10, 2, 5, 3];

arr10.sort(); // 是按照字母來排序的 1，10，2，3，5

arr9.reverse(); //按照原來的順序反轉

document.write(arr10 + "<br />");

預設的sort是按照字母排序的，這樣 10就會排在2的前面。

我們需要自定義個比較函數作為參數，實現按數字大小排序。

如下：

function sortNumber(a, b) {

return a - b

}

 

var arr = new Array(6)

arr[0] = "10"

arr[1] = "5"

arr[2] = "40"

arr[3] = "25"

arr[4] = "1000"

arr[5] = "1"

 

//document.write(arr + "<br />") // 10,5,40,25,1000,1

//document.write(arr.sort(sortNumber)) // 1,5,10,25,40,1000

說明：

比較函數sortNumber(a, b) 具有兩個參數 a 和 b，返回一個用於說明這兩個值的相對順序的數字。其返回值如下：

若 a 小於 b，在排序後的數組中 a 應該出現在 b 之前，則返回一個小於 0 的值。

若 a 等於 b，則返回 0。

若 a 大於 b，則返回一個大於 0 的值。

 

ECMAScript5 新特性

/* ECMAScript5 數組新特性補充

位置方法：indexOf lastIndexOf

迭代方法：every filter forEach some map

縮小方法：reduce reduceRight

*/

var arr = [1, 2, 3, 4, 2, 1];

//位置方法：indexOf lastIndexOf 一個參數，表示要搜尋的元素

var index=arr.indexOf(2);

//document.write(index);

 

//兩個參數（要搜尋的元素,起始位置）

var index = arr.indexOf(2, 2);

document.write(index);

//lastIndexOf，用法完全一樣，只不過從尾部向前搜

var index = arr.lastIndexOf(2, 4);

document.write(index);

 

//迭代方法：every filter forEach some map

//every, 與運算，全是true為true

var res = arr.every(function(item, index, array) {

return item > 0;

})

//some,或運算，有一個true返回true

var res = arr.some(function (item, index, array) {

return item > 3;

})

//document.write(res);

//filter把過濾後的結果返回

var res = arr.filter(function (item, index, array) {

return item > 2;

})

//forEach,遍歷每一項執行方法

arr.forEach(function (item, index, array) {

//document.write(item+"<br/>");

})

//map, 對元素每一項執行方法，把新的結果返回

var res= arr.map(function (item, index, array) {

return item * 2;

})

 

//左結合和右結合方法：reduce reduceRight

var res = arr.reduce(function (prev,cur,index,array) {

return prev + cur;

})

//document.write(res);

 

總結

本篇首先介紹了JS相關的常識，作為學習準備。

接下來講解了JS數據類型。

數據類型是學習任何語言都必須掌握的基本概念。

著重講解了引用類型中數組的概念、特性、常用方法。

數組是最常用到的數據類型之一。

請熟練掌握數組的定義，添加和移除（從尾部push和pop；從頭部unshift和shift），截取（splice和slice），拼接（concat 和 join），排序（sort，reverse）的常用操作。

 

有問題歡迎直接評論提問，祝學習進步：）


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

-Advertisement-
Play Games
更多相關文章
  • 【代碼筆記】等待動畫
    一，效果圖。二，工程圖。三，代碼。RootViewController.h#import @interface RootViewController : UIViewController{ NSTimer *timerWait; int j;}@endRootViewController...
  • Android 5.0最應該實現的8個期望
    毫無疑問，Android 5 將是令人興奮的操作系統，因為 Android4.0 至 4.4 版本之間並沒有顯著的差異，顯然谷歌會在 5.0 版本中進行一些較大幅度的革新。那麼，代號為“檸檬芝士蛋糕”或是“檸檬酥皮派”的 Android 5.0，會有什麼新的特點、又會在何時發佈呢？一起來看看目前我們...
  • HTML基礎
    HTML基礎，HTML標簽，HTML超鏈接
  • Mongodb 數據類型及Mongoose常用CURD
    前言 看完了Node.js實戰，其中在數據存儲部分提到了Redis、Mongodb，我自己也根據書中的介紹寫了幾個簡單的demo，在demo的過程首先遇到的問題就是數據類型和常見的CURD寫法。 mongodb的常見操作有兩種方式，一個是直接使用API，也就相當於你在SQL Server客戶端中.....
  • 淡淡理解下AngularJS中的module
    在AngularJS中module是一個核心的存在，包括了很多方面，比如controller, config, service, factory, directive, constant, 等等。在Javascript中如何實現類似module的功能呢？或者說，我們定義一個函數，如何把函數內的函數向...
  • js獲取url傳遞的參數
    獲取URL帶參數的JAVASCRIPT客戶端解決方案一、正則分析法。(我較喜歡使用正則)function GetQueryString(name) {var reg = new RegExp(“(^|&)” + name + “=([^&]*)(&|$)”,”i”);var r = window.l...
  • 一些實用的CSS Media Query代碼片段，個人採集
    CSS3的出現讓響應式Web設計變得簡單，CSS3提供了強大的media queries，允許你針對不同的條件設置不同的樣式，可以在不修改頁面內容的情況下，為不同設備提供不同的樣式效果。 以下是一些CSS media queries代碼片段，你可以添加在自己的項目中，讓頁面根據屏幕自適應：iPhon...
  • 8個超炫酷仿HTML5動畫源碼
    1.jQuery萬年曆插件 帶農曆老皇曆功能這是一款基於jQuery的日曆插件，這款日曆插件和之前分享的日曆控制項有很大差異，它是一本萬年曆，包含了農曆已經老皇曆的功能，是一個挑好日子的工具。同時日曆還可以查看本年度的放假安排，功能非常強大。有興趣的朋友可以下載學習。線上演示源碼下載2.CSS3發光進...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類