js筆記

来源:https://www.cnblogs.com/zjz666/archive/2019/07/12/11177757.html
-Advertisement-
Play Games

js：JS的運行機制是什麼，為什麼是單線程的？ js是單線程事件隊列 這是因為在js的設計之初就是作為瀏覽器的腳本語言，主要作用就是與用戶做交互，如果設計為多線程的話，那就會帶來很多複雜的同步問題了，勢必會影響瀏覽器的交互效果，不妨假設一下若js有兩個線程，A線程需要將頁面信息刪除，B線程需要將頁面 ...


js：JS的運行機制是什麼，為什麼是單線程的？

js是單線程事件隊列

這是因為在js的設計之初就是作為瀏覽器的腳本語言，主要作用就是與用戶做交互，如果設計為多線程的話，那就會帶來很多複雜的同步問題了，勢必會影響瀏覽器的交互效果，不妨假設一下若js有兩個線程，A線程需要將頁面信息刪除，B線程需要將頁面信息修改顯示，那就會讓前端處理邏輯變得複雜了，也就會影響與用戶的交互體驗了。


js註入：
一、XSS

XSS是跨站腳本攻擊（Cross-Site Scripting）的簡稱，防禦XSS最佳的做法就是對數據進行嚴格的輸出編碼，使得攻擊者提供的數據不再被瀏覽器認為是腳本而被誤執行。

二、警惕iframe帶來的風險

有些時候我們的前端頁面需要用到第三方提供的頁面組件，通常會以iframe的方式引入。典型的例子是使用iframe在頁面上添加第三方提供的廣告、天氣預報、社交分享插件等等。

還好在HTML5中，iframe有了一個叫做sandbox的安全屬性，通過它可以對iframe的行為進行各種限制，充分實現“最小許可權“原則。使用sandbox的最簡單的方式就是只在iframe元素中添加上這個關鍵詞就好，就像下麵這樣：<iframe sandbox src="..."> ... </iframe>
sandbox還忠實的實現了“Secure By Default”原則，也就是說，如果你只是添加上這個屬性而保持屬性值為空，那麼瀏覽器將會對iframe實施史上最嚴厲的調控限制，基本上來講就是除了允許顯示靜態資源以外，其他什麼都做不了。比如不准提交表單、不准彈窗、不准執行腳本等等，連Origin都會被強制重新分配一個唯一的值，換句話講就是iframe中的頁面訪問它自己的伺服器都會被算作跨域請求。

另外，sandbox也提供了豐富的配置參數，我們可以進行較為細粒度的控制。一些典型的參數如下：

allow-forms：允許iframe中提交form表單
allow-popups：允許iframe中彈出新的視窗或者標簽頁（例如，window.open()，showModalDialog()，target=”_blank”等等）
allow-scripts：允許iframe中執行JavaScript
allow-same-origin：允許iframe中的網頁開啟同源策略

 


ajax請求：
201-206：都表示伺服器成功處理了請求的狀態代碼，說明網頁可以正常訪問。
200（成功） 伺服器已成功處理了請求。通常，這表示伺服器提供了請求的網頁。
201（已創建） 請求成功且伺服器已創建了新的資源。
202（已接受） 伺服器已接受了請求，但尚未對其進行處理。
203（非授權信息） 伺服器已成功處理了請求，但返回了可能來自另一來源的信息。
204（無內容） 伺服器成功處理了請求，但未返回任何內容。
205（重置內容） 伺服器成功處理了請求，但未返回任何內容。與 204 響應不同，此響應要求請求者重置文檔視圖（例如清除表單內容以輸入新內容）。
206（部分內容） 伺服器成功處理了部分 GET 請求。

 

300-3007表示的意思是：要完成請求，您需要進一步進行操作。通常，這些狀態代碼是永遠重定向的。

300（多種選擇） 伺服器根據請求可執行多種操作。伺服器可根據請求者 來選擇一項操作，或提供操作列表供其選擇。

