《JavaScript進階程式設計第3版》-學習筆記-3

P84-P137頁，

這一章看的真久，這個月事太多了。有些内容在代碼注釋裡沒提出來了

1、JS強大的數組類型，元素類型任意，提供了非常多的操作數組的方法和屬性

1 /*
  2 數組類型
  3  */
  4 
  5 //stack
  6 var colors = ['red','blue'];
  7 colors.push('brown');
  8 console.log(colors);
  9 console.log(colors.length);
 10 var item = colors.pop();
 11 console.log(item);
 12 console.log(colors);
 13 
 14 //隊列
 15 colors = [];
 16 var count = colors.push('red','green');
 17 console.log(count);
 18 console.log(colors);
 19 count = colors.push('black');
 20 console.log(count);
 21 item = colors.shift();
 22 console.log(item);
 23 console.log(colors);
 24 console.log(colors.length);
 25 
 26 //pop 與 unshift搭配可以實作反向隊列
 27 
 28 
 29 
 30 
 31 //重新排序
 32 var values = [1,2,3,4,5,6];
 33 values.reverse();
 34 console.log(values);
 35 
 36 values = [0,1,5,10,15];
 37 values.sort();//sort方法預設進行字元串比較，即調用toString方法比較結果
 38 console.log(values);
 39 
 40 //為了實作自定義排序，可以這樣
 41 function comp(var1,var2){
 42     return var1 - var2;
 43 }
 44 
 45 values.sort(comp);
 46 console.log(values);
 47 
 48 /*
 49 數組操作方法
 50  */
 51 
 52 
 53 //數組複制合并
 54 var colors1 = ['red','green','blue'];
 55 var colors2 = colors1.concat('yellow',['black','brown']);
 56 console.log(colors1);
 57 console.log(colors2);
 58 
 59 
 60 //slice方法，這個方法的操作不會影響原來的數組
 61 colors = ['red','green','blue','yellow','purple'];
 62 colors2 = colors.slice(1);
 63 var colors3 = colors.slice(1,4);
 64 console.log(colors2);
 65 console.log(colors3);
 66 
 67 //splice方法，最強的數組操作方法
 68 //删除
 69 colors.splice(0,2);//要删除的第一項的位置和要删除的項數
 70 console.log(colors);
 71 //插入
 72 colors.splice(2,0,'red','green');//起始位置、0（要删除的項）和要插入的項-‘red’，‘green’
 73 console.log(colors);
 74 //替換
 75 colors.splice(2,1,'white');//起始位置，删除項數，插入項
 76 console.log(colors);
 77 //這個方法的傳回值是被删除的數組，如果沒有删除，傳回一個空數組
 78 
 79 console.log(colors.indexOf('green'));
 80 console.log(colors.lastIndexOf('green'));
 81 
 82 //數組疊代方法
 83 //every，都傳回ture才傳回true
 84 numbers = [1,2,3,4,5,4,3,2,1];
 85 var everyRes = numbers.every(function(val,index,arr){
 86     return (val > 2);
 87 });
 88 console.log(everyRes);
 89 
 90 //some，隻要有一項為true，則結果為true
 91 var someRes = numbers.some(function(val,index,arr){
 92     return val > 2;
 93 });
 94 console.log(someRes);
 95 
 96 //filter，傳回該函數會傳回true的項構成的數組
 97 var filterRes = numbers.filter(function(val ,index,arr){
 98     return val > 2;
 99 });
100 console.log(filterRes);
101 
102 //map，傳回函數調用結果形成的數組;
103 var mapRes = numbers.map(function(val,index,arr){
104     return val * 2;
105 });
106 console.log(mapRes);
107 
108 //forEach，這個方法沒有傳回值
109 numbers.forEach(function(val,index,arr){
110     //執行操作
111 });

Array Demo Code

2、Date類型

《JavaScript進階程式設計第3版》-學習筆記-3

1 /*
 2 Date類型
 3  */
 4 
 5 var now = new Date();
 6 console.log(now);
 7 
 8 var someDate = new Date(Date.parse('May 25,2005'));//與new Date('May 25,2005)等價
 9 console.log(someDate);
10 
11 var y2k = new Date(Date.UTC(2012,5,8));//2012年6月8日
12 console.log(y2k);
13 
14 var start = Date.now();
15 start = +new Date();//這樣是為不支援Date.now的浏覽器相容，把Date對象轉換成字元串
16 
17 //日期類支援大于小于操作符
18 console.log(now > start);
19 
20 //日期格式化
21 var date = new Date();
22 
23 console.log(date.toLocaleDateString());//2015-03-29;
24 console.log(date.getFullYear()+'...'+(date.getMonth()+1)+'...'+date.getDate());

Date Demo Code

3、強大的正則類型

《JavaScript進階程式設計第3版》-學習筆記-3

