前端開發(JSON)

JSON     JavaScript Object Notation,JavaScript 對象表示法

用來傳輸由屬性值或者序列性的值組成的數據對象

JSON 是 JavaScript 的一個子集,但 JSON 是獨立於語言的文本格式,並且採用了類似於 C 語言家族的一些習慣。

JSON 數據格式與語言無關,脫胎於 JavaScript,但當前很多編程語言都支持 JSON 格式數據的生成和解析。JSON 的官方 MIME 類型是 application/json,文件擴展名是 .json。

 {
    "name" : "zhangsan",
    "age" : 18,
    "gender" : "male"
}


//or
{
    "students": [
        { "firstName":"san" , "lastName":"zhang" },
        { "firstName":"si" , "lastName":"li" },
        { "firstName":"wu" , "lastName":"wang" }
    ]
}
  • JSON 是一種純數據格式,它只包含屬性,沒有方法。
  • JSON 的屬性必須通過雙引號引起來。
  • JSON 要求有兩頭的 { } 來使其合法。
  • 可以把 JavaScript 對象原原本本的寫入 JSON 數據,比如:字符串,數字,數組,布爾還有其它的字面值對象。

1.常用內置對象:

Array 對象

var a = [1,2,3];
var b = [4,5,6];
var c =["one","two","three"];
console.log(a.concat(b,c)); //打印結果爲:[1, 2, 3, 4, 5, 6, "one", "two", "three"]

//join() 方法,將數組轉換成字符串。
//pop() 方法,刪除並返回數組的最後一個元素。
//push() 方法,向數組的末尾添加一個或更多元素,並返回新的長度。
//reverse() 方法,顛倒數組的順序。
var a = [1,2,3,4];
a.reverse();
console.log(a); // a 數組變成:[4, 3, 2, 1]。

//shift() 方法,刪除並返回數組的第一個元素。
//unshift() 方法,向數組的開頭添加一個或更多元素,並返回新的長度。
//slice() 方法,從某個已有的數組返回選定的元素。語法爲:
arrayObject.slice(start,end);
//strat 值是必需的,規定從何處開始選取。
//end 值可選,規定從何處結束選取,如果沒有設置,默認爲從 start 開始選取到數組後面的所有元素。

//splice() 方法,刪除或替換當前數組的某些項目。語法爲:
arrayObject.splice(start,deleteCount,options)
// start 值是必需的,規定刪除或替換項目的位置
// deleteCount 值是必需的,規定要刪除的項目數量,如果設置爲 0,則不會刪除項目。
// options 值是可選的,規定要替換的新項目
// 和 slice() 方法不同的是 splice() 方法會修改數組。

var a = [1,2,3,4,5,6];
a.splice(2,2,"abc");
a; // 最終 a 數組變成了[1, 2, "abc", 5, 6]
//sort() 方法,將數組進行排序。語法爲:
arrayObject.sort(sortby);
// sortby 是可選的,規定排序順序,必需是函數。如果沒有參數的話,將會按照字母順序進行排序,更準確的說是按照字符編碼的順序進行排序。如果想按照其他標準進行排序,則需要提供比較函數。
//toString() 方法,把數組轉換爲字符串,並返回結果。

String 對象

//String 對象的常用屬性:length。獲取字符串的長度。
/String 對象的常用方法():
//charAt() 方法,獲取指定位置處字符。語法爲:
stringObject.charAt(index);
//字符串中第一個字符的下標是 0。如果參數 index 不在 0 與 string.length 之間,該方法將返回一個空字符串。


var str = "Hello world!";
document.write(str.charAt(2));
//以上代碼輸出爲 l



//charCodeAt() 方法,獲取指定位置處字符的 Unicode 編碼。語法爲:
stringObject.charCodeAt(index);
//字符串中第一個字符的下標是 0。如果 index 是負數,或大於等於字符串的長度,則 charCodeAt() 返回 NaN。


var str = "Hello world!";
document.write(str.charCodeAt(2));
//以上代碼輸出爲 l08

 

  • concat() 方法,連接字符串,等效於 “+”,“+” 更常用。與數組中的 concat() 方法相似。
  • slice() 方法,提取字符串的片斷,並在新的字符串中返回被提取的部分
  • indexOf() 方法,檢索字符串。
  • toString() 方法,返回字符串。
  • toLowerCase() 方法,把字符串轉換爲小寫。
  • toUpperCase() 方法,把字符串轉換爲大寫。
  • replace() 方法,替換字符串中的某部分。
  • split() 方法,把字符串分割爲字符串數組。

Date 對象

Date 對象方法:

  • Date():返回當日的日期和時間。(輸出是中國標準時間)
  • getDate():從 Date 對象返回一個月中的某一天 (1 ~ 31)。
  • getDay():從 Date 對象返回一週中的某一天 (0 ~ 6)。
  • getMonth():從 Date 對象返回月份 (0 ~ 11)。
  • getFullYear():從 Date 對象以四位數字返回年份。
  • getHours():返回 Date 對象的小時 (0 ~ 23)。
  • getMinutes():返回 Date 對象的分鐘 (0 ~ 59)。
  • getSeconds():返回 Date 對象的秒數 (0 ~ 59)。
  • getMilliseconds():返回 Date 對象的毫秒(0 ~ 999)。

Math 對象