301（永久移動） 請求的網頁已被永久移動到新位置。伺服器返回此響應時，會自動將請求者轉到新位置。您應使用此代碼通知搜索引擎蜘蛛網頁或網站已被永久移動到新位置。
302（臨時移動） 伺服器目前正從不同位置的網頁響應請求，但請求者應繼續使用原有位置來進行以後的請求。會自動將請求者轉到不同的位置。但由於搜索引擎會繼續抓取原有位置並將其編入索引，因此您不應使用此代碼來告訴搜索引擎頁面或網站已被移動。
303（查看其他位置） 當請求者應對不同的位置進行單獨的 GET 請求以檢索響應時，伺服器會返回此代碼。對於除 HEAD 請求之外的所有請求，伺服器會自動轉到其他位置。
304（未修改） 自從上次請求後，請求的網頁未被修改過。伺服器返回此響應時，不會返回網頁內容。

 


4XX：HTTP狀態碼表示請求可能出錯，會妨礙伺服器的處理。

400（錯誤請求） 伺服器不理解請求的語法。

401（身份驗證錯誤） 此頁要求授權。您可能不希望將此網頁納入索引。

403（禁止） 伺服器拒絕請求。

404（未找到） 伺服器找不到請求的網頁。例如，對於伺服器上不存在的網頁經常會返回此代碼。

例如：http://www.0631abc.com/20100aaaa，就會進入404錯誤頁面

405（方法禁用） 禁用請求中指定的方法。

 


500至505表示的意思是：伺服器在嘗試處理請求時發生內部錯誤。這些錯誤可能是伺服器本身的錯誤，而不是請求出錯。

 

 

.BFC概念：塊級格式化上下文，是一個獨立的渲染區域，讓處於 BFC 內部的元素與外部的元素相互隔離，使內外元素的定位不會相互影響。

我們先瞭解一個名詞：BFC（block formatting context），中文為“塊級格式化上下文”。

先記住一個原則： 如果一個元素具有BFC,那麼內部元素再怎麼翻江倒海，翻雲覆雨，都不會影響外面的元素。所以，BFC元素是不可能發生margin重疊的，因為margin重疊會影響外面的元素的；BFC元素也可以用來清除浮動帶來的影響，因為如果不清除，子元素浮動則會造成父元素高度塌陷，必然會影響後面元素的佈局和定位，這顯然有違BFC元素的子元素不會影響外部元素的設定。

以下情況會觸發BFC:
•<html>根元素
•float的值不為none
•overflow的值為auto，scroll，hidden
•display的值為table-cell，table-caption和inline--block中的任何一個
•position的值不為relative和static
position: absolute/fixed
display: inline-block / table
float 元素
ovevflow !== visible

顯然我們在設置overflow值為hidden時使container元素具有BFC，那麼子元素child浮動便不會帶來父元素的高度坍塌影響。

 

 

24、CSS3動畫實現的原理是什麼？
CSS3動畫是補間動畫，原理是，將一套CSS樣式逐漸變化成為另外一套樣式，以百分比的來規定改變發生的時間。


MVC：核心是三層模型Model-View-Control。
視圖層(View)
控制層(Controller)
模型層(Model)

 

 


js學習：

 

parseFloat()： 函數可解析一個字元串，並返回一個浮點數。該函數指定字元串中的首個字元是否是數字。如果是，則對字元串進行解析，直到到達數字的末端為止，然後以數字返回該數字，而不是作為字元串。

parseInt()： 函數可解析一個字元串，並返回一個整數。

Number()： 函數把對象的值轉換為數字。

isNaN()： 函數用於檢查其參數是否是非數字值。 是數字是返回 ”false“ 不是數字是返回 ”true“

concat()：方法用於連接兩個或多個數組。該方法不會改變現有的數組，而僅僅會返回被連接數組的一個副本。

