美文网首页
Array对象

Array对象

作者: Christoles | 来源:发表于2019-03-01 20:52 被阅读0次

一、声明数组的方式:

  • 1、字面量声明:例如:var arr = [ ];
  • 2、new Array();不传值 => 返回一个空数组;
  • 3、new Array(number); => 返回一个长度为number的数组的空数组;
  • 4、new Array(x,y,z,...); => 返回指定元素长度的数组,所有参数成为该数组的元素;

比如:

//声明构造数组
var arr2 = new Array("1","你好");
console.log(arr2);//["1", "你好"]
var arr3 = new Array(5);
console.log(arr3);//[empty × 5]
console.log(arr3[2]);//undefined

注:
  1。不推荐这种写法: var arr = [12,35,] ; //在谷歌、火狐中显示有2个元素
* 原因:不同浏览器对这个数组的解析是不一样的,有的浏览器可能认为数组有3个元素,也有可能认为数组有2个元素!

  2。加/不加 new 结果一样

var arr1 = Array();
console.log(arr1);
var arr2 = new Array();
console.log(arr2);

二、常用方法:

  • 1、join(x):将数组转换为 字符串 ,数组元素之间用指定的字符x拼接。
  • 2、pop():删除数组的 最后 一个元素,并将其返回。
  • 3、push(y):向数组的 最后 面继续 添加 1个或多个元素,并返回添加元素后数组的长度;y:指被添加的元素。
  • 4、shift()删除 数组的 第一个 元素,并将其返回。
  • 5、unshift():在数组的开头 添加 1个或多个元素。

// join(x)

var arr = ["hello","world"];
console.log(arr.join("-"));//hello-world

// pop() 删除数组最后一个元素,返回

var res = arr.pop();// ---> 这个方法有返回值 res返回的是"world"
console.log(arr);//["hello"]
console.log(res);//返回 "world"  

// push(y) 添加数组元素,返回长度值

var res = arr.push(res);
console.log(arr);//["hello", "world"]
console.log(res);//返回长度值 2

// shift() 删除数组第一个元素,返回

var res = arr.shift();
console.log(arr);//["world"]
console.log(res);//返回 hello

// unshift() 开头添加元素(1个或多个)

arr.unshift(res,"1","2");
console.log(arr);//["hello", "1", "2", "world"]

//-----------------------------------------------------------------------------------------------------------------------//

  • 6、slice(start,end)
    * 截取 数组中下标为start到end之间的元素,[start,end) 不包括end***
    * start:开始截取的下标值
    * end:结束截取的下标值(可选)
* 注意:
* 6.1、如果只传入一个参数,那么从指定的下标值开始截取到数组的最后一个元素,
      也可以是负值,负几是从倒数第几个开始数到最后一个。
* 6.2、该方法不会改变原数组
  • 7、splice(x,y,z...)
    * 用来 删除 指定下标值x元素开始,删除y个(0就是不删除),并向数组添加z元素,如果有第4个参数会继续添加。
  • 8、reverse()颠倒 数组元素顺序, 需要传入参数
  • 9、sort():对数组进行 排序
    * 9.1、如果我们调用sort()方法进行排序,会根据Unicode码进行排序
    * (比如:比较 5,12,13,先比较第一位数,5比12和13大;然后发现12和13第一位数相同,会比较第2位数,输出顺序为 12,13,5)
    * 9.2、如果我们想让数组中的元素进行数值之间的比较需要传入一个函数 ***,如下:
arr.sort(function(a,b){
    return a-b; 从小到大排序
    //或
//return b-a; 从大到小排序
})

// slice()

var arr = [1,2,3,4,5,6,7,8];
var res = arr.slice(0,5);
    console.log(res);//[1, 2, 3, 4, 5]
var res = arr.slice(-2);
    console.log(res);//[7, 8]
var res1 = arr.slice(3);
    console.log(res1);//[4, 5, 6, 7, 8]
    console.log(arr);//[1, 2, 3, 4, 5, 6, 7, 8]  --- 不改变arr

// splice()

