1. 程式人生 > >ECMAScript 5.0 基礎語法(下)“稍微重點一點點”

ECMAScript 5.0 基礎語法(下)“稍微重點一點點”

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());//XIAOMAGE
string字符串常用方法的例子

  (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 基礎語法(下)“稍微重點一點點”