JS快速入門（一）

HammerZe發表於2022-02-12
JS

目錄

Javascript快速入門（一）

image

變數的命名規則

  • 變數名不能以數字或者某些特殊字元開頭
  • 變數名不能是關鍵字，eg：for，var，function，let····
  • 變數名不要以下劃線開頭
  • 推薦的命名形式叫做 "小寫駝峰命名法"，用來將多個單片語在一起，小寫整個命名的第一個字母然後大寫剩下單詞的首字元，eg：myAge
  • 變數命名要見名知意

命名示例

// 正確的命名
age 
myAge 
init 
finalOutputValue 
audio1
//錯誤和不規範的命名
1a_12 
MYAGE 
var 
Document 
skjfndskjfnbdskjfb

變數與常量

變數

在JS中宣告變數需要使用關鍵字

  • 老版本 ：var（全部都是全域性變數）
  • 新版本 ：let （可以宣告區域性變數）

ps：這裡的let在ECM6中可用，可能在較低的版本中無法正常使用，pycharm在使用上述關鍵字的時候如果出現了報錯說明js版本沒有選擇6
需要我們自定義設定

image

//變數示例
var name = 'Hammer'
let name = 'Hammer'

常量

在JS中宣告常量也是需要關鍵字的

  • 關鍵字：const
const pi = 3.14
//常量一但宣告，不可改變，變數可以改

image

資料型別

JS一共有六種資料型別

數值型：Number

var n = 100
var pi = 3.14
  • 還有一種NaN，表示不是一個數字（Not a Number）

常用方法：

//轉換資料型別:字元轉數字
//方法一：parseInt(保留整數)   parseFloat(保留小數)
parseInt()  //NaN
parseInt('') //NaN
···
parseInt("123")  // 返回123，此時的資料型別為number
parseInt("ABC")  // 返回NaN,NaN屬性是代表非數字值的特殊值。該屬性用於指示某個值不是數字。
parseFloat("123.456")  // 返回123.456

//方法二：Number
Number('123') // 123
Number('123ABC')  //NaN

字串：String

var str = "Hammer";
var str1 = 'ze';
//es6新增的定義字串，使用反引號可以寫多行字串
var str2 = `我
		   愛
            學
            JS`;
//格式化輸出(模板字串的功能)
	var name = 'Hammer'
    var age = 18
	`my name is ${name} my age is ${age} `

常用方法：

ps：字串拼接推薦使用+

方法名稱 作用 示例 結果
charAt() 獲取指定位置的字元 'abcd'.charAt(2) c
indexOf() 檢索指定的字串值在字串中首次出現的位置 'abcd'.indexOf('a') 0
lastIndexOf() 從後往前查詢所要搜尋的字串在原字串中第一次出現的位置（索引），找不到則返回-1 'abcdabc'.lastIndexOf('a') 4
search() 檢索字串中指定的子字串，或檢索與正規表示式相匹配的子字串 'abcd'.search('c') 2
match() 字串內檢索指定的值，或找到一個或多個正規表示式的匹配 'abcdabc'.match('a') ['a', index: 0, input: 'abcdabc']
substring() 字串擷取方法，它可以接收兩個引數，分別是要擷取的開始位置和結束位置，它將返回一個新的字串 'abcdabc'.substring(1, 4) bcd
slice() 與substring()方法非常類似，它傳入的兩個引數也分別對應著開始位置和結束位置。而區別在於，slice()中的引數可以為負值 'abcdabc'.slice(1, 4) bcd
replace() 用來進行字串替換操作，它可以接收兩個引數，前者為被替換的子字串，後者為用來替換的文字 'abcd'.replace('a', 'A') Abcd
split() 於把一個字串分割成字串陣列 'abcd'.split('') ['a', 'b', 'c', 'd']
toLowerCase() 可以把字串中的大寫字母轉換為小寫 'Abcd'.toLowerCase() abcd
toUpperCase() 可以把字串中的小寫字母轉換為大寫 'Abcd'.toUpperCase() ABCD

