JavaScript 基礎四

遍歷物件的屬性

for...in 陳述句用于對陣列或者物件的屬性進行回圈操作，

    for (變數 in 物件名字) {
        在此執行代碼
    }

• 這個變數是自定義 符合命名規范 但是一般我們 都寫為 k 或則 key
• 后面的是物件 可以 陣列 因為 陣列也屬于物件

1） for in 遍歷 物件

    var obj = {
         name: 'andy',
         age: 18,
         sex: '男'
    }
    console.log(obj.length); // undefined
    for (var k in obj) {
        console.log(k); // 這里的k 是屬性名
        console.log(obj[k]); // 這里的 obj[k] 是屬性值
    }

• 再物件里面， 這里的k 是 屬性名

遍歷 JSON格式

JSON(JavaScript Object Notation) 是一種輕量級的資料交換格式， 易于人閱讀和撰寫，

1. JSON 資料的書寫格式是：名稱/值對，
2. 里面的屬性和值都要用 雙引號 括起來

     var json = {
         "id": "1",
         "name": "andy",
          "age": "18",
          "tel": "110120"
     }
     for (var k in json) {
        console.log(k); // 這里的k 是屬性名
        console.log(obj[k]); // 這里的 obj[k] 是屬性值
    }

簡單型別和復雜型別

簡單型別又叫做基本資料型別或者值型別，復雜型別又叫做參考型別

值型別：簡單資料型別/基本資料型別，在存盤時，變數中存盤的是值本身，因此叫做值型別，

參考型別：復雜資料型別，在存盤是，變數中存盤的僅僅是地址（參考），因此叫做參考資料型別，

堆 和 堆疊

堆疊空間分配區別：
　　1、堆疊（作業系統）：由作業系統自動分配釋放 ，存放函式的引數值，區域變數的值等，其操作方式類似于資料結構中的堆疊；
　　2、堆（作業系統）： 存盤復雜型別(物件)，一般由程式員分配釋放， 若程式員不釋放，由垃圾回識訓制回收，

值型別記憶體分配

• 值型別（簡單資料型別）： string ，number，boolean，undefined，null

• 值型別變數 的 資料 直接存放在變數（堆疊空間）中

var  n1 = 10; 
var n2 = n1;
n1 = 20; 
n1  結果為  20     n2  的值 還是  10  

參考型別記憶體分配

• 參考型別（復雜資料型別）：通過 new 關鍵字創建的物件（系統物件、自定義物件）Object Array Date等

• 參考型別變數（堆疊空間）里存放的是地址，真正的物件實體存放在堆空間中，

  執行代碼時，new 的物件實體 被創建在堆空間中，堆地址通過 = 號 賦值到變數 usrObj 的堆疊空間中，

• 我們通過變數 usrObj 訪問 Object物件實體 里的內容時，實際是通過 堆疊空間里存放的堆地址來找到物件實體，再呼叫物件實體里的成員，

function Person(name, age) {
   this.name = name;
   this.age = age;
 }
var p1 = new Person('andy', 55);
var p2 = p1;
p1.name = 'red';
console.log(p2.name);  

值型別傳參

思考以下代碼結果：

function fn(a) {
    a++;
    console.log(a); 
}
var x = 10;
fn(x);
console.log(x)；

• 結論：函式的形參也可以看做是一個變數，當我們把一個值型別變數作為引數傳給函式的形參時，其實是把變數在堆疊空間里的值 復制 了一份給形參，那么在方法內部對形參做任何修改，都不會影響到的外部變數，

參考型別傳參

// 復雜資料型別（參考型別）傳參
// 下面代碼輸出的結果?
function Person(name) {
    this.name = name;
}

function f1(x) { // x = p
    console.log(x.name); // 2. 這個輸出什么 ?    劉德華
    x.name = "張學友";
    console.log(x.name); // 3. 這個輸出什么 ?    張學友
}
var p = new Person("劉德華");
console.log(p.name); // 1. 這個輸出什么 ?   劉德華
f1(p);
console.log(p.name); // 4.這個輸出什么 ?  張學友

結論：函式的形參也可以看做是一個變數，當我們把 參考型別變數 傳給 形參時，其實是把 變數在堆疊空間里保存的 堆地址 復制給了 形參，形參和實參其實保存的是同一個堆地址，所以操作的是同一個物件，