1 /*
 2 RegExp類型
 3  */
 4 
 5 var exp = /^\d+$/ig;//必須轉義(\)的元字元 ( [ { \ ^ $ | ) ? * + . ] }
 6 console.log(exp.test('12324234a'));
 7 
 8 var expEmail = /^\w+@\w+\.\w+\.?\w*$/i;
 9 console.log(expEmail.test('[email protected]'));
10 console.log(expEmail.test('[email protected].'));
11 console.log(expEmail.test('[email protected]'));
12 console.log(expEmail.test('[email protected]'));
13 var expEmail2 = new RegExp('^\\w+@\\w+\\.\\w+\\.?\\w*$','i');
14 console.log(expEmail2.test('[email protected]'));
15 console.log(expEmail2.test('[email protected].'));
16 console.log(expEmail2.test('[email protected]'));
17 console.log(expEmail2.test('[email protected]'));
18 
19 //exec方法
20 var text = 'mom and dad and baby';
21 var pattern = /mom( and dad( and baby)?)?/gi;
22 var matches = pattern.exec(text);
23 console.log(matches.index);
24 console.log(matches.input);
25 console.log(matches[0]);
26 console.log(matches[1]);
27 console.log(matches[2]);
28 
29 text = 'cat, bat, sat, fat';
30 pattern = /.at/;
31 matches = pattern.exec(text);
32 console.log(matches.index);
33 console.log(matches[0]);
34 console.log(pattern.lastIndex);
35 
36 matches = pattern.exec(text);
37 console.log(matches.index);
38 console.log(matches[0]);
39 console.log(pattern.lastIndex);
40 
41 pattern = /.at/g;
42 matches = pattern.exec(text);
43 console.log(matches.index);
44 console.log(matches[0]);
45 console.log(pattern.lastIndex);
46 
47 matches = pattern.exec(text);
48 console.log(matches.index);
49 console.log(matches[0]);
50 console.log(pattern.lastIndex);

RegExp Demo Code

4、函數類型，函數類型也是對象，也有屬性和方法

《JavaScript進階程式設計第3版》-學習筆記-3

1 /*
  2 Function 類型
  3  */
  4 
  5 function sum(num1,num2){
  6     return num1+num2;
  7 }
  8 var sum2 = function(num1,num2){
  9     return num1+num2;
 10 };
 11 
 12 var otherName = sum2;
 13 console.log(otherName(3,2));
 14 
 15 //函數并不能重載的根本原因在于函數名隻是個指針，重新申明一個函數隻是修改了函數指針的值
 16 function factorial(num){
 17     if(num<=1){
 18         return 1;
 19     }
 20     else{
 21         return num * arguments.callee(num-1);//将函數的執行過程與函數名解耦
 22     }
 23 }
 24 /*
 25 window.color = 'red';
 26 var o = {color:'blue'};
 27 function sayColor(){
 28     console.log(this.color);
 29 }
 30 sayColor();//'red' 當在網頁的全局作用域調用函數時，t在該函數裡，this對象指向window
 31 o.sayColor = sayColor;
 32 o.sayColor();//'blue'
 33 //函數名隻是個指針，全局sayCOlor和o.sayCOlor指向的是同一個函數
 34 */
 35 function sayName(name){}
 36 function cp(a,b){}
 37 function pt(){}
 38 console.log(sayName.length);//1
 39 console.log(cp.length);//2
 40 console.log(pt.length);//0
 41 
 42 
 43 /*
 44  函數屬性和方法
 45  */
 46 
 47 //屬性，length，prototype
 48 
 49 function person(name,age){
 50     this.name = name;
 51     this.age = age;
 52     function getName(){
 53         return this.name;
 54     }
 55 }
 56 
 57 console.log(person.length);//1
 58 console.log(person.prototype);//{}
 59 
 60 
 61 //function apply，call
 62 function callSum1(num1,num2){
 63     return sum.apply(this,arguments);
 64 }
 65 
 66 function callSum2(num1,num2){
 67     return sum.apply(this,[num1,num2]);
 68 }
 69 
 70 function callSum3(num1,num2){
 71     return sum.call(this,num1,num2);
 72 }
 73 
 74 console.log(callSum1(10,10));//因為在全局作用域中調用，是以
 75 console.log(callSum2(10,10));
 76 console.log(callSum3(10,10));
 77 
 78 var o = {color:'blue'};
 79 
 80 function sayColor(){
 81     console.log(this.color);
 82 }
 83 
 84 //這裡輸出為undefined 是因為目前運作環境不在浏覽器，也就是不在window的作用域，this指針并不指向window
 85 console.log(this);  //{}
 86 sayColor();             //red
 87 sayColor.call(this);    //red
 88 sayColor.call(window);  //red
 89 
 90 sayColor.call(o);       //blue
 91 
 92 //bind方法
 93 var window = {color:'red'};
 94 var o = {color:'blue'};
 95 
 96 function sayColor(){
 97     console.log(this.color);
 98 }
 99 