Math 對象的常用屬性:

  • E :返回常數 e (2.718281828...)。
  • LN2 :返回 2 的自然對數 (ln 2)。
  • LN10 :返回 10 的自然對數 (ln 10)。
  • LOG2E :返回以 2 爲底的 e 的對數 (log2e)。
  • LOG10E :返回以 10 爲底的 e 的對數 (log10e)。
  • PI :返回π(3.1415926535...)。
  • SQRT1_2 :返回 1/2 的平方根。
  • SQRT2 :返回 2 的平方根。

Math 對象的常用方法:

  • abs(x) :返回 x 的絕對值。
  • round(x) :返回 x 四捨五入後的值。
  • sqrt(x) :返回 x 的平方根。
  • ceil(x) :返回大於等於 x 的最小整數。
  • floor(x) :返回小於等於 x 的最大整數。
  • sin(x) :返回 x 的正弦。
  • cos(x) :返回 x 的餘弦。
  • tan(x) :返回 x 的正切。
  • acos(x) :返回 x 的反餘弦值(餘弦值等於 x 的角度),用弧度表示。
  • asin(x) :返回 x 的反正弦值。
  • atan(x) :返回 x 的反正切值。
  • exp(x) :返回 e 的 x 次冪 (e^x)。
  • pow(n, m) :返回 n 的 m 次冪 (nm)。
  • log(x) :返回 x 的自然對數 (ln x)。
  • max(a, b) :返回 a, b 中較大的數。
  • min(a, b) :返回 a, b 中較小的數。
  • random() :返回大於 0 小於 1 的一個隨機數。

2.創建對象和訪問對象

//通過 new Object() 創建對象
//this:誰調用 this,它就是誰。
var student = new Object();
  student.name = 'zhangsan',
  student.age = 18,
  student.gender = 'male',
  student.sayHi = function () {
    console.log("hi,my name is "+this.name);
  }

//通過工廠函數創建對象
function createStudent(name, age, gender) {
  var student = new Object();
  student.name = name;
  student.age = age;
  student.gender = gender;
  student.sayHi = function(){
    console.log("hi,my name is "+this.name);
  }
  return student;
}
var s1 = createStudent('zhangsan', 18, 'male');

//自定義構造函數
function Student(name,age,gender){
  this.name = name;
  this.age = age;
  this.gender = gender;
  this.sayHi = function(){
       console.log("hi,my name is "+this.name);
  }
}
var s1 = new Student('zhangsan', 18, 'male');

通過 for...in 語句用於遍歷數組或者對象的屬性(對數組或者對象的屬性進行循環操作)。

  var student = {
                name: 'zhangsan',
                age: 18,
                gender: 'male'
            };
            for(var key in student) {
                console.log(key);
                console.log(student[key]);
            }

//使用 delete 刪除對象的屬性。比如在控制檯中輸入以下代碼:

var student = {
  name: 'zhangsan',
  age: 18,
  gender: 'male'
};
student.name; // "zhangsan"
delete student.name;
student.name; // undefined
一個函數,格式化日期對象,最終輸入形式爲:yyyy/MM/dd HH:mm:ss。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <script>
            function formatDate(d) {
                //如果d不是日期對象的實例,返回空
                if(!d instanceof Date) {
                    return;
                }
                var year = d.getFullYear(),
                    month = d.getMonth() + 1,
                    date = d.getDate(),
                    hour = d.getHours(),
                    minute = d.getMinutes(),
                    second = d.getSeconds();
                    month = month < 10 ? '0' + month : month;
                    date = date < 10 ? '0' + date : date;
                    hour = hour < 10 ? '0' + hour : hour;
                    minute = minute < 10 ? '0' + minute : minute;
                    second = second < 10 ? '0' + second : second;
                    return year + '/' + month + '/' + date + ' ' + hour + ':' + minute + ':' + second;
            }
            console.log(formatDate(new Date()));
        </script>
    </body>

</html>



寫一個函數去掉數組中的重複元素。比如有一個數組 array=["x","c","a","b","c","b","c"]。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <script type="text/javascript">
            var array=["x","c","a","b","c","b","c"]

            function clearArray() {
                var o = {};
                for(var i = 0; i < array.length; i++) {
                    var item = array[i];
                    if(o[item]) {
                        o[item]++;
                    } else {
                        o[item] = 1;
                    }
                }
                var tmpArray = [];
                for(var key in o) {
                    if(o[key] == 1) {
                        tmpArray.push(key);
                    } else {
                        if(tmpArray.indexOf(key) == -1) {
                            tmpArray.push(key);
                        }
                    }
                }
                return tmpArray;
            }

            console.log(clearArray(array));
        </script>
    </body>

</html>



寫一個函數判斷一個字符串中出現次數最多的字符,並統計這個次數。比如有這樣一個字符串:"daskljahiagnaknscsjdwfanalvnahdpwod"。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            var str = "daskljahiagnaknscsjdwfanalvnahdpwod";

            function max(){
                var o = {};
                for(var i = 0;i < str.length;i++){
                    var item = str.charAt(i);
                    if(o[item]){
                        o[item]++;    
                    }
                    else{
                        o[item] = 1;
                    }
                }
                var max = 0;
                for(var key in o){
                    if(max < o[key]){
                        max = o[key];
                        var tmp;
                        tmp = key;

                    }
                }
                console.log("出現次數最多的字符是:"+ tmp + "出現次數爲:"+ max);
            }

            max(str);
        </script>
    </body>
</html>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章