Math物件

Math物件不是建構式，它具有數學常數和函式的屬性和方法，

跟數學相關的運算來找Math中的成員（求絕對值，取整）

Math

注意以下都是方法 所以 必須帶括號

演示：Math.PI、Math.random()、Math.floor()/Math.ceil()、Math.round()、Math.abs() 、Math.max()

    Math.PI						// 圓周率
    Math.floor() 	              // 向下取整
    Math.ceil()                   // 向上取整
    Math.round()				// 四舍五入版 就近取整   注意 -3.5   結果是  -3 
    Math.abs()					// 絕對值
    Math.max()/Math.min()		 // 求最大和最小值
    Math.sin()/Math.cos()		 // 正弦/余弦
    Math.power()/Math.sqrt()	 // 求指數次冪/求平方根

Math.random 生成亂數

隨機回傳一個小數 ， 取值范圍 是 范圍[0，1) 左閉右開 0 <= x < 1

console.log(Math.random()); // 0.40645855054029756

Date物件

Date物件 和 Math 物件不一樣，他是一個建構式， 所以我們需要 實體化使用，

創建 Date 實體用來處理日期和時間，Date 物件基于1970年1月1日（世界標準時間）起的毫秒數，

為什么計算機起始時間從1970年開始

1）Date() 的使用

    // 獲取當前時間，
    var now = new Date();
    console.log(now);	
    
    Date建構式的引數
    // 括號里面時間 ，就回傳 引數里面的時間
    日期格式字串  '2015-5-1'	 new Date('2015-5-1')  或者  new Date('2015/5/1') 

總結：

• 如果Date()不寫引數，就回傳當前時間
• 如果Date()里面寫引數，就回傳 括號里面輸入的時間

2）獲取日期的毫秒形式

Date 物件基于1970年1月1日（世界標準時間）起的毫秒數，

日期格式化方法

我們想要 2018-8-8 8:8:8 格式怎么辦？

• 獲取日期指定部分
  所以我們手動的得到這種格式，

  方法名	說明	代碼___d = new Date()
  getFullYear()	獲取當年	d.getFullYear()
  getMonth()	獲取當月（0-11）	d.getMonth()
  getDate()	獲取當天日期	d.getDate()
  getDay()	獲取星期幾 （周日0 到周六6）	d.getDay()
  getHours()	獲取當前小時	d.getHours()
  getMinutes()	獲取當前分鐘	d.getMinutes()

| getSeconds() | 獲取當前秒鐘 | d.getSeconds() |

• 注意 月份 和星期 取值范圍是從 0開始的，

案例

• 2018年5月29日 星期二 請寫出這個格式

function getMyDate() {
    var arr = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
    var date = new Date();
    // 2018年5月29日 星期二 
    var str = date.getFullYear() + '年' + (date.getMonth() + 1) + '月' + date.getDate() + '日 ' + arr[date.getDay()];
    return str;
}
console.log(getMyDate());

寫一個函式，格式化日期物件，HH:mm:ss 的形式 比如 00:10:45

function getTimer() {
    var date = new Date();
    // var str = date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();
    var h = date.getHours();
    var m = date.getMinutes();
    var s = date.getMinutes();
    // if(h < 0) {
    //     h = '0' + h;
    // }
    h = h < 10 ? '0' + h : h
    m = m < 10 ? '0' + m : m
    s = s < 10 ? '0' + s : s
    return h + ':' + m + ':' + s;
}
console.log(getTimer());

• 做一個倒計時效果
  計算公式：

        d = parseInt(總秒數/ 60/60 /24); // 計算天數
        h = parseInt(總秒數/ 60/60 %24) // 計算小時
        m = parseInt(總秒數 /60 %60 ); // 計算分數
        s = parseInt(總秒數%60);  // 計算當前秒數 

function getCountTime(endTime) {
    var d, h, m, s;
    //1. 用用戶輸入的時間 減去 開始的時間就是 倒計時 
    //2. 但是要注意，我們得到是 毫秒數  然后 把這個毫秒數轉換為 相應的 天數 時分秒 就好了
    var countTime = parseInt((new Date(endTime) - new Date()) / 1000);
    // console.log(countTime);
    // 3. 把得到的毫秒數 轉換 當前的天數 時分秒
    console.log(countTime);

    d = parseInt(countTime / 60 / 60 / 24); // 計算天數

    h = parseInt(countTime / 60 / 60 % 24); // 計算小時

    m = parseInt(countTime / 60 % 60); // 計算分數

    s = parseInt(countTime % 60); // 計算當前秒數 
    return '還剩下' + d + '天' + h + '時' + m + '分' + s + '秒 ';
}
console.log(getCountTime('2020-5-30 17:30'));

