JS引用类型 --- 数组

一、数组概念

  • 用[]包起来的，一组有序的、任意数据类型的数据集合
  • 数组的长度：array.length
  • JS 中的数组与其他语言的数组，有很大的区别

二、创建数组的方式

1. 通过构造函数

// 创建空数组
var array=new Array();

// 创建数组，并填充三个元素10,20,30
var array=new Array(10,20,30);

// 创建数组，里面存储7个值
var array=new Array(7);

2.通过字面量

var arr = [];

三、检测是不是数组 （ 3种方法 ）

1、借用对象原型的toString() 方法 --->【最严谨，兼容性好】

<script>
    var arr = [];

    var result = toString.call(arr);
    console.log(result);
</script>

若是数组，输出： ‘[object Array]‘

2、Array.isArray(被检测对象) ---> ES5中新方法，有兼容问题

<script>
    var arr = [];

    var result = Array.isArray(arr);
    console.log(result);
</script>

// 结果：布尔值

3、使用instanceof 判断是哪种引用类型 ---> IE8及以下不兼容

  • 用法： 被检测对象 instanceof 引用类型的构造函数
  • 引用类型值有：Object、Array、RegExp、Data 等
  • 任何对象 instanceof Object 值都是true （因为所有的对象都继承自：Object）
<script>
    var arr = [];

    var result1 = arr instanceof Array; // true
    var result2 = arr instanceof Object; // true
</script>

4. 检测数组兼容代码：方法1 、2 的结合

综上：测试数组兼容代码

if(typeof Array.isArray==="undefined"){
  Array.isArray = function(arg){
        return result = Object.prototype.toString.call(arg)==="[object Array] ? true : false"
    }; 
}

四、转换方法

  • 所有的对象都有 toString() 、 toLocaleString() 、 valueOf() 方法；
  • 调用数组的 toString(): 将数组中每个值 以字符串拼接，中间逗号隔开
  • 调用数组的 toLocaleString():
  • 调用对象的 valueOf():

五、数组种方法

1.迭代方法 ----> 遍历

forEach( ) 遍历整个数组
  • return也无法让其停止
  • 遍历整个数组， 无法停止， return也不能让其停下来，影响性能
<script>
    var arr = [1,2,3,4];
    arr.forEach(function( value , index){

    })；
</script>
filter( ) 遍历全部，筛选整个数组；符合条件的组成新数组 并返回
  • 创建新数组（将符合条件的），并返回
  • 原数组不变
  • 筛选条件的代码，写在 return 中
<script>
    var arr = [1,2,3,4,23,4,3,5,6];
    var result = arr.filter(function (value,index,array) {
        return (value < 10)
    });
    console.log(result);  // [1,2,3,4,4,3,5,6]
</script>
map( ) 遍历全部，集体操作；组成新数组 并返回
  • 创建新数组（集体操作后的），并返回
  • 原数组不变
  • 集体操作的代码，写在 return 中
<script>
    var arr = [1,2,3,4];
    var newArr = arr.map(function(value,index){
        return value*10;
    })
    console.log(newArr);
    console.log(arr);
</script>
every( ) 遍历判断是否符合条件，返回布尔值
  • 判断条件写在 return 中
  • 判断数组中有一项不符合，就停止遍历，返回false
  • 判断所有都符合，返回true
  • 原数组不变
<script>
    var arr = [1,2,3,4];
    var result = arr.every(function (value, index) {
        return value < 3;
    });

    console.log(result);
</script>
some( ) 遍历判断是否符合条件，返回布尔值
  • 判断条件写在 return 中
  • 判断数组中有一项符合，就停止遍历，返回true
  • 判断所有都不符合，返回false
  • 原数组不变
<script>
    var arr = [1,2,3,4];
    var result = arr.some(function (value, index) {
        return value > 3;
    });

    console.log(result);
</script>

2. 栈方法（后进先出）

push( ) 末尾追加数组项，不能追加数组；原数组改变，返回新数组长度
  • 原数组 改变
  • 返回值：新数组的长度
  • 不能追加数组（会出现数组嵌套）
<script>
    var arr = [1,2,3,4];
    var result = arr.push(5,6,7);
    console.log(arr)；           // [1,2,3,4,5,6,7]
    console.log(result);        // 7
</script>
pop 不用传参；末尾删除数组项；原数组改变，返回被删除的数组项
  • 原数组 改变
  • 返回值： 被删除的元素
<script>
    var arr = [1,2,3,4];
    var result = arr.pop();
    console.log(arr)；   // [1,2,3]
    console.log(result);    // 4
</script>

3. 队列方法 先进先出

unshift( ) 开头追加数组项，不能追加数组；原数组改变，返回新数组长度
  • 原数组 改变
  • 返回值：新数组的长度
  • 不能追加数组（会出现数组嵌套）
<script>
    var arr = [1,2,3,4];
    var result = arr.push(5,6,7);
    console.log(arr)；       // [5,6,7,1,2,3,4]
    console.log(result);    // 7