splice(index,howmany,item1,.....,itemX)： 方法向/從數組中添加/刪除項目，然後返回被刪除的項目。 註釋：該方法會改變原始數組。
index 必需。整數，規定添加/刪除項目的位置，使用負數可從數組結尾處規定位置。
howmany 必需。要刪除的項目數量。如果設置為 0，則不會刪除項目。
item1, ..., itemX 可選。向數組添加的新項目。

var arr = ['Microsoft', 'Apple', 'Yahoo', 'AOL', 'Excite', 'Oracle'];
// 從索引2開始刪除3個元素,然後再添加兩個元素:
arr.splice(2, 3, 'Google', 'Facebook'); // 返回刪除的元素 ['Yahoo', 'AOL', 'Excite']

pop()： 方法用於刪除並返回數組的最後一個元素。（會改變原數組）pop() 方法將刪除 arrayObject 的最後一個元素，把數組長度減 1，並且返回它刪除的元素的值。如果數組已經為空，則 pop() 不改變數組，並返回 undefined 值。
push()：數組最後追加一個元素

shift()： 方法用於把數組的第一個元素從其中刪除，並返回第一個元素的值。（會改變原數組）
unshift()：數組首位追加一個元素

var max1 = Math.max.apply(null, arr)：求數組中的最大值
var max1 = Math.min.apply(null, arr)：求數組中的最小值

Math.max()： 函數返回一組數中的最大值。返回給定的一組數字中的最大值。如果給定的參數中至少有一個參數無法被轉換成數字，則會返回 NaN。
Math.min()： 函數返回一組數中的最大值。返回給定的一組數字中的最小值。如果給定的參數中至少有一個參數無法被轉換成數字，則會返回 NaN。
sort()： 方法用於對數組的元素進行排序。
var arr =[-1,-2,1,10,4,5,8] ;
var max2 = arr.sort(function(a, b){
return a - b;
});
String.split()方法：返回是一個數組------不管按照什麼拆，拆出來是一個數組（字元串轉換為數組）

 

join()： 方法用於把數組中的所有元素放入一個字元串。（數組轉換為字元串）

Array.isArray() ：用於確定傳遞的值是否是一個 Array。

slice() ：（數組的截取）方法可從已有的數組中返回選定的元素。 arrayObject.slice(start,end)
slice()就是對應String的substring()版本，它截取Array的部分元素，然後返回一個新的Array
註意到slice()的起止參數包括開始索引，不包括結束索引
如果不給slice()傳遞任何參數，它就會從頭到尾截取所有元素。利用這一點，我們可以很容易地複製一個Array：

reverse()把整個Array的元素給掉個個，也就是反轉：

//字元串的操作：
.toUpperCase()： 方法用於把字元串轉換為大寫。

.toLowerCase()： 方法用於把字元串轉換為小寫。

indexOf()： 方法可返回某個指定的字元串值在字元串中首次出現的位置。
註釋：indexOf() 方法對大小寫敏感！
註釋：如果要檢索的字元串值沒有出現，則該方法返回 -1。
與String類似，Array也可以通過indexOf()來搜索一個指定的元素的位置：

substring() ：方法用於提取字元串中介於兩個指定下標之間的字元。

substr(1,4)： 方法可在字元串中抽取從 start 下標開始的指定數目的字元。 1開始，截取4位


Math.abs(x)：abs() 方法可返回數的絕對值。


map()： 方法返回一個新數組，數組中的元素為原始數組元素調用函數處理後的值。
map() 方法按照原始數組元素順序依次處理元素。
註意： map() 不會對空數組進行檢測。
註意： map() 不會改變原始數組。


Math.round()：四捨五入取其整。
Math.ceil()：向上取整。
Math.floor()：向下取整。

Math.pow(x,y)： 方法可返回 x 的 y 次冪的值。

trim() 方法刪除字元串兩端的空白符：var str = " Hello World! "; alert(str.trim());

 

 

 

 

 

 

 