布林型別：Boolean

var is1 = true;
var is2 = false;

未定義型別 ：Undefined

未定義的意思就是隻宣告不定義，沒有值，規範的來說是預設

var a;
console.log(a);
//undefined

空型別：Null

var timer = null;
console.log(timer);

物件型別：Object

標籤、陣列、物件、Math···都是物件型別

陣列

var a =[123,'ABC'];
a[0]  // 123,類似python列表的索引取值
typeof a   //'object'

常用方法：

方法 說明
.length 陣列的大小
.push(ele) 尾部追加元素
.pop() 獲取尾部的元素
.unshift(ele) 頭部插入元素
.shift() 頭部移除元素
.slice(start, end) 切片
.reverse() 反轉
.join(seq) 將陣列元素連線成字串
.concat(val, ...) 連線陣列
.sort() 排序
.forEach() 將陣列的每個元素傳遞給回撥函式
.splice(a,b,c) 刪除元素，並向陣列新增新元素，a代表下標，b代表刪除元素的個數，c代表新新增的元素
.map() 返回一個陣列元素呼叫函式處理後的值的新陣列
indexOf(子元素) 從陣列中查詢子元素，返回下標，如果沒有要查詢的子元素返回-1 
//forEach()示例，函式做引數稱之為回撥函式
arry.forEach(function(item,index){
    //程式碼體
})
ietm：陣列的每一個值
index：下標

var n = [1,2,3,4]
n.forEach(function(item,index){
    console.log(item,index)
})

image

sort()需要注意的是，它也是需要寫回撥函式

//sort()直接對陣列排序，可能得不到想要的結果
var arr = [0,-55,-58,12,33,6,55,7]
console.log(arr.sort())
//[-55, -58, 0, 12, 33, 55, 6, 7]

//這樣的結果是和理想輸出的結果有偏差的，應該這樣寫
//a,b代表兩個相鄰的元素，如果返回值大於0，就交換ab的位置順序，來達到排序的效果
arry.sort(function(a,b){
    return a-b;
})

arr.sort(function(a,b){
    return a-b
})
console.log(arr)

image

Math物件

常用方法

方法 說明
floor() 向下取整
ceil() 向上取整
round() 四捨五入
max() 最大值
min() 最小值
random() 隨機數，範圍是[0,1)，左閉右開
pow() 或者 ** 冪數
sqrt() 開平方
abs() 絕對值

image

輸出資料型別的方法

  • typeof [變數]
  • 需要注意的是，空型別的資料型別屬於object
  • NaN的含義是Not a Number，但是它的資料型別是number

image

運算子

JavaScript 比較運算子在邏輯語句中使用，以判定變數或值是否相等，返回 true 或 false；邏輯運算子用於判定變數或值之間的邏輯

比較運算

我們假定 num = 5，下表中解釋了比較運算子：

運算子 描述 示例 結果
== 弱等於（值相等即可） num6
num’5‘		 false
true
=== 強等於（值和型別都相等） num=5
num=’5‘		 true
false
!= 不等於 num != 7 true
!== 值不相等或型別不相等 num !== 5 false
> 大於 num > 9 false
< 小於 num < 9 true
>= 大於或等於 num >= 8 false
<= 小於或等於 num <= 7 true

ps:=是賦值運算子

邏輯運算子

我們假定 num = 5，下標中解釋了邏輯運算子：

運算子 描述 示例 結果
&& 與 (num%2==1 && num>1) true
|| 或 (num%2==0 || num >1) true
! 非 !(num%2==0) true

算數運算

算數運算子比較簡單有：+、-、*、/、%、++、--

分別是：加、減、乘、除、取餘、自增、自減

  • 需要注意的是：++a和a++的區別
    • ++a表示的是先自增後賦值
    • a++表示的是先賦值後自增

