JS-day06-5.4

Array對象

  • 創(chuàng)建數(shù)組對象的兩種方式
    • ==字面量方式==
    • ==new Array()==
// 1. 使用構(gòu)造函數(shù)創(chuàng)建數(shù)組對象
    // 創(chuàng)建了一個空數(shù)組
    var arr = new Array();
    // 創(chuàng)建了一個數(shù)組靶橱,里面存放了3個字符串
    var arr = new Array('zs', 'ls', 'ww');
    // 創(chuàng)建了一個數(shù)組,里面存放了4個數(shù)字
    var arr = new Array(1, 2, 3, 4);
    
    
    // 2. 使用字面量創(chuàng)建數(shù)組對象
    var arr = [1, 2, 3];
    
    // 獲取數(shù)組中元素的個數(shù)
    console.log(arr.length);
  • 檢測一個對象是否是數(shù)組
    • ==instanceof==
    • ==Array.isArray()== HTML5中提供的方法湘今,有兼容性問題
      函數(shù)的參數(shù)丧肴,如果要求是一個數(shù)組的話宛瞄,可以用這種方式來進(jìn)行判斷
      案例解析
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
        //如何創(chuàng)建數(shù)組對象
        // 1.數(shù)組字面量[]
     //     var array=[];//空數(shù)組
     //     var numbers=[1,5,3];
            // 2.數(shù)組的構(gòu)造函數(shù)Array
            // var array=new Array();//空數(shù)組
            // var numbers=new Array(4,2,8);
            // console.log(numbers);//(3) [4, 2, 8]

            // //獲取數(shù)組長度
            // console.log(numbers.length);//3

            //如何判斷一個變量是否是數(shù)組對象
            function fn(arr) {
            //判斷參數(shù)arr  是否是數(shù)組對象
            //instanceof   前面是變量 后面是數(shù)組對象
            console.log(arr instanceof Array);

            //!arr instanceof Array
            //false instanceof Array
            //方式1  萧吠!一元運(yùn)算符優(yōu)先級最高
            if(!(arr instanceof Array)) {
                console.error('參數(shù)err  不是數(shù)組對象');
                return;
            }


            //方式2 Array.isArray() 瀏覽器兼容性問題 支持HTML5的支持
            // console.log(Array.isArray(arr));
             console.log('正常執(zhí)行');
            }
             var d=1;
             // var d=[];
            fn(d);
    </script>
</head>
<body>
    
</body>
</html>
  • toString()/valueOf()
    • ==toString() 把數(shù)組轉(zhuǎn)換成字符串结借,逗號分隔每一項==
    • ==valueOf() 返回數(shù)組對象本身==
      案例解析
//toString()和valueOf()  每一個對象都含有這兩個方法腻脏,只不過不同對象輸出的結(jié)果不同
        // var arr=[5,1,8,6];
        // console.log(arr);//(4) [5, 1, 8, 6]
        // //toString()把數(shù)組轉(zhuǎn)換成字符串玄括,并且使用逗號分隔每一項
        // console.log(arr.toString()); //5,1,8,6
        // //valueOf() 返回數(shù)組對象本身
        // console.log(arr.valueOf());//(4) [5, 1, 8, 6]
  • 數(shù)組常用方法

    演示:push()冯丙、shift()、unshift()遭京、reverse()胃惜、sort()、splice()哪雕、indexOf()

// 1 棧操作(先進(jìn)后出)
    push()
    pop()       //取出數(shù)組中的最后一項船殉,修改length屬性
    // 2 隊列操作(先進(jìn)先出)
    push()
    shift()     //取出數(shù)組中的第一個元素,修改length屬性
    unshift()   //在數(shù)組最前面插入項热监,返回數(shù)組的長度
    // 3 排序方法
    reverse()   //翻轉(zhuǎn)數(shù)組
    sort();     //即使是數(shù)組sort也是根據(jù)字符捺弦,從小到大排序
    // 帶參數(shù)的sort是如何實(shí)現(xiàn)的?
    // 4 操作方法
    concat()    //把參數(shù)拼接到當(dāng)前數(shù)組
    slice()     //從當(dāng)前數(shù)組中截取一個新的數(shù)組,不影響原來的數(shù)組列吼,參數(shù)start從0開始,end從1開始
    splice()    //刪除或替換當(dāng)前數(shù)組的某些項目幽崩,參數(shù)start, deleteCount, options(要替換的項目)
    // 5 位置方法
    indexOf()、lastIndexOf()   //如果沒找到返回-1
    // 6 迭代方法 不會修改原數(shù)組(可選)
    every()寞钥、filter()慌申、forEach()、map()理郑、some()
    // 7 方法將數(shù)組的所有元素連接到一個字符串中蹄溉。
    join()