var res2 = arr.splice(1,2,"hello","world");//从第二个始,删除2,3 再插入"hello","world"
    console.log(arr);//[1, "hello", "world", 4, 5, 6, 7, 8]
var arr = [1,2,3,4];
arr.splice(1,0,"777");//不删除 插入"777"
    console.log(arr);//[1, "777", 2, 3, 4]

// reverse() 倒序

var arr = [9,8,7,6];
console.log(arr.reverse());//[6, 7, 8, 9]

// sort() 排序

var arr = [12,32,547,8,30];
arr.sort();
console.log(arr);//[12, 30, 32, 547, 8] --- Unicode码排序
            
         // 实现从小到大排序功能      
/***/       arr.sort(function(a,b){
                return a-b;
            });
            console.log(arr);//[8, 12, 30, 32, 547]
            
/***/   // 实现对象排序 --- 做一个根据用户的年龄进行排序:
            var arr1 = [{
                name:"小明",
                age:15
            },{
                name:"小芳",
                age:12
            },{
                name:"小汉",
                age:22
            },{
                name:"小兰",
                age:18
            }];
            //方法1
            arr1.sort(function(a,b){
                return a.age - b.age;
            });

            console.log(arr1);
            console.log(arr1.valueOf());//拿到的是它自己返回对象的原始值
/***/       //方法2--使用冒泡排序:
            for(i=0;i<arr1.length;i++){
                for(j=0;j<arr1.length;j++){
                    if(arr1[i].age<arr1[j].age){//判断对象里面的属性
                        var tem = arr1[i];//对arr的元素进行排序
                        arr1[i] = arr1[j];
                        arr1[j] = tem;
                    }
                }
            }
            console.log(arr1);
  • 10、concat() 合并/复制数组:
    语法:
      arr.concat(arg1,arg2,...):用来合并一个或多个数组的方法,并返回一个新数组。
    * arr:表示数组
    * arg1,arg2,...:表示需要合并到arr数组中的元素,也可以是数组;如果arg1是数组的话,那么arg1里面的所有元素成为arr数组的元素。
var arr = [1,2,3];
var arr1 = [1,8,9];
var arr2 = [5,15,20];
var newArr = arr.concat(arr1);
    console.log(newArr);//[1, 2, 3, 7, 8, 9]
var newArr = arr.concat(arr1,arr2);
    console.log(newArr);//[1, 2, 3, 1, 8, 9, 5, 15, 20]

\color{blue}{拓展:}

  • 浅拷贝:只复制了内存地址(指通常所说的指针)
  • 深拷贝:将所有数据创建一个副本出来,赋值给新对象。
    比如:
            //复制一个数组
            var arr1 = [1,8,9];
        浅拷贝:
            var arr2 = arr1;
            arr2[2] = "被改";
            console.log(arr2,arr1);//[1, 8, "被改"] ,[1, 8, "被改"] 
        深拷贝: --- 利用concat方法实现对象的深拷贝
            var copyArr = [].concat(arr1);
            arr1[1] = "bei改";
            console.log(arr1,copyArr);//[1, "bei改", "被改"] , [1, 8, "被改"]

  • 11、indexOf(val,index):用来获取指定数组中第一个出现该元素的下标值。
    * 可以有两个参数,也可以只写一个val
    * val:你要查询的数组元素,如果数组中没有val,则返回-1
    * index(可选值):规定从下标值为index的值开始查询数组。
var arr = [2,"string",false,"aaaa"];
    console.log(arr[1]);
arr[1] = 999;//重新赋值***
    console.log(arr);//[2, 999, false, "aaaa"]
arr[4] = "我是第五个元素";//添加元素
    console.log(arr);//[2, 999, false, "aaaa", "我是第五个元素"]
for(var i=0;i<5;i++){
    arr[arr.length] = i;//添加元素
}
    console.log(arr);//[2, 999, false, "aaaa", "我是第五个元素", 0, 1, 2, 3, 4]
            
//indexOf(val,index)
var arr = [1,2,5,2,5,1,7];
    console.log(arr.indexOf(2));//1

//-----------------------------------------------------------------------------------------------------------------------

