ECMAScript 5.0 基礎語法(下)“稍微重點一點點”
阿新 • • 發佈:2018-12-08
var 小寫 大於等於 subst 修改 獨立 ray floor name
接上篇
七、常用內置對象(復雜數據類型)(重點)
(1)數組Array
創建:例 var colors = [‘red‘,‘blue‘,‘green‘] #推薦這樣,因為簡單粗暴
或:var colors = new Array();
color[0] = ‘red‘;
color[1] = ‘blue‘;
color[2] = ‘green‘; #很繁瑣,忘了它吧
數組的常用方法:
1 //數組的合並concat() 2 var north = [‘北京‘,‘山東‘,‘天津‘];數組常用方法的例子3 var south = [‘東莞‘,‘深圳‘,‘上海‘]; 4 var newCity = north.concat(south); 5 console.log(newCity) 6 7 //join() 將數組中的元素連接起來,變成一個新的字符串 8 var score = [98,78,76,100,0]; 9 var str = score.join(‘|‘); 10 console.log(str);//"98|78|76|100|0" 11 12 //slice(start,end);返回數組的一組數據,顧頭不顧尾13 var arr = [‘張三‘,‘李四‘,‘王文‘,‘趙六‘]; 14 var newArr = arr.slice(1,3); 15 console.log(newArr);//["李四", "王文"] 16 17 //pop 移除數組的最後一個元素 18 var arr = [‘張三‘,‘李四‘,‘王文‘,‘趙六‘]; 19 arr.pop(); 20 console.log(arr);//["張三", "李四","王文"] 21 22 //push 向數組最後添加一個元素23 var arr = [‘張三‘,‘李四‘,‘王文‘,‘趙六‘]; 24 arr.push(‘小馬哥‘); 25 console.log(arr); 26 //["張三", "李四","王文","趙六","小馬哥"] 27 28 //reverse()翻轉數組 29 var names = [‘alex‘,‘xiaoma‘,‘tanhuang‘,‘angle‘]; 30 names.reverse(); 31 console.log(names); 32 33 //sort 對數組排序 34 var names = [‘alex‘,‘xiaoma‘,‘tanhuang‘,‘abngel‘]; 35 names.sort(); 36 console.log(names);// ["alex", "angle", "tanhuang", "xiaoma"] 37 38 //isArray 判斷是否為數組 39 布爾類型值 = Array.isArray(被檢測的值)
(2)字符串string
1 //chartAt() 返回指定索引的位置的字符 2 3 var str = ‘alex‘; 4 var charset = str.charAt(1); 5 console.log(charset);//l 6 7 //concat 返回字符串值,表示兩個或多個字符串的拼接 8 9 var str1 = ‘al‘; 10 var str2 = ‘ex‘; 11 console.log(str1.concat(str2,str2));//alexex 12 13 //replace(a,b) 將字符串a替換成字符串b 14 15 var a = ‘1234567755‘; 16 var newStr = a.replace("4567","****"); 17 console.log(newStr);//123****755 18 19 //indexof() 查找字符的下標,如果找到返回字符串的下標,找不到則返回-1 。跟seach()方法用法一樣 20 21 var str = ‘alex‘; 22 console.log(str.indexOf(‘e‘));//2 23 console.log(str.indexOf(‘p‘));//-1 24 25 //slice(start,end) 左閉右開 分割字符串 26 27 var str = ‘小馬哥‘; 28 console.log(str.slice(1,2));//馬 29 30 //split(‘a‘,1) 以字符串a分割字符串,並返回新的數組。如果第二個參數沒寫,表示返回整個數組,如果定義了個數,則返回數組的最大長度 31 32 var str = ‘我的天呢,a是嘛,你在說什麽呢?a哈哈哈‘; 33 console.log(str.split(‘a‘)); 34 //["我的天呢,", "是嘛,你在說什麽呢?", "哈哈哈"] 35 36 //substr(statr,end) 左閉右開 37 38 var str = ‘我的天呢,a是嘛,你在說什麽呢?a哈哈哈‘; 39 console.log(str.substr(0,4));//我的天呢 40 41 //toLowerCase()轉小寫 42 43 var str = ‘XIAOMAGE‘; 44 console.log(str.toLowerCase());//xiaomage 45 46 //toUpperCase()轉大寫 47 48 var str = ‘xiaomage‘; 49 console.log(str.toUpperCase());//XIAOMAGEstring字符串常用方法的例子
(3)Math內置對象
1 //Math.ceil() 向上取整,‘天花板函數‘ 2 3 var x = 1.234; 4 //天花板函數 表示大於等於 x,並且與它最接近的整數是2 5 var a = Math.ceil(x); 6 console.log(a);//2 7 8 // Math.floor 向下取整,‘地板函數‘ 9 10 var x = 1.234; 11 // 小於等於 x,並且與它最接近的整數 1 12 var b = Math.floor(x); 13 console.log(b);//1 14 15 // 求兩個數的最大值和最小值 16 17 //求 兩個數的最大值 最小值 18 console.log(Math.max(2,5));//5 19 console.log(Math.min(2,5));//2 20 21 //隨機數 Math.random() 22 23 var ran = Math.random(); 24 console.log(ran); //[0,1);math的應用例子
八、函數(重點)
無需多說,哪門語言中,函數應用都很頻繁,當然重要。作用就是,規範,簡潔,不low。
1 //js中聲明函數 2 function add(x,y){ 3 return x+y; 4 } 5 console.log(add(1,2)); //function相當於python中的def 6 7 //偽數組arguments 8 fn(2,4); 9 fn(2,4,6); 10 fn(2,4,6,8); 11 12 function fn(a,b,c) { 13 console.log(arguments); 14 console.log(fn.length); //獲取形參的個數 15 console.log(arguments.length); //獲取實參的個數 16 17 console.log("----------------"); 18 } 19 //之所以說arguments是偽數組,是因為:arguments可以修改元素,但不能改變數組的長短。舉例: 20 21 fn(2,4); 22 fn(2,4,6); 23 fn(2,4,6,8); 24 25 function fn(a,b) { 26 arguments[0] = 99; //將實參的第一個數改為99 27 arguments.push(8); //此方法不通過,因為無法增加元素 28 } 29 30 //清空數組的幾種方式: 31 32 var array = [1,2,3,4,5,6]; 33 array.splice(0); //方式1:刪除數組中所有項目 34 array.length = 0; //方式2:length屬性可以賦值,在其它語言中length是只讀 35 array = []; //方式3:推薦函數例子
九、對象Object(重點)
1.使用Object或對象字面量創建對象
2.工廠模式創建對象
3.構造函數模式創建對象
4.原型模式創建對象
1 /* 2 // 1.使用Object或對象字面量創建對象 3 4 // 對象 是屬性和方法 5 var person = new Object(); 6 console.log(person); 7 console.log(typeof person); 8 9 // 給對象賦值 10 person.name = ‘alex‘; 11 person.age = 20; 12 person.fav2 = function(){ 13 14 } 15 console.log(person); 16 // var favfn = function(){ 17 // // this 指的是當前的對象 跟python中的self類似 18 // console.log(this.name); 19 // } 20 var person2 = { 21 name:‘wusir‘, 22 age:26, 23 fav:function(){ 24 // this 指的是當前的對象 跟python中的self類似 25 console.log(this.name); 26 } 27 } 28 29 console.log(person2); 30 31 person2.fav(); 32 */ 33 // 提問: 能不能像工廠車間一樣,車床 不斷生產對象 ? 工廠模式創建對象 34 35 36 /* 37 // 2.工廠模式創建對象 38 function createPerson(name, age) { 39 var o = new Object(); 40 o.name = name; 41 o.age = age; 42 43 return o; 44 } 45 46 var person1 = createPerson(‘alex‘, 20); 47 var person2 = createPerson(‘alex2‘, 20); 48 var person3 = createPerson(‘alex3‘, 20); 49 var person4 = createPerson(‘alex4‘, 20); 50 51 // instanceof 52 console.log(person1 instanceof Object); 53 console.log(person2 instanceof Object); 54 55 function createFruit(name, age) { 56 var o = new Object(); 57 o.name = name; 58 o.age = age; 59 60 return o; 61 } 62 63 var f = createFruit(‘蘋果‘,.2); 64 console.log(f instanceof Object) 65 66 */ 67 68 69 70 // 3.構造函數模式創建對象 構造函數可以創建對象 使用new 關鍵字來創建對象 函數名首字母大寫 71 // new Array() 72 // new Object() 73 // new String() 74 75 /* 76 function Person(name, age) { 77 this.name = name; 78 this.age = age; 79 this.alertName = function() { 80 alert(this.name); 81 } 82 } 83 84 function Fruit(name, age) { 85 this.name = name; 86 this.age = age; 87 this.alertName = function() { 88 alert(this.name); 89 } 90 } 91 92 var p1 = new Person(‘alex1‘, 20); 93 p1.alertName(); 94 95 var f1 = new Fruit(‘香蕉‘,30); 96 f1.alertName(); 97 98 console.log(p1 instanceof Person); 99 console.log(f1 instanceof Fruit); 100 101 console.log(p1 instanceof Object); 102 */ 103 104 105 106 107 108 109 // 4.原型模式創建對象 propotype 它是當前對象的父類 110 111 112 function Person(name,age){ 113 this.name = name; 114 this.age = age; 115 116 } 117 118 Person.prototype.alertName = function(){ 119 alert(this.name); 120 }; 121 122 var p1 = new Person(‘alex‘,20); 123 var p2 = new Person(‘alex2‘,23); 124 125 // 內存地址 和值 126 console.log(p1===p2); 127 128 p1.alertName(); 129 p2.alertName();對象Object
十、JSON(重點)
JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式,采用完全獨立於語言的文本格式,是理想的數據交換格式。同時,JSON是 JavaScript 原生格式,這意味著在 JavaScript 中處理 JSON數據不須要任何特殊的 API 或工具包。
1 /* 2 // json 是一個輕量級的數據交換格式,json有兩種結構:對象 和數組 3 4 // 1.對象 5 // var person = { 6 // name:‘zhangsan ‘ 7 // } 8 9 // var packJSON = {"name":"alex","pwd":123}; 10 // console.log(packJSON); 11 12 // 2.數組 是值的有序集合 13 var packJSON = [{"name":"alex","pwd":123},{"name":"wusir","pwd":123}] 14 console.log(packJSON); 15 */ 16 // json對象和json字符串轉換 17 // 在數據傳輸過程中,JSON通常是以字符串的形式傳遞,但是js更喜歡操作JSON對象,所以Jjson對象和json字符串轉換非常重要 18 19 /*重要 20 var jsonStr = ‘{"name":"alex","pwd":123}‘; 21 22 // (1)json字符串=》json 23 24 var jsonobject = JSON.parse(jsonStr); 25 console.log(jsonobject); 26 27 // (2) 將json對象=》 json字符串 28 var jsonStr2 = JSON.stringify(jsonobject) 29 console.log(jsonStr2); 30 console.log(typeof jsonStr2); 31 */ 32 // 3.遍歷JSON對象和JSON數組 33 // (1)遍歷JSON對象 34 35 /* 36 var packJSON = {"name":"alex","pwd":123}; 37 38 // for in 39 40 for(var k in packJSON){ 41 // k指的是鍵值的索引 42 console.log(k+‘ ‘+packJSON[k]) 43 } 44 45 */ 46 // (2) 遍歷JSON數組 47 var packJSON = [{"name":"alex","pwd":123},{"name":"wusir","pwd":123}]; 48 49 for(var i in packJSON){ 50 console.log(i+‘ ‘ + packJSON[i].name + ‘ ‘ + packJSON[i].pwd ); 51 52 }json例子
下篇(完)!
ECMAScript 5.0 基礎語法(下)“稍微重點一點點”