案例解析

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
    //如何學(xué)習(xí)一個方法
      // 1.了解方法的作用
      // 2.方法的參數(shù)
      // 3.方法的返回值
      // 4.測試,編寫一個demo
 // // 1 棧操作(先進(jìn)后出)
         // var arr=[12,2,6,9]; 
  //   push()
         // arr.push(5);
         // console.log(arr);//(5) [12, 2, 6, 9, 5] 返回值在原數(shù)組的最后面加了一項
         // console.log(arr.push());//5 返回的是修改后的數(shù)組的長度
         // console.log(arr.push(5));//6
         // console.log(arr);//(6) [12, 2, 6, 9, 5, 5]
         // //push中參數(shù)可以有多個您炉,將來都會添加到數(shù)組的最后
         // //返回值柒爵,就是改變后的數(shù)組的長度
         // var r=arr.push(5,8,9);
         // console.log(r);//9
         // console.log(arr); //(9) [12, 2, 6, 9, 5, 5, 5, 8, 9]
  

  //   pop()        //取出數(shù)組中的最后一項,修改length屬性
           
            // arr.pop();
            // console.log(arr.length);//3 返回的是數(shù)組的長度
            // console.log(arr);//(3) [12, 2, 6] 返回值中原數(shù)組的最后一項被刪除了
            // console.log(arr.pop());//6 返回的是修改后的數(shù)組的最后一項
  

  //   // 2 隊列操作(先進(jìn)先出)
  //   push()
  //   shift()      //取出數(shù)組中的第一個元素赚爵,修改length屬性
         // var array=[6,3,2,4];
         // var first=array.shift();
         // console.log(first);  //6 返回的值是原數(shù)組的第一項
         // console.log(array); // [3, 2, 4]  返回的值中原數(shù)組的第一項被取走了

  //   unshift()    //在數(shù)組最前面插入項棉胀,返回數(shù)組的長度
          // array.unshift(0);
          // console.log(array); //(4) [0, 3, 2, 4]
          // console.log(array.unshift()); //4 返回修改后的數(shù)組的長度


  //   // 3 排序方法
  //   reverse()    //翻轉(zhuǎn)數(shù)組
         // var arr=['b','f','b','f','a','f'];
         //翻轉(zhuǎn) reverse() 不會修改原數(shù)組,會把數(shù)組翻轉(zhuǎn)之后返回一個新的數(shù)組
         // var newArray=arr.reverse();
         // console.log(newArray);//(6) ["f", "a", "f", "b", "f", "b"]
  
  //   sort();  //即使是數(shù)組sort也是根據(jù)字符冀膝,從小到大排序
          // arr.sort();
          // console.log(arr); //(6) ["a", "b", "b", "f", "f", "f"]  sort()直接在原數(shù)組上進(jìn)行排序

          // var array=[85,3,5,80]; 
          //默認(rèn)情況下的sort是對字符編碼 從小到大排序  對我們來說無意義
          // array.sort();
          // console.log(array); //(4) [3, 5, 80, 85]
          //字符編碼  a--97


          // sort()的另一種方法
          // array.sort();
          // array.sort(compareFunction)

          // function compare(a,b) {
          //    return a-b;
          // }
          // array.sort(compare);
          // console.log(array); //(4) [3, 5, 80, 85] 返回值按照數(shù)值的大小排序的

           // array.sort(function(a,b) {
           //      return a-b;
           // });
           // console.log(array); //(4) [3, 5, 80, 85] 返回值按照數(shù)值的大小排序的


           // var arr=['aa','dddd','xx','x','vvv'];
           // arr.sort(function(a,b) {
           //   return a.length-b.length; //字符串的長度
           // })
           // console.log(arr); //(5) ["x", "aa", "xx", "vvv", "dddd"]  想要從大到小排序?qū).length-a.length 即可
           

            //對數(shù)組排序 從小到大 ---冒泡排序
            // function sort(arr,fnCompare) {
            //     for(var i=0;i<arr.length-1;i++) {
            //        for(var j=0;j<arr.length-1-i;j++) {
            //             if (fnCompare(arr[j],arr[j+1])>0) {
            //                   t=arr[j];
            //                   arr[j]=arr[j+1];
            //                   arr[j+1]=t;
            //              }
            //         }
            //     }
            //     return arr;
            // }
            // var arr=[50,6,2,8];
            // sort(arr,function(a,b){
            //   return a-b;
            // })
            // console.log(arr);//(4) [2, 6, 8, 50]
            
  //   // 帶參數(shù)的sort是如何實(shí)現(xiàn)的唁奢?
  //   // 4 操作方法
  //   concat()     //把參數(shù)拼接到當(dāng)前數(shù)組
  //   slice()  //從當(dāng)前數(shù)組中截取一個新的數(shù)組,不影響原來的數(shù)組窝剖,參數(shù)start從0開始,end從1開始
  //   splice() //刪除或替換當(dāng)前數(shù)組的某些項目麻掸,參數(shù)start, deleteCount, options(要替換的項目)
  //   // 5 位置方法
  //   indexOf()、lastIndexOf()   //如果沒找到返回-1
  //   // 6 迭代方法 不會修改原數(shù)組(可選)
  //   every()赐纱、filter()脊奋、forEach()、map()千所、some()
  //   // 7 方法將數(shù)組的所有元素連接到一個字符串中狂魔。
  //   join()

          //  var  arr=[1,5,6,2,8];
          //  console.log(arr);
          // // 清空數(shù)組的3種方法
          //    // arr=[];
          //    // console.log(arr);

          //    // arr.length=0;
          //    // console.log(arr);
             
          //    //第一個參數(shù),是從什么位置開始刪除(索引)
          //    //第二個參數(shù)淫痰,是刪除多少個元素
          //    arr.splice(0,arr.length);
          //    console.log(arr);
    </script>