image

隱式型別轉換

JS存在的特性，比如字串和數字進行加運算時，會將數字轉換成字串，然後和另外一個字串進行拼接；

var num1 = '123' 
var num2 = 12 
var num3 = num1 + num2 
console.log(num3) 
// 結果：'12312'

字串和數字進行減、乘、除運算，以及大小比較時，會將字串轉換成數字，再和 另一個數字進行運算或比較

var num1 = '10'
var num2 = 1
var num3 = num1-num2
console.log(num3)
//結果：9

各種值轉換為布林值

  • 數字 0，空字串""，null，undefined 轉成布林值的時候都是 false
  • 非0數字，非空字串轉換成布林值的時候都是true
  • 任何陣列（即使是空陣列），任何物件（即使是空物件） 轉成布林值的時候都是 true
var a = 0 
if (a) {
    console.log('hello') 
} else { 
    console.log('world') 
}
//world

案例

var a = true 
var b = 2
var c = a*b
console.log(c)
//2
/*這裡的true會被轉換成1代入運算*/

條件分支

  • if分支
  • switch分支

if分支

基本語法結構

//單分支
if(條件){
    //程式碼體
}

//雙分支
if (條件1){
    //程式碼體
}else if(條件2){
    //程式碼體
}

//多分支
if(條件1){
    //程式碼體
}else if(條件2){
    //程式碼體
}else{
    //程式碼體
}

switch 分支

基本語法結構

switch (expression) { 
    case value1: 
        // 當 expression 的結果與 value1 匹配時，執行此處語句 
        break; case value2: 
        // 當 expression 的結果與 value2 匹配時，執行此處語句 
        break;
            ... 
   case valueN: 
        // 當 expression 的結果與 valueN 匹配時，執行此處語句 
        break;
        default: 
         // 如果 expression 與上面的 value 值都不匹配，執行此處語句 
         break;
}

示例：

var expr = 'Hammer'
switch (expr) {
    case 'Hammer':
        console.log('I am Hammer');
		break;
    case 'Jason':
        console.log('I am Jason');
        break;
    case 'Hans':
        console.log('I am Hans')
    default:
        console.log('sorry,this is nothing!')

}

image

示例：

var a = 8
if (a>7) {
    a=3
}
if (a>4) {
    a=5
}
console.log(a)   //3
//解析:首先a=8，大於7，所以將3賦值給a，現在a=3，下面a>4為假，所以不執行，所以最後a為3

迴圈

for迴圈

for迴圈的使用方法

  • for：多次遍歷程式碼塊
  • for/in：遍歷物件屬性

格式

for (語句 1; 語句 2; 語句 3) { 
    //要執行的程式碼塊 
}
  • 語句 1 在迴圈（程式碼塊）開始之前執行
  • 語句 2 定義執行迴圈（程式碼塊）的條件
  • 語句 3 會在迴圈（程式碼塊）每次被執行後執行

示例

for (var i=0;i<10;i++) {
  console.log(i);
}

//0 1 2 3 7 8 9

var arr = [11, 22, 33, 44, 55] 
for (var i = 0; i < arr.length; i++) {
    console.log(arr[i]) 
}
// 11 22 33 44 55

var obj = {name:"tom", gender:"man", age:32}
for (var key in obj) { 
    // 列印鍵 
    console.log(key) 
    // 列印值 
    console.log(obj[key]) 
}

//執行結果
name 
tom
gender 
man 
age 
32

while迴圈

var i = 0;
while (i < 10) {
  console.log(i);
  i++;
}
//0 1 2 3 7 8 9

三元運算子

在python中，三元運算子是這樣的：

格式： '成立輸出內容' if 條件判斷  else  '不成立輸出'
res = '上班' if 1>2 else '休息'

# 顯然結果是休息

在js中三目運算子是這樣的：