Array物件

• 創建陣列物件的兩種方式
  • 字面量方式
  • new Array()

//    空陣列 
var arr = new Array(); 
// 陣列長度為3 但是內容為空
var arr = new Array(3); 
// 創建陣列  [3,4,6]
var arr = new Array(3, 4, 6); 

// 2. 使用字面量創建陣列物件
var arr = [1, 2, 3];

// 獲取陣列中元素的個數
console.log(arr.length);

• 檢測一個物件是否是陣列

  • instanceof instanceof 運算子 就是判斷一個物件是否屬于某種型別
  • Array.isArray() HTML5中提供的方法，有兼容性問題

  函式的引數，如果要求是一個陣列的話，可以用這種方式來進行判斷

  var arr = [1, 23];
  var obj = {};
  console.log(arr instanceof Array); // true
  console.log(obj instanceof Array); // false
  console.log(Array.isArray(arr)); // true
  console.log(Array.isArray(obj)); // false
  

• 陣列常用方法

  演示：push()、shift()、unshift()、reverse()、sort()、splice()、indexOf() 等

1）添加洗掉陣列元素方法

// push
var arr = ['pink', 'deeppink', 'hotpink'];
console.log(arr.push('lightpink')); //  回傳陣列長度  4
console.log(arr); //  ['pink', 'deeppink', 'hotpink', 'linghtpink']

// pop
var arr = ['pink', 'deeppink', 'hotpink'];
console.log(arr.pop()); // 回傳洗掉的那1個元素  'hotpink'
console.log(arr); // 回傳洗掉的那1個元素  ["pink", "deeppink"]

// unshift
var arr = ['pink', 'deeppink', 'hotpink'];
console.log(arr.unshift('lightpink')); //  回傳陣列長度  4
console.log(arr); //  ['linghtpink','pink', 'deeppink', 'hotpink']

// shift 
var arr = ['pink', 'deeppink', 'hotpink'];
console.log(arr.shift()); // 回傳洗掉的那1個元素  'pink'
console.log(arr); // 回傳洗掉的那1個元素  ["deeppink", "hotpink"]

• 工資的陣列[1500, 1200, 2000, 2100, 1800],把工資超過2000的洗掉

var arr = [1500, 1200, 2000, 2100, 1800];
var newArr = [];
for (var i = 0; i < arr.length; i++) {
    if (arr[i] < 2000) {
        newArr.push(arr[i]);
    }
}
console.log(newArr);

filter 方法

  //陣列的迭代方法
    var arr1 = [2,2,4,3,5,6,75,32,35] //將大于10的數去除掉
    var newArr1 =  arr1.filter(function (ele,index,array){
      console.log(ele);
      if(ele > 10){
        return false 
      }
      return true;
    })
    console.log(newArr1);

2）陣列排序方法

// reverse 
var arr = ['red', 'andy'];
console.log(arr.reverse()); // 回傳翻轉之后的陣列
console.log(arr); // 原先陣列也被修改

sort 如果呼叫該方法時沒有使用引數，按照字符編碼的順序進行排序，

var arr = [1, 64, 9, 6];
arr.sort(function(a, b) {
    return b - a; // 降a序
    // return a - b;   升序
});
console.log(arr);

3) 陣列操作方法

var arr1 = [1, 2];
var arr2 = ['pink', 'red'];
var arr3 = ['andy', 18];
//回傳連接之后的新陣列
console.log(arr1.concat(arr2, arr3));

// arr.slice(begin, end)   begin (包含自己） 和  end (不包含)  都是 索引號   
var arr = ['red', 'green', 'blue', 'pink'];
console.log(arr.slice()); // 默認截取整個陣列
console.log(arr.slice(0)); // 從第0個截取到最后
console.log(arr.slice(0, 3)); // 從第0個截取  截取 索引號是3的但是不包含3

