摘要:函數(shù)可以沒有返回值,會在最后面返回一個。事物的行為在對象中用方法來表示。
11. 函數(shù) 11.1 函數(shù)的基礎知識
為什么會有函數(shù)?
在寫代碼的時候,有一些常用的代碼需要書寫很多次,如果直接復制粘貼的話,會造成大量的代碼冗余;函數(shù)可以封裝一段重復的javascript代碼,它只需要聲明一次,就可以多次調用;
冗余代碼:
冗余:多余的重復或啰嗦內容
缺點:
代碼重復,可閱讀性差
不易維護,如果代碼邏輯變了,所有地方的代碼都要跟著改,效率太低了
11.2 函數(shù)的聲明與調用函數(shù)聲明的語法:
var 是用來聲明變量的, 函數(shù)是用function來聲明的,一個函數(shù)一般是用來做一件事情的。
function 函數(shù)名 (){ //函數(shù)體 }
函數(shù)聲明的時候,函數(shù)體并不會執(zhí)行,只要當函數(shù)被調用的時候才會執(zhí)行。
調用函數(shù)的語法:
函數(shù)名();
函數(shù)體只有在調用的時候才會執(zhí)行,調用需要()進行調用。可以調用多次
示例代碼:
// 聲明函數(shù) function sayHi (){ // 函數(shù)體 console.log("Hi!!"); } // 調用這個函數(shù) sayHi(); // console.log("Hi!!"); // 注意 console.log(sayHi); // 打印的是整個函數(shù) // sayHi:指的就是這個函數(shù) // ():指的是調用 // sayHi():這個函數(shù)的調用結果12.3 聲明函數(shù)的兩種方式
1、函數(shù)聲明(命名函數(shù)):
// 聲明一個函數(shù)并且命名了 function 函數(shù)名(){ 函數(shù)體; } 函數(shù)名(); // 調用函數(shù) /********示例代碼***********/ function fn(){ console.log("哈哈哈"); } fn();
2、函數(shù)表達式(匿名函數(shù)):
// 必須先聲明才能調用 var 函數(shù)名 = function(){ 函數(shù)體; } 函數(shù)名(); // 調用函數(shù) /********示例代碼***********/ var fn = function(){ console.log("哈哈哈"); } fn();
這兩種函數(shù)的區(qū)別:
命名函數(shù)可以先調用,再聲明,因為預解析
函數(shù)表達式必須先聲明,再調用(在DOM中注冊事件的時候用的非常的多)
匿名函數(shù):
沒有名字的函數(shù),叫做匿名函數(shù)。匿名函數(shù)沒有辦法直接用,需要賦值給變量或者自調用
自調用函數(shù)也叫自執(zhí)行函數(shù),聲明和調用一起
可以防止變量全局污染
匿名函數(shù)自調用示例代碼:
(function(n1,n2){ console.log(n1); // 1 console.log(n2); // 2 var name = "張三" var age = 18; function sayHello() { console.log(age); // 18 console.log(name); // "張三" } sayHello(); })(1,2)11.4 函數(shù)的參數(shù)
形式參數(shù): 在聲明一個函數(shù)的時候,為了函數(shù)的功能更加靈活,有些值是固定不了的,對于這些固定不了的值。我們可以給函數(shù)設置參數(shù)。這個參數(shù)沒有具體的值,僅僅起到一個占位置的作用,我們通常稱之為形式參數(shù),也叫形參。實際參數(shù): 如果函數(shù)在聲明時,設置了行參,那么在函數(shù)調用的時候就需要傳入對應的參數(shù),我們把傳入的參數(shù)叫做實際參數(shù),也叫實參。
語法:
//帶參數(shù)的函數(shù)聲明 function 函數(shù)名(形參1, 形參2, 形參...){ //函數(shù)體 } //帶參數(shù)的函數(shù)調用 函數(shù)名(實參1, 實參2, 實參3);
特點:
在函數(shù)調用的時候,需要傳遞對應的參數(shù),把實參的值賦值給形參。
實參如果多于形參的個數(shù):多傳的參數(shù)就丟棄了
實參如果少于形參的個數(shù):沒有傳的參數(shù),值就是undefined。(容易出問題)
示例代碼:
// 設置兩個形參 function getSum(num1,num2){ console.log(num1+num2); } // 調用的時候傳兩個值進去 getSum(10,20); // 打印出來就是 30
計算n1-n2之間所有數(shù)的乘積:
function getProduct(n1, n2) { var product = 1; for (var i = n1; i <= n2; i++) { product *= i; } console.log(product); } getProduct(1, 5); // 12011.5 函數(shù)的返回值
當函數(shù)執(zhí)行完的時候,我們期望函數(shù)給我一些反饋(比如計算的結果),這個時候可以讓函數(shù)返回一些東西。也就是返回值。函數(shù)通過return返回一個返回值
返回值語法:
//聲明一個帶返回值的函數(shù) function 函數(shù)名(形參1, 形參2, 形參...){ //函數(shù)體 return 返回值; } //可以通過變量來接收這個返回值 var 變量 = 函數(shù)名(實參1, 實參2, 實參3);
函數(shù)的調用結果就是返回值,因此我們可以直接對函數(shù)調用結果進行操作。
示例代碼:
// 計算 n1- n2之間所有數(shù)的乘積 function getProduct(n1, n2) { var product = 1; for (var i = n1; i <= n2; i++) { product *= i; } return product; // 返回計算的值 } var pro = getProduct(1, 5); // 用變量pro接收一下返回的值 console.log(pro); // 120
注意:
函數(shù)一碰到return,就代表函數(shù)結束了。return后面的代碼不會執(zhí)行了。
函數(shù)可以沒有返回值, 會在最后面返回一個undefined。
11.6 函數(shù)三要素函數(shù)三要素包括:
函數(shù)名
參數(shù)
返回值
11.7 文檔注釋關于文檔注釋,javascript中還有一種注釋叫做文檔注釋,經常用在函數(shù)聲明處,用來解釋這個函數(shù)的作用。
文檔注釋: /** 這是文檔注釋 */
以后寫的函數(shù)的聲明,都應該加上文檔注釋,方便閱讀
示例代碼:
/** * 求圓的面積 * @param r {number} 圓的半徑 * @returns {number} 圓的面積 */ function getArea (r) { return Math.PI * r * r; }11.8 函數(shù)綜合練習
1、對任意數(shù)組從小到大排序
// 封裝一個從小到大冒泡排序的函數(shù) function bubbleSort(arr){ for(var i = 0; i < arr.length - 1; i++){ var flag = true; for(var j = 0; j < arr.length -1 -i; j++){ if(arr[j] >arr[j+1]){ flag =false; var temp = arr[j]; arr[j] = arr[j+1]; arr[j + 1] = temp; } } if(flag){ break; } } return arr; } console.log(bubbleSort([12, 56, 14, 68, 45, 25, 17, 33])); console.log(bubbleSort([25, 65, 48, 11, 15, 54, 24, 63]));
2、求任意數(shù)的階乘(從1到n的積)
function getProduct (n){ var product = 1; for(var i = 1; i <= n; i++){ product *= i; } return product; } console.log(getProduct(5)); // 120 console.log(getProduct(3)); // 6
3、求任意數(shù)組中的最大值與最小值
function getMaxAndMin(arr) { var max = arr[0]; var min = arr[0]; for (var i = 0; i < arr.length; i++) { if (max < arr[i]) { max = arr[i]; } if (min > arr[i]) { min = arr[i]; } } return [max, min]; // 返回一個數(shù)組 } console.log(getMaxAndMin([11, 45, 59, 12, 8, 36, 14, 25])); // [59 8]11.9 函數(shù)的作用域
在函數(shù)中,只有全局作用域和函數(shù)作用域,因為在if、while、for等語句中定義的變量都是全局變量。
全局變量: 在最外層聲明的變量就是全局變量,全局變量在任何地方都能訪問的到。
局部變量: 在函數(shù)中聲明的變量,就是局部變量,局部變量只有在當前函數(shù)體內能夠訪問。
隱式全局變量: 沒有使用var定義的變量也是全局變量。
作用域: 變量可以發(fā)揮作用的區(qū)域
全局作用域: 在script標簽內,函數(shù)外定義的作用域就是全局作用域。在全局作用域中定義的變量都是全局變量。
函數(shù)作用域: 在函數(shù)中的區(qū)域叫做函數(shù)作用域,在函數(shù)作用域中定義的變量就是局部變量,只能在當前函數(shù)內訪問。
11.10 預解析js解析器執(zhí)行js代碼的時候,分為兩個過程:預解析過程和代碼執(zhí)行過程
預解析過程:
把變量的聲明提升到當前作用域的最前面,只會提升聲明,不會提升賦值。
把函數(shù)的聲明提升到當前作用域的最前面,只會提升聲明,不會提升調用。
先提升var,再提升function
預解析例題:
第一題:
console.log(a); // 打印a這個函數(shù)整體 var a = 1; function a(){ console.log("呵呵"); } console.log(a); // 1 // 預解析后為 /** var a; function a(){ console.log("呵呵"); } console.log(a); // 打印a這個函數(shù)整體 a = 1; console.log(a); // 1 */
第二題:
var num = 10; fn1(); function fn1() { //在函數(shù)調用的時候,這個函數(shù)也會做預解析操作。 console.log(num); // undefined var num = 20; console.log(num); // 20 } console.log(num); // 10 // 預解析后為 /** var num ; function fn1() { var num; console.log(num); // undefined num = 20; console.log(num); // 20 } num = 10; fn1(); console.log(num); // 10 */
第三題:
var a = 18; var b = 30; fn(); function fn() { var b = 9; console.log(a); // undefined console.log(b); // 9 var a = 20; } // 預解析后為 /** var a; var b; function fn() { var b; b = 9; var a; console.log(a); // 自己作用域里有的就不要出去找 console.log(b); // 9 a = 20; } a = 18; b = 30; fn(); */
第四題:
fn(); var b = 10; console.log(c); // 9 console.log(b); // 10 console.log(a); // 報錯 function fn() { var a = 9; b = 9; c = 9; console.log(a); // 9 console.log(b); // 9 console.log(c); // 9 } // 預解析之后 /** var b; function fn() { var a; a = 9; b = 9; c = 9; console.log(a); // 9 console.log(b); // 9 console.log(c); // 9 } fn(); b = 10; console.log(c); // 9 console.log(b); // 10 console.log(a); // 報錯 */
第五題:
function fn() { console.log(num1); // undefined console.log(num2); // undefined console.log(num3); // 30 var num1 = 10; var num2 = 20; num3 = 40; console.log(num1); // 10 console.log(num2); // 20 console.log(num3); // 40 } var num1 = 20; var num3 = 30; fn(); console.log(num1); // 20 console.log(num3); // 40 console.log(num2); // 報錯 // 預解析之后 /** var num1; var num3; function fn() { var num1; var num2; console.log(num1); // undefined console.log(num2); // undefined console.log(num3); // 30 num1 = 10; num2 = 20; num3 = 40; console.log(num1); // 10 console.log(num2); // 20 console.log(num3); // 40 } num1 = 20; num3 = 30; fn(); console.log(num1); // 20 console.log(num3); // 40 console.log(num2); // 報錯 */11.11 遞歸函數(shù)
函數(shù)直接或者間接調用自己,必須要留出口,不然就調死了
示例代碼:
// 用遞歸求1-100的和 /* 之前封裝過一個getSum的函數(shù)比如getSum(100),就是求的1-100的和 現(xiàn)在我們可以這樣理解: 1-100的和我們可以看做是 100 + getSum(99) getSum(99) 可以看成 99 + getSum(98)。。。 依次這樣推下去,但是要注意,到getSum(1)的時候,要留出口,否則會一直死循環(huán)下去 */ function getSum(n) { if (n == 1) { // 一定要留出口 return 1; } return n + getSum(n - 1); } console.log(getSum(100));11.12 回調函數(shù)
回調函數(shù):把函數(shù)當成參數(shù)來使用,那么這個函數(shù)就叫回調函數(shù)。函數(shù)也是一種數(shù)據(jù)類型
示例代碼:
/* 思考,之前封裝了一個bubbleSort排序的函數(shù),但是只能排元素是數(shù)字的數(shù)組 現(xiàn)在想要判斷字符串的長度,或者對象的屬性的時候就很麻煩,就需要重新寫一個函數(shù) 比如字符串長度,就需要是arr[j].length - arr[i+1].length */ function bubbleSort(arr, fn) { for (var i = 0; i < arr.length; i++) { var flag = true; for (var j = 0; j < arr.length - 1 - i; j++) { // 傳一個函數(shù)進來,并且將arr[j], arr[j + 1]作為兩個參數(shù)傳進去 if (fn(arr[j], arr[j + 1]) > 0) { flag = false; var temp = arr[j]; arr[j] = arr[j + 1]; arr[j + 1] = temp; } } if (flag) { break; } } } // 純數(shù)字數(shù)組 var arr = [4, 3, 1, 6, 22, 21, 41, 4]; // 調用的時候,我們需要將fn函數(shù)的兩個參數(shù)也傳進去 // 這種把一個函數(shù)作為參數(shù)傳進另一個函數(shù)的方式就叫回調函數(shù) bubbleSort(arr, function(a, b) { // a b 就相當于 arr[j] 和 arr[j+1] return a - b; // 如果是 return b - a 就相當于,上面的 arr[j+1] - arr[j]>0 那么就是從大到小排序 }); console.log(arr); // 封裝后的排序函數(shù)也可以直接根據(jù)字符串的長度進行排序了 var arrStr = ["aaa", "bb", "cccc", "d"]; bubbleSort(arrStr, function(a, b) { // 因為傳進去的是一個函數(shù),arr[j] 和 arr[j+1]是以兩個參數(shù)的形式傳進去的 // 當數(shù)組元素是字符串的時候,就可以進行.length操作了 return a.length - b.length; }); console.log(arrStr);12. 對象 12.1 對象的基本概念
無序的鍵值對集合
為什么要有對象?
在javascript中:對象跟數(shù)組、函數(shù)一樣,都是一種復雜數(shù)據(jù)類型,是一系列相關的屬性的集合,可以很方便對變量和函數(shù)進行管理。
什么是對象?
現(xiàn)實生活中: 萬物皆對象,對象是一個具體的事物,一個具體的事物就會有行為和特征。javascript: javascript中的對象其實就是生活中對象的一個抽象。
事物的特征在對象中用屬性來表示。
事物的行為在對象中用方法來表示。
對象中的方法,其實就是對象里面的函數(shù)。
舉個例子:
特征:名字、性別、年齡、身高、體重、愛好、星座、血型 (屬性) 行為:罰錢、吃肉、打招呼 (方法: 對象里面的函數(shù))12.2 創(chuàng)建對象 12.2.1 通過構造函數(shù)創(chuàng)建
通過var 對象名 = new Object();的方式創(chuàng)建一個對象,通過對象名.的語法,給這個對象添加屬性;通過通對象名.方法名 = function(){} 給這個對象加上一個方法。
示例代碼:
// 創(chuàng)建一個英雄對象,并且給他加上屬性和方法 var hero = new Object(); // 創(chuàng)建一個空的英雄對象 // 通過"."語法給這個hero加上一些屬性 hero.name = "蓋倫"; // 給對象添加了一個name的屬性 hero.skill = "正義審判"; // 給對象添加一個技能屬性 // 通過 對象名.方法名 = function(){} 給hero加上一個方法 hero.attack = function() { console.log("蓋倫攻擊了小怪物"); } attack();12.2.2 通過對象字面量
通過var 對象名 = {}的方式創(chuàng)建一個對象,通過鍵值對的方式,給這個對象加上屬性和方法。字面量:11 "abc" true [] {}等 {}就相當于 new Object();
示例代碼:
// 創(chuàng)建一個英雄對象,并且給他加上屬性和方法 var hero = { name : "蓋倫", // 鍵值對的形式給hero加上屬性 skill : "正義審判", attcck : function(){ // 鍵值對的形式給hero加上方法 console.log("蓋倫攻擊了小怪物"); } }
注意: 鍵值對之間用,號隔開
12.2.3 關于 this示例代碼:
var hero = { name : "蓋倫", skill : "正義審判", attcck : function(){ // 這里的this指向的是當前的對象,表示當前對象下的skill屬性,如果直接寫skill 是報錯的 console.log("蓋倫使用了"+this.skill+"攻擊了敵人"); } }
注意:
this一定要出現(xiàn)在方法中才有意義,不在方法中的this沒有意義。
在方法中出現(xiàn)的this,指的是當前對象,即調用這個方法的對象
12.3 操作對象的屬性操作對象的屬性分為存值和取值12.3.1 "." 語法
存值:
對象名.屬性名 = "值";
存值-示例代碼:
var obj = { age:18, name:"蓋倫" }; // 存值 obj.hobby = "K人"; obj.age = 20; console.log(obj); // {age:20,name:"蓋倫",hobby:"K人"}
存值-注意:
如果對象原來就有這個屬性,會覆蓋原來的值。
如果對象沒有這個屬性,就會新增加這個屬性。(屬性在對象中是獨一無二的)
取值:
對象名.屬性名
取值-示例代碼:
var obj = { age:18, name:"蓋倫" }; // 取值 console.log(obj.age); // 18 console.log(obj.name); // "蓋倫"
取值-注意:
如果對象有這個屬性,就會返回對應的值
如果對象沒有這個屬性,就會返回undefined。
12.3.2 "[]"語法關聯(lián)數(shù)組的語法,把對象當成數(shù)組來看待
存值:
對象名[屬性名(下標)] = "值"; 數(shù)組的下標是數(shù)字,對象的下標是字符串
存值-示例代碼:
var obj = { age:18, name:"蓋倫" }; // 存值 obj["hobby"] = "K人"; obj["age"] = 20; console.log(obj); // {age:20,name:"蓋倫",hobby:"K人"}
取值:
對象名[屬性名(下標)]
取值-示例代碼:
var obj = { age:18, name:"蓋倫" }; // 取值 console.log(obj["age"]); // 18 console.log(obj["name"]]); // "蓋倫"
注意: []語法是將對象當數(shù)組看,數(shù)組的下標是數(shù)字,對象的下標是字符串,取值的時候一定要注意
12.3.3 兩種方法的區(qū)別當屬性名是一個字符串存儲在變量中的時候,只能使用關聯(lián)數(shù)組的方式。
示例代碼:
var obj = { age:18, name:"蓋倫" }; var temp = "age"; console.log(obj[temp]); // 打印 18 ==> obj["age"] console.log(obj.temp); // 點語法就不行,undefined 點語法會去對象中找temp的屬性
大部分情況,都用.語法,比較簡單,如果屬性的名字存在一個變量中,只能用[]語法
12.4 遍歷對象通過for..in語法可以遍歷一個對象:for(var 鍵 in 對象)
示例代碼:
var hero = { name : "蓋倫", skill: "正義審判", attcck: function() { console.log("蓋倫使用了" + this.skill + "攻擊了敵人"); } } for(var key in hero){ // key表示的是對象的屬性名 console.log(key); // 遍歷了所有的屬性名 console.log(hero[key]); // 遍歷所有的值 console.log(hero.key); // undefined 這樣寫是錯的,找的是hero的key屬性 }
遍歷對象案例:
var datas = [ {name:"露娜", age:18, score:100, gender:"男"}, {name:"妲己", age:1000, score:101, gender:"女"}, {name:"甄姬", age:888, score:102, gender:"女"}, {name:"大喬", age:21, score:103, gender:"女"}, {name:"小喬", age:22, score:104, gender:"女"} ]; document.write("
"); document.write(data[key]); document.write(" | "); } document.write("
效果圖:
注意:遍歷的時候for后面是鍵(屬性名),in后面是對象
判斷一個對象中是否有某一屬性:
in關鍵字可以查看對象是否擁有某個屬性。
var obj = { name:"zs", age:18, score:100 } //in關鍵字可以查看對象是否擁有某個屬性。 console.log( "sex" in obj ); // false console.log( "name" in obj ); // true12.5 查看對象的類型
1、typeof 查看對象類型
所有的復雜類型,使用typeof關鍵字的話,都是object
示例代碼:
var arr = new Array(); console.log(typeof arr); // Object var obj = new Object(); console.log(typeof obj); // Object var student = new Object(); console.log(typeof student); // Object function fn(){ } console.log(typeof student); // Function
注意:
typeof只能區(qū)分出來是復雜類型,并不能區(qū)分出具體類型
函數(shù)比較特殊,在js里面的地位比較高,typeof可以查看到它的類型
2、instanceof 查看對象類型
instance: 實例 這種方法也不能直接獲得對象的具體類型
示例代碼:
var arr = new Array(); console.log(arr instanceof Array); // true 說明arr的實例是Array
這種方法還是比較麻煩,看下面這種方法
3、.constructor.name 查看對象類型
借助于js原型里的constructor關鍵字,可以直接獲取到對象的具體類型
示例代碼:
var arr = new Array(); console.log(arr.constructor.name); // Array var obj = new Object(); console.log(obj.constructor.name); // Object12.6 批量創(chuàng)建對象
1、使用普通函數(shù)批量創(chuàng)建對象
將創(chuàng)建對象封裝在一個函數(shù)里,需要批量創(chuàng)建對象的時候,只需調用這個函數(shù)即可
示例代碼:
// 封裝 function createObj(name,age,gender){ var heros = new Object(); student.name = name; student.age = age; student.gender = gender; student.sayHello = function () { console.log("大家好,我是"+this.name); } return heros; } // 調用 var stu1 = createObj("露娜",15,"女"); console.log(stu1); // 打印這個對象 stu1.sayHello(); // "大家好我是露娜" var stu2 = createObj("小喬",800,"女"); console.log(stu2); // 打印這個對象 stu2.sayHello(); // "大家好我是小喬"
優(yōu)點:可以同時創(chuàng)建多個對象
缺點:創(chuàng)建出來的沒有具體的類型,都是object類型的
2、構造函數(shù)批量創(chuàng)建對象
構造函數(shù) ,是一種特殊的函數(shù)。主要用來在創(chuàng)建對象時初始化對象(給對象加屬性和方法),即為對象成員變量賦初始值,總與new運算符一起使用在創(chuàng)建對象的語句中。一般創(chuàng)建一個對象的時候直接new object出來的沒有具體的類型,都是object類型的,要想分類的更清楚就需要用到構造函數(shù)創(chuàng)建對象
首字母需要大寫,通常是名詞,表示一類對象。
語法:
// 首字母需要大寫,通常是名詞,表示一類對象。 function Teacher(){ // 函數(shù)體 } var cjk = new Teacher(); // 如果沒有new, cjk就是一個普通的函數(shù) console.log(cjk.constructor.name); // 輸出的對象類型為 Teacher
示例代碼:
// 構造函數(shù) this指向new出來的新對象 function Teacher(name, age){ this.name = name; this.age = age; this.sayHello = function () { console.log("大家好,我是"+this.name+",今天晚上我給大家唱首歌"); } } // new 創(chuàng)建了一個空對象 類型為Teacher var cjk = new Teacher("蒼井空", 18); console.log(cjk); // 對象的類型為Teacher {name:"蒼井空",age:18} var bdyjy = new Teacher("波多野結衣", 19); console.log(bdyjy); // 對象的類型為Teacher {name:"波多野結衣",age:19,sayHello:function(){}} bdyjy.sayHello(); // 大家好,我是波多野結衣,今天晚上我給大家唱首歌
new做了四件事情:
new 會創(chuàng)建一個空的對象,并且對象的類型是new 后面跟的名字;
讓函數(shù)內部的this指向這個空對象,操作this就相當于操作了這個對象;
執(zhí)行構造函數(shù)
返回這個對象
優(yōu)點:
創(chuàng)建出來的對象,類型是可變的
寫法更加簡潔
案例-批量創(chuàng)建一個英雄對象:
//屬性:名字、性別、技能、口號、等級、金錢 //行為:打怪獸 function Hero(name, gender, skill, slogan, level, money){ //給this加屬性和方法 this.name = name; this.gender =gender; this.skill = skill; this.slogan = slogan; this.level = level; this.money = money; this.attack = function (n) { console.log(this.name + "使用了" + this.skill + "攻擊了" + n); } } var atm = new Hero("奧特曼", "不詳", "激光", "呵呵", 100, 0); console.log(atm); // 返回了一個Hero類型的對象 atm.attack("小怪獸"); // 奧特曼使用了激光攻擊了小怪獸 var dm = new Hero("蓋倫", "男", "大寶劍", "人在塔在", 18, 3150); console.log(dm); // 返回了一個Hero類型的對象 dm.attack("防御塔"); // 蓋倫使用了大寶劍攻擊了防御塔12.7 值類型與引用類型
1、值類型(簡單數(shù)據(jù)類型)
值類型 : 又叫簡單數(shù)據(jù)類型,例如:number、string、boolean、undefined、null變量儲存數(shù)據(jù)的時候,存儲的直接就是這個值本身
示例代碼:
var num = 12; var num1 = num; num1 = 20; console.log(num); // 12 console.log(num1); // 20
2、引用類型(復雜數(shù)據(jù)類型)
引用類型 :又叫復雜數(shù)據(jù)類型,例如:Object、Function、Array和自定義類型
變量在儲存數(shù)據(jù)的時候,不會直接存儲這對象,存儲的是這個對象的地址
示例代碼:
var obj = { // 在內存中存儲了一個地址 name: "凹凸曼", age: 100 } var obj1 = obj; // 把這個地址賦值給了obj1,obj1就有了obj的所有屬性 obj1.name = "奧特曼"; // 因為obj1 和 obj 用的是同一個地址,所以當obj1的屬性值改變的時候,obj也會改變 console.log(obj.name); // "奧特曼" console.log(obj1.name); // "奧特曼"
引用類型詳解:
//復雜類型變量不會存這個對象,只會存這個對象的地址。 var hero = { name: "大黃蜂", age: 100, car: { name: "科邁羅", price: 400000 }, brothers: ["擎天柱", "鐵皮", "救護車"] }; console.log(hero.car.name); // "科邁羅" console.log(hero.brothers[0]); // "擎天柱"
面試題(一):
var num1 = 55; var num2 = 66; function f1(num, num1) { num = 100; num1 = 100; num2 = 100; console.log(num); //100 console.log(num1); //100 console.log(num2); //100 } f1(num1, num2); console.log(num1); //55 console.log(num2); //100 console.log(num); //報錯
面試題(二):
function Person(name, age) { this.name = name; this.age = age; } var p1 = new Person("zs", 18); var p2 = p1; p2 = new Person("ls", 20); p2.name = "ww"; console.log(p1.name); // zs console.log(p2.name); // ww
3、棧內存與堆內存
棧內存: 空間比較小,但運算速度非常的快12.8 基本包裝類型堆內存:空間非常大,但運算速度相對而言比較慢
簡單類型有沒有屬性和方法?JS為了我們操作方便,內置了對應的復雜類型(String、Number、Boolean)
我們使用簡單類型的時候,可以直接使用復雜類型的屬性和方法。(js會自動幫我們把簡單類型轉換成復雜類型。用完之后,又自動的給我們轉成了簡單類型)
簡單類型: number string boolean undefined null
復雜類型: Object Function Array String Number Boolean
基本包裝類型:
對于string number boolean基本類型來說,可以直接使用屬性和方法。
自動把簡單類型轉換成對應的復雜類型
調用復雜類型的屬性或者方法得到結果
自動的把復雜類型轉換成簡單類型
12.9 偽數(shù)組(類數(shù)組)不是數(shù)組,是對象, 叫偽數(shù)組(可以跟數(shù)組一樣的使用下標,也可以遍歷)
var obj = { 0:"呵呵", 1:"哈哈", 2:"嘻嘻", 3:"嘿嘿嘿", 4:"嗚嗚", length:5 } for(var k in obj){ console.log(obj[k]); }12.10 arguments 對象
JavaScript中,arguments對象是比較特別的一個對象,實際上是當前函數(shù)的一個內置屬性。也就是說所有函數(shù)都內置了一個arguments對象,arguments對象中存儲了傳遞的所有的實參。arguments是一個偽數(shù)組,因此及可以進行遍歷
示例代碼:
// Math.max 的原理是什么? // 不知道形參個數(shù)的時候,怎么判別一個最大值或者最小值呢? // arguments對象中 存儲的是所有的實參 是以一個偽數(shù)組的形式存在的 function max(){ var m = arguments[0]; // 所以不管你傳多少參數(shù)進來,arguments就儲存多少參數(shù) for(var i = 0; i < arguments.length; i++) { if(m < arguments[i]){ m = arguments[i]; } } return m; } } console.log(max(1, 2, -1)); // 2 console.log(max(1, 2, 4, 10)); // 1012.11 JSON 對象
JSON(JavaScript Object Notation)是一種輕量級的數(shù)據(jù)交換格式,采用完全獨立于語言的文本格式,是理想的數(shù)據(jù)交換格式。同時,JSON是 JavaScript原生格式,這意味著在JavaScript中處理JSON數(shù)據(jù)跟處理對象是一樣的。
JSON的屬性必須用雙引號引起來,對象字面量可以省略
示例代碼:
// js里面,屬性名可以用雙引號引起來,也可以不引起來。 var obj = { name:"張三", age:18 } // JSON屬性名必須用雙引號引起來 var json = { "name":"張三", "age":18 } //json是js對象 js對象不一定是json console.log(json.name); // "張三" console.log(json["name"]); // "張三"
json對象的兩個方法:
對象轉換為JSON格式使用:JSON.stringify;
JSON裝換為對象格式:JSONparse();
13. 內置對象JS內置對象就是指Javascript自帶的一些對象,供開發(fā)者使用,這些對象提供了一些常用的的功能。
常見的內置對象有Math、String、Array、Date等
13.1 Math 對象Math對象中封裝很多與數(shù)學相關的屬性和方法。Math對象比較特殊,不需要new。
1、屬性 PI
Math.PI 表示的就是圓周率,通常計算圓的周長或者面積的時候會用到。也可以用作表示角度、弧度(π= 180°)
console.log(Math.PI); // 3.141592653589793
2、最大值/最小值
Math.max(x,y) 表示求出兩者之間的最大值
console.log(Math.max(10,99)); // 返回99
Math.min(x,y) 表示求出兩者之間的最小值
console.log(Math.min(10,99)); // 返回10
3、取整
Math.ceil() 天花板函數(shù)(向上取整)
整數(shù)向上取整還是整數(shù);
正小數(shù)向上取整,整數(shù)部分加1,小數(shù)部分舍去;
負小數(shù)向上取整,整數(shù)部分不變,小數(shù)部分舍去;
示例代碼:
console.log(Math.ceil(2)); // 2 console.log(Math.ceil(1.2)); // 2 console.log(Math.ceil(1.8)); // 2 console.log(Math.ceil(-1.2)); // -1 console.log(Math.ceil(-1.8)); // -1
Math.floor() 地板函數(shù)(向下取整)
整數(shù)向下取整還是整數(shù);
正小數(shù)向下取整,整數(shù)部分不變,小數(shù)部分舍去;
負小數(shù)向下取整,整數(shù)部分減1,小數(shù)部分舍去;
示例代碼:
console.log(Math.floor(2)); // 2 console.log(Math.floor(1.2)); // 1 console.log(Math.floor(1.8)); // 1 console.log(Math.floor(-1.2)); // -2 console.log(Math.floor(-1.8)); // -2
Math.round() 四舍五入(如果是.5,則取更大的那個數(shù))
正小數(shù)四舍五入,對小數(shù)點后面一位數(shù)進行判斷,大于等于5整數(shù)部分加1,小數(shù)舍去;小于5,整數(shù)部分不變,小數(shù)部分舍去
負小數(shù)四舍五入,對小數(shù)點后面一位進數(shù)行判斷:
小于5的時候,小數(shù)舍去,整數(shù)部分不變;
大于5的時候,小數(shù)舍去,整數(shù)部分減 1;
等于5的時候要再判斷,如果后面沒有數(shù)了,小數(shù)舍去,整數(shù)部分不變;如果后面還有數(shù),小數(shù)舍去,整數(shù)部分減 1;
示例代碼:
console.log(Math.round(1.2)); // 1 console.log(Math.round(1.5)); // 2 console.log(Math.round(1.56)); // 2 console.log(Math.round(1.6)); // 2 console.log(Math.round(-0.3)); // 0 console.log(Math.round(-0.6)); // -1 console.log(Math.round(-1.5)); // -1 console.log(Math.round(-1.6)); // -2 console.log(Math.round(-1.56)); // -2
4、隨機數(shù)
Math.random() 返回一個[0,1)之間的數(shù),能取到0,取不到1
示例代碼:
// 獲得0-5的隨機數(shù),包括0-5 // parseInt:取整 console.log(parseInt(Math.random() * 6)); // 因為隨機數(shù) 能取到0,取不到1,要想返回5 就需要乘以6 // 獲得3-5之間的隨機數(shù) // 3-5?可以先取到隨機數(shù)0-2,然后再加3 獲得的就是3-5 console.log(parseInt(Math.random() * 3) + 3);
5、絕對值
Math.abs() 對一個數(shù)進行絕對值操作,純數(shù)字字符串也可以轉換
示例代碼:
console.log(Math.abs(-11)); // 11 console.log(Math.abs(11)); // 11 console.log(Math.abs("-11")); // 11 console.log(Math.abs("aaa")); // NaN
6、次冪和開平方
Math.pow(num, power) 求 num 的 power 的次方
示例代碼:
console.log(Math.pow(2,4)); // 2的4次方 16
Math.sqrt(num) 為 num 開平方根
示例代碼:
console.log(Math.sqrt(9)); // 為9開平方根 313.2 Date對象
Data 對象是用來處理日期和時間的13.2.1 創(chuàng)建一個日期對象
使用構造函數(shù)創(chuàng)建一個當前時間對象 var date = new Date();
var date = new Date(); console.log(date); // Fri Nov 17 2017 11:59:19 GMT+0800 (中國標準時間)
創(chuàng)建一個指定時間的日期對象 var date = new Date(指定時間);
var date = new Date("2017-03-22"); //創(chuàng)建一個指定時間的日期對象 Wed Mar 22 2017 08:00:00 GMT+0800 (中國標準時間) var date = new Date("2017-03-22 00:52:34"); //創(chuàng)建一個指定時間的日期對象 Wed Mar 22 2017 00:52:34 GMT+0800 (中國標準時間)13.2.2 日期格式化
日期格式化,一般用到的不多,通過格式化可以獲得當前日期的日期部分或者時間部分
var date = new Date(); date.toString(); // 默認的日期格式 date.toLocalString(); // 本地風格的日期格式(存在兼容性) date.toDateString(); // 獲得當前日期時間的,日期部分 Fri Nov 17 2017 date.toLocalDateString(); // 本地風格的日期部分(存在兼容性) date.toTimeString(); // 獲得當前日期時間的,時間部分 13:23:42 GMT+0800 (中國標準時間) date.toLocalTimeString(); // 本地風格的時間部分(存在兼容性)13.2.3 獲取日期的指定部分
getMilliseconds(); 獲取毫秒值
getSeconds(); 獲取秒
getMinutes(); 獲取分鐘
getHours(); 獲取小時
getDay(); 獲取星期,0-6 0:星期天
getDate(); 獲取日,即當月的第幾天
getMonth(); 返回月份,注意從0開始計算,這個地方坑爹,0-11
getFullYear(); 返回4位的年份 如 2016
示例代碼:封裝一個格式 xxxx-xx-xx xx:xx:xx 的日期函數(shù)
var date = new Date(); var year = date.getFullYear(); // 獲取當前時間的年份 var month = date.getMonth() + 1; // 獲取當前時間的月份,注意月份是從0開始的0-11,所以加1 addZore(month); // 獲得的月份有可能是一位數(shù),此時需要給他再拼接一位 var d = date.getDate(); // 獲得當前時間的日期天數(shù) addZore(d); var h = date.getHours(); // 獲取當前時間的小時 addZore(h); var m = date.getMinutes(); // 獲取當前時間的分鐘 addZore(m); var s = date.getSeconds(); // 獲取當前時間的秒 addZore(s); function addZore(n) { return n > 10 ? n : "0" + n; // 判斷獲取到的數(shù)字大于10的時候 返回本身,小于的時候需要拼串 } var dateStr = year + "-" + month + "-" + d + " " + h + ":" + m + ":" + s; console.log(dateStr); // 2017-11-17 13:58:5313.2.4 時間戳
1970年01月01日00時00分00秒起至現(xiàn)在的總毫秒數(shù)叫做時間戳
獲取時間戳:
var date = new Date(); // 方法一 console.log(date.getTime()); // getTime的方法獲得毫秒數(shù) // 方法二 console.log(+date); // 直接通過計算的方式轉換成毫秒數(shù)
示例代碼:計算代碼執(zhí)行的時間
var start = new Date(); var sum = 0; // 電腦性能不好的小伙伴 不要這么搞 循環(huán)的次數(shù)少一點 for (var index = 0; index < 1000000000; index++) { sum += index; } console.log(sum); // 499999999067109000 var end = new Date(); console.log(end - start); // 1789913.3 Array 對象
數(shù)組對象在javascript中非常的常用13.3.1 數(shù)組轉換成字符串 join()
將數(shù)組的值拼接成字符串
語法:array.join(separator)
數(shù)組的每一項默認的拼接符是逗號
想要改變拼接符就在join()方法的括號里傳入其他的拼接字符
示例代碼:
var arr = ["大喬","小喬","甄姬","妲己","露娜"]; var str = arr.join(); console.log(str); // "大喬,小喬,甄姬,妲己,露娜" // 用“-”拼接符 var arr2 = ["大喬","小喬","甄姬","妲己","露娜"]; var str2 = arr2.join("-"); console.log(str2); // "大喬-小喬-甄姬-妲己-露娜"13.3.2 數(shù)組的增刪操作
1、arr.push() 在數(shù)組最后面 添加元素,返回新數(shù)組的長度
var arr = ["大喬","小喬","甄姬"]; console.log(arr.push("妲己", "露娜")); // 返回 5 console.log(arr); // ["大喬","小喬","甄姬","妲己","露娜"]
2、arr.pop() 在數(shù)組最后面刪除一個元素,返回刪除的那個元素
var arr = ["大喬","小喬","甄姬","妲己", "露娜"]; console.log(arr.pop()); // 返回 "露娜" console.log(arr); // ["大喬","小喬","甄姬","妲己"]
3、arr.unshift() 在數(shù)組前面添加元素,返回新數(shù)組的長度
var arr = ["甄姬","妲己", "露娜"]; console.log(arr.unshift("大喬","小喬")); // 返回 5 console.log(arr); // ["大喬","小喬","甄姬","妲己", "露娜"];
4、arr.shift() 在數(shù)組最前面刪除一個元素,返回刪除的那個元素
var arr = ["大喬","小喬","甄姬","妲己", "露娜"]; console.log(arr.shift()); // 返回 "大喬" console.log(arr); // [小喬","甄姬","妲己", "露娜"];
示例代碼(一):
var arr = ["劉備"]; //添加數(shù)據(jù)后變成:["趙云","馬超","劉備","關羽","張飛"] arr.push("關羽","張飛"); arr.unshift("趙云","馬超"); console.log(arr); // ["趙云","馬超","劉備","關羽","張飛"] //刪除數(shù)據(jù)后變成:["關羽","張飛"] arr.shift(); arr.shift(); arr.shift(); console.log(arr); // ["關羽","張飛"]
示例代碼(二):
var arr = ["趙云","馬超","劉備","關羽","張飛"]; //把數(shù)組的最后一個元素變成數(shù)組的第一個元素 arr.unshift(arr.pop()); console.log(arr); // ["張飛","趙云","馬超","劉備","關羽"]13.3.3 數(shù)組的翻轉與排序
1、arr.reverse() 翻轉數(shù)組
var arr = [1,2,3,4,5]; var newArr = arr.reverse(); console.log(newArr); // [5,4,3,2,1] console.log(arr); // [5,4,3,2,1]
2、arr.sort() 數(shù)組排序
默認按照字母順序排序
sort方法可以傳遞一個函數(shù)作為參數(shù),這個參數(shù)用來控制數(shù)組如何進行排序
a-b 從小到大排序,b-a 從大到小排序
var arr = [1,3,5,7,9,2,4,6,8,10]; var newArr = arr.sort(function(a,b){ // 如果返回值>0,則交換位置 return a - b; }); console.log(newArr); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] console.log(arr); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
示例代碼(一):
// 將字符串數(shù)組按照字符長度從大到小排列 var arr = ["ccc", "bb", "a", "ffffdd"]; arr.sort(function (a, b) { return b.length - a.length; }); console.log(arr); // ["ffffdd", "ccc", "bb", "a"]
示例代碼(二):
//將學生數(shù)組按照年齡從小到大排列 var arr = [ {name:"張三", age: 18, score: 50}, {name:"李四", age: 70, score: 95}, {name:"王五", age: 9, score: 33}, {name:"趙六", age: 38, score: 100}, {name:"田七", age: 6, score: 8}, {name:"王八", age: 22, score: 66} ]; arr.sort(function(a, b) { return a.age - b.age; }); console.log(arr);13.3.4 數(shù)組的拼接與截取
1、concat 數(shù)組的合并
var arr1 = [1, 3, 5, 7, 9]; var arr2 = [2, 4, 6, 8, 10]; // concat: 合并兩個數(shù)組 var newArr = arr1.concat(arr2); console.log(newArr); // [1, 3, 5, 7, 9, 2, 4, 6, 8, 10]
不會影響原來的數(shù)組,會返回一個新的數(shù)組
2、slice 數(shù)組切分
復制數(shù)組的一部分(淺拷貝)到一個新數(shù)組,并返回這個數(shù)組,原來的數(shù)組不受影響
slice有兩個屬性,分別是開始的下標和結束的下標,截取的時候包含begin,不包含end
var arr = [1, 3, 5, 7, 9]; // slice: 截取數(shù)組的一部分 var newArr = arr.slice(0,3); console.log(newArr); // [1, 3, 5]
3、splice 數(shù)組拼接
splice:數(shù)組拼接,以新元素來替換舊元素,以此來修改數(shù)組的內容,常用于刪除數(shù)組的某些項
array.splice(start, deleteCount, [items]); start:開始下標 deleteCount:刪除的個數(shù) items:替換的內容
splice 能實現(xiàn)多種用法:
找到開始下標,刪除個數(shù)為0,再輸入替換的內容,此時就可以在數(shù)組中任意位置添加元素
找到開始下標,需要刪除的個數(shù),再輸入替換的內容,此時就可以在數(shù)組任意位置替換元素
找到開始下標,需要刪除的個數(shù),不輸入替換內容,此時就可以在數(shù)組任意位置,刪除任意個數(shù)的元素
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; // 從下標是2的位置開始,刪除0個,把 100 101 添加進去 var newArr = arr.splice(2, 0, 100, 101); console.log(newArr); // 操作的是原數(shù)組,不會返回這個新數(shù)組 console.log(arr); // [1, 2,100,101,3, 4, 5, 6, 7, 8, 9, 10] // 也可以替換元素 (此時arr = [1, 2,100, 101, 3, 4, 5, 6, 7, 8, 9, 10] ) arr.splice(0, 2, 98, 99); console.log(arr); // [98, 99, 100, 101, 3, 4, 5, 6, 7, 8, 9, 10] // 也可以用于刪除數(shù)組里的多個元素 (此時arr = [98, 99, 100, 101, 3, 4, 5, 6, 7, 8, 9, 10] ) arr.splice(0, 4); console.log(arr); // [3, 4, 5, 6, 7, 8, 9, 10]13.3.5 數(shù)組查找元素
indexOf()方法,是用來查找數(shù)組中,某個元素首次出現(xiàn)的位置,下標從0開始,找到的話返回位置信息,當找不到的時候返回-1
arr.indexOf(search,[fromIndex]);search:需要搜索的元素,fromIndex:規(guī)定在字符串中開始檢索的位置。
示例代碼:
var arr = [1, 5, 8, 11, 1, 2, 9]; arr.indexOf(8); // 返回2 arr.indexOf(8,1) // 從下標1,往后查找 返回 2 arr.indexOf(10); // 返回-1 說明找不到
與之對應的還有一個lastIndexOf(),從后往前找
var arr = [1, 5, 8, 11, 1, 2, 9]; arr.lastIndexOf(1); // 返回4 arr.lastIndexOf(1,3) // 從下標3,往前查找 返回0 arr.lastIndexOf(10); // 返回-1 說明找不到13.3.6 清空數(shù)組
1、刪除數(shù)組中的所有元素
var arr = [1,2,3,4,5]; arr.splice(0,arr.length); console.log(arr); // []
2、直接修改數(shù)組的長度
var arr = [1,2,3,4,5]; arr.length = 0; console.log(arr); // []
3、將數(shù)組賦值為一個空的數(shù)組
var arr = [1,2,3,4,5]; arr = []; console.log(arr); // []13.3.7 數(shù)組的綜合練習
var arr = ["c", "a", "z", "a", "x", "a", "a", "z", "c", "x", "a", "x"]; //1. 找到數(shù)組中第一個a出現(xiàn)的位置 console.log(arr.indexOf("a")); // 1 //2. 找到數(shù)組中最后一個a出現(xiàn)的位置 console.log(arr.lastIndexOf("a")); // 10 //3. 找到數(shù)組中每一個a出現(xiàn)的位置 for (var i = 0; i < arr.length; i++) { if (arr[i] == "a") { console.log(i); // 1 3 5 6 10 } } //4. 數(shù)組去重,返回一個新數(shù)組 var newArr = []; for (var i = 0; i < arr.length; i++) { if (newArr.indexOf(arr[i]) == -1) { // 判斷當newArr的數(shù)組里沒有arr[i]的時候 newArr.push(arr[i]); // 將arr[i] 添加到newArr中 ["c", "a", "z", "x"] } } console.log(newArr); //5. 獲取數(shù)組中每個元素出現(xiàn)的次數(shù) // 首先需要知道 如何判斷一個對象中是否存在某屬性 /* var obj = { name:"zs", age:18, score:100 } //in關鍵字可以查看對象是否擁有某個屬性。 console.log( "sex" in obj ); // false */ var obj = {}; for(var i = 0; i < arr.length; i++){ // 遍歷數(shù)組,判斷對象有沒有這個屬性, if(arr[i] in obj){ // 如果有這個屬性,讓這個屬性的值+1 obj[arr[i]] ++; }else{ // 如果沒有這個屬性,讓這個屬性等于1 obj[arr[i]] = 1; } } console.log(obj);13.4 String 對象
字符串可以看成是一個字符數(shù)組(偽數(shù)組)。因此字符串也有長度,也可以進行遍歷。String對象很多方法的名字和和Array的一樣。
// 遍歷一段字符串 var str = "abcdefghijk"; for(var i = 0; i < str.length; i++){ console.log(str[i]); // "a" "b" "c" "d"... }13.4.1 字符串大小寫轉換的方法
小寫轉換成大寫
toUpperCase(),toLocaleUpperCase()是將英文小寫的字符串轉換為大寫,其中toLocaleUpperCase()方法則是針對特定地區(qū)的實現(xiàn)(如土耳其語會為Unicode大小寫轉換應用特殊的規(guī)則)。
var str = "hello world"; str.toUpperCase(); // "HELLO WORLD" str.toLocaleUpperCase();
大寫轉換成小寫
toLowerCase(),toLocaleLowerCase()是將英文小寫的字符串轉換為大寫
var str = "HELLO WORLD"; str.toUpperCase(); // "hello world" str.toLocaleUpperCase();
注意: 因為是方法,所以一定不要忘記加上()
13.4.2 indexOf 查找指定字符串indexOf()方法,是用來判斷指定字符,在當前字符串中首次出現(xiàn)的位置,下標從0開始,找到的話返回位置信息,當找不到的時候返回-1
示例代碼:
var str= "good good study , day day up!"; str.indexOf("day"); // 返回18 str.indexOf("good"); // 返回0 str.indexOf("GOOD"); // 返回-1 說明找不到
與之對應的還有一個lastIndexOf(),是用來從后面開始查找字符第一次出現(xiàn)的位置
var str= "good good study , day day up!"; str.lastIndexOf("good"); // 返回 513.4.3 trim 去除空白
trim();方法,是用來去除字符串兩邊的空格,內部空格不會去除
var str = " A B C "; console.log(str.trim()); // "A B C"13.4.4 slice 截取字符串
slice()方法是用來截取一段字符串的,str.slice(start,end);它的兩個參數(shù)都是表示下標的,一個表示開始,一個表示結束(截取時不包括結束下標)
說明:
start下標從0開始的str指定部分起始索引。如果start為負,將它作為length+start處理,此處length為字符串的長度。
end下標從0開始的str指定部分結束索引。如果end為負,將它作為length+end處理,此處length為字符串的長度。
示例代碼:
// 起始位置結束位置都是正數(shù) var str = "ABCDEFGHIJK"; str.slice(2,6); // "CDEF"
// 當起始位置為負數(shù)的時候 var str = "ABCDEFGHIJK"; str.slice(-6, 10); // "FGHIJ" // str的length為11,所以起始位置是-6+11=5,就是F結束是10(不包括10),那么就是J;
// 特殊情況 當起始位置在結束位置后面的時候,是截取不了的,返回空 var str = "ABCDEFGHIJK"; str.slice(-6, 2); // 空 // str的length為11,所以起始位置是-6+11=5,就是F,結束位置在2,這個時候是截取不了的
注意:
end為結束下標,截取的時候不包括end那一位
截取是有順序的,開始到結束的順序必須是從左向右,否則是截取不了的,為空
13.4.5 substring 截取字符串substring()方法返回位于String對象中指定位置的子字符串,str.substring(start,end);它的兩個參數(shù)都是表示下標的,一個表示開始,一個表示結束(截取時不包括結束下標)
說明:
start指明子字符串的起始位置,該索引從0開始起算。
end指明子字符串的結束位置,該索引從0開始起算。
substring方法使用start和end兩者中的較小值作為子字符串的起始點。如果start或end為NaN或者為負數(shù),那么將其替換為0。
示例代碼:
// 當起始位置,結束位置都是正數(shù)的時候 var str = "ABCDEFGHIJK"; str.substring(2,6); // "CDEF" // 同樣的,substring方法結束位置也不包括自己
// 當起始位置為負數(shù)的時候,直接轉換成下標0 var str = "ABCDEFGHIJK"; str.substring(-2,6); // "ABCDEF" 下標轉換成了0
// 當開始的位置大于結束位置的時候,自動轉換較小的值作為起點 var str = "ABCDEFGHIJK"; str.substring(6,2); // "CDEF"
利用substring方法,實現(xiàn)打字效果
/*樣式部分*/ #box { width: 300px; height: 150px; border: 2px dashed fuchsia; margin: 100px auto; text-align: left; padding: 10px; }
注意:
substring方法,end為結束下標,截取的時候同樣不包括end那一位
當start的值大于end的時候,兩者中較小的值作為起始下標
13.4.6 字符串的 substr方法substr()方法返回一個從指定位置開始,指定長度的子字符串。str.substr(start,length),start為開始的下標,length為需要返回字符串的長度
說明:
start所需的子字符串的起始位置。字符串中的第一個字符的索引為0。
length在返回的子字符串中應包括的字符個數(shù)。
示例代碼:
var str = "ABCDEFGHIJK"; str.substr(1,5); // BCDEF13.4.7 match 查找字符串
match() 來查找字符串中特定的字符,并且如果找到的話,則返回這個字符,找不到的話返回null。
示例代碼:
var str= "good good study , day day up!"; str1.match("good"); // good str1.match("Good"); // null13.4.8 replace 替換字符串
replace() 方法在字符串中用某些字符替換另一些字符。
示例代碼:
var str2 = "hello world"; str2.replace("world", "china"); // "hello china"13.4.9 split 切割字符串轉為數(shù)組
將一個字符串分割為子字符串,然后將結果作為字符串數(shù)組返回。str.split(separator,num),帶一個參數(shù)separator表示切割的條件,第二個參數(shù)num表示需要切割的位數(shù)
說明:
separator(分隔符)字符串或正則表達式對象,它標識了分隔字符串時使用的是一個還是多個字符。如果忽略該選項,返回包含整個字符串的單一元素數(shù)組。
num該值用來限制返回數(shù)組中的元素個數(shù)。
示例代碼:
var str = "ABCDEFGHIJK"; str.split("",6); // ["A", "B", "C", "D", "E", "F"]13.5 Array對象 與 String對象綜合練習
1、翻轉一個字符串
var str = "abcdefg"; var strArr = str.split(""); // 將字符串轉換為數(shù)組 ["a","b","c","d","e","f","g"] strArr.reverse(); // 翻轉這個數(shù)組 ["g","f","e","d","c","b","a"] var newStr = strArr.join(""); console.log(newArr); // "gfedcba"
2、將一串字符轉化成對象
/* 有一個鏈接:http://www.baidu.com?name=cc&id=100&desc=很帥 將鏈接的參數(shù)部分轉換成一個對象 即{name:"cc", id=100 , desc: "很帥"} */ var str = "http://www.baidu.com?name=cc&id=100&desc=很帥"; var obj = {}; var strArr = str.split("?"); // ["http://www.baidu.com", "name=cc&id=100&desc=很帥"] var strArr2 = strArr[1].split("="); // ["name=cc", "id=100", "desc=很帥"] for(var i = 0; i < strArr2.length; i++){ console.log(strArr2[i]); // "name=cc" "id=100" "desc=很帥" var key = strArr2[i].split("=")[0]; // name id desc var value = strArr2[i].split("=")[1]; // cc 100 很帥 obj[key] = value; } console.log(obj); // {name:"cc", id=100 , desc: "很帥"}
3、將對象轉換成字符串
/* 有一個對象{name:"cc", id:100,desc:"很帥"} 和一個鏈接http://www.baidu.com, 拼接成鏈接http://www.baidu.com?name=cc&id=100&desc=很帥 */ var prefix = "http://www.baidu.com"; var obj = {name:"cc", id:100,desc:"很帥"}; var arr = []; for (var key in obj) { // console.log(key); name id desc // console.log(obj[key]); "cc" 100 "很帥" var str = key + "=" + obj[key]; console.log(str); // name=cc id=100 desc=很帥 arr.push(str); console.log(arr); // ["name=cc", "id=100", "desc=很帥"] } var arrStr = arr.join("&"); console.log(arrStr); // name=cc&id=100&desc=很帥 var result = prefix + "?" + arrStr; console.log(result); // http://www.baidu.com?name=cc&id=100&desc=很帥
上一篇:JavaScript 基礎知識 - 入門篇(一)
下一篇:JavaScript 基礎知識 - DOM篇(一)
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/90288.html
摘要:個人前端文章整理從最開始萌生寫文章的想法,到著手開始寫,再到現(xiàn)在已經一年的時間了,由于工作比較忙,更新緩慢,后面還是會繼更新,現(xiàn)將已經寫好的文章整理一個目錄,方便更多的小伙伴去學習。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 個人前端文章整理 從最開始萌生寫文章的想法,到著手...
摘要:特意對前端學習資源做一個匯總,方便自己學習查閱參考,和好友們共同進步。 特意對前端學習資源做一個匯總,方便自己學習查閱參考,和好友們共同進步。 本以為自己收藏的站點多,可以很快搞定,沒想到一入?yún)R總深似海。還有很多不足&遺漏的地方,歡迎補充。有錯誤的地方,還請斧正... 托管: welcome to git,歡迎交流,感謝star 有好友反應和斧正,會及時更新,平時業(yè)務工作時也會不定期更...
摘要:上一篇學習下一代語法一,我們學習了關于塊作用域變量或常量聲明和語法新的字符串拼接語法模版字面量數(shù)組元素或對象元素的解構賦值和對象字面量簡寫的相關知識。這便是擴展運算符的用途之一。 本文同步 帶你入門 JavaScript ES6 (二),轉載請注明出處。 上一篇學習下一代 JavaScript 語法: ES6 (一),我們學習了關于塊作用域變量或常量聲明 let 和 const 語法、...
閱讀 2181·2021-11-19 09:55
閱讀 2637·2021-11-11 16:55
閱讀 3175·2021-09-28 09:36
閱讀 1945·2021-09-22 16:05
閱讀 3269·2019-08-30 15:53
閱讀 1805·2019-08-30 15:44
閱讀 2898·2019-08-29 13:10
閱讀 1338·2019-08-29 12:30