day53

時間  2019-12-02
標籤 day53 day 简体版
原文   原文鏈接

引入方式

  1. Script標籤內寫代碼python

    <script>//在這裏面寫JS代碼</script>

  2. 引入額外的JS文件正則表達式

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

語言規範

  1. 註釋
// 單行註釋
    
/* 多行
註釋
*/

  1. 結束符數組

    JavaScript中的語句要以分號(;)爲結束符

JS語言基礎

  1. 變量聲明數據結構

    1. JavaScript的變量名可使用_ ，數字，字母，$組成，不能以數字開頭
    2. 聲明變量使用var 變量名；的格式來進行聲明
    var name = "Alex";
var age = 18;

    注意：閉包

    變量名是區分大小寫的。dom

    推薦使用駝峯式命名規則。函數

    保留字（關鍵字）不能用作變量名。this

    補充：編碼

    ES6新增了let命令，用於聲明變量。其用法相似於var，可是所聲明的變量只在let命令所在的代碼塊內有效。例如：for 循環的計數器就很適合使用let命令。prototype

    var=['a','b','c','d']
for (let i=0; i<arr.length; i++){console.log(i)}
i
'''
會報錯i is not defined
at <anonymous>:1:1
'''


可是
for (var i=0; i<arr.length; i++)
{console.log(i)}
i
"""
不會報錯，輸出4
"""

    ES6新增const用來聲明常量，一旦聲明，其值就不能改變。

    const PI = 3.1415;
PI //3.1415
PI = 3 //TypeError: "PI" is read-only

    再次補充 (常見的保留字)

    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

  2. 數據類型

    1. js擁有動態類型(就是說類型能夠根據須要做出變化，而不是一旦定義就不能修改了)
    var x;//此時x是undefined 
var x=1;//此時x是數字
var x="Alex"//此時x是字符串
    1. 數值(number)
    js 不區分整型和浮點型，就只有一種數字類型。

var a = 12.34;
var b = 20;
var c = 123e5;  // 12300000
var d = 123e-5;  // 0.00123

還有一種NaN，表示不是一個數字（not a number）

經常使用方法：
parseInt('123') //返回123
paeseInt('ABC') //返回NaN，NaN屬性是表明非數字值的特殊值。該屬性用於指示某個值不是數字。
parseFloat("123.456") //返回123.456
    1. 字符串(string)
    var a = "Hello";
var b = "world";
var c = a + b;
console.log(c); //獲得Helloworld

## 經常使用方法
.length(返回長度)
.trim/trimLeft/trimRight(移除空白/左邊空白/右邊空白)
.charAt(n)(返回第n個字符)
.concat(value...)(拼接)
.indexOf(substring,start)(子序列位置)
.substring(from, to)(根據索引獲取子序列)
.slice(start,end)(切片)
.toLowerCase()(小寫)
.toUpperCase()(大寫)
.split(delimiter, limit)(分割)


## 拼接字符串通常使用「+」
string.slice(start, stop)和string.substring(start, stop)


二者的相同點：
若是start等於end，返回空字符串
若是stop參數省略，則取到字符串末
若是某個參數超過string的長度，這個參數會被替換爲string的長度


substirng()的特色：
若是 start > stop ，start和stop將被交換
若是參數是負數或者不是數字，將會被0替換


