JavaScript的概念,引入,基本數據類型

来源:https://www.cnblogs.com/pythonywy/archive/2019/08/05/11305633.html
-Advertisement-
Play Games

08.05自我總結 JavaScript 一.概念 JavaScript（下文我們會用簡稱JS來代替）是腳本編程語言，JS語言開發的文件是以.js為尾碼，通過在html文件中引入該js文件來控制html代碼的交互功能以及前臺數據處理的業務邏輯（js語言代碼也可以直接寫在html文件中），採用的 "E ...


08.05自我總結

JavaScript

一.概念

JavaScript（下文我們會用簡稱JS來代替）是腳本編程語言，JS語言開發的文件是以.js為尾碼，通過在html文件中引入該js文件來控制html代碼的交互功能以及前臺數據處理的業務邏輯（js語言代碼也可以直接寫在html文件中），採用的ECMAScript語法，屬於編程語言。

ECMAScript目前普遍使用的存在ES5與ES6兩個版本

二.js的引入

  • 行間式：js代碼直接書寫在標簽的鉤子事件中
<div id="box" onclick="this.style.backgroundColor = 'red'"></div>
  • 內聯式：js代碼書寫在script標簽中，script需要放置在body的最下方,也可以放在head和要找的元素下麵
  • 外鏈式: 鏈接了外部js的script標簽，就相當於單標簽，內部代碼塊會自動屏蔽
<script src="js/外聯.js">

js/外聯.js

box.style.background = 'blue'

三.js的基礎語法

變數

// 關鍵字 變數名 = 變數值
// 關鍵字四種：不寫也相當於定義一個window.變數名的變數 | var | let | const
n1 = 10;  // 全局變數
// console.log(n1);
var n2 = 20;  // 局部變數
// alert(n2);
let n3 = 30;  // 塊級變數
// document.write(n3);
const N4 = 40;  // 常量
// console.log(N4);
// N4 = 50;  // 報錯，常量值不能修改

數據類型

// 值類型
// 1) 數字類型：number
var num1 = 10;
var num2 = 3.14;
console.log(num1, num2);
console.log(typeof(num1), typeof num2);

// 2) 字元串類型：string
var s1 = '單引號的字元串';
var s2 = "雙引號的字元串";
console.log(s1, s2);
console.log(typeof s1, typeof s2);
var s3 = `多行字元串：
再來一行`;
console.log(typeof s3, s3);

// 3) 布爾類型：boolean
var b1 = true;
var b2 = false;
console.log(b1, b2);
console.log(typeof b1, typeof b2);
// console.log(true + true);  // 1+1

// 4) 未定義類型：undefined
var owen;
console.log(owen);
var nick = undefined;
console.log(nick);

// 引用類型
// 5) 對象類型
var obj = new Object();
console.log(typeof obj, obj);
var obj2 = {};
console.log(typeof obj2, obj2);

// 6) 函數類型
var fn = function () {};
console.log(typeof fn, fn);

// 其它
// 7) 空類型
var jerry = null;
console.log(typeof jerry, jerry);

// 8) 數組
var arr = [1, 3, 2, 5, 4];
console.log(typeof arr, arr);

// 9) 時間
var date = new Date();
console.log(typeof date, date);

隨機數

// 隨機數: Math.random() - (0, 1)
// console.log(Math.random());

// 正整數區間[m, n]
// (0, 1) * 10 => (0, 10) 取值parseInt() => [0, 9] + 5 => [5, 14]
// parseInt(Math.random() * 11) + 5 => [5, 15]
// [m, n] => +的值就是m，*的值 n - m + 1

// parseInt(Math.random() * (n - m + 1)) + m => [m, n]
var r_num = parseInt(Math.random() * (14 - 7 + 1)) + 7;
console.log(r_num);

// (0, 1) * 超大的數 取整
// 一個正整數 % num => [0, num-1] + m => [m, num-1+m] => n = num+m-1 => num = n-m+1
// 一個正整數 % (n-m+1) + m => [m, n]
var random_num = parseInt( Math.random() * 10000000000 % (14 - 7 + 1) ) + 7;
console.log(random_num)

運算符：詳情見課件

// 1）算術運算符：+ - * / % ++ -- | += ...
console.log(5 / 2);  // 2.5
console.log(parseInt(5 / 2));
console.log(parseFloat(5 / 2));

