JavaScript学习总结(一)--JavaScript数组

数组

  • 创建数组的两种基本方式

    • 1使用构造函数

    • 2.数组字面量


    var colors = new Array();

    var colors = [];

    //检测数组 instanceof

    // 1. if(value instanceof Array) {}

    // 2. Array.isArray()

    if(Array.isArray(value)) {



    }

数组转换方法

  • toString() 返回有数组中的每个值得字符串形式拼接而成的一个以逗号分隔的字符串

  • valueOf() 返回的还是数组


  var colors = ['red', 'blue', 'green'];

  // console.log(colors.toString()); //red,blue,green

  // console.log(colors.valueOf()); // ["red", "blue", "green"]

  console.log(colors.join(",")); //red,blue,green

  console.log(colors.join()) //red,blue,green

  console.log(colors.join("||")) //red||blue||green

数组方法 栈方法和队列方法

  • 栈方法 栈是一种后进先出的数据结构

  • 队列数据结构是先进先出

push() pop()


  // 栈方法 栈是一种后进先出的数据结构

    // push() pop()

    // push() 添加到数组末尾

    // pop()从数组末尾移除最后一项

    var colors = new Array();

    var count = colors.push("red", "green");

    count = colors.push('black');

    console.log(count) //3

    console.log(colors) //["red", "green", "black"]

    var item = colors.pop();

    console.log(colors) // ["red", "green"]

shift() unshift()


    // 队列方法

    // 队列数据结构是先进先出

    // shift() unshift()

    // shift() 移除数组中的第一个项并返回该项

    // unshift() 向数组前端添加任意项并返回新数组的长度

    var colors = new Array();

    var count = colors.push("red", "green");

    console.log(colors);

    count = colors.push('black');

    var item = colors.shift();

    console.log(item)// red

    console.log(colors)// ["green", "black"]

    var colors = new Array();

    var count = colors.unshift("red", "green");

    console.log(count)//2

    count = colors.unshift("black");

    console.log(colors)// ["black", "red", "green"]

    var item = colors.pop();

    console.log(item) // green

    console.log(colors) // ["black", "red"]

重排序方法

reverse() sort()


  // reverse() sort()

  // reverse()数组翻转

  // sort()  方法按升序排列数组项

  // sort()方法本质上实现是调用每个数组项的toString()转型方法,然后比较得到的字符串,来确定排序。即使数组的每项都是数组,sort()方法比较的也是字符串

  var value = [1,2,3,4,5];

  value.reverse();

  console.log(value) //[5, 4, 3, 2, 1]

  var values = [0,1,5, 10, 15];

  values.sort()

  console.log(values) //[0, 1, 10, 15, 5]

操作方法

concat() slice() splice()


    // 操作方法

    // concat() 法基于当前数组中的所有项创建一个新数组。也就是将新的添加到数组的末尾,最后构成新的数组。也可以传递多个数组。

    var colors = ["red", "green", "blue"];

    var colors2 = colors.concat("yellow", ["blcak", "brown"]);

    console.log(colors); //["red", "green", "blue"]

    console.log(colors2); // ["red", "green", "blue", "yellow", "blcak", "brown"]

    // slice()

    // 截取

    // slice() 接收一个或两个参数。 既要返回项的起始和结束位置。方法不会影响原来的数组。

    var colors = ["red", "green", "blue", "yellow", "purple"];

    var colors2 = colors.slice(1);

    var colors3 = colors.slice(1, 4);

    console.log(colors2); //["green", "blue", "yellow", "purple"]

    console.log(colors3); //["green", "blue", "yellow"]

    // splice() 主要是向数组中部插入项

    // 删除 插入 替换

    var colors = ["red", "green", "blue"];

    var removed = colors.splice(0, 1);

    console.log(colors); // ["green", "blue"]

    removed = colors.splice(1, 0,"yellow", "orange");

    console.log(colors); // ["green", "yellow", "orange", "blue"]

    removed = colors.splice(1, 1, "red", "pruple");

    console.log(removed);// ["yellow"]

位置方法

indexOf() lastIndexOf()


  // indexOf() lastIndexOf()

  // 没有找到的情况返回-1

  var numbers = [1,2,3,4,5];

  console.log(numbers.indexOf(4)) //3



迭代方法

  1. every() 对数组中的每一项运行给定函数,如果该函数对每一项返回true 着返回true

  2. filter() 对数组中的每一项运行给定函数, 如果该函数会返回true的项组成的数组

  3. forEach() 这个方法没有返回值

  4. map() 返回每次函数调用的结果组成的数组

  5. some() 如果该函数对每一项返回true,着返回true

这些方法都不会修改数组的值


    var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];

    var everyResult = numbers.every(function (item, index, array) {

      return (item > 2)

    })

    console.log(everyResult) // false

    var someResult = numbers.some(function (item, index, array) {

      return (item > 2)

    })

    console.log(someResult) // true

    var filterResult = numbers.filter(function (item, index, array) {

      return (item > 2)

    })

    console.log(filterResult) // [3, 4, 5, 4, 3]

    var mapResult = numbers.map(function (item, index, array) {

      return item * 2

    })

    console.log(mapResult) // [2, 4, 6, 8, 10, 8, 6, 4, 2]

  // forEach()方法 只是对数组中的每一项运行传入的函数,这个方法没有返回值。

  // 本质上与使用for循环迭代数组一样

  var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];

  numbers.forEach(function(item, indx, array) {

    // 执行操作

  })

归并方法

reduce() reduceRight()

  • es5新增两个归并数组的方法。这两个方法都会迭代数组的所有项,然后构建一个最终返回的值。

  • reduce()方法从数组的第一项开始,逐个遍历到最后。

  • 而reduceRight()则从数组的最后一项开始,向前遍历到第一项。

  • 这两个方法都接收两个参数,一个在每一项上调用的函数和(可选的)作为归并基础的初始值。

  • 传个reduce()和reduceRight()的函数接收4个参数

  • 前一个、当前值、项的索引和数组的对象

  • 这个函数返回的任何值都会作为第一个参数自动传给下一项。第一次迭代发生在数组的第二项上,因此第一个参数是数组的第一项,第二个参数就是数组的第二项


  // reduce() reduceRight()

    // 使用reduce() 方法可以执行求数组中所有值之和的操作

    var values = [1, 2, 3, 4, 5];

    var sum = values.reduce(function (prev, cur, index, array) {

      return prev + cur;

    })

    console.log(sum) // 15

    var values = [1, 2, 3, 4, 5];

    var sum = values.reduceRight(function (prev, cur, index, array) {

      return prev + cur;

    })

    console.log(sum) // 15

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

推荐阅读更多精彩内容

  •   引用类型的值(对象)是引用类型的一个实例。   在 ECMAscript 中,引用类型是一种数据结构,用于将数...
    霜天晓阅读 1,048评论 0 1
  • 第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 3,231评论 0 4
  • 数组总共有22种方法,本文将其分为对象继承方法、数组转换方法、栈和队列方法、数组排序方法、数组拼接方法、创建子数组...
    Sachie阅读 895评论 0 7
  • 由于最近都在freecodecamp上刷代码,运用了很多JavaScript数组的方法,因此做了一份关于JavaS...
    2bc5f46e925b阅读 1,975评论 0 16
  • 插入链接: 输入你要显示的文字 加粗: 输入你要加粗的文字 引用: 输入你要引用的文字段落 下划线: 输入你要打下...
    别关注我oh阅读 2,765评论 0 0