silce()的特色：
若是 start > stop 不會交換二者
若是start小於0，則切割從字符串末尾往前數的第abs(start)個的字符開始(包括該位置的字符)
若是stop小於0，則切割在從字符串末尾往前數的第abs(stop)個字符結束(不包含該位置字符)

    補充：

    ES6中引入了模板字符串。模板字符串（template string）是加強版的字符串，用反引號（`）標識。它能夠當作普通字符串使用，也能夠用來定義多行字符串，或者在字符串中嵌入變量。

    // 普通字符串
`這是普通字符串！`
// 多行文本
`這是多行的
文本`
// 字符串中嵌入變量
var name = "cxw",
time = "today";
`Hello ${name}, how are you ${time}?`

    注意：

    若是模板字符串中須要使用反引號，則在其前面要用反斜槓轉義。

    JSHint啓用ES6語法支持:/* jshint esversion: 6 */

    1. 布爾值（Boolean）
    ## 區別於Python,true和false都是小寫。

var a = true;
var b = false;

## 空字符串、0、null、undefined、NaN都是false

## null和undefined

 null表示值爲空，通常須要指定或清空一個變量時纔會使用，如name=null ;
 underfined表示當聲明一個變量但未初始化時，該變量的默認值是underfined ;
    1. 對象（Object）
    JavaScript 中的全部事物都是對象：字符串、數值、數組、函數...此外，JavaScript 容許自定義對象。
JavaScript 提供多個內建對象，好比 String、Date、Array 等等。

對象只是帶有屬性和方法的特殊數據類型。
    1. 數組
    ## 數組對象的做用是：使用單獨的變量名來存儲一系列的值。相似於Python中的列表

var a = [123, "ABC"];
console.log(a[1]);

//輸出「ABC」

## 經常使用方法
.length  數組的大小
.push(ele)   尾部追加元素
.pop()   獲取尾部的元素
.unshift(ele)    頭部插入元素
.shift() 頭部移除元素
.slice(start, end)   切片
.reverse()   反轉
.join(seq)   將數組元素鏈接成字符串
.concat(val, ...)    鏈接數組
.sort()  排序
.forEach()   將數組的每一個元素傳遞給回調函數
.splice()    刪除元素，並向數組添加新元素。
.map()   返回一個數組元素調用函數處理後的值的新數組
    1. forEach()
    ## 語法：
forEach(function(currentValue, index, arr), thisValue)

currentValue:必須，當前元素。
index: 可選。
arr: 可選。當前元素所屬的數組對象。

thisValue:可選。傳遞給函數的值通常用"this"值。若是這個參數爲空,"undefined"會傳遞給"this"值。


var arr1 = [11, 22, 33, 44];
arr1.forEach(value, index, arr){console.log(value, index, arr)}
'''
11 0 (4) [11, 22, 33, 44]
22 1 (4) [11, 22, 33, 44]
33 2 (4) [11, 22, 33, 44]
44 3 (4) [11, 22, 33, 44]
'''

arr1.forEach(function(value, index){console.log(index, value)})
'''
0 11
1 22
2 33
3 44
'''
    1. splice()
    #語法
splice(index, howmany, item1,...,itemX)

#參數
index    必需。規定從何處添加/刪除元素。
該參數是開始插入和（或）刪除的數組元素的下標，必須是數字。
howmany  必需。規定應該刪除多少元素。必須是數字，但能夠是 "0"。
若是未規定此參數，則刪除從 index 開始到原數組結尾的全部元素。
item1, ..., itemX    可選。要添加到數組的新元素 


var arr1 = [11, 22, 33, 44];
undefined
arr1.splice(1, 3)
(3) [22, 33, 44]
arr1.splice(1, 3, 55)
[]
arr1.splice(1, 55)
[55]
arr1.splice(1, 3, 55)
[]
arr1.splice(2, 55)
[]
arr1.splice(2,3,47)
[]
arr1;
(3) [11, 55, 47]
    1. map()
    ## 語法
map(function(currentValue,index,arr), thisValue)

## 參數及其描述
currentValue 必須。當前元素的值
index    可選。當期元素的索引值
arr  可選。當期元素屬於的數組對象

thisValue    可選。對象做爲該執行回調時使用，傳遞給函數，用做 "this" 的值。若是省略了 thisValue ，"this" 的值爲 "undefined"


var arr1 = [11, 22, 33, 44];
undefined
arr1.map(function(value, index){return value+1})
(4) [12, 23, 34, 45]
arr1
(4) [11, 22, 33, 44]



## 注意
關於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)

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


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

##補充
ES6新引入了一種新的原始數據類型（Symbol），表示獨一無二的值。它是JavaScript語言的第7種數據類型。

typeof "abc" // "string"
typeof null // "object"
typeof true // "boolean"
typeof 123 // "number"

  3. 運算符

    1. 算數運算符
    + - * / % ++ --
var x=10;
var res1=x++;
var res2=++x;
res1;
res2;

這裏因爲的x++和++x在出現賦值運算式，x++會先賦值再進行自增1運算，而++x會先進行自增運算再賦值！
    1. 比較運算符
    > >= < <= != == === !==

## 注意：
== 「1」  // true  弱等於
=== "1"  // false 強等於
//上面這張狀況出現的緣由在於JS是一門弱類型語言(會自動轉換數據類型)，因此當你用兩個等號進行比較時，JS內部會自動先將數值類型的1轉換成字符串類型的1再進行比較，因此咱們之後寫JS涉及到比較時儘可能用三等號來強制限制類型，防止判斷錯誤

    3.邏輯運算符

    && || !

    4.賦值運算符

    = += -= *= /=

  4. 流程控制

    ## if-else

var a = 10;
if (a > 5)
{
  　　console.log("yes");
}else {
  　　console.log("no");
}

## if-else if -else
var a = 10;

if (a > 5){
　　  console.log("a > 5");
}else if (a < 5){
  　　console.log("a < 5");

}else {

  　　console.log("a = 5");

}

## switch
var day = new Date().getDay(); 
switch (day) {
　　 case 0: 
　　 console.log("Sunday"); 
　　 break; 
　　case 1: 
　　console.log("Monday");
　　 break; 
default:
 console.log("...") }
###switch中的case子句一般都會加break語句，不然程序會繼續執行後續case中的語句。

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

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

#三元運算
var a = 1;
var b = 2;

var c = a > b ? a : b
//這裏的三元運算順序是先寫判斷條件a>b再寫條件成立返回的值爲a,條件不成立返回的值爲b;三元運算能夠嵌套使用；

var a=10,b=20;
var x=a>b ?a:(b=="20")?a:b;
x

  5. 函數

    ## 定義

// 普通函數定義

function f1(){
　　  console.log("Hello world!");
}

// 帶參數的函數

function f2(a, b) {
　　  console.log(arguments);
  　　// 內置的arguments對象，相似於函數的名稱空間，返回參數、參數長度等內容
　　  console.log(arguments.length);

　　  console.log(a, b);

}

// 帶返回值的函數

function sum(a, b){
　　  return a + b;
}

sum(1, 2);  // 調用函數

// 匿名函數方式

var sum = function(a, b){
　　  return a + b;
}
sum(1, 2);

// 當即執行函數 書寫當即執行的函數，首先先寫兩個括號()()這樣防止書寫混亂

(function(a, b){

　　  return a + b;

})(1, 2);


##補充：ES6中容許使用「箭頭」（=>）定義函數。

var f = v => v;
// 等同於
var f = function(v){
　　  return v;
}
var f = v => v+10;
f(3)
# 13

## 若箭頭函數不須要參數或須要多個參數，就是用圓括號表明參數部分。
var f = () => 5;
// 等同於
var f = function(){return 5};


var sum = (num1, num2) => num1 + num2;
// 等同於
var sum = function(num1, num2){

　　  return num1 + num2;  //這裏的return只能返回一個值，若是想返回多個值須要本身手動給他們包一個數組或對象中
}

## 函數中的arguments參數
function add(a,b){
　　  console.log(a+b);
　　  console.log(arguments.length);
　　　console.log(arguments[0]);//arguments至關於將出傳入的參數所有包含，這裏取得就是第一個元素1
}
add(1,2)
#輸出
'''
3
2
1
'''

##注意：函數只能返回一個值，若是要返回多個值，只能將其放在數組或對象中返回。


## 函數的全局變量和局部變量

### 局部變量：
在JavaScript函數內部聲明的變量（使用 var）是局部變量，因此只能在函數內部訪問它（該變量的做用域是函數內部）。只要函數運行完畢，本地變量就會被刪除。

### 全局變量
在函數外聲明的變量是全局變量，網頁上的全部腳本和函數都能訪問它。

### 變量的生存週期
JavaScript變量的生命期從它們被聲明的時間開始。
局部變量會在函數運行之後被刪除。
全局變量會在頁面關閉後被刪除。

### 做用域
首先在函數內部查找變量，找不到則到外層函數查找，逐步找到最外層。與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

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

  6. 詞法分析

    詞法分析的過程：

當函數調用的前一瞬間，會先造成一個激活對象：Avtive Object（AO），並會分析如下3個方面：

1:函數參數，若是有，則將此參數賦值給AO，且值爲undefined。若是沒有，則不作任何操做。
2:函數局部變量，若是AO上有同名的值，則不作任何操做。若是沒有，則將此變量賦值給AO，而且值爲undefined。
3:函數聲明，若是AO上有，則會將AO上的對象覆蓋。若是沒有，則不作任何操做。

函數內部不管是使用參數仍是使用局部變量都到AO上找。

var age = 18; 
function foo(){ 
    console.log(age); #第一步函數沒有參數，因此不作任何操做，僅僅產生AO
    var age = 22;  #到這AO.age=underfined
    console.log(age); 

} 
foo(); // 問：執行foo()以後的結果是？

# 22


var age = 18;
function foo(){ #第一個函數沒有參數，僅僅產生AO對象
  console.log(age); 
  var age = 22; #這一步AO.age=undefined
  console.log(age);
  function age(){     #遇到age函數聲明，AO變成AO.age=函數聲明
    console.log("呵呵");
  }
  console.log(age);
}
foo();  // 執行後的結果是？

#f age(){
# console.log("呵呵");
#}
#22
#22

'''
詞法分析過程：
 詞法分析過程：
    一、分析參數，有一個參數，造成一個 AO.age=undefine;
    二、分析變量聲明，有一個 var age, 發現 AO 上面已經有一個 AO.age，所以不作任何處理
    三、分析函數聲明，有一個 function age(){...} 聲明， 則把原有的 age 覆蓋成 AO.age=function(){...};

    最終，AO上的屬性只有一個age，而且值爲一個函數聲明

    執行過程：
    注意：執行過程當中全部的值都是從AO對象上去尋找

    一、執行第一個 console.log(age) 時，此時的 AO.age 是一個函數，因此第一個輸出的一個函數
    二、這句 var age=22; 是對 AO.age 的屬性賦值， 此時AO.age=22 ，因此在第二個輸出的是 22
    三、同理第三個輸出的仍是22, 由於中間再沒有改變age值的語句了

'''

  7. 內置對象和方法

## JavaScript中的全部事物都是對象：字符串、數字、數組、日期，等等。在JavaScript中，對象是擁有屬性和方法的數據。

## 注意var s1 = "abc"和var s2 = new String("abc")的區別：typeof s1 --> string而 typeof s2 --> Object

## 自定義對象：JavaScript的對象（Object）本質上是鍵值對的集合（Hash結構），可是隻能用字符串做爲鍵。

var a = {"name": "Alex", "age": 18};
console.log(a.name);
console.log(a["age"]);

### 遍歷對象中的內容
var a = {"name": "Alex", "age": 18};
for (var i in a){
　　  console.log(i, a[i]);
}

## 建立對象
var person=new Object(); // 建立一個person對象 person.name="Alex"; // person對象的name屬性 
person.age=18; // person對象的age屬性

###注意：ES6中提供了Map數據結構。它相似於對象，也是鍵值對的集合，可是「鍵」的範圍不限於字符串，各類類型的值（包括對象）均可以當作鍵。也就是說，Object結構提供了「字符串--值」的對應，Map結構提供了「值--值」的對應，是一種更完善的Hash結構實現。

var m = new Map();
var o = {p: "Hello World"}
m.set(o, "content"}
m.get(o)  // "content"
m.has(o)  // true
m.delete(o)  // true
m.has(o) // false

## 繼承
// 父類構造函數
var Car = function (loc) {
  this.loc = loc;
};

// 父類方法
Car.prototype.move = function () {
  this.loc ++;
};

// 子類構造函數
var Van = function (loc) {
  Car.call(this, loc);
};

// 繼承父類的方法
Van.prototype = Object.create(Car.prototype);
// 修復 constructor
Van.prototype.constructor = Van;
// 擴展方法
Van.prototype.grab = function () {
  /* ... */
};


## Date對象
### 建立Date對象
//方法1：不指定參數
var d1 = new Date(); 
console.log(d1.toLocaleString());
//方法2：參數爲日期字符串
var d2 = new Date("2004/3/20 11:12"); 
console.log(d2.toLocaleString());
var d3 = new Date("04/03/20 11:12");
console.log(d3.toLocaleString()); 
//方法3：參數爲毫秒數
var d3 = new Date(5000); 
console.log(d3.toLocaleString());
console.log(d3.toUTCString()); 
//方法4：參數爲年月日小時分鐘秒毫秒
var d4 = new Date(2004,2,20,11,12,0,300); 
console.log(d4.toLocaleString()); //毫秒並不直接顯示

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


### 練習：將當前日期按照「年-月-日 時分 星期幾」的格式進行輸出
const WEEKMAP = {  
  0:"星期天",
  1:"星期一",
  2:"星期二",
  3:"星期三",
  4:"星期四",
  5:"星期五",
  6:"星期六"
};  //定義一個數字與星期的對應關係對象


function showTime() {
    var d1 = new Date();
    var year = d1.getFullYear();
    var month = d1.getMonth() + 1;  //注意月份是從0~11
    var day = d1.getDate();
    var hour = d1.getHours();
    var minute = d1.getMinutes() < 10?"0"+d1.getMinutes():d1.getMinutes();  //三元運算

    var week = WEEKMAP[d1.getDay()];  //星期是從0~6

    var strTime = `
    ${year}-${month}-${day} ${hour}:${minute} ${week}
    `;
    console.log(strTime)
};

showTime();


### Json對象
var str1 = '{"name": "Alex", "age": 18}'; 
var obj1 = {"name": "Alex", "age": 18}; 
// JSON字符串轉換成對象
var obj = JSON.parse(str1); 
// 對象轉換成JSON字符串
var str = JSON.stringify(obj1);

### 正則對象
// 定義正則表達式兩種方式
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;

// 正則校驗數據
reg1.test('jason666')
reg2.test('jason666')

/*第一個注意事項，正則表達式中不能有空格*/ 

// 全局匹配
var s1 = 'egondsb dsb dsb';
s1.match(/s/)
s1.match(/s/g)
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g
reg2.test('egondsb');
reg2.test('egondsb');
reg2.lastIndex;
/*第二個注意事項，全局匹配時有一個lastIndex屬性*/

// 校驗時不傳參數
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/
reg2.test();
reg2.test(undefined);

var reg3 = /undefined/;
reg3.test();

## Math對象
abs(x)      返回數的絕對值。
exp(x)      返回 e 的指數。
floor(x)    對數進行下舍入。
log(x)      返回數的天然對數（底爲e）。
max(x,y)    返回 x 和 y 中的最高值。
min(x,y)    返回 x 和 y 中的最低值。
pow(x,y)    返回 x 的 y 次冪。
random()    返回 0 ~ 1 之間的隨機數。
round(x)    把數四捨五入爲最接近的整數。
sin(x)      返回數的正弦。
sqrt(x)     返回數的平方根。
tan(x)      返回角的正切。
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程