var： 如果使用關鍵字 var 聲明一個變數，那麼這個變數就屬於當前的函數作用域，如果聲明是發生在任何函數外的頂層聲明，那麼這個變數就屬於全局作用域。

let：
1、let 聲明的變數具有塊作用域的特征。
2、在同一個塊級作用域，不能重覆聲明變數。
function foo(){
let a = 1;
let a = 2;//Uncaught SyntaxError: Identifier 'a' has already been declared
}

3、let 聲明的變數不存在變數提升，換一種說法，就是 let 聲明存在暫時性死區（TDZ）。

for (var i = 0; i < 5; i++) {
setTimeout(function(){
console.log(i);
},100)
};
會列印4個4 ：setTimeout是非同步執行的，100毫秒後向任務隊列里添加一個任務，只有主線上的全部執行完才會執行任務隊列里的任務，所以當主線程for迴圈執行完之後 i 的值為5，這個時候再去任務隊列中執行任務，i全部為5；每次for迴圈的時候setTimeout都會執行，但是裡面的function則不會執行被放入任務隊列，因此放了5次；for迴圈的5次執行完之後不到1000毫秒；1000毫秒後全部執行任務隊列中的函數，所以就是輸出五個5啦

for (let i = 0; i < 5; i++) {
setTimeout(function(){
console.log(i);
},100)
};
會列印0,1,2,3,4：假如把var換成let，那麼輸出結果為0,1,2,3,4；因為let i 的是區塊變數，每個i只能存活到大括弧結束，並不會把後面的for迴圈的 i 值賦給前面的setTimeout中的i；而var i 則是局部變數，這個 i 的生命周期不受for迴圈的大括弧限制；

let 和 var 的區別：

let 擁有自己的塊級作用域，不會提升變數。
var 定義的變數，作用域是整個封閉函數，是全域的 。
let 定義的變數，作用域是在塊級或是子塊中。
var: 變數可以多次聲明
let : 變數只能聲明一次


const： 聲明方式，除了具有 let 的上述特點外，其還具備一個特點，即 const 定義的變數，一旦定義後，就不能修改，即 const 聲明的為常量。

const obj = {a:1,b:2};
console.log(obj.a);//1
obj.a = 3;
console.log(obj.a);//3

所以準確的說，是 const 聲明創建一個值的只讀引用。但這並不意味著它所持有的值是不可變的，只是變數標識符不能重新分配。


ES6模板字元串：
var name = '小明';
var age = 20;
var message = `你好, ${name}, 你今年${age}歲了!`;
alert(message);

初始化Map需要一個二維數組，或者直接初始化一個空Map。Map具有以下方法：
var m = new Map(); // 空Map
m.set('Adam', 67); // 添加新的key-value
m.set('Bob', 59);
m.has('Adam'); // 是否存在key 'Adam': true
m.get('Adam'); // 67
m.delete('Adam'); // 刪除key 'Adam'
m.get('Adam'); // undefined


要獲取字元串某個指定位置的字元，使用類似Array的下標操作，索引號從0開始：var s = 'Hello, world!'; s[0]; // 'H'

 

 

 

 

// 利用for迴圈計算1 * 2 * 3 * ... * 10的結果：
var sum = 1;
for(var i = 1;i<=10;i++){
sum = i*sum;
}
console.log(sum);

//數組排序
var arr = [7,2,3,6,8,1,11,22]
var arr2 = arr.sort(function(v1,v2){
return v1-v2
}).reverse()

//要取一個小數的小數點後四位，有什麼方法？
使用 Math.floor
var num = 3.141592653
var result = Math.floor (num * 10000) / 10000


// 利用遞歸實現數組的扁平化
let ary = [1, [2, [3, [4, 5]]], 6];
let result = [];
let fn = function(ary){
for(let i = 0 ; i < ary.length; i++){
let item = ary[i];

if(Array.isArray(ary[i])){
fn(item);
} else {
result.push(item)
}
}
}
fn(ary);
console.log(result);

 