</script>
shift( ) 不用传参；开头删除数组第一项；原数组改变，返回被删除的数组项
  • 原数组 改变
  • 返回值： 被删除的元素
<script>
    var arr = [1,2,3,4];
    var result = arr.shift();
    console.log(arr)；       // [2,3,4]
    console.log(result);    // 1
</script>

4. 操作方法

concat( ) 末尾添加 数组项 / 数组；组成新数组 并返回
  • 原数组不变
  • 返回值：添加 数组项 / 数组 之后的新数组
<script>
    var arr = [1,2,3,4];
    var arr2 = arr.concat(5,6,[7,8]);
    console.log(arr);  // [1,2,3,4]
    console.log(arr2); // [1,2,3,4,5,6,7,8]
</script>
slice( ) 原数组不变；截取 数组项，组成新数组 并返回
  • 原数组不变
  • 返回值：被截取的数组项 构成的新数组

参数（start, end）: 截取数组项的首位、末尾索引，不包含末尾

参数（start）: 截取数组项的首位索引，末尾到最后

参数（）: 复制出一个新数组，可用于：将伪数组，转为真数组

* 实现：
var realArr = [].slice.apply(伪数组);

* 原理
var arr1 = arr.slice();
  • 复制一个数组的方法
<script>
    var a1 = [1, 2];
    var a2 = a1.slice();

    console.log(a2); // [1, 2]
    console.log(a1 === a2);  // false
</script>
splice( ) 原数组改变（删除 、替换、添加）；被删除的数组项组成的新数组 并返回
  • 原数组改变
  • 返回值：被删除的数组项 做成的新数组
  • 删除、插入、替换

参数（index, number）：要删除数组项的索引（包含）、删除数组项的个数

参数（index, number, item）：要删除数组项的索引、删除数组项的个数、插入的数组项（可多个）

参数 index、number 是必需的，参数item可有可无

添加的item数组项从 index 索引开始添加（直接顶替了index索引的位置）

// 删除

<script>
    var arr = [0, 1, 2, 3, 4, 5, 6];
    var result = arr.splice(1, 2);
    console.log(arr);       //[0, 3, 4, 5, 6]
    console.log(result);    // [1, 2]
</script>
// 替换

<script>
    var arr = [0, 1, 2, 3, 4, 5, 6];
    var result = arr.splice(1, 3, 7, 8);
    console.log(arr);       // [0, 7, 8, 4, 5, 6]
    console.log(result);    // [1, 2, 3]
</script>
// 插入

<script>
    var arr = [0, 1, 2, 3, 4, 5, 6];
    var result = arr.splice(1, 0, 7, 8);
    console.log(arr);       // [0, 7, 8, 1, 2, 3, 4, 5, 6]
    console.log(result);    // []
</script>

5. 数组转字符串

  • 与字符串转数组的方法对应 str.split(‘分隔符‘)
join(‘分隔符‘) 数组转为 分隔符 连接的字符串
  • 原数组不改变

参数（‘分隔符‘）：转成一个由分割付链接各数组项的字符串

参数（‘‘）：转成一个字符串（各数组项没有福海链接）

参数（）：转成一个 逗号链接各数组项的字符串

<script>
    var arr = [1, 2, 6];
    console.log(arr); // [1,2,6]
    console.log(arr.join(‘--‘)); // ‘1--2--6‘
    console.log(arr.join(‘‘)); // ‘126‘
    console.log(arr.join()); // 1,2,6  这个多个字符串
</script>

6. 查找位置

indexOf( ) 从头开始：查找数组项，返回第一个符合条件数组项的索引
  • 原数组不变，只是查找位置
  • 只能查出：从查找起点第一个符合条件的数组项索引
  • 查到返回符合条件的数组项索引
  • 精确查找，查不到返回 -1

参数（value, startIndex）：value是被查找项、startIndex是开始查找的位置（含此位置的数组项）

参数（value）：默认从索引为0的开始查找

<script>
    var arr = [0, 1, 2,3,4,5,6];
    var result = arr.indexOf(3,3);
    console.log(result);    // 3
</script>
lastIndexOf( ) 从尾开始：查找数组项，返回第一个符合条件数组项的索引
  • 精确查找，查不到返回 -1

7. 数组项排序

reverse( ) 数组项反转；原数组改变为反转后的数组
  • 原数组改变：数组项被反转
  • 返回值：原数组改变后的值
<script>
    var arr = [0, 1, 2, 3];
    var result = arr.reverse();
    console.log(arr);       // [3, 2, 1, 0]
    console.log(result);    // [3, 2, 1, 0]
    console.log(arr === result); // true
</script>
sort( ) 数组项排序（数字比大小、字符串比大小）；原数组改变为排序后的数组
  • 原数组改变：数组项排序后
  • 返回值：原数组改变后的值

参数（）：不传参，则按字符串的字符编码排序