// parseInt | parseFloat 可以完成 string => number
res = parseInt('3.14.15abc');
console.log(res);  // 從頭往後找整數部分

res = parseFloat('3.14.15abc');
console.log(res);  // 從頭往後找小數部分(最多只識別一個小數點)

res = parseInt('a3.14.15abc');  // NaN
console.log(typeof res, res);

// 2) 弱語言類型的js
res = 10 + '5';
console.log(res);  // 字元串：105
res = 10 - '5';
console.log(res);  // 數字：5
// 數字 => 字元串
res = '' + 5;
console.log(typeof res, res);
// 字元串 => 數字
res = +'5';
console.log(typeof res, res);

// 3) 自增自減
num = 10;
num += 1;
console.log(num);
num++;
console.log(num);
num--;
console.log(num);
// 瞭解：符號 在前優先順序高於一切運算符，在後優先順序比賦值符還低
// ++在前先自增再運算；++在後先運算再自增
num = 10;
res = num++;
console.log(num, res);

num = 10;
res = ++num;
console.log(num, res);

// 4) 比較運算符的比較
console.log(5 == '5');  // true，只做值比較
console.log(5 === '5');  // false，做值與類型比較
console.log(5 != '5');  // false，只做值比較
console.log(5 !== '5');  // true，做值與類型比較

// 5）邏輯運算符 && || !
console.log(true && true);
console.log(false || false);
console.log(!true);
// 短路現象
// &&: 有假則假，前為假，後不用判斷
num = 10;
console.log(false && ++num);  // num++ | ++num 都被短路不會被執行
console.log(num);

console.log(true || ++num);  // num++ | ++num 都被短路不會被執行
console.log(num);

// 6）三元運算符（三目運算符）
// 條件 ? 結果1 : 結果2
res = 5 == '5' ? '值相等':'值不等';
console.log(res);

分支結構

// 1）if分支結構
/* python
    * if 條件:
    *   代碼塊1
    * elif 條件:
    *   代碼塊2
    * else:
    *   代碼塊3
    * */
/** js
     * if (條件) {
     *     代碼塊1
     * }
     * else if (條件) {
     *     代碼塊2
     * }
     * else {
     *     代碼塊3
     * }
     */
var num = parseInt(Math.random() * 16);
console.log(num);
if (num > 10) {
    console.log("產生的數超過10")
} else if (5 <= num && num <= 10) {
    console.log("產生的數間於5~10")
} else {
    console.log("產生的數不超過5")
}

// 2）switch分支結構
/*
    month = parseInt(Math.random() * (2 - 0 + 1)) + 0;
    console.log(month);
    switch (month) {
        case 1:
            console.log('1月31天');
            break;  // 用來結束case，跳出switch分支結構
        case 2:
            console.log('2月28天');
            break;
        default:  // 沒有走任何case，會進入default分支
            console.log('月份參數有誤');
    }
    */
month = parseInt(Math.random() * (12 - 1 + 1)) + 1;
console.log(month);
switch (month) {
    case 1:
    case 3:
    case 5:
    case 7:
    case 8:
    case 10:
    case 12:
        console.log('%s月31天', month);
        break;  // 用來結束case，跳出switch分支結構，多個分支可以共用一個break
    case 2:
        console.log('2月28天');
        break;
    case 4:
    case 6:
    case 9:
    case 11:
        console.log('%s月30天', month);
        break;
    default:    // 沒有走任何case，會進入default分支，沒有錯誤的情況可以省略
        console.log('月份參數有誤');
}

迴圈結構

// 1) for迴圈
/*
    for (迴圈變數①; 條件表達式②; 增量③) { 迴圈體④ }

    生命周期：① ②④③...②④③ ②
     */
// 1~10直接的偶數
for (var i = 1; i <= 10; i++) {
    if (i % 2 === 0) {
        console.log(i);
    }
}
// continue | break
// 1 2 4 5
for (var i = 1; i <= 5; i++) {
    if (i === 3) continue;
    console.log(i)
}
// 1 2 3
for (var i = 1; i <= 5; i++) {
    if (i > 3) break;
    console.log(i)
}

// 瞭解
var i = 1;
for (; i <= 5;) {
    console.log(i);
    i++
}

// 2）while
var i = 1;
while (i <= 5) {
    console.log(i);
    i++;
}

// 3）do...while迴圈：先執行一次迴圈體，再判斷條件
var num = 90;
do {
    console.log(num);
    num++;
} while (num <= 100);