//構造函數
function Person(name, gender, hobby) {
this.name = name;
this.gender = gender;
this.hobby = hobby;
this.age = 6;
}
//原型對象上創建say函數
Person.prototype.say = function(){
console.log("hello!");
}
//通過new關鍵字創建對象
var p1 = new Person('zs', '男', 'basketball');
var p2 = new Person('ls', '女', 'dancing');
var p3 = new Person('ww', '女', 'singing');
var p4 = new Person('zl', '男', 'football');
p1.say()//"hello"
//p1會繼承構造函數的原型對象以及對象的say函數

 

function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.say = function() {
console.log('Hello');
};
var p1 = new Person('Tom', 18);
var p2 = new Person('Jack', 34);
console.log(p1.say === p2.say);

 

 

var Student = {
name:'Student',
age:3,
run: function(){
console.log(this.name + 'is running');
}
};
a = new Object(Student);
b = Object.create(Student);
// 重點來了
a.proto === Student.prototype; //true
b.proto === Student.prototype; //true

b.__proto__ === Student; //true
a.__proto__ === Student; //false
a.__proto__ === Student.__proto__; //true

 

//對象
由於JavaScript的對象是動態類型，你可以自由地給一個對象添加或刪除屬性：

var xiaoming = {
name: '小明'
};
xiaoming.age; // undefined
xiaoming.age = 18; // 新增一個age屬性
xiaoming.age; // 18
delete xiaoming.age; // 刪除age屬性
xiaoming.age; // undefined
delete xiaoming['name']; // 刪除name屬性
xiaoming.name; // undefined
delete xiaoming.school; // 刪除一個不存在的school屬性也不會報錯

如果我們要檢測xiaoming是否擁有某一屬性，可以用in操作符：

var xiaoming = {
name: '小明',
birth: 1990,
school: 'No.1 Middle School',
height: 1.70,
weight: 65,
score: null
};
'name' in xiaoming; // true
'grade' in xiaoming; // false
不過要小心，如果in判斷一個屬性存在，這個屬性不一定是xiaoming的，它可能是xiaoming繼承得到的：

'toString' in xiaoming; // true
因為toString定義在object對象中，而所有對象最終都會在原型鏈上指向object，所以xiaoming也擁有toString屬性。

要判斷一個屬性是否是xiaoming自身擁有的，而不是繼承得到的，可以用hasOwnProperty()方法：

var xiaoming = {
name: '小明'
};
xiaoming.hasOwnProperty('name'); // true
xiaoming.hasOwnProperty('toString'); // false

對象的遍歷：
var list={
name:'xiaoming',
age:18,
school:'沈陽小學',
'other':null
};
for(var k in list){ console.log(k+':'+list[k]); }

 


變數提升：
JavaScript的函數定義有個特點，它會先掃描整個函數體的語句，把所有申明的變數“提升”到函數頂部
變數雖然提升了，但是不會提升變數的賦值。


名字空間：
全局變數會綁定到window上，不同的JavaScript文件如果使用了相同的全局變數，或者定義了相同名字的頂層函數，都會造成命名衝突，並且很難被髮現。
減少衝突的一個方法是把自己的所有變數和函數全部綁定到一個全局變數中。例如：
// 唯一的全局變數MYAPP:
var MYAPP = {};
// 其他變數:
MYAPP.name = 'myapp';
MYAPP.version = 1.0;
// 其他函數:
MYAPP.foo = function () {
return 'foo';
};
把自己的代碼全部放入唯一的名字空間MYAPP中，會大大減少全局變數衝突的可能。
許多著名的JavaScript庫都是這麼乾的：jQuery，YUI，underscore等等。