格式：條件判斷 ? '成立輸出內容':'不成立輸出內容'
res = 1>2 ? '上班':'休息'
//和上面的結果是一樣的

函式

在JS中是通過宣告來定義函式的，關鍵字是function和python中的def類似

function關鍵字

結構

function name(引數1，引數2，···){
    //程式碼塊
    return 返回值
}
//name是函式名
//return 並不是必需的，沒有 return 的話，函式會返回undefined

示例

function pri(){
        console.log('簡單的示例，hello')
    }
    pri() //簡單的示例，hello

function add1(a, b) {
    return a + b; 
}
var res = add1(1,2)
console.log(res) // 3

function add2(a, b) { 
    a + b; 
}
var res = add2(4, 5) 
console.log(res) // undefined

函式在呼叫的時候，會將呼叫時給定的引數和定義時設定的引數依次繫結。如果呼叫時 給定的引數個數不夠，那麼函式體中沒有繫結的引數將被賦值為 undefined

function foo(a, b) { 
    console.log(b) 
}
foo(4) // 預期輸出：undefined 
foo(4,8) // 預期輸出：8

表示式定義函式

var func = function name (引數1,引數2···){
    //程式碼塊
}

示例

var f = function foo(v){
  return v;
}
//呼叫，使用表示式名加括號呼叫
f()

//如果使用foo()呼叫的會報錯

箭頭定義函式

ES6中允許使用“箭頭”（=>）定義函式
var f = v => v;
表示式  引數  返回值
//等同於
var f = function foo(v){
  return v;
}

arguments屬性

我們可以不指定引數的個數，使用arguments來獲取實參的個數，代表當前的引數列表；

function add(){
    var sum = 0;
    for (var i=0;i<arguments.length;i++){ //遍歷
        sum+=arguments[i]
    }
    return sum
}
var n = add(1,2,3,4,5,6)
console.log(n) //21

匿名函式

  • 回撥函式
var add = function(a,b){
    return a+b;
}
console.log(add(1,2))

自執行函式

不需要呼叫自己執行

(function(a,b,c){
    console.log(a+b+c)
})(1,2,3) //括號內傳參

遞迴函式

函式最後呼叫自身

//如果隨機數不大於十就一直列印
function shown(){
    var n = rand(0,12)
    if (n>10){
        return //結束函式
    }else{
        console.log(n)
     	shown()
    }
}
shown()
function rand(min,max){
    return Math.round(Math.random()*(max-min)+min);
}

//用setTimeout實現setInterval
function interval(){
    setTimeout(function(){
        alert('遞迴函式')
        interval()
    },1000)
}
interval()

//等同於
setInterval(
    function(){
    alert('遞迴函式')
    },1000)

物件結構

JS中常用的資料型別是陣列（上面）和物件結構，物件結構類似python中的字典，也是以key：value展示

//定義
var info = {
    name:'Hammer',
    age:18,
    gender:'man',
    city:'石家莊'
}
//訪問,修改
//方法一
info.name
info.name = 'Ze'
//方法二
info['age']

image

//新增屬性
info.car = '寶馬'
//刪除屬性
delete info.car

遍歷，使用for/in

var obj = {name:"tom", gender:"man", age:32}
for (var key in obj) { 
    // 列印鍵 
    console.log(key) 
    // 列印值 
    console.log(obj[key]) 
}

//執行結果
name 
tom
gender 
man 
age 
32

在js中可以使用點的方法，輸出物件的值，那麼對於python字典是不可以的，下面寫一個方法來實現

class MyDict(dict):
    def __getattr__(self, item):
        return self.get(item)
    def __setattr__(self, key, value):
        self[key] = value

res = MyDict(name='Hammer',age=18)
print(res.name)
res.xxx = 123   # 新增key，value
print(res.xxx)
print(res)

序列化反序列化

前後端如何實現資料互動的呢，比如python的資料型別和js的有區別，那麼前後端互動就需要一個翻譯官”json“，來做這個任務

