python之JavaScript

JavaScript-ECMAScript

javascript介紹

Web前端有三層：

• HTML：從語義的角度，描述頁面結構

• CSS：從審美的角度，描述樣式（美化頁面）

• JavaScript：從交互的角度，描述行為（提升用戶體驗）

其中JavaScript基礎又分為三個部分：

• ECMAScript：JavaScript的語法標准。包括變量、表達式、運算符、函數、if語句、for語句等。

• DOM：文檔對象模型，操作網頁上的元素的API。比如讓盒子移動、變色、輪播圖等。

• BOM：瀏覽器對象模型，操作瀏覽器部分功能的API。比如讓瀏覽器自動滾動。

特點:

• 簡單易用：可以使用任何文本編輯工具編寫，只需要瀏覽器就可以執行程序。

• 解釋執行（解釋語言）：事先不編譯、逐行執行、無需進行嚴格的變量聲明。

• 基於對象：內置大量現成對象，編寫少量程序可以完成目標

javascript語法

• JavaScript對換行、縮進、空格不敏感。每一行語句末尾要加上分號，如果不加分號，壓縮后將不能運行。

• 所有符號都是英文

js代碼的引入

在body標簽中放入<script type="text/javascript"></script>標簽:

<script type="text/javascript"></script>

變量和賦值變量

var a=100;

命名規范：只能由英語字母、數字、下划線、美元符號$構成，且不能以數字開頭，並且不能是javascript保留字。

保留字：

abstract、boolean、byte、char、class、const、debugger、double、enum、export、extends、final、float、goto、implements、import、int、interface、long、native、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile

賦值

var a = "3";
var b = 2;
a = b;
console.log(a); /*2*/
console.log(b); /*2*/

輸入、輸出信息

彈出警告框

alert("這是一個警告！")

控制台輸出console.log("")和輸入框prompt()

var a = prompt('請輸入你要說的話：');
console.log(a);

基礎數據類型

數值類型

在JavaScript中只要是數，就是number類型的。

var a=100;
console.log(typeof a); //或者console.log(typeof (a))  查看a變量的類型

小數的保留：

var num=1.235;
var newNum = num.toFixed(2);    //小數點后保留2位
console.log(newNum);    //1.23

字符串類型：string

定義：

var a = "abcd";
var b = '哈哈哈';
console.log(typeof a);  //string
console.log(typeof b);  //string

方法：

方法
說明

.length #不加括號的是屬性
返回長度

.trim() #得到一個新值
移除空白

.trimLeft()
移除左邊的空白

.trimRight()
移除右邊的空白

.concat(value, ...) #s1='hello';s.concat('xx');得到helloxx
拼接

.charAt(n) #n類似索引，從0開始，超過最大值返回''空字符串
返回第n個字符

.indexOf(substring, start) #這個start是從索引幾開始找，沒有返回-1
子序列位置

.substring(from, to) #不支持負數，所以一般都不用它，了解一下就行了
根據索引獲取子序列

.slice(start, end) #var s1='helloworld';s1.slice(0,-5)看結果，就用它
切片

.toLowerCase() #全部變小寫
小寫

.toUpperCase() #全部變大寫
大寫

.split(delimiter, limit)#分隔,s1.splite(' '),后面還可以加參數s1.split(' '，2),返回切割后的元素個數
分割

charAt()返回指定索引的位置：

var a = 'abcdef';
var b = a.charAt(2);
console.log(b); // c 索引超出范圍返回空字符串

concat 返回字符串值，表示兩個或多個字符串拼接：

var b = a.concat('xxxx');
console.log(b); //abcdefxxxx

match()字符串匹配和正則匹配：

var b = a.match('a');
console.log(b); // ["world", index: 6, input: "hello,world", groups: undefined]
var b = a.match('A');
console.log(b); // null
​
// 正則
var a = 'abcd,dcba'
var r = a.match(/\w+/)
console.log(r)  // ["abcd", index: 0, input: "abcd,dcba", groups: undefined]
​
// g表示匹配多次
var r = a.match(/\w+/g)
console.log(r)// ["abcd", "dcba"]

replace(a,b)將字符串a替換為字符串b:

var a = 'abcdef';
var b = a.replace('c','xxxx');
console.log(b); //abxxxxdef

indexOf()/search()查找字符的下標，如果找到返回字符的下標，找不到則返回-1：

var b = a.indexOf('c');
console.log(b); // 2

slice(start,end)切片。左閉右開，分割數組，接收負參數：

var b = a.slice(-4,-1);
console.log(b); // cde

substr(start,length) 返回一個字符串：從指定位置開始,取指定字符數:

var b = a.substr(3,2);
console.log(b); // de

substring(indexStart,indexEnd) 切子字符串。顧頭不顧尾:

var b = a.substring(1,3);
console.log(b); // bcd

split('sep',n) 切割，根據n保留切割的數組長度：

var b = a.split('',2);
console.log(b); // ["a", "b"]

布爾值boolean

var b = false;
console.log(typeof b);  // boolean

空元素null

var b = null;
console.log(b)  // 空對象. object

未定義undefined

var d;
console.log(typeof d)   // undefined

內置對象類型

數組Array

創建：

var npc = ['ergou','datou','tiedan'];
var npc2 = new Array(); //使用構造函數的方式創建，使用new關鍵詞對構造函數進行創建對象

賦值：

var arr = [];
arr[0] = 123;
arr[1] = '哈哈哈';
arr[2] = '嘿嘿嘿';
console.log(arr);   //[123, "哈哈哈", "嘿嘿嘿"]

方法：

方法
說明

.length
數組的大小

.push(ele)
尾部追加元素

.pop()
獲取尾部的元素

.unshift(ele)
頭部插入元素

.shift()
頭部移除元素

.slice(start, end)
切片

.reverse() #在原數組上改的
反轉

.join(seq)#a1.join('+')，seq是連接符
將數組元素連接成字符串

.concat(val, ...) #多個數組合並,得到一個新數組，原數組不變
連接數組

.sort()
排序

.forEach()
將數組的每個元素傳遞給回調函數

.splice() #參數：1.從哪刪(索引), 2.刪幾個 3.刪除位置替換的新元素(可多個元素)。如果索引超過范圍，會直接添加新元素
刪除元素，並向數組添加新元素。

.map() #講了函數再說
返回一個數組元素調用函數處理后的值的新數組

concat方法：列表的拼接：

var arr = ['123','哈哈哈','嘿嘿嘿'];
var arr1 = ['啦啦啦','xxx'];
var arr2 = arr.concat(arr1);
arr2    // ["123", "哈哈哈", "嘿嘿嘿", "啦啦啦", "xxx"]

join方法：將數組中的元素使用指定的字符串連接起來，它會形成一個新的字符串

var arr = ['123','哈哈哈','嘿嘿嘿'];
var arr1 = arr.join('');
arr1    // "123哈哈哈嘿嘿嘿"

toString()方法：將數組轉換成字符串

var arr = ['123','哈哈哈','嘿嘿嘿'];
var arr1 = arr.toString();
arr1    // "123,哈哈哈,嘿嘿嘿"

slice(start,end)：切片(左閉右開)

var arr = ['123','哈哈哈','嘿嘿嘿'];
var arr1 = arr.slice(1,2);
arr1    // ["哈哈哈"]

pop方法：刪除尾元素

var arr = ['張三','李四','王文','趙六'];
var item = arr.pop();
console.log(arr);//["張三", "李四"，"王文"]
console.log(item);//趙六

push方法：向數組末尾添加一個元素或多個元素，並返回新的長度

var arr = ['張三','李四','王文','趙六'];
var newLength= arr.push('小馬哥');//可以添加多個，以逗號隔開
console.log(newLength);//5
console.log(arr);//["張三", "李四"，"王文"，"趙六"，"小馬哥"]

reverse()方法：翻轉數組

var arr = ['張三','李四','王文','趙六'];
arr.reverse()
arr // ["趙六", "王文", "李四", "張三"]

sort()方法：排序

var names = ['ergou','tiedan','datou'];
names.sort();
console.log(names);// ["datou", "ergou", "tiedan"]

Array.isArray(被檢測的值)：判斷是否為數組

var b = 'qwe';
Array.isArray(b);   // false

shift()：刪除並返回數組的第一個元素

var arr = ['123','哈哈哈','嘿嘿嘿'];
arr.shift();    // '123'
arr // ["哈哈哈", "嘿嘿嘿"]

unshift():向數組的開頭添加一個或更多元素，並返回新的長度

var arr = ['123','哈哈哈','嘿嘿嘿'];
arr.unshift('xxx','噠噠噠');   // 5
arr // ["xxx", "噠噠噠", "123", "哈哈哈", "嘿嘿嘿"]

清空數組的幾種方式

var array = [1,2,3,4,5,6];
array.splice(0);      //方式1：刪除數組中所有項目
array.length = 0;     //方式1：length屬性可以賦值，在其它語言中length是只讀
array = [];           //方式3：推薦

sort的問題

關於sort()需要注意：
      如果調用該方法時沒有使用參數，將按字母順序對數組中的元素進行排序，說得更精確點，是按照字符編碼的順序進行排序。要實現這一點，首先應把數組的元素都轉換成字符串（如有必要），以便進行比較。
      如果想按照其他標准進行排序，就需要提供比較函數，也就是自己提供一個函數提供排序規則，該函數要比較兩個值，然后返回一個用於說明這兩個值的相對順序的數字。比較函數應該具有兩個參數 a 和 b，其返回值如下：
      若 a 小於 b，在排序后的數組中 a 應該出現在 b 之前，則返回一個小於 0 的值。
      若 a 等於 b，則返回 0。
      若 a 大於 b，則返回一個大於 0 的值。