100 var objSayColor = sayColor.bind(o);
101 objSayColor();

Function Demo Code

5、基本包裝類型

《JavaScript進階程式設計第3版》-學習筆記-3

1 /*
  2     基本包裝類型
  3  */
  4 
  5 //String
  6 var s1 = 'come.text';
  7 var s2 = s1.substring(2);
  8 //使用new關鍵字建立的執行個體，在執行流離開目前作用域之前都一直儲存在記憶體中。而自動建立的基本包裝類的對象，
  9 //則隻存在于一行代碼的執行瞬間，然後立刻被銷毀，是以不能動态為基本類型值添加屬性和方法
 10 s1 = 'come text';
 11 s1.color = 'red';
 12 console.log(s1.color);//undefined
 13 
 14 var obj = new Object('some test');
 15 console.log(obj instanceof String);//true
 16 
 17 //注意，使用new 調用構造函數與直接調用同名的轉型函數是不一樣的
 18 var value = '25';
 19 var number = Number(value);
 20 console.log(typeof number);//number
 21 
 22 var obj = new Number(value);
 23 console.log(typeof  obj);//object
 24 
 25 
 26 
 27 
 28 //--Boolean
 29 var falseObj = new Boolean(false);
 30 var result = falseObj && true;
 31 
 32 console.log(result);
 33 
 34 var falseValue = false;
 35 result = falseValue && true;
 36 console.log(result);
 37 
 38 console.log(typeof falseObj);//object
 39 console.log(typeof falseValue);
 40 console.log(falseObj instanceof Boolean);
 41 console.log(falseValue instanceof Boolean);
 42 
 43 //--Number
 44 var numberObject = new Number(10);
 45 console.log(numberObject.toString());//10
 46 console.log(numberObject.toString(2));//1010
 47 console.log(numberObject.toString(8));//12
 48 console.log(numberObject.toString(16));//a
 49 console.log(numberObject.toFixed(2));
 50 //如果長度過長，以最大接近小數位進行舍入
 51 console.log((new Number(10.0047)).toFixed(2));//10.00
 52 console.log((new Number(10.005)).toFixed(2));//10.01
 53 //String
 54 var strValue =  "我是lvyahui";
 55 console.log(strValue.length);   //即使是雙位元組字元也算一個字元
 56 
 57 console.log('String Start');
 58 //String 類型
 59 //模式比對
 60 //match方法，找到第一個比對的
 61 var text = "hello world,lvyahui";
 62 var pattern = /.l/;
 63 var matches = text.match(pattern);
 64 console.log(matches.index);//1
 65 matches.every(function(i){
 66     console.log(i);
 67 });
 68 console.log(pattern.lastIndex);//0
 69 
 70 //search 方法，傳回第一個比對字元串的位置
 71 var pos = text.search(/l/);
 72 console.log(pos);
 73 //replace 方法，兩個參數，如果第一個參數是字元串的話，隻會替換第一個字元。要想替換所有的字元串，必須使用正則
 74 text = "hello,this is 15$,you &mi"
 75 var repRes = text.replace(/l/g,"w");
 76 console.log(repRes);
 77 repRes = text.replace(/(l)/g,"w $1");
 78 console.log(repRes);
 79 
 80 function htmlEscpae(text){
 81     return text.replace(/[<>"&]/g,function(match,pos,originalText){
 82         switch (match) {
 83             case "<":
 84                 return "&lt;";
 85                 break;
 86             case ">":
 87                 return "&gt;";
 88                 break;
 89             case "&":
 90                 return "&amp;";
 91                 break;
 92             case "\"":
 93                 return "&quot;";
 94                 break;
 95         }
 96     });
 97 }
 98 
 99 console.log(htmlEscpae("<p class=\"greeting\">hello world!</p>"));
100 
101 var colorText = "red,blur,,green,yellow";
102 var c1 = colorText.split(",");
103 var c2 = colorText.split(",",2);//指定數組的大小
104 var c3 = colorText.split(/[^\,]/);
105 console.log(c1);
106 console.log(c2);
107 console.log(c3);

View Code

在所有JS代碼執行之前就存在兩個内置對象Global和Math對象，不能直接通路Global對象，但Web浏覽器中window對象承擔了該角色

《JavaScript進階程式設計第3版》-學習筆記-3

繼續閱讀

主流浏覽器四大綜合性能測試

JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明三、函數的調用

請求逾時VUE axios重新再次請求

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條

《JavaScript進階程式設計 第3版》-學習筆記-3

繼續閱讀

《JavaScript進階程式設計第3版》-學習筆記-3