// for：解決知道迴圈次數的迴圈

// while：
//      解決一切for與do...while能解決的問題(結合函數的思想)
//      解決不知道迴圈次數的迴圈(迴圈用break結合)

// do...while：完成迴圈體必須要提前執行一次的迴圈

函數

函數概況
/* 函數
    定義：
    關鍵字 函數名(參數列表) {
        函數體;
        返回值
    }
    var 函數名 = 關鍵字(參數列表) {
        函數體;
        返回值
    }
    var 函數名 = (參數列表) => {
        函數體;
        返回值
    }

    函數成員：
    函數名：函數名存放的就是函數的地址
            通過 函數名() 調用函數的

    參數列表：將外界資源傳給內部的橋梁
            你傳你的，我收我的，用...接收可變長

    函數體：解決需求的代碼塊
            功能代碼塊

    返回值：將內部數據反饋給外部
            只能返回一個值，不寫或空return返回undefined


    匿名函數：
    沒有聲明名字的函數
            產生一個局部作用域
            資源回收快
     */
有名函數
// 定義
function add(n1, n2) {
    return n1 + n2
}
// 使用
res = add(10, 20);
console.log(res);

// 函數名的運用
my_add = add;
console.log(my_add(100, 200));

// 參數列表：你傳你的，我收我的，用...接收可變長
// 少傳未接收到的形參賦值為undefined，多傳的實參自動被丟棄
function fn(n1, n2) {
    console.log('傳輸的n1：%s | n2：%s', n1, n2)
}
fn(10, 20);
fn();
fn(100);
fn(1000, 2000, 3000);

// 可變長參數
function func(...num) {
    console.log(num)
}
func(1, 2, 5, 3, 4);
匿名函數
// 匿名函數
// 匿名函數的自調用 - 調用一次後就會被回收資源
(function () {
    console.log('匿名函數')
})();

// 用變數接收 - 函數的第二種聲明方式
var fun = function () {
    console.log('函數的第二種聲明方式')
};
fun();

// 函數的第三種聲明方式
var fun2 = (n1, n2) => {  // 有函數體標明{}
    console.log('n1:%s | n2:%s', n1, n2);
    return n1 + n2
};
console.log(fun2(222, 444));

var fun3 = (n1, n2) => n1 + n2;  // 只有返回值可以省略{}
console.log(fun3(222, 444));
匿名函數的局部作用域作用
// 匿名函數自調用，可以產生局部作用域與外界隔離
(function () {
    let number = 888
})()
// console.log(number)  // 外界不可以直接訪問

四種變數分析

function fn() {
    n1 = 10; // 只有全局變數外界才能訪問
    var n2 = 20;
    let n3 = 30;
    const n4 = 40;
}
fn();
console.log(n1);

if (true) {  // 塊級作用域
    n1 = 10;
    var n2 = 20;
    let n3 = 30;  // let與const聲明的變數右塊級作用域
    const n4 = 40;  // 常量
}
console.log(n1);
console.log(n2);
{
    let aaa = 10
    }

數據類型的使用

字元串

// string => str
// 1）聲明
// 單引號 | 雙引號 | 反引號

// 2）字元串拼接
res = 'you are' + ' ' + 'good man!';
console.log(res);

// 3）字元串的切片
s = 'you are good man!';
n_s = s.slice(8, 12);
console.log(n_s);  // good

// 4）字元串替換
s = 'you are good man!';
n_s = s.replace('man', 'woman');
console.log(n_s);

// 5）字元串拆分
s = 'you are good man!';
res = s.split(' ');
console.log(res);

// 6）字元串迭代
s = 'abcdef';
for (num of s) {
    console.log(num)
}

數組

// array => list
// 1）聲明
arr = [1, 4, 2, 3, 5];
console.log(arr);
// 2）反轉
arr.reverse();
console.log(arr);
// 3）組合
str = arr.join('@');
console.log(str);
// 4）切片
new_arr = arr.slice(1, 4);
console.log(new_arr);
// 5）排序
arr.sort();
console.log(arr);
// 6）增刪改查
// 查:只有正向索引
console.log(arr[2]);
// 增
arr.push(888);  // 尾增
console.log(arr);
arr.unshift(666);  // 首增
console.log(arr);
// 刪
res = arr.pop();  // 尾刪
console.log(arr, res);
res = arr.shift();  // 首刪
console.log(arr, res);