示例：

function sortNumber(a,b){
    return a - b
}
var arr1 = [11, 100, 22, 55, 33, 44]
arr1.sort(sortNumber)

數據類型之間的轉換

parseInt():字符串轉數字

var a = '5'
var a = parseInt(a);
console.log(typeof(a))  // "number"
​
//帶有自動凈化的功能；只保留字符串最開頭的數字，后面的中文自動消失。
console.log(parseInt("2018你真帥！！")); 
​
//自動帶有截斷小數的功能：取整，不四舍五入。
var a = parseInt(5.8) + parseInt(4.7);
console.log(a);
var a = parseInt(5.8 + 4.7);
console.log(a);

parseFloat():字符串轉小數

var a = parseFloat('5.8')+parseFloat('4.7');
a   // 10.5
var a = parseFloat('5.8'+'4.8');
a   // 5.84

String()和.toString:轉字符串

var n1 = 123;
var str1 = String(n1);
typeof str1 //"string"
​
var num = 234;
num.toString()  //"234"
typeof num.toString()   // "string"

Boolean():任何數據類型都可以轉成布爾值

var b1 = '123';
Boolean(b1) // true
var b2 = -123;
Boolean(b2) // true
var b3 = Infinity;  // 無窮大
Boolean(b3) // true
var b4 = 0;
Boolean(b4) // false
var b5 = NaN;
Boolean(b5) // false
var b6; // undefined
Boolean(b6) // false
var b7 = null;
Boolean(b7) // false

運算符

賦值運算符

以var x = 12,y=5來演示示例

比較運算符

var x = 5;

算術運算符

var a = 5, b = 2

'+': 字符串可相加，數字也可相加，字符串和數字也可以相加。值得注意的是，如果字符串和數字相加會自動把結果轉換成字符串。如下：

console.log('吃了'+'么') //'吃了么'
console.log(12+3)       //15
console.log('吃了'+3)   //'吃了3'

'-'：字符串-數值=數值

var a = '3';
var b = 2;
a-b // 1
b-a // -1

邏輯運算符

&&與 ||或 ！非

流程控制

if單分支：

var ji = 20;
if(ji >= 20){
    '大吉大利，今晚吃雞'
}
// '大吉大利，今晚吃雞'

if...else...:

var ji = 19;
if(ji >= 20){
    '大吉大利，今晚吃雞'
}else{
    '繼續努力'
}
// '繼續努力'

if...else if...else:

if (true) {
   //執行操作
}else if(true){
    //滿足條件執行            
}else if(true){
   //滿足條件執行        
}else{
  //滿足條件執行
}

case語句：

var gameScore = 'better';
switch(gameScore){
    case 'good':
    console.log('玩的好');
    break;
    case 'better':
    console.log('玩的老牛逼了');
    case 'best':
    console.log('恭喜你 成功吃雞');
    default:
    console.log('很遺憾')
}

while 循環

var i = 1;
while(i<=9){
    console.log(i);
    i = i+1;
}

do...while 循環

var i = 3;
do{
    console.log(i)
    i++;
}while(i<10)

for循環

for(var i=1; i<=10; i++){
    console.log(i); // 1,2,3,4,5,6,7,8,9,10
}
var arr = [1,2,3,4];
for(n in arr){
    console.log(n); // 0,1,2,3
}

三元運算

var a = 1;
var b = 2;
var c = a>b ? a:b;  //如果a>b成立返回a,否則返回b
console.log(c); // 2

函數

定義：

function 函數名字(){
​
}

調用：

函數名();

函數的參數和返回值：形參和實參

注意：實際參數和形式參數的個數，要相同；函數只能有一個返回值，如果要返回多個值，只要將其放在數組或對象中返回

console.log(sum(3,4));
// 函數：求和
function sum(a,b){
    return a+b;
}

偽數組：arguments

arguments代表的是實參。arguments只在函數中使用。

返回函數實參的個數：arguments.length

function fn(a,b,c) {
    console.log(arguments);
    console.log(fn.length);         //獲取形參的個數
    console.log(arguments.length);  //獲取實參的個數
    console.log("----------------");
}
fn(2,4,6,8);
// Arguments(4) [2, 4, 6, 8, callee: ƒ, Symbol(Symbol.iterator): ƒ]
// 3
// 4

arguments是偽數組，是因為：arguments可以修改元素，但不能改變數組的長短。

