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

原文地址:https://www.cnblogs.com/zhtian/p/9712468.html

时间: 2024-10-10 06:40:21

JavaScript学习总结(一)--JavaScript数组的相关文章

JavaScript学习总结(九)——Javascript面向(基于)对象编程

一.澄清概念 1.JS中"基于对象=面向对象" 2.JS中没有类(Class),但是它取了一个新的名字叫"原型对象",因此"类=原型对象" 二.类(原型对象)和对象(实例)的区别与联系 1.类(原型对象)是抽象,是概念的,代表一类事物. 2.对象是具体的,实际的,代表一个具体的事物. 3.类(原型对象)是对象实例的模板,对象实例是类的一个个体. 三.抽象的定义 在定义一个类时,实际上就是把一类事物的共有属性和行为提取出来,形成一个物理模型(模板)

JavaScript学习总结(十七)——Javascript原型链的原理

一.JavaScript原型链 ECMAScript中描述了原型链的概念,并将原型链作为实现继承的主要方法.其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法.在JavaScript中,用 __proto__ 属性来表示一个对象的原型链.当查找一个对象的属性时,JavaScript 会向上遍历原型链,直到找到给定名称的属性为止! 比如现在有如下的代码: 扩展Object类,添加Clone和Extend方法 1 /*扩展Object类,添加Clone,JS实现克隆的方法*/ 2 Ob

JavaScript学习-js中的数组/Boolean类/字符串String类

JavaScript学习 [js中的数组] 1.数组的概念:是在内存中连续储存对个有序元素的结构 元素的顺序称为下标,通过下标查找对象元素. 2.数组的声明: ① 字面量声明:var arr1 = []; js中,同一数组,可以储存多种不同的数据类型: 例如: var arr1 = [1,"2",true,{"name":"hahhah"},[1,2]] ② new关键字声明: var arr2 = new Arry(参数) >>&g

JavaScript学习笔记:检测数组方法

很多时候我们需要对JavaScript中数据类型( Function . String . Number . Undefined . Boolean 和 Object )做判断.在JavaScript中提供了typeof操作符可以对这些常用的数据类型做判断.但要使用typeof来判断数据是不是一个数组,就不起作用了.那在实际生产中要如何来检测数据是不是一个数组呢? 今天的学习任务就是如何来检测一个数据是不是数组? typeof操作符 typeof 可以解决大部分数据类型的检测,如: 1 cons

javascript学习笔记整理(数组)

数组是一个可以存储一组或是一系列相关数据的容器. 一.为什么要使用数组. a.为了解决大量相关数据的存储和使用的问题. b.模拟真是的世界. 二.如何创建数组 A.通过对象的方式来创建——var a=new Array(); 赋值方式: 1.直接赋值——var a=new Array(元素1,元素2,元素3,元素4,........) var a=new Array(数值)如果只有一个元素,并且这个元素是数值类型的,那么他就是指定数组的长度并且他的值都是undefined var a=new A

javascript学习(一)数组操作

.数组的创建 [javascript] view plaincopy var arrayObj = new Array(); //创建一个数组 var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不是上限,是长度 var arrayObj = new Array([element0[, element1[, ...[, elementN]]]]); 创建一个数组并赋值 要说明的是,虽然第二种方法创建数组指定了长度,但实际上所有情况下数组都是变长的,

JavaScript学习笔记3之 数组 & arguments(参数对象)& 数字和字符串转换 & innerText/innerHTML & 鼠标事件

一.Array数组 1.数组初始化(Array属于对象类型) 1 /*关于数组的初始化*/ 2 //1.创建 Array 对象--方法1: 3 var arr1=[]; 4 arr1[0]='aa';//给数组元素赋值 5 arr1[1]='bb'; 6 arr1[2]='cc'; 7 arr1[3]='dd'; 8 console.log(arr1);//["aa","bb","cc","dd"] 9 //1.创建 Arra

JavaScript学习杂记--对象和数组

一.对象 说起对象,我们不自然就想起了面向对象中自封装的一个类,同样JS中也是遵循这个守则,在web编程中几乎天天用到的就是JSON.是的,这就是一个对象,不过这个对象下面的字段都是字符串和值类型,如下图. var delivery = { no: 1, sendtime: "2014-11-25", way: "PJS" }; 从上面可以看出delivery中只具有基本的字符串和数值类型,当然给你玩的可不仅仅就这么多,除了基本的类型,我们还可以定义一个数组类型,函

JavaScript学习笔记(6)——JavaScript语法之对象

JavaScript 中的所有事物都是对象:字符串.数字.数组.日期,等等. 在 JavaScript 中,对象是拥有属性和方法的数据. 属性是与对象相关的值. 方法是能够在对象上执行的动作. 提示:在面向对象的语言中,属性和方法常被称为对象的成员. 访问对象属性的语法是: objectName.propertyName 您可以通过下面的语法调用方法: objectName.methodName()