// 增刪改 綜合方法：splice
// 三個參數：開始操作的索引 操作的位數 操作的結果(可變長)
arr = [1, 2, 3, 4, 5];
// 數組長度：arr.length
arr.splice(arr.length, 0, 666, 888);
console.log(arr);

字典

// object => dict
// 1）定義
height = 180;
dic = {
    'name': 'Owen',  // 本質是對象
    age: 18,  // 所有的key(屬性名)都是字元串類型，所以可以省略引號
    height,  // 當value為變數，且變數名與key同名，可以省略value
};
console.log(dic);

// 2）訪問
console.log(dic.name);
console.log(dic['age']);

// 3）增刪改
// 增
dic.sex = '男';
console.log(dic);
// 刪
delete dic.sex;
console.log(dic);
// 改
dic.name = 'Nick';
console.log(dic);

概括

1、js變數：不寫 | var | let | const
2、js的基本數據類型：值類型：number | string | boolean | undefined 引用類型：object | function 其它： null | Array | Date
3、隨機數：parseInt(Math.random() * (n - m + 1)) + m
4、類型轉換："" + number => string | +string => number | parseInt(string) => number
5、運算符：/ | ++ | === | &&、||、! | 條件? 結果1:結果2
6、類型的運用：string | [1, 2, 3] splice(index, count, args) | {}
7、流程式控制制
8、函數
function 函數名(){}
var 函數名 = function (){}
let 函數名 = () => {}


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

-Advertisement-
Play Games
更多相關文章
  • 10分鐘搞懂：億級用戶的分散式數據存儲解決方案
    10分鐘搞懂：億級用戶的分散式數據存儲解決方案https://www.cnblogs.com/lagou/p/11011682.html ...
  • Hadoop環境搭建過程中遇到的問題以及解決方法
    1.啟動hadoop之前，ssh免密登錄slave主機正常，使用命令start-all.sh啟動hadoop時，需要輸入slave主機的密碼，說明ssh文件許可權有問題，需要執行以下操作： 1）進入.ssh目錄下查看是否有公鑰私鑰文件authorized_keys、id_rsa、id_rsa.pub ...
  • MySQL學習之基礎篇09-事務
    我們在建表的時候通常會在最後聲明引擎類型，這次我們就來看看存儲引擎都有哪些： 舉個例子： 銀行轉賬： 張三想給李四轉500元錢： 張三-500 李四+500 這兩步必須都完成，轉賬才完成 像這種，2步或N步必須都完成，從邏輯上講，是一個‘原子操作’，即要麼成功，要麼都不成功 那麼如何保障這種特性？ ...
  • LDAP 服務搭建和後期管理
    LDAP 服務 本文主要在debian配置，如果需要在CentOS上部署，需要修改大部分的路勁，這裡需要自行修改。 服務按照個人理解，也可使理解為一個資料庫，但是這個資料庫的讀寫性能不像 一樣擁有良好的讀寫性能，而 更偏向於讀取，而弱於寫入。並且 的數據類型屬於面向對象的數據類型，這和 的數據類型不 ...
  • Android項目實戰（五十八）：Android 保存圖片文件到本地,相冊/圖庫查看不到的處理
    將一個圖片文件寫入到本地目錄，然後去相冊查看，會查找不到這個圖片文件，但是去文件目錄下查找，確確實實有該圖片文件。 問題在於相冊是一個獨立的app，它並不會去刷新本地圖片，所以需要在寫圖片文件成功之後，通知圖庫 ...
  • Android PopupWindow增加半透明蒙層
    先看效果圖： BasePopupWindowWithMask.class TestPopupWindow.class pop_layout.xml pop_background.xml 1 <?xml version="1.0" encoding="utf-8"?> 2 <shape xmlns:a ...
  • HTML連載28-標簽的權重
    一、什麼是優先順序的權重 1.作用：當多個選擇器混合在一起的時候，我們可以通過計算權重來判斷誰的優先順序最高。 2.權重的計算規則 公共代碼： （1）首先計算選擇器中有多少個id，id多的選擇器優先順序最高； 例子： （2）如果id選擇器同樣多，那麼類選擇器多的優先順序高 （3）如果類名的個數也一樣多，那麼 ...
  • jq初始,選擇器,事件,內容操作,樣式操作
    `jq操作頁面文檔`http://jquery.cuishifeng.cn/ jq初始 jq選擇器 jq事件 jq內容操作 jq樣式操作 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類