// splice 洗掉
// 2. splice() 插入、洗掉或替換陣列的元素
        // (1) 洗掉某幾個元素   陣列.splice(起始位置, [洗掉的個數])
        var arr = ['red', 'green', 'blue', 'pink'];
        // 起始位置 從 0 開始計算    洗掉的個數 是洗掉幾個的意思 
        arr.splice(2, 2); // 從索引號2的位置開始  洗掉 2個元素 
        console.log(arr);
        var arr1 = ['red', 'green', 'blue', 'pink']; // 我們要把green 和blue 刪掉
        arr1.splice(1, 2); // 從索引號1的位置開始  洗掉 2個元素 
        console.log(arr1);
        var arr2 = ['red', 'green', 'blue', 'pink']; // 我們要把green 和blue  pink 刪掉
        arr2.splice(1); // 只寫了一個起始位置不寫洗掉的個數，默認從起始位置洗掉到陣列的最后面
        console.log(arr2);
        // (2) 洗掉某幾個元素 后的回傳值 （跟我們前面學的 pop  shift 回傳的是被洗掉的元素）
        var arr3 = ['red', 'green', 'blue', 'pink'];
        console.log(arr3.splice(0, 2)); // 洗掉了 red  green  回傳值就是  red green
        console.log(arr3); // 原陣列剩下 blue  pink
        // (3) 插入或者 替換陣列中的元素   陣列.splice(起始位置, [洗掉的個數], [元素1, 元素2...])
        var arr4 = ['red', 'green', 'blue', 'pink'];
        // arr4.splice(0, 0, 'hotpink');
        // arr4.splice(0, 0, 'hotpink', 'lightpink');
        // 在 索引號2 的位置 前面 插入 某幾個元素 
        arr4.splice(2, 0, 'hotpink', 'lightpink');
        console.log(arr4);
        // (4) 替換陣列中的元素
        var arr5 = ['red', 'green', 'blue', 'pink'];
        // 我們把 pink 顏色替換為 skyblue  （刪掉 pink 替換為 skyblue）
        arr5.splice(3, 1, 'skyblue');
        console.log(arr5);

• 清空陣列

// 方式1 推薦 

arr = [];

// 方式2 

arr.length = 0;

// 方式3

arr.splice(0, arr.length);

4) 陣列位置方法

5) 陣列轉換為字串

var arr = [1, 2, 3, 4, 5];
console.log(arr.toString()); // 字符型 的 1,2,3,4,5

var arr = ['red', 'green', 'blue', 'pink'];
console.log(arr.join()); // 跟toString() 一樣， 轉換為字串
console.log(arr.join('-')); //red-green-blue-pink

• 撰寫一個方法去掉一個陣列的重復元素（重點案例必須掌握的）

// ['c', 'a', 'z', 'a', 'x', 'a', 'x', 'c', 'b']; 取消重復的元素 陣列去重 （for回圈）
// 把舊陣列里面 不重復的元素選取出來放到新陣列中   重復的元素之保留一個 放到新陣列中 陣列去重
var arr = ['c', 'a', 'z', 'a', 'x', 'a', 'x', 'c', 'b'];
var newArr = []; // 新陣列
for (var i = 0; i < arr.length; i++) { // 遍歷的是舊陣列
    // 判斷條件 我們去查詢 --新陣列-- 如果舊陣列里面的一個元素在新陣列里面沒有出現過，我們就添加 否則不添加 
    if (newArr.indexOf(arr[i]) === -1) {
        newArr.push(arr[i]);
    }
}
console.log(newArr);

String物件

1） 基本包裝型別（理解）

為了方便操作基本資料型別，JavaScript還提供了三個特殊的參考型別：String/Number/Boolean

基本包裝型別就是 把簡單資料型別包裝成為復雜資料型別， 這樣 基本資料型別就有了屬性和方法

// 下面代碼的問題？
var str = 'andy';
console.log(str.length);
// 按道理 基本資料型別 是 沒有屬性和方法的
// 物件才有屬性和方法的
// 這個原因是因為， js 會把 基本資料型別包裝為復雜資料型別
//  執行程序如下  生成臨時變數 把簡單型別包裝為復雜資料型別
var temp = new String('andy');
// 賦值給 我們宣告的 字符變數
str = temp;
// 銷毀給臨時變數
temp = null;

字串的不可變