解構賦值：
從ES6開始，JavaScript引入瞭解構賦值，可以同時對一組變數進行賦值。
eg:
var [x, y, z] = ['hello', 'JavaScript', 'ES6'];
let [x, [y, z]] = ['hello', ['JavaScript', 'ES6']];
let [, , z] = ['hello', 'JavaScript', 'ES6'];
var person = {
name: '小明',
age: 20,
gender: 'male',
passport: 'G-12345678',
school: 'No.4 middle school'
};
var {name, age, passport} = person;

使用場景:
解構賦值在很多時候可以大大簡化代碼。例如，交換兩個變數x和y的值，可以這麼寫，不再需要臨時變數：
var x=1, y=2;
[x, y] = [y, x]

快速獲取當前頁面的功能變數名稱和路徑：
var {hostname:domain, pathname:path} = location;

 

http://www.joymood.cn:8080/test.php?user=admin&pwd=admin#login
location.href：得到整個如上的完整url
location.protocol：得到傳輸協議http:
location.host：得到主機名連同埠http://www.joymood.cn:8080/
location.hostname：得到主機名http://www.joymood.cn/
location.pathname：得到主機後部分不包括問號?後部分的/test.php
location.search：得到url中問號?之後井號#之前的部分?user=admin&pwd=admin
location.hash：得到#之前的部分#login

 


其實以我一年的編程經驗來看，所謂函數引用、對象引用、函數名其實都是記憶體中的一個地址，這個地址指向了某個函數或對象或方法，誰拿到了這個地址，誰就擁有了調用函數、調用方法的權利，所以所謂傳入函數作為參數，其實就是把這個地址傳給了另外一個函數，讓另外一個函數擁有操作這個函數的權利，我覺得就是這樣，大家覺得呢？

 


css的作用域是？執行順序？優先順序？：
!important > id > class > tag
important 比 內聯優先順序高

//粘性定位（目前支持性不是很好）
position: -webkit-sticky;
position: sticky;

 


小程式有哪幾種跳轉頁面的方式：
wx.switchTab：跳轉 app.json 的頁面（路由方式）
wx.navigateTo：跳轉到指定頁面，保存當前頁面。
wx.redirectTo：跳轉到指定頁面，關閉當前頁面。
wx.navigateBack：返回之前頁面,跳轉之前的頁面


那 es6 還新增了哪些東西？說你熟悉的舉例：
新增了 let、const
新增瞭解構賦值；還有字元串、數組、對象的諸多特性和方法
新增了模塊化功能寫法 export 和 import
新增了 Class 類繼承的語法糖
新增了 Promise 處理非同步
新增了箭頭函數 =>


window.onload 和 $(document).ready 有什麼區別？：
執行時間不同：
window.onload 必須等到頁面內包括圖片的所有元素載入完畢後再去執行。
$(document).ready() 時 DOM 結構回執完畢後就執行，不必等到載入完畢。

window.onload 不可同時編寫多個，如果有多個 window.onload方法，只會執行一個。
$(document).ready() 可以同時編寫多個，並且可以得到執行。

跨域如何實現？你一般什麼方式跨域：
JSONP、CORS、postMessage都可以實現跨域。
但 JSONP 只能實現 get 請求

 

什麼是閉包？：使用場景：1、閉包可以將一些不希望暴露在全局的變數封裝成“私有變數”。

在一些語言中，在函數中可以（嵌套）定義另一個函數時，如果內部的函數引用了外部的函數的變數，則可能產生閉包。閉包可以用來在一個函數與一組“私有”變數之間創建關聯關係。在給定函數被多次調用的過程中，這些私有變數能夠保持其持久性。（其變數是私有的，不會外泄，且擁有持久性）

1.在一個外函數中定義了一個內函數，內函數里運用了外函數的臨時變數，並且外函數的返回值是內函數的引用。這樣就構成了一個閉包。