参数（函数表达式） 【参数间使用 减号；严禁使用 大于等于号】

  • 函数中，return 参数a - 参数b; ----> 升序
  • 函数中，return 参数b - 参数a; ----> 降序
<script>
    var arr = [0, 1, 10, 12, 7, 22, 2, 3];
    var result = arr.sort(function (a, b) {
        return a - b;
    });
    console.log(arr);       // [0, 1, 2, 3, 7, 10, 12, 22]
    console.log(result);    // [0, 1, 2, 3, 7, 10, 12, 22]
    console.log(arr === result); // true
</script>
  • 对象中某一项进行排序
<script>
    var obj = [{
        value: 10
    }, {
        value: 30
    }, {
        value: 20
    }];

    var result = obj.sort(function(a, b) {
        return b.value - a.value;
    });

    // 降序排列
    console.log(result);
</script>
时间： 2024-10-08 17:13:18

JS引用类型 --- 数组的相关文章

js php 数组比较

php 与 javascript 数组除了定义以及 操作上有很大的区别,还有很多其它的区别.现在我们就来讨论讨论. 1.大家都知道php比较两个数组是否全相等(值,索引)相等 $a=array(1,2,3); $b=array(1,2,3); echo ($a==$b); //output 是1 如果是 javascript 呢:请看以下代码返回的: <script type="text/javascript"> var a=['a','b','c']; var b=['a

JS 引用类型

object类型: js中大多数引用类型都是Object类型的实例.创建object实例有两种方法:第一种是使用new操作符后跟Object构造函数. var obj = new Object();obj.name = 'long'; 第二种是对象字面量. var obj = { name:'long', 'la la':111 }; 访问对象属性,一般优先使用 '.' 操作符,在属性名是变量或者属性名不符合ECMAScript标识符规范时,可以用 '[ ]'访问,如果不是变量需要给属性名加上引

从一个简单例子来理解js引用类型指针的工作方式

? 1 2 3 4 5 6 7 <script> var a = {n:1};  var b = a;   a.x = a = {n:2};  console.log(a.x);// --> undefined  console.log(b.x);// --> [object Object]  </script> 上面的例子看似简单,但结果并不好了解,很容易把人们给想绕了--"a.x不是指向对象a了么?为啥log(a.x)是undefined?".&

js 关联数组

踩得坑: JS ,通过 new Array()创建了一个数组: var param =  new Array();param["key1"] = value1;param["key2"] = value2;param["key3"] = value3; 打印  param.length 时 一直为0; 发现: js关联数组的属性:length,其数值记录的是key为整数的元素个数 当某元素key为字符串的时候,不计入length中. 办法: Ob

js删除数组元素中的指定值

js删除数组元素中的指定值:所谓删除数组元素中指定的值,就是删除具有指定的数组项,下面就通过实例代码代码介绍一下如何实现此功能.代码如下: var theArray=["蚂蚁部落",2,"青岛市南区","antzone","蚂蚁部落"]; for(var i=0;i<theArray.length;i++){ if(theArray[i]=="蚂蚁部落"){ theArray.splice(i,1);

js中数组去重的几种方法

js中数组去重的几种方法         1.遍历数组,一一比较,比较到相同的就删除后面的                 function unique(arr){                         for(var i=0;i<arr.length;i++){                                 for(var j=i+1;j<arr.length;j++){                                         if(ar

js删除数组里的某个元素

首先可以给js的数组对象定义一个函数,用于查找指定的元素在数组中的位置,即索引,代码为: Array.prototype.indexOf = function(val) { for (var i = 0; i < this.length; i++) { if (this[i] == val) return i; } return -1; }; 然后使用通过得到这个元素的索引,使用js数组自己固有的函数去删除这个元素:代码为: Array.prototype.remove = function(v

oop_day03_内存管理、引用类型数组

--20150811 1.内存管理:由JVM来分配并管理------了解为主 1)堆: 1.1)用于存储new出来的对象(包括成员变量) 1.2)成员变量的生命周期: 创建对象时存在,对象被回收时消失 1.3)垃圾回收器(GC)用于回收没有任何引用指向的对象 1.4)GC不定期回收,而回收的过程中透明的 若想快一些,调用System.gc() 1.5)内存泄露:不再使用的对象没有被及时的回收 建议:不再使用的对象将其引用及时的设置为null 内存图:    2)栈: 2.1)用于存储所有的局部变

js,jQuery数组常用操作小结

一.js中数组常用操作小结 (1) shift:删除原数组第一项,并返回删除元素的值:如果数组为空则返回undefined var a = [1,2,3,4,5]; var b = a.shift(); 结果 a:[2,3,4,5] b:1 (2) unshift:将参数添加到原数组开头,并返回数组的长度 var a = [1,2,3,4,5]; var b = a.unshift(-2,-1); 结果 a:[-2,-1,1,2,3,4,5] b:7 注:在IE6.0下测试返回值总为undefi