</head>
<body>
    
</body> 
</html>
  • 清空數(shù)組
// 方式1 推薦 
    arr = [];
    // 方式2 
    arr.length = 0;
    // 方式3
    arr.splice(0, arr.length);

案例

  • 將一個字符串?dāng)?shù)組輸出為|分割的形式,比如“劉備|張飛|關(guān)羽”整份。使用兩種方式實(shí)現(xiàn)
function myJoin(array, seperator) {
      seperator = seperator || ',';
      array = array || [];
      if (array.length == 0){
        return '';
      }
      var str = array[0];
      for (var i = 1; i < array.length; i++) {
        str += seperator + array[i];
      }
      return str;
    }
    var array = [6, 3, 5, 6, 7, 8, 0];
    console.log(myJoin(array, '-'));
    
    console.log(array.join('-'))
  • 將一個字符串?dāng)?shù)組的元素的順序進(jìn)行反轉(zhuǎn)待错。["a", "b", "c", "d"] -> [ "d","c","b","a"]。使用兩種種方式實(shí)現(xiàn)烈评。提示:第i個和第length-i-1個進(jìn)行交換
function myReverse(arr) {
      if (!arr || arr.length == 0) {
        return [];
      }
      for (var i = 0; i < arr.length / 2; i++) {
        var tmp = arr[i];
        arr[i] = arr[this.length - i - 1];
        arr[arr.length - i - 1] = tmp;
      }
      return arr;
    }
    
    var array = ['a', 'b', 'c'];
    console.log(myReverse(array));
    
    console.log(array.reverse());
  • 工資的數(shù)組[1500, 1200, 2000, 2100, 1800],把工資超過2000的刪除
// 方式1
    var array =  [1500,1200,2000,2100,1800];
    var tmpArray = [];
    for (var i = 0; i < array.length; i++) {
      if(array[i] < 2000) {
        tmpArray.push(array[i]);
      }
    }
    console.log(tmpArray);
    // 方式2
    var array =  [1500, 1200, 2000, 2100, 1800];
    array = array.filter(function (item, index) {
      if (item < 2000) {
        return true;
      }
      return false;
    });
    console.log(array);

  • ["c", "a", "z", "a", "x", "a"]找到數(shù)組中每一個a出現(xiàn)的位置
 var array =  ['c', 'a', 'z', 'a', 'x', 'a'];
    do {
      var index = array.indexOf('a',index + 1);
      if (index != -1){
        console.log(index);
      }
    } while (index > 0);
  • 編寫一個方法去掉一個數(shù)組的重復(fù)元素
 var array =  ['c', 'a', 'z', 'a', 'x', 'a'];
    function clear() {
      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);
          }
        }
      }
      returm tmpArray;
    }
    
    console.log(clear(array));