2.一般情況下，在我們認知當中，如果一個函數結束，函數的內部所有東西都會釋放掉，還給記憶體，局部變數都會消失。但是閉包是一種特殊情況，如果外函數在結束的時候發現有自己的臨時變數將來會在內部函數中用到，就把這個臨時變數綁定給了內部函數，然後自己再結束。

①必須有一個內嵌函數(函數里定義的函數）——這對應函數之間的嵌套
②內嵌函數必須引用一個定義在閉合範圍內(外部函數里)的變數——內部函數引用外部變數
③外部函數必須返回內嵌函數——必須返回那個內部函數

<script type="text/javascript">
function name(n){
var pai = Math.PI;
var all = (function(i){
return pai*i*i
})(n)
return all
}
console.log(name(2));
</script>

<script type="text/javascript">
var scope = "global scope";
function checkScope() {
var scope = "local scope";
function f() {
return scope;
}
return f();
}
console.log(checkScope());//local scope
</script>


什麼是遞歸？：
自己調用自己

function sumRange(num) {
if (num === 1) return 1;
return num + sumRange(num - 1)
}
sumRange(3) // 6

1·函數 sumRange(3) 執行，sumRange(3) 壓棧，遇到 return 關鍵字，但這裡還馬上不能出棧，因為調用了 sumRange(num - 1) 即 sumRange(2)
2·所以，sumRange(2) 壓棧,以此類推，sumRange(1) 壓棧，
3·最後，sumRange(1) 出棧返回 1，sumRange(2) 出棧，返回 2，sumRange(3) 出棧
所以 3 + 2 + 1 結果為 6


利用遞歸實現數組扁平化：
<script type="text/javascript">
var arr = [1,2,[3,4,[5,6]]];
var arr2=[];
function digui(arr){
for(let i = 0;i<arr.length;i++){
var itme = arr[i];
if(Array.isArray(arr[i])){
digui(itme)
}else{
arr2.push(itme);
}
}
return arr2
}
console.log(digui(arr));
</script>

箭頭函數=> ES6標準新增了一種新的函數：Arrow Function（箭頭函數）。
箭頭函數語法：(parameters) => { statements } “x => x * x” =>前為攜帶參數，後面為表達式
如果沒有參數，那麼可以進一步簡化：() => { statements }
如果只有一個參數，可以省略括弧：parameters => { statements }


沒有局部this的綁定 ： 和一般的函數不同，箭頭函數不會綁定this。 或者說箭頭函數不會改變this本來的綁定。
1：箭頭函數寫代碼擁有更加簡潔的語法；
2：不會綁定this。
<script type="text/javascript">
function Counter() {
this.num = 0;
this.timer = setInterval(()=> {
this.num++;//其中this指向counter
console.log(this.num);
}, 1000);
}
var b = new Counter();
</script>

<script type="text/javascript">
function Counter() {
this.num = 0;
this.timer = setInterval(function add() {
this.num++;//其中this指向windows對象
console.log(this.num);
}, 1000);
}
</script>

 

Date：註意，當前時間是瀏覽器從本機操作系統獲取的時間，所以不一定准確，因為用戶可以把當前時間設定為任何值。

var now = new Date();
now; // Wed Jun 24 2015 19:49:22 GMT+0800 (CST)
now.getFullYear(); // 2015, 年份
now.getMonth(); // 5, 月份，註意月份範圍是0~11，5表示六月
now.getDate(); // 24, 表示24號
now.getDay(); // 3, 表示星期三
now.getHours(); // 19, 24小時制
now.getMinutes(); // 49, 分鐘
now.getSeconds(); // 22, 秒
now.getMilliseconds(); // 875, 毫秒數
now.getTime(); // 1435146562875, 以number形式表示的時間戳

 

正則：
^：表示行的開頭
$：表示行的結束

\w：匹配字母、數字、下劃線。等價於'[A-Za-z0-9_]'。
\W：匹配非字母、數字、下劃線。等價於 '[^A-Za-z0-9_]'。

\d：匹配一個數字字元。等價於 [0-9]。
\D：匹配一個非數字字元。等價於 [^0-9]。

RegExp對象的test()：方法用於測試給定的字元串是否符合條件。
var re = /^\d{3}\-\d{3,8}$/;
re.test('010-12345'); // true

匹配手機號：
function isPoneAvailable($poneInput) {
var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;
if (!myreg.test($poneInput.val())) {
return false;
} else {
return true;
}
}


json：

JSON.stringify()： 方法用於將 JavaScript 值轉換為 JSON 字元串。

var str = {"name":"菜鳥教程", "site":"http://www.runoob.com"}
str_pretty1 = JSON.stringify(str)
JSON.parse()： 方法用於將一個 JSON 字元串轉換為對象。將JSON數據解析為js原生值


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

-Advertisement-
Play Games
更多相關文章
  • (一) MySQL架構
    1.MySQL架構 MySQL擁有分層的架構，上層是伺服器層的服務和查詢執行引擎，下層是存儲引擎，真正負責數據的存儲和提取。 服務層包含了連接和線程處理，以及大多數MySQL的核心服務，如對SQL的解析、分析、優化和緩存等功能，存儲過程、觸發器和視圖都是在這裡實現的。 在MySQL中，實例和資料庫往 ...
  • Swift零基礎教程2019最新版（一）搭建開發環境
    Swift簡單介紹 Swift是蘋果強力推薦的新型開發語言，能開發蘋果下屬所有軟體平臺（iOS,iPadOS,macOS,watchOS,tvOS）初學者如果想進入蘋果的開發體系，從Swift開始學習是最好的選擇。 Swift開發環境搭建 首先要有一臺mac，不推薦使用黑蘋果，會浪費大量的時間在莫名 ...
  • TweenMax—ScrambleText插件 實現類似電腦破譯密碼的特效
    首先貼一下TweenMax的中文網：https://www.tweenmax.com.cn/ 首先先展示一下最後的效果，需要的就繼續看下去： 那團亂碼是會一直變的 那麼如何實現上圖的效果呢？？？ 其實就是運用了TweenMax的插件ScrambleTextPlugin（在這個頁面可以下載：https ...
  • js方法總結，不斷更新...
    1. 返回<li> 元素父節點: document.getElementById("item1").parentNode; 2. ...
  • js - 立即執行函數終於看懂了
    問題引入：我們寫函數，就是為了使我們的代碼更加模塊化，然後，提高代碼的重用。但是，有些函數，從定義到整個函數就運行了一遍。但是這個函數依然存在，就占用了大量的記憶體。那有沒有一種函數，執行完了之後，就不存在了的呢？ 1、什麼是匿名函數 聲明一個函數，並馬上調用這個匿名函數就叫做立即執行函數；也可以說立 ...
  • 劍指前端（前端入門筆記系列）——DOM（元素大小）
    DOM——元素大小 DOM——元素大小 DOM中沒有規定如何確定頁面中與元素的大小，IE率先映入了一些屬性來確定頁面中元素的大小，以便開發人員使用，目前，所有主要的瀏覽器都已經支持這些屬性了。 1.偏移量（單位為像素） 首先介紹的屬性涉及偏移量，包括元素在屏幕上占用的所有可見的空間。元素的可見大小由 ...
  • Web基礎--JavaScript入門
    一、JavaScript 1、什麼是JavaScript（JS） （1）JavaScript是嵌入HTML中的代碼，在瀏覽器中執行的腳本語言，具有與Java和C語言類似的語法。（2）一種網頁編程技術，用來向HTML頁面添加交互行為。（3）直接嵌入HTML頁面中。（4）由瀏覽器解釋代碼並執行代碼，不進 ...
  • 原生JS實現上拉下拉列表
    話不多說，代碼上來，有些知識點直接就在註釋里 HTML CSS JavaScript ...
一周排行
    -Advertisement-
    Play Games
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類