摘要:與的區別如何理解和熟練運用中的及,動態改變裝換為數組返回的是數組,但是本身保持不變借用別人的方法實現繼承封裝對象保證的指向刪除或替換數組元素方法與方法的作用是不同的,方法會直接對數組進行修改。
《JavaScript經典實例》各節中的完整代碼解決了常見的編程問題,并且給出了在任何瀏覽器中構建Web應用程序的技術。只需要將這些代碼示例復制并粘貼到你自己的項目中就行了,可以快速完成工作,并且在此過程中學習JavaScript的很多知識。第1章 JavaScript不只是簡單的構件塊 1.1 JavaScript對象、基本類型和字面值之間的區別
5種基本類型:字符串、數值、布爾值、null、undefined,有3個有對應的構造方法對象:string、Number、Boolean
基本類型變量嚴格等于字面值,而對象實例則不會,因為基本類型是按值來比較的,而值是字面值
var num1 = 123; var num2 = new Number(123); console.log(typeof num1); //number console.log(typeof num2); //object1.2 從字符串提取一個列表
提取之前:This is a list of items: cherries, limes, oranges, apples.
提取之后:["cherries","limes","oranges","apples"]
indexOf() 方法可返回某個指定的字符串值在字符串中首次出現的位置。
substring() 方法用于提取字符串中介于兩個指定下標之間的字符。
split() 方法用于把一個字符串分割成字符串數組。
var sentence = "This is one sentence. This is a sentence with a list of items: cherries, oranges, apples, bananas. That was the list of items."; var start = sentence.indexOf(":"); var end = sentence.indexOf(".", start+1); var listStr = sentence.substring(start+1, end); var fruits = listStr.split(","); console.log(fruits); //[" cherries", " oranges", " apples", " bananas"] //取出空格等 fruits.forEach(function(elmnt,indx,arry) { arry[indx] = elmnt.trim(); }); console.log(fruits); //["cherries", "oranges", "apples", "bananas"]1.3 檢查一個存在的、非空的字符串
想要驗證一個變量已經定義了,是一個字符串,并且它不為空
if(typeof unknowVariable === "string" && unknowVariable.length > 0) {...}1.4 插入特殊字符
想要向字符串中插入一個特殊字符,例如一個換行
轉義序列都以一個反斜杠 開始()
1.5 使用新字符串替換模式使用String對象的replace方法和一個 正則表達式
replace() 方法用于在字符串中用一些字符替換另一些字符,或替換一個與正則表達式匹配的子串。
正則表達式特殊字符字符 | 匹配 | 例子 |
---|---|---|
^ | 匹配輸入的開頭 | /^This/ 匹配This is... |
$ | 匹配輸入的結束 | /end$/ 匹配This is the end |
* | 匹配0次或多次 | /se*/ 匹配s seeee或se |
? | 匹配0次或1次 | /ap?/ 匹配apple and and |
+ | 匹配1次或多次 | /ap+/ 匹配apple 但是不匹配and |
{n} | 嚴格匹配n次 | /ap{2}/ 嚴格匹配apple 但是不匹配apie |
{n,} | 匹配n次或多次 | /ap{2,}/ 匹配apple中的p,但是不匹配apie中的p |
{n,m} | 至少匹配n次,之多匹配m 除換行以外的任何字符 |
/ap{2,4}/ 匹配apppppple中的4個p /a.e/ 匹配ape和axe |
[...] | 方括號中的任何字符 | /a[px]e/ 匹配ape axe 但是不匹配apxe |
1 | 除了方括號以外的任何字符 | /a2/ 匹配ale 但是不匹配ape axe |
b | 匹配單詞邊界 | /bno/ 匹配nono中的第一個no |
B | 匹配非單詞邊界 | /Bno/ 匹配nono中的第二個no |
d | 數字0到9 | /d{3}/ 匹配Now in 123 中的123 |
D | 匹配任何非數字字符 | /D{2,4}/ 匹配Now in 123 中的Now in |
w | 匹配任何單詞字符(字母、數組和下劃線 | /w/ 匹配javaScript中的j |
W | 匹配任何非單詞字符(非字母、數組和下劃線) | /W/ 匹配100%中的% |
n | 匹配一個換行 | |
s | 一個單個的空白字符 | |
S | 一個單個的非空白字符 | |
t | 一個制表符 | |
(x) | 捕獲括號 | 記住匹配的字符 |
var searchString = "Now is the time, this is the tame"; var re = /tw{2}e/g; var replacement = searchString.replace(re, "place"); console.log(replacement); //Now is the place, this is the place1.6 找到并突出顯示一個模式的所有實例
RegExp exec() 方法用于檢索字符串中的正則表達式的匹配
RegExpObject.exec(string)
返回一個數組,其中存放匹配的結果。如果未找到匹配,則返回值為 null
var searchString2 = "Now is the time and this is the time and that is the time"; var parttern = /tw*e/g; //w 匹配任何單詞字符 var matchArray; var str = ""; //用regexp exec檢查模式,如果不為空,處理它 while((matchArray = parttern.exec(searchString2)) != null) { str += "at " + matchArray.index + " we found " + matchArray[0] + " "; } console.log(str); // at 7 we found the // at 11 we found time // at 28 we found the // at 32 we found time // at 49 we found the // at 53 we found time
//實例1-1
document.getElementById("searchSubmit").onclick = function() {
//獲取模式
var pattern = document.getElementById("pattern").value;
var re = new RegExp(pattern, "g");
//獲取字符串
var searchString = document.getElementById("inComing").value;
var matchArray;
var resultString = "";
var first = 0;
var last = 0;
//找到每一個匹配
while((matchArray = re.exec(searchString)) != null) {
last = matchArray.index;
//獲取所有匹配的字符串,將其連接起來
resultString += searchString.substring(first, last);
//使用class,添加匹配的字符串
resultString += "" + matchArray[0] + "";
first = re.lastIndex;
}
//完成字符串
resultString += searchString.substring(first, searchString.length);
resultString += "
";
//插入頁面
document.getElementById("searchResult").innerHTML = resultString;
}
1.7 使用捕獲圓括號交換一個字符串中的單詞
交換名稱,讓姓氏先出現
解決:使用捕獲圓括號和一個正則表達式在字符串中找到并記住他們的名字,然后互換他們
replace() 方法用于在字符串中用一些字符替換另一些字符,或替換一個與正則表達式匹配的子串。
字符 | 替換文本 |
---|---|
$1、$2、...、$99 | 與 regexp 中的第 1 到第 99 個子表達式相匹配的文本。 |
$& | 與 regexp 相匹配的子串。 |
$` | 位于匹配子串左側的文本。 |
$" | 位于匹配子串右側的文本。 |
$$ | 允許替換中有一個字面值美元符號($) |
$n | 插入使用RegExp的第n次捕獲圓括號的值 |
var myName = "Tao Yang"; var nameRe = /^(w+)s(w+)$/; var myNewName = myName.replace(nameRe, "$2 $1"); console.log(myNewName); //Yang Tao1.8 使用命名實體來替代HTML標簽
使用正則表達式把尖括號(<>)轉換為命名的實體:<和>
var pieceOfHtml = "1.9 ISO 8610格式的日期轉換為Date對象可接受的一種形式This is a paragraph
"; pieceOfHtml = pieceOfHtml.replace(//g, ">"); console.log(pieceOfHtml); //This is a paragraph
var dtstr = "2014-3-04T19:35:32Z"; dtstr = dtstr.replace(/D/g, " "); console.log(dtstr); //2014 3 04 19 35 32 var dtcomps = dtstr.split(" "); //在基于1的ISO 8610月份和基于0的日期格式之間轉換 dtcomps[1]--; var convdt = new Date(Date.UTC.apply(null, dtcomps)); console.log(convdt.toString()); //Wed Mar 05 2014 03:35:32 GMT+0800 (中國標準時間)1.10 使用帶有定時器的函數閉包
使用一個匿名函數作為setInterval()或setTimeout()方法調用的第一個參數
var intervalId = null; document.getElementById("redbox").addEventListener("click", startBox, false); function startBox() { if(intervalId == null) { var x = 100; intervalId = setInterval(function() { x += 5; var left = x + "px"; document.getElementById("redbox").style.left = left; }, 500); } else { clearInterval(intervalId); intervalId = null; } }1.11 記錄兩個事件之間消耗的時間
在第一個事件發生的時候,創建一個Date對象,當第二個時間發生的時候,創建一個新的Date對象,并且從第二個對象中減去第一個對象。兩者之間的差以毫秒表示的,要轉換為秒,就除以1000
兩個日期可以相減,但是相加就成了拼接字符串
var firstDate = new Date(); setTimeout(function() { doEvent(firstDate); }, 25000); function doEvent() { var secondDate = new Date(); var diff = secondDate - firstDate; console.log(diff); //25001 }1.12 十進制數轉化為十六進制值
使用Number對象的 toString() 方法
var num = 255; console.log(num.toString(16)); //ff1.13 想要將表中一列的所有數字加和
遍歷表中包含了數字值的列,將其轉換為數字,并加和
querySelector() 方法返回文檔中匹配指定 CSS 選擇器的一個元素
如果你需要返回所有的元素,請使用 querySelectorAll() 方法替代
全局函數 parseInt() 和 parseFloat() 都把字符串轉化為數字
var sum = 0; //使用querySelectorAll找到第二列的所有單元格 var cells = document.querySelectorAll("td:nth-of-type(2)"); for(var i=0, l=cells.length; i1.14 在角度和弧度之間轉換 將角度轉換為弧度
var radians = degrees * (Math.PI / 180);將弧度轉化為角度
var degrees = radians * (180 / Math.PI);1.15 找到頁面元素可容納的一個圓的半徑和圓心Math.min(x,y)方法可返回指定的數字中帶有最低值的數字。
求出寬度和高度中較小的一個,用其除以2得到半徑
var circleRadius = Math.min(elemengWidth, elemengHeight) / 2;給指定頁面元素的寬度、高度,通過將二者都除以2來找到其中心點
var x = elemengWidth / 2; var y = elemengHeight / 2;Window.getComputedStyle()方法給出應用活動樣式表后的元素的所有CSS屬性的值,并解析這些值可能包含的任何基本計算。
getComputedStyle()
1.16 計算圓弧的長度將一個SVG圓放入到一個div元素中 給定了一個圓的半徑及圓弧角的角度值,求該圓弧的長度
使用Math.PI把角度轉換為弧度,并在公式中使用該結果來求得圓弧的長度
var radians = degrees * (Math.PI / 180); var arclength = radians * radians;第2章 JavaScript數組 2.1 在數組中搜索indexOf()、lastIndexOf()
var animals = new Array("dog", "cat", "seal", "elephant", "walrus", "lion"); var index = animals.indexOf("cat"); var index2 = animals.lastIndexOf("lion"); console.log("i",index); //1 console.log("i2",index2); //5findIndex() 方法返回傳入一個測試條件(函數)符合條件的數組第一個元素位置。
var nums = [2, 4, 199, 80, 400, 30, 90]; var over = nums.findIndex(function(ele) { return (ele >= 100); }); console.log("nums",nums[over]); //1992.2 用concat()和apply()將一個二維數組扁平化
concat() 方法用于連接兩個或多個數組。該方法不會改變現有的數組,而僅僅會返回被連接數組的一個副本。
arrayObject.concat(arrayX,arrayX,......,arrayX)
var fruitarray = []; fruitarray[0] = ["stranwberry", "orange"]; fruitarray[1] = ["lime", "peach", "banana"]; fruitarray[2] = ["tangerine", "apricot"]; console.log("array",fruitarray.concat()); var newArray = fruitarray.concat.apply([], fruitarray); console.log(newArray);apply()與call()的區別
如何理解和熟練運用js中的call及apply?
obj.call(thisObj, arg1, arg2, ...);
obj.apply(thisObj, [arg1, arg2, ...]);
call() & apply(),動態改變this
function add(a, b) { console.log("add", this); } function sum(a, b) { console.log("sum", this); } add(1, 2); //Window sum(1, 2); //Window add.call(sum, 1, 2); //sum(a, b) sum.call(add, 1, 2); //add(a ,b)arguments裝換為數組, 返回的是數組,但是arguments本身保持不變
var arg = [].slice.call(arguments); // [].slice.call(document.getElementsByTagName("li"));借用別人的方法
var foo = { name: "jack", showName: function() { console.log("this name:",this.name); } } var bar = { name: "rose" } foo.showName(); //jack foo.showName.call(bar); //rose實現繼承
var Student = function(name, age, high) { Person.call(this, name, age); this.high = high; }封裝對象保證this的指向
var _this = this; _this.$box.on("mousedown", function()) { return _this.fndown.apply(_this); }2.3 刪除或替換數組元素splice() 方法與 slice() 方法的作用是不同的,splice() 方法會直接對數組進行修改。
var animals = new Array("dog", "cat", "rabbit", "pig", "apple"); // 從數組刪除元素 animals.splice(animals.indexOf("apple"), 1); console.log(animals); // ["dog", "cat", "rabbit", "pig"] // 替換 animals.splice(animals.indexOf("pig"), 1, "monkey"); console.log(animals); //["dog", "cat", "rabbit", "monkey"] // 使用循環和分割來替換和刪除元素 var charSets = ["ab", "bb", "cd", "ab", "cc", "ab", "dd", "ab"]; while(charSets.indexOf("ab") != -1) { charSets.splice(charSets.indexOf("ab"), 1, "**"); } console.log(charSets); //["**", "bb", "cd", "**", "cc", "**", "dd", "**"] while(charSets.indexOf("**") != -1) { charSets.splice(charSets.indexOf("**"), 1); } console.log(charSets); //["bb", "cd", "cc", "dd"]2.4 提取一個數組中的一部分不更改原數組,使用slice()
var animals = new Array("dog", "cat", "rabbit", "pig", "apple"); var newAnimals = animals.slice(1, 2); console.log(animals); //["dog", "cat", "rabbit", "pig", "apple"] console.log(newAnimals); //["cat"]2.5 對每一個數組元素應用一個函數Array.prototype.forEach()
var charSets = ["ab", "bb", "cd", "ab", "cc", "ab", "dd", "ab"]; charSets.forEach(function(element, index, array) { if(element == "ab") array[index] = "**"; }); console.log(charSets); //["**", "bb", "cd", "**", "cc", "**", "dd", "**"]2.6 使用forEach()和call()遍歷querySelectorAll()的結果querySelectorAll()
可以將forEach()強制和一個NodeList一起使用
var cells = document.querySelectorAll("td + td"); [].forEach.call(cells, function(cell) { sum += parseFloat(cell.firstChild.data); });2.7 對數組中的每個元素執行一個函數并返回一個新數組將一個十進制的數組轉化為新的等價的十六進制數組
map()方法創建一個新數組,其結果是該數組中的每個元素都調用一個提供的函數后返回的結果。
與forEach()不同,不會修改原數組,但是必須返回一個值
var decArray = [23, 3, 24, 45, 500, 9, 70]; var hexArray = decArray.map(function(ele) { return ele.toString(16); }); console.log(decArray); //[23, 3, 24, 45, 500, 9, 70] console.log(hexArray); //["17", "3", "18", "2d", "1f4", "9", "46"]2.8 創建一個過濾后的數組filter() 方法創建一個新數組, 其包含通過所提供函數實現的測試的所有元素。
var charSet = ["**", "bb", "cc", "**", "cd"]; var newArray = charSet.filter(function(element, index, array) { return element != "**"; }); console.log(newArray); //["bb", "cc", "cd"]2.9 驗證數組內容使用Array every()方法來檢查每個元素是否符合給定的條件
some() 方法確保至少某些元素符合該條件
區別:every()方法只要函數返回一個false值,處理就會結束,而some()方法會繼續測試每個元素,直至返回true,此時,不再驗證其他元素,即可返回ture
function testValue(element, index, array) { var testExp = /^[a-zA-Z]+$/; return testExp.test(element); } var elemSet = ["**", 123, "adv", "-", 45, "AAA"]; var result = elemSet.every(testValue); var result2 = elemSet.some(testValue); console.log(result); //false console.log(result2); //true var elemSet2 = ["aaa", "animals", "vvv"]; result = elemSet2.every(testValue); result2 = elemSet2.some(testValue); console.log(result); //true console.log(result2); //true2.10 使用一個關聯數組來存儲表單元素名和值keys() 方法返回一個新的Array迭代器,它包含數組中每個索引的鍵。
var elemArray = {}; var elem = document.forms[0].elements[0]; elemArray[elem.id] = elem.value; var elemArray = {name: "yt", age:25}; Object.keys(elemArray).forEach(function(key) { var value = elemArray[key]; console.log(value); });第3章 JavaScript的構建塊 3種基本的創建函數方式:* 聲明式函數 * 匿名函數或函數構造函數 * 函數字面值或函數表達式3.1 放置函數并提升聲明式函數,可以放置在代碼中的任何位置;函數表達式,必須將其放置在使用函數的位置之前
// 在聲明一個變量之前打印a console.log("a", a); //undefined var a; // 在聲明一個變量并賦值 console.log("aa", aa); //undefined var aa = 1; // 聲明變量發生了提升,但是賦值并沒有,賦值是在相應的位置發生的 // 聲明式函數,在訪問該函數之前,提升將確保把函數聲明移動到當前作用域的頂部 console.log(mytest()); //success function mytest() { return "success"; } // 使用函數表達式就會報錯,變量可能聲明了,但沒有實例化,但是你的代碼試圖將這個變量當做一個函數對待 console.log(mytest2()); //TypeError: mytest2 is not a function var mytest2 = function() { return "success2"; }3.2 把一個函數當做參數傳遞給另一個函數function otherFunction(x, y, z) { x(y, z); } // 可以像傳遞一個命名的變量一樣,將一個函數作為參數傳遞給另一個函數 var param = function func(a1, a2) { alert(a1 + " " + a2); }; otherFunction(param, "Hello", "World");
函數式編程和JavaScript
高階函數: 一個函數接受另一個函數作為參數,或者返回一個函數,或者兩者都具備
函數式編程: 對應用程序復雜性進行抽象的一種方式,使用整齊、干凈的函數調用替代了復雜的循環和條件語句(代碼可讀性高)
比如:將數組中的所有數字相加
// for循環相加 var nums = [1, 34, 3, 15, 4, 18]; var sum = 0; for(var i = 0; i < nums.length; i++) { sum += nums[i]; } console.log("sum", sum); //75 var nums2 = [1, 34, 3, 15, 4, 18]; var sum2 = nums2.reduce(function(n1, n2) { return n1 + n2; }); console.log("sum2", sum2); //75[arr.reduce([callback, initialValue])](https://developer.mozilla.org... 方法接收一個函數作為累加器(accumulator),數組中的每個值(從左到右)開始縮減,最終為一個值。
3.3 實現遞歸算法
* 想要實現一個函數,它遞歸地遍歷一個數組并返回一個反向的數組字符串 * 缺點:遞歸很消耗內存// 階乘 function factorial(n) { return n == 1 ? n : n * factorial(n - 1); } console.log("階乘", factorial(4)); // 24 // 斐波那契 var fibonacci = function(n) { return n < 2 ? n : fibonacci(n - 1) + fibonacci(n - 2); } console.log("斐波那契", fibonacci(10)); //55 // 使用一個遞歸函數字面值來反轉數組元素,從最大長度開始,每次迭代都將這個值自減 // 當為 0 時,返回字符串 var reverseArrary = function(x, index, str) { return index == 0 ? str : reverseArrary(x, --index, (str += " " + x[index])); } var arr = ["apple", "orange", "peach", "lime"]; var str = reverseArrary(arr, arr.length, ""); console.log("str", str); //lime peach orange apple // 如果要反過來,按照順序把數組連接為一個字符串 var orderArray = function(x, i, str) { return i == x.length - 1 ? str : orderArray(x, ++i, (str += x[i] + " ")); } var numArr = [1, 2, 3, 4]; var numStr = orderArray(numArr, -1, ""); console.log("numStr", numStr); //1 2 3 43.4 使用一個定時器和回調防止代碼阻塞* 在程序的輸出中,3個外圍的 `console.log()` 立即被處理了 * 隊列中下一個事件是第一個 `noBlock()` 函數調用,其中又調用了 `factorial()` ,記錄了其運行時候的活動,最后跟著回調函數的調用 * 第二次同樣地調用了 `callBack()` * 第三次調用 `callBack()` 的時候,回調函數中的調用針對第一次 `callBack()` ,并使用了第一次函數調用的最終結果:6... ? px ?
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/93206.html
摘要:大家都知道是解釋型語言,既然是解釋型語言,就是編譯一行,執行一行,那又何來預編譯一說呢腳本執行引擎都做了什么呢今天我們就來看看吧。全局域就是一切聲明的全局變量,全是的屬性等同于函數預編譯發生在函數執行前一刻。 大家都知道JavaScript是解釋型語言,既然是解釋型語言,就是編譯一行,執行一行,那又何來預編譯一說呢?腳本執行js引擎都做了什么呢?今天我們就來看看吧。 1-JavaScr...
摘要:哪吒社區技能樹打卡打卡貼函數式接口簡介領域優質創作者哪吒公眾號作者架構師奮斗者掃描主頁左側二維碼,加入群聊,一起學習一起進步歡迎點贊收藏留言前情提要無意間聽到領導們的談話,現在公司的現狀是碼農太多,但能獨立帶隊的人太少,簡而言之,不缺干 ? 哪吒社區Java技能樹打卡?【打卡貼 day2...
摘要:前言今天和大家一起聊聊的推薦書籍,每一本都是精選,做前端開發的朋友們如果沒讀過,可以嘗試一下。如果怕麻煩,也可以關注曉舟報告,發送獲取書籍,四個字,就可以得到電子書的提取碼。 前言 今天和大家一起聊聊JavaScript的推薦書籍,每一本都是精選,做前端開發的朋友們如果沒讀過,可以嘗試一下。下面給大家簡單介紹了書的內容,還有讀書的方法,希望可以幫大家提升讀書效率。 一、《JavaScr...
摘要:前言月份開始出沒社區,現在差不多月了,按照工作的說法,就是差不多過了三個月的試用期,準備轉正了一般來說,差不多到了轉正的時候,會進行總結或者分享會議那么今天我就把看過的一些學習資源主要是博客,博文推薦分享給大家。 1.前言 6月份開始出沒社區,現在差不多9月了,按照工作的說法,就是差不多過了三個月的試用期,準備轉正了!一般來說,差不多到了轉正的時候,會進行總結或者分享會議!那么今天我就...
閱讀 1266·2021-10-14 09:50
閱讀 1567·2019-08-30 15:54
閱讀 1023·2019-08-30 11:22
閱讀 2916·2019-08-30 10:50
閱讀 1801·2019-08-29 18:39
閱讀 3050·2019-08-29 13:07
閱讀 2079·2019-08-28 17:54
閱讀 751·2019-08-26 17:44