# python中
import json
json.dumps()  # 序列化
json.loads()  # 反序列化

JSON.stringify()  // 序列化
JSON.parse()  // 反序列化

/*
如果當前js中有一個布林值true需要基於網路傳送給python程式並且讓python轉換成布林值 如何操作
	1.在js中使用JSON.stringify()序列化成json格式字串
	2.基於網路傳送給python程式(自動編碼)
	3.python接收 解碼並反序列化
	*/

內建物件

如果需要使用內建物件，需要關鍵字new

# python中使用內建模組
import time
time.time()  # 獲取時間戳

# js中使用內建物件
new date()   # 獲取時間戳

Date物件

var d = new Date()
d
// Sat Feb 12 2022 16:54:41 GMT+0800 (中國標準時間)
d.toLocaleDateString()
// '2022/2/12'
d.toLocaleString()
// '2022/2/12 16:54:41'
d.getDay()
// 6
d.getHours()
// 16

regexp物件

  • 方式1:var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
  • 方式2:var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}/;

這裡使用正則匹配的時候，需要注意全域性匹配規則

//正規表示式的最後不加g則表示匹配成功就結束,加g表示全域性匹配
var reg = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g
reg.test('hammer666')
true
reg.test('hammer666')
false
reg.test('hammer666')
true
reg.test('hammer666')
false
//全域性匹配會有一個lastIndex屬性，匹配成功停在待匹配字元的最後，所以第二次匹配是false，第三次匹配就會重新匹配

image

reg
/^[a-zA-Z][a-zA-Z0-9]{5,9}$/g
reg.test()
//true
reg.test()
//false
reg.test()
//true
reg.test()
//false
//校驗不穿引數，預設傳的是undefined

var un = /undefined/
un.test()
//true

match匹配

image

計時器

JS提供了兩種計時器

  • setTimeout (fn,time)：延遲time後，執行一次fn
  • setInterval (fn,time)：每隔time後，執行一次fn
  • time的時間是以毫秒為單位的

setTimeout示例，只執行一次計時任務

image

setInterval 任務

image

當然了有建立計時任務，就有清除計時任務的方法

  • clearTimeout：清除計時任務
  • clearInterval：清除計時任務
var timer = null;
var count = 0;
timer = setInterval(function(){
    count ++;
    if(count ==10 ){
        clearInterval(timer)
    }
    console.log('記得關閉計時任務哦~')
},2000)

image

案例

有很多小程式，會統計距離新年還有多少天，或者戀愛了多少天，其實實現起來很簡單

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新年倒數計時</title>
    <style>
        *{
            margin:0;
            padding: 0;
        }
         html,body{
             height: 100%;

         }
         .bg{
             height: 100%;
             background-color: #999999;
             background-image: url("https://imgapi.cn/bing.php");
             background-size: cover;
             background-position: center center;
         }
         .shadow{
             height: 100%;
             background-color: rgba(0,0,0,.5);
             overflow: hidden;
         }
         p{
             height: 40px;
             line-height: 40px;
             font-size: 36px;
             color: white;
             text-align: center;
         }
    </style>
</head>
<body>
<div class = 'bg'>
    <div class = 'shadow'>
        <p style="margin-top: 300px">戀愛了</p>
        <p style="margin-top: 20px">
            <span id="day">0</span>&nbsp;&nbsp;天
        </p>
    </div>
</div>
</body>
<script>
    //獲取標籤
    var spanDay = document.getElementById('day')
    var timer = null;

    timer = setInterval(function (){
        var date1 = new Date("2018-09-02")
        var date2 = new Date("2022-02-12")
        var n = date2.getTime() - date1.getTime()
        n /=1000; //秒
        var day = n / (60*60*24)  //天數
        spanDay.innerHTML = parseInt(day)

    },1000)
</script>
</html>

image

相關文章