指的是里面的值不可變， 看上去可以改變內容，其實是地址變了，新開辟了一個記憶體空間，

var str = 'abc';
str = 'hello';
// 當重新給str賦值的時候，常量'abc'不會被修改，依然在記憶體中
// 重新給字串賦值，會重新在記憶體中開辟空間，這個特點就是字串的不可變
// 由于字串的不可變，在大量拼接字串的時候會有效率問題
var str = '';
for (var i = 0; i < 100000; i++) {
    str += i;
}
console.log(str); // 這個結果需要花費大量時間 來 顯示 因為需要不斷的開辟新的空間

• 創建字串物件

var str = 'andy';
console.log(str); // 看不到常見的屬性和方法
var str1 = new String('andy');
console.log(str1); // 可以看到常見的屬性和方法
// 但是字串經過基本包裝類， 是可以使用 常見的屬性和方法

字串物件的常用方法

字串所有的方法，都不會修改字串本身(字串是不可變的)，操作完成會回傳一個新的字串

獲取字串位置方法(根據字符回傳位置)

var str = 'my name is andy';
console.log(str.indexOf('n')); // 3
console.log(str.indexOf('l')); // -1

• "abcoefoxyozzopp"查找字串中所有o出現的位置

// indexOf(要查找的元素, 查找的起始位置);
var str = 'abcoefoxyozzopp';
// 1. 先查找第一個o所在的位置
var index = str.indexOf('o');
// console.log(index);

// 2. 如果indexof 回傳的結果 不是 -1 說明后面還有o  我們就繼續查找 回圈
while (index !== -1) {
    console.log(index);
    index = str.indexOf('o', index + 1);
}

根據位置獲取字符

var str = 'andy';
console.log(str.charAt(0)); // a
// 可以遍歷的方法 得到所有的字串
for (var i = 0; i < str.length; i++) {
    console.log(str[i]);
}

字串操作方法

var str1 = 'andy';
var str2 = 'red';
console.log(str1.concat(str2, '肖申克救贖'));  // andyred肖申克救贖

var str = 'my name is andy';
console.log(str.substr(1)); // y name is andy  默認從第1個到最后
console.log(str.substr(0, 2)); // my 從第0個開始，取2個
console.log(str.substr(3, 7)); //name  is 從第 3個索引號開始，取 7個


var str = 'my name is andy';
console.log(str.slice(1)); // y name is andy  默認從第1個到最后
console.log(str.slice(0, 2)); // my 從第0個開始，取到 第 1個（不包含2）
console.log(str.slice(3, 7)); // name

var str = 'my name is andy';
console.log(str.substring(1)); // y name is andy  默認從第1個到最后
console.log(str.substring(0, 2)); // my 從第0個開始，取到 第 1個（不包含2）
console.log(str.substring(3, 7)); // name

• 截取字串"我愛中華人民共和國"，中的"中華"

var s = "我愛中華人民共和國";
s = s.substr(2,2);
console.log(s);

replace() 替換

replace() 方法用于在字串中用一些字符替換另一些字符

格式如下：

replace(被替換的字串， 要替換為的字串)；

• 把字串中所有的o替換成!

var s = 'abcoefoxyozzopp';
while (s.indexOf('o') !== -1) {
    s = s.replace('o', '!');
}
console.log(s);

• 判斷一個字串中出現次數最多的字符，統計這個次數

var s = 'abcoefoxyozzopp';
var o = {};

for (var i = 0; i < s.length; i++) {
  var item = s.charAt(i);
  if (o[item]) {
    o[item] ++;
  }else{
    o[item] = 1;
  }
}

var max = 0;
var char ;
for(var key in o) {
  if (max < o[key]) {
    max = o[key];
    char = key;
  }
}

console.log(max);
console.log(char);

轉換大小寫

toUpperCase() //轉換大寫
toLowerCase() //轉換小寫

var str = 'ANDY';
console.log(str.toLowerCase()); // andy
var str = 'andy';
console.log(str.toUpperCase()); // ANDY

split 切割字串為陣列

注意，切割完畢之后，回傳的是一個新陣列

var str = 'a,b,c,d';
console.log(str.split(',')); //回傳的是一個陣列 [a, b, c, d]

標籤：JavaScript

上一篇：layui table中select顯示優化

下一篇：js截取URL網址引數