function fn(a,b) {
    arguments[0] = 99;  //將實參的第一個數改為99
    arguments.push(8);  //此方法不通過，因為無法增加元素
}

匿名函數

// 匿名函數方式，多和其他函數配合使用，后面我們就會用到了
var sum = function(a, b){  //在es6中，使用var，可能會飄黃，是因為在es6中，建議你使用let來定義變量，不過不影響你使用
  return a + b;  
}
sum(1, 2);

自執行函數

// 立即執行函數，頁面加載到這里，這個函數就直接執行了，不需要被調用執行
(function(a, b){
  return a + b;
})(1, 2);  //python中寫可以這么寫：ret=(lambda x,y:x+y)(10,20) 然后print(ret)

json對象

JSON.stringify()將對象轉化為json字符串

var obj = {"name":"dadada","age":12};
var str = JSON.stringify(obj);
typeof str
// "string"

JSON.parse()將json字符串轉化為對象

var str = '{"name":"daddada","age":12}';
var obj = JSON.parse(str);
typeof obj,obj
// "object"

遍歷對象中的內容

var a = {'name':'dadadda','age':12};
for (var i in a){
    console.log(i,a[i]);
}
//name dadadda
//age 12

日期：Date

定義

var dt = new Date();
dt
// Tue Aug 13 2019 15:20:03 GMT+0800 (中國標准時間)

常用方法

//創建日期對象
var dt = new Date();
dt  //Tue Aug 13 2019 15:24:04 GMT+0800 (中國標准時間)
        
//獲取一個月中的某一天
dt.getDate();   //13
​
//返回本地時間
dt.toLocaleString() //"2019/8/13 下午3:24:04"
​

注意：以上getxxx的方法都是對時間的獲取，如果要設置時間，使用setxxx,請參考鏈接：http://www.runoob.com/jsref/jsref-obj-date.html

RegExp對象

創建正則對象方式

var reg = RegExp('正則表達式')  //注意,寫在字符串中所有帶\的元字符都會被轉義,應該寫作\\
var reg2 = /正則表達式/  //內部的元字符就不會轉義了
reg.test('待檢測的字符串') //如果字符串中含有符合表達式規則的內容就返回true,否則返回false

字符串中應用正則

var exp = 'alex3714';
​
//只匹配從左到右的第一個
exp.match(/\d/);
//["3", index: 4, input: "alex3714", groups: undefined]0: "3"groups: undefinedindex: 4input: "alex3714"length: 1__proto__: Array(0)
​
//匹配所有符合規則的 返回一個數組
var exp = 'alex3714';
exp.match(/\d/g);
//["3", "7", "1", "4"]
​
//只匹配小寫a
var exp2 = 'Alex is a big sb';
exp2.match(/a/);
//["a", index: 8, input: "Alex is a big sb", groups: undefined]
​
//i表示不區分大小寫 A也會被匹配出來
exp2.match(/a/i);
//["A", index: 0, input: "Alex is a big sb", groups: undefined]
​
//不區分大小寫並匹配所有
exp2.match(/a/ig);
//["A", "a"]0: "A"1: "a"length: 2__proto__: Array(0)
​
//不區分大小寫,從exp字符串中找出符合條件的子串的第一個索引位置
exp2.search(/a/i);
//0
exp2.search(/a/);
//8
​
//不區分大小寫,根據正則切割,返回前n個結果
exp2.split(/a/i,2);
//["", "lex is "]
exp2.split(/a/i);
//["", "lex is ", " big sb"]
​
//i表示不區分大小寫,g表示替換所有,將符合正則條件的內容替換成新的值
exp2.replace(/a/gi,'sb');
//"sblex is sb big sb"

小問題1
var reg2 = /\d/g     //正則表示要匹配多個值
reg2.test('a1b2c3')  //多次test會的到true true true false 繼續test會循環之前的結果

小問題2
var reg3 = /\w{5,10}/
reg3.test() //如果什么都不寫,那么默認test中傳遞undefined參數,剛好可以符合9位字符串的規則

數學相關：match

方法：

其他：

Math.abs(x)      //返回數的絕對值。
Math.pow(x,y)    //返回 x 的 y 次冪。
Math.round(x)    //把數四舍五入為最接近的整數。
Math.sqrt(x)     //返回數的平方根。
Math.exp(x)      //返回 e 的指數。
Math.log(x)      //返回數的自然對數（底為e）。
Math.sin(x)      //返回數的正弦。
Math.tan(x)      //返回角的正切。

面向對象

//創建類
function Student(name,age){
    this.name = name;
    this.age = age;
}
//封裝方法
Student.prototype.show = function(){
    console.log(this.name,this.age)
}
//實例化
var stu = new Student('alex',84);
//查看屬性
stu.name    // alex
stu.age     //84
//查看方法
stu.show()  //alex 84