基本包裝類型

為了方便操作基本數(shù)據(jù)類型火俄,JavaScript還提供了三個特殊的引用類型:String/Number/Boolean

// 下面代碼的問題?
// s1是基本類型讲冠,基本類型是沒有方法的
var s1 = 'zhangsan';
var s2 = s1.substring(5);

// 當(dāng)調(diào)用s1.substring(5)的時候瓜客,先把s1包裝成String類型的臨時對象,再調(diào)用substring方法,最后銷毀臨時對象, 相當(dāng)于:
var s1 = new String('zhangsan');
var s2 = s1.substring(5);
s1 = null;

// 創(chuàng)建基本包裝類型的對象
var num = 18;               //數(shù)值谱仪,基本類型
var num = Number('18');     //類型轉(zhuǎn)換
var num = new Number(18);   //基本包裝類型,對象
// Number和Boolean基本包裝類型基本不用疯攒,使用的話可能會引起歧義嗦随。例如:
var b1 = new Boolean(false);
var b2 = b1 && true;        // 結(jié)果是什么

String對象

  • 字符串的不可變
var str = 'abc';
    str = 'hello';
    // 當(dāng)重新給str賦值的時候,常量'abc'不會被修改枚尼,依然在內(nèi)存中
    // 重新給字符串賦值,會重新在內(nèi)存中開辟空間锭汛,這個特點(diǎn)就是字符串的不可變
    // 由于字符串的不可變唤殴,在大量拼接字符串的時候會有效率問題
  • 創(chuàng)建字符串對象
var str = new String('Hello World');
    
    // 獲取字符串中字符的個數(shù)
    console.log(str.length);
  • 字符串對象的常用方法
    字符串所有的方法,都不會修改字符串本身(字符串是不可變的)乡范,操作完成會返回一個新的字符串
// 1 字符方法
    charAt()        //獲取指定位置處字符
    charCodeAt()    //獲取指定位置處字符的ASCII碼
    str[0]          //HTML5晋辆,IE8+支持 和charAt()等效
    // 2 字符串操作方法
    concat()        //拼接字符串,等效于+为朋,+更常用
    slice()         //從start位置開始厚脉,截取到end位置孵滞,end取不到
    substring()     //從start位置開始,截取到end位置幼东,end取不到
    substr()        //從start位置開始根蟹,截取length個字符
    // 3 位置方法
    indexOf()       //返回指定內(nèi)容在元字符串中的位置
    lastIndexOf()   //從后往前找散庶,只找第一個匹配的
    // 4 去除空白   
    trim()          //只能去除字符串前后的空白
    // 5 大小寫轉(zhuǎn)換方法
    to(Locale)UpperCase()   //轉(zhuǎn)換大寫
    to(Locale)LowerCase()   //轉(zhuǎn)換小寫
    // 6 其它
    search()
    replace()
    split()
    fromCharCode()
    // String.fromCharCode(101, 102, 103);   //把ASCII碼轉(zhuǎn)換成字符串

案例

  • 截取字符串"我愛中華人民共和國"悲龟,中的"中華"