三、* 高级用法:

  • 1、forEach()
    语法:
     arr.forEach()( callback(curval,index,arr),thisval )
    数组 每个元素都执行一次回调函数
      * callback: 表示回调函数;
      * culval: 表示数组arr中每一个元素;
      * index: 表示数组中元素的下标值;
      * arr: 数组本身。
      * thisval: 可选(很少用)。
  • 2、map()
    语法:
      map(callback(curVal,index,arr),thisVal);
    通过指定 函数处理数组的每个元素 ,并返回处理后的数组。
    * 返回一个新数组,不会改变原来的数组。
  • 3、filter()过滤器
    语法:
    arr.filter(callback(curVal,index,arr),thisVal);
    * 条件成立的元素会以 新数组 形式返回给我们,不改变原数组。
  • 4、some()
    * 检查数组中是否存在(这个条件是根据你业务来书写)成立的元素;
    * 只要数组中有一个元素使得条件成立,就会返回true ,布尔值
    * 类似条件语句 : 或 ||
  • 5、every()
    * 检测数组元素的每个元素是否都符合条件,返回一个 布尔值
    * 类似条件语句 : 且 &&

// forEach()

var arr = [1,2,3,4,5];
var res = arr.forEach(function(curVal,index,arr){
    arr[index] = curVal * curVal ;
})
    console.log(arr,res);//  [1, 4, 9, 16, 25] , undefined
            
//另外一种写法 等价于上面的
arr.forEach(callback);
function callback(curVal,index,arr){
    console.log(curVal);//能依次被调用到
}

// map()

var arr = [1,2,3,4,5];
var res = arr.map(function(curVal,index){
    return curVal*curVal;
})
    console.log(res);//[1, 4, 9, 16, 25]
    console.log(arr);//[1, 2, 3, 4, 5]

// map()
var arr = [60,65,90,85,88,85,95,100];
var res = arr.map(function(curVal,index){
    return curVal>=85;
})
    console.log(res);//[false, false, true, true, true, true, true, true]
    console.log(arr);//[60,65,90,85,88,85,95,100]

// filter()

var res1 = arr.filter(function(curVal){
    return curVal>=85
})
    console.log(res1);//[90, 85, 88, 85, 95, 100]

// some()

var res2 = arr.some(function(curVal,index,arr){
   return curVal>=100;
})
    console.log(res2);//true  有一个满足就返回true

// every()

var res3 = arr.every(function(curVal,index,arr){
    return curVal>=85;
})
    console.log(res3);//false  并不是每个元素都满足条件返回false

相关文章

  • JavaScript Array 对象

    JavaScript Array 对象 Array 对象 Array 对象用于在单个的变量中存储多个值。 创建 A...

  • JavaScript Array常用属性和方法(摘抄自W3S

    Array 对象 Array 对象用于在单个的变量中存储多个值。 创建 Array 对象的语法: new Arra...

  • js数组对象JavaScript Array 对象

    Array 对象 Array 对象用于在单个的变量中存储多个值。 创建 Array 对象的语法: new Arra...

  • Javascript 学习3 Array

    Array 对象 Array 对象用于在单个的变量中存储多个值。 创建Array对象方法 参数 size 是期望数...

  • JS常用API合集-对象篇

    Object对象 Object 对象代表 HTML 的 元素 Array对象 Array对象用于在单个变量中保...

  • JS高级

    1,javascript 基础知识 Array对象 Array对象属性 Arrray对象方法 Date对象 Dat...

  • JS基础整理 - 2

    1 JavaScript Array(数组)对象 ![Array(数组)对象.png](http://upload...

  • 常用的处理数组方法

    一.Array对象方法 Array 对象方法 .concat()[https://segmentfault.com...

  • Array对象

    标准定义:一个存储元素的线性集合(collection),元素可以通过索引来任意存取,索引通常是数字,用来计算元素...

  • Array对象

    构造方式 var colors1 = new Array();var colors2 = new Array(20...

网友评论

      本文标题:Array对象

      本文链接:https://www.haomeiwen.com/subject/nmxduqtx.html