A25-JS数组

  • Array -MDN

    window.Array 全局对象(也是函数)
    • 基本用法:

      var a = Array(3)  // {length: 3}
      a.length // 3
      0 in a // false, 数组 a 里面并没有 0 这个 key
      a[0] // undefined
      a.push('three')
      3 in a // true
      a[3] // 'three'
      
      var a2 = Array(3,3) // [3,3]
      a2.length // 2
      0 in a2 // true
      a2[0] // 3 
      // 当括号里只有一个数字参数的时候,它是长度,当参数不止一个的时候它是参数
      // 这叫做不一致性,这不是一件好事
      
      new Array(3) 跟不加 new 一样的效果
      new Array(3,3,) 跟不加 new 一样的效果
      
      var a = [1,2,3] // 常用简写方式
      
    • 加不加new对不同类型的区别:

      • String、Number、Boolean
        String()返回基本类型
        new String()返回对象
      • Object、Array、Function
        Object()返回对象
        new Object()返回依然是对象
    • 数组为什么是数组而不是对象是因为数组有着对象没有的特点
      也就是你的对象的__proto__指向的是否是Array.prototype

    • 数组的一个特征
      数组之所以是数组,其实是因为你把它数组

      var a = [1,2,3]
      a.x = 'x'
      a.y = 'y'
      for(let i=0; i < a.length; i++){ // 这种方法遍历排除了 x、y
        console.log(a[i]) // 1, 2, 3
      }
      for(let key in a){
        console.log(key) // 0, 1, 2, x, y
      }
      var obj = {
        0: 1, 1: 2, 2: 3, length: 3
      }
      for(let i=0; i < obj.length; i++){
        console.log(obj[i]) // 1, 2, 3
      }
      
    • 伪数组
      上面的obj对象就是伪数组;它不关心你有没有数组的那些方法,只需要012345……这些下标去遍历
      只要你的原型链中没有Array.prototype就是伪数组
      目前JS中只有一种伪数组,就是arguments

      function f(){ console.dir(arguments) }
      f(1,2,3)
      

      从下图可以看见它引用的是Object.protype而非Array.prototype

    • forEachAPI -MDN阮一峰
      forEach() 方法对数组的每个元素执行一次提供的函数。
      语法:

      array.forEach(callback(currentValue, index, array){
          //do something
      }, this)
      
      array.forEach(callback[, thisArg])
      
      // Eg
      const arr = ['a', 'b', 'c'];
      
      arr.forEach(function(element) {
          console.log(element);
      });  
      arr.forEach( element => console.log(element));
      // a
      // b
      // c
      
      // 上面我们并没有将arr传进forEach里面但是为什么还能调用
      // 可以这么理解
      // 用this来获取,比如
      var obj = { 0:'a', 1:'b', length:2 }
      obj.forEach = function(fn){
        for(let i=0; i < this.length; i++){
          fn(this[i], i, this)
        }
      }
      

      参数:
      callback
      为数组中每个元素执行的函数,该函数接收三个参数:
      currentValue(当前值)
      数组中正在处理的当前元素。
      index(索引)
      数组中正在处理的当前元素的索引。
      array
      forEach()方法正在操作的数组。
      thisArg可选
      可选参数。当执行回调 函数时用作this的值(参考对象)。
      返回值:undefined.

    • sort() -MDN阮一峰
      sort方法对数组成员进行排序,默认排序顺序是根据字符串Unicode码点。 sort 排序不一定是稳定的排序后,原数组将被改变。

      ['d', 'c', 'b', 'a'].sort()
      // ['a', 'b', 'c', 'd']
      
      [4, 3, 2, 1].sort()
      // [1, 2, 3, 4]
      
      var fruit = ['cherries', 'apples', 'bananas'];
      fruit.sort(); 
      // ['apples', 'bananas', 'cherries']
      
      var scores = [1, 10, 21, 2]; 
      scores.sort(); 
      // [1, 10, 2, 21]
      // 注意10在2之前,
      // 因为在 Unicode 指针顺序中"10"在"2"之前
      
      var things = ['word', 'Word', '1 Word', '2 Words'];
      things.sort(); 
      // ['1 Word', '2 Words', 'Word', 'word']
      // 在Unicode中, 数字在大写字母之前,
      // 大写字母在小写字母之前.
      

      语法:
      arr.sort()
      arr.sort(compareFunction)
      参数:
      compareFunction
      可选。用来指定按某种顺序进行排列的函数。如果省略,元素按照转换为的字符串的各个字符的Unicode位点进行排序。
      返回值: 返回排序后的数组。原数组已经被排序后的数组代替。
      描述:
      如果没有指明 compareFunction ,那么元素会按照转换为的字符串的诸个字符的 Unicode 位点进行排序。例如 "Banana" 会被排列到 "cherry" 之前。当数字按由小到大排序时,9 出现在 80 之前,但因为(没有指明 compareFunction),比较的数字会先被转换为字符串,所以在Unicode顺序上 "80" 要比 "9" 要靠前。
      如果指明了 compareFunction ,那么数组会按照调用该函数的返回值排序。即 a 和 b 是两个将要被比较的元素:

      • 如果 compareFunction(a, b) 小于 0 ,那么 a 会被排列到 b 之前;
      • 如果 compareFunction(a, b) 大于 0 , b 会被排列到 a 之前
      • 如果 compareFunction(a, b) 等于 0 , a 和 b 的相对位置不变
      • compareFunction(a, b) 必须总是对相同的输入返回相同的比较结果,否则排序的结果将是不确定的。
      // 对数字排序
      var a = [5,6,4,1,2,3]
      // 升序
      function up(a, b) {
        if (a < b ) {           // 按某种排序标准进行比较, a 小于 b
          return -1;
        }
        if (a > b ) {
          return 1;
        }
        // a must be equal to b
        return 0;
      }
      // 更简洁的写法
      function up(a,b){
        return a-b
      }
      a.sort(up) // 1,2,3,4,5,6
      
      // 降序
      function down(a,b){
        return b-a
      }
      

      js内置的排序一般都是快排

    • join() -MDN
      join() 方法将一个数组(或一个类数组对象)的所有元素连接成一个字符串并返回这个字符串。
      和sort()方法不同,它不会改变原有的数组
      语法:

      str = arr.join()
      // 默认为 ","
      
      str = arr.join("")
      // 分隔符 === 空字符串 ""
      
      str = arr.join(separator)
      // 分隔符
      

      参数:
      separator
      指定一个字符串来分隔数组的每个元素。
      如果需要(separator),将分隔符转换为字符串。
      如果省略(),数组元素用逗号分隔。默认为 ","。
      如果separator是空字符串(""),则所有元素之间都没有任何字符。
      返回值
      一个所有数组元素连接的字符串。如果 arr.length 为0,则返回空字符串

      // Eg
      let a = ['Wind', 'Rain', 'Fire'];
      
      console.log(a.join()); 
      // 默认为 ","
      // 'Wind,Rain,Fire'
      
      console.log(a.join("")); 
      // 分隔符 === 空字符串 ""
      // "WindRainFire"
      
      console.log(a.join("-")); 
      // 分隔符 "-"
      // 'Wind-Rain-Fire'
      
    • concat() -MDN
      concat() 方法用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组。
      语法:
      var new_array = old_array.concat(value1[, value2[, ...[, valueN]]])
      参数:valueN
      将数组和/或值连接成新数组。
      返回值:新的 Array 实例。

      var arr1 = ['a', 'b', 'c'];
      var arr2 = ['d', 'e', 'f'];
      
      var arr3 = arr1.concat(arr2);
      
      // arr3 is a new array [ "a", "b", "c", "d", "e", "f" ]
      
      // 使用 concat 来复制一个数组
      var a = [1,2,3]
      bar b = a.concat([])
      a === b // false
      
    • map() -MDN阮一峰
      map() 方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。
      map与forEach类似,不同的是它返回一个新数组,而forEach返回undefined。
      语法:

      let new_array = arr.map(function callback(currentValue, index, array) { 
          // Return element for new_array 
      }[, thisArg])
      
      // Eg
      var numbers = [1, 2, 3];
      
      numbers.map(function (n) {
        return n + 1;
      });
      // [2, 3, 4]
      
      numbers
      // [1, 2, 3]
      

      参数:
      callback
      生成新数组元素的函数,使用三个参数:
      currentValue
      callback 的第一个参数,数组中正在处理的当前元素。
      index
      callback 的第二个参数,数组中正在处理的当前元素的索引。
      array
      callback 的第三个参数,map 方法被调用的数组。
      thisArg
      可选的。执行 callback 函数时 使用的this 值。
      返回值:
      一个新数组,每个元素都是回调函数的结果。

    • filter() -MDN
      filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。
      语法:
      var new_array = arr.filter(callback[, thisArg])
      返回值: 一个新的通过测试的元素的集合的数组
      ES6:
      let [...spread]= [12, 5, 8, 130, 44];
      等同于:let spread = 浅克隆([12, 5, 8, 130, 44])

      function isBigEnough(value) {
        return value >= 10;
      }
      
      var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
      
      // filtered is [12, 130, 44]
      
      // ES6 way
      
      const isBigEnough = value => value >= 10; // 这里用的箭头函数
      
      let [...spread]= [12, 5, 8, 130, 44];
      
      let filtered = spread.filter(isBigEnough);
      
      // filtered is [12, 130, 44]
      
    • reduce() -MDN
      reduce() 方法对累加器和数组中的每个元素(从左到右)应用一个函数,将其减少为单个值。
      语法:arr.reduce(callback(accumulator,currentValue)[, initialValue])
      参数
      callback
      执行数组中每个值的函数,包含四个参数:
      accumulator
      累加器累加回调的返回值; 它是上一次调用回调时返回的累积值,或initialValue(如下所示)。

      currentValue
      数组中正在处理的元素。
      currentIndex
      数组中正在处理的当前元素的索引。 如果提供了initialValue,则索引号为0,否则为索引为1。
      array
      调用reduce的数组
      initialValue
      可选,用作第一个调用callback的第一个参数的值。 如果没有提供初始值,则将使用数组中的第一个元素。在没有初始值的空数组上调用 reduce 将报错。
      返回值: 函数累计处理的结果

      var total = [0, 1, 2, 3].reduce(function(sum, value) {
        return sum + value;
      }, 0);
      // total is 6
      
      var flattened = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) {
        return a.concat(b);
      }, []);
      // flattened is [0, 1, 2, 3, 4, 5]
      
      // 使用 reduce 表示 map
      var a = [1,2,3]
      a.map(function(value){
        return value * 2
      })
      
      a.reduce(function(arr, n){
        arr.push(n*2)
        return arr
      }, [])
      
      // 使用 reduce 表示 filter
      var b = [1,2,3,4,5,6,7,8,9,10]
      b.filter(function(value){
        return value % 2 === 0
      })
      
      b.reduce(function(arr, n){
        if(n % 2 === 0){
          arr.push(n)
        }
        reruen arr
      },[])
      
  • Function -MDN

    // 常用简写方式
    var f = function(a,b){
      return a+b
    }
    
    var f = new Function('a', 'b', 'return a+b') //使用 new 进行构造,
    var f = new Function(['a','b'],'return a+b')
    

    语法:new Function ([arg1[, arg2[, ...argN]],] functionBody)
    参数:
    arg1, arg2, ... argN
    被函数使用的参数的名称必须是合法命名的。参数名称是一个有效的JavaScript标识符的字符串,或者一个用逗号分隔的有效字符串的列表;例如“×”,“theValue”,或“A,B”。
    functionBody
    一个含有包括函数定义的JavaScript语句的字符串

    函数总是会返回一个值

    function fn(){
      console.log('函数')
      return undefined // 如果你不写就会自动添加这样的一句
    }
    
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,980评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,178评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,868评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,498评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,492评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,521评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,910评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,569评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,793评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,559评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,639评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,342评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,931评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,904评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,144评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,833评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,350评论 2 342

推荐阅读更多精彩内容