var s = "我愛中華人民共和國";
    s = s.substr(2,2);
    console.log(s);
  • "abcoefoxyozzopp"查找字符串中所有o出現(xiàn)的位置
 var s = 'abcoefoxyozzopp';
    var array = [];
    do {
      var index = s.indexOf('o', index + 1);
      if (index != -1) {
        array.push(index);
      }
    } while (index > -1);
    console.log(array);
  • 把字符串中所有的o替換成!
 var s = 'abcoefoxyozzopp';
    do {
      s = s.replace('o', '');
    } while (s.indexOf('o') > -1);
    console.log(s);
    
    console.log(s.replace(/o/ig, ''));
  • 判斷一個字符串中出現(xiàn)次數(shù)最多的字符轻腺,統(tǒng)計這個次數(shù)
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌止邮,老刑警劉巖,帶你破解...
    沈念sama閱讀 212,718評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件屈扎,死亡現(xiàn)場離奇詭異鹰晨,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,683評論 3 385
  • 文/潘曉璐 我一進(jìn)店門共苛,熙熙樓的掌柜王于貴愁眉苦臉地迎上來隅茎,“玉大人辟犀,你說我怎么就攤上這事魂毁》持龋” “怎么了只祠?”我有些...
    開封第一講書人閱讀 158,207評論 0 348
  • 文/不壞的土叔 我叫張陵晶府,是天一觀的道長。 經(jīng)常有香客問我骡苞,道長,這世上最難降的妖魔是什么楷扬? 我笑而不...
    開封第一講書人閱讀 56,755評論 1 284
  • 正文 為了忘掉前任解幽,我火速辦了婚禮,結(jié)果婚禮上烘苹,老公的妹妹穿的比我還像新娘躲株。我一直安慰自己,他們只是感情好镣衡,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,862評論 6 386
  • 文/花漫 我一把揭開白布霜定。 她就那樣靜靜地躺著,像睡著了一般廊鸥。 火紅的嫁衣襯著肌膚如雪望浩。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 50,050評論 1 291
  • 那天惰说,我揣著相機(jī)與錄音磨德,去河邊找鬼。 笑死吆视,一個胖子當(dāng)著我的面吹牛剖张,可吹牛的內(nèi)容都是我干的切诀。 我是一名探鬼主播揩环,決...
    沈念sama閱讀 39,136評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼搔弄,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了丰滑?” 一聲冷哼從身側(cè)響起顾犹,我...
    開封第一講書人閱讀 37,882評論 0 268
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎褒墨,沒想到半個月后炫刷,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,330評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡郁妈,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,651評論 2 327
  • 正文 我和宋清朗相戀三年浑玛,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片噩咪。...
    茶點(diǎn)故事閱讀 38,789評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡顾彰,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出胃碾,到底是詐尸還是另有隱情涨享,我是刑警寧澤,帶...
    沈念sama閱讀 34,477評論 4 333
  • 正文 年R本政府宣布仆百,位于F島的核電站厕隧,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏俄周。R本人自食惡果不足惜吁讨,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,135評論 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望峦朗。 院中可真熱鬧建丧,春花似錦、人聲如沸甚垦。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,864評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽艰亮。三九已至闭翩,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間迄埃,已是汗流浹背疗韵。 一陣腳步聲響...
    開封第一講書人閱讀 32,099評論 1 267
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留侄非,地道東北人蕉汪。 一個月前我還...
    沈念sama閱讀 46,598評論 2 362
  • 正文 我出身青樓流译,卻偏偏與公主長得像,于是被迫代替她去往敵國和親者疤。 傳聞我的和親對象是個殘疾皇子福澡,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,697評論 2 351

推薦閱讀更多精彩內(nèi)容

  • 第2章 基本語法 2.1 概述 基本句法和變量 語句 JavaScript程序的執(zhí)行單位為行(line),也就是一...
    悟名先生閱讀 4,132評論 0 13
  • 第5章 引用類型(返回首頁) 本章內(nèi)容 使用對象 創(chuàng)建并操作數(shù)組 理解基本的JavaScript類型 使用基本類型...
    大學(xué)一百閱讀 3,219評論 0 4
  • ??引用類型的值(對象)是引用類型的一個實(shí)例。 ??在 ECMAscript 中糯累,引用類型是一種數(shù)據(jù)結(jié)構(gòu)算利,用于將數(shù)...
    霜天曉閱讀 1,045評論 0 1
  • 前言 最先接觸編程的知識是在大學(xué)里面效拭,大學(xué)里面學(xué)了一些基礎(chǔ)的知識,c語言胖秒,java語言缎患,單片機(jī)的匯編語言等;大學(xué)畢...
    oceanfive閱讀 3,049評論 0 7
  • 瞧扒怖,潑婦老公的車子较锡,大概要被法院牽走了。 許多看著我盗痒,眼神突然有些傷感蚂蕴,說:“畢業(yè)那天大家喝了好多酒,我哭的稀里嘩...
    辛七歲閱讀 289評論 0 6