JavaScript数组学习

初始化

Array构造函数

在定义之后进行赋值

var str=new Array();
str[0]="hello";
str[2]="world";
console.log(str);//[ 'hello', <1 empty item>, 'world' ]
console.log(str.length);//3 数组的length=索引下标最大值加1

在定义的同时进行赋值

var str=new Array(100,true,{name:'zs'});//js中可以传不同类型的值

var str=new Array(10);//这里赋值一个整型数值，是新建指定长度的空数组！！
console.log(str);//[ <10 empty items> ]

var str=new Array(10.1);//RangeError: Invalid array length
//不允许传递”一个“”浮点型“的数据！！

数组字面量

var logo=['zs','ls','zl'];
//logo[0]="张三";//给第一个logo重新赋值
var arr=[100,true,200.2,'lankou',{name:'zs'}];
console.log(logo,arr);
//[ 'zs', 'ls', 'zl' ] [ 100, true, 200.2, 'lankou', { name: 'zs' } ]
//数组的使用：索引下标
console.log(logo[0],logo[1],logo[2]);//zs ls zl
console.log(logo[200.2],logo['abc'],logo[-1]);//均输出undefined,首先在对象内找值，找不到就返回undefined，不会报错

length属性

var arr=[100,200,300,400];
console.log(arr.length);//4 可读性
arr.length=6;//可写
console.log(arr.length,arr);//6 [ 100, 200, 300, 400, <2 empty items> ]
arr.length=3;//通过length属性的可写性，可实现尾部数据的删除，删除的数据不可恢复
console.log(arr.length,arr);//3 [ 100, 200, 300 ]

线性结构实现尾部新增

var arr=[10,20,30,40];//arr.length=4
arr[arr.length]=50;//arr[4]=50,因此在末尾实现了新增,此时arr.length=5
arr[arr.length]=60;//arr[5]=60 arr.length=6
console.log(arr,arr.length);

尾部新增元素举例

//利用函数，实现代码的复用
var arr=[10,20];
function myAdd(){
    for(var key in arguments){
        var value=arguments[key];
        this[this.length]=value;
    }
}
// arr.myAdd(30,40,50);//TypeError: arr.myAdd is not a function 这种方法报错，因此反向建立关系
//反建立函数与对象的关系
myAdd.call(arr,30,40,50);
// myAdd.apply(arr,[30,40,60]);
console.log(arr);//[ 10, 20, 30, 40, 50 ]

访问数组元素

数组变量名[索引]

如果索引小于数组的长度，返回对应项的值

var logo=['zs','ls','zl'];
console.log(logo[0],logo[1],logo[2]);//zs ls zl

如果索引大于数组的长度，数组自动增加到该索引值加1的长度

var logo=['zs','ls','zl'];
logo[0]="小猪";//重新赋值
logo[3]="小白";//新增元素
console.log(logo);// [ '小猪', 'ls', 'zl', '小白' ]

数组的遍历

var strs=new Array();
strs[0]='你好';
strs[1]="中国";
strs[3]="!";
//①for循环
for(var i=0;i<strs.length;i++){
    var item=strs[i];
    console.log(i,item);
}

//②for in 自己进行迭代、判断结束
for(var i in strs){
    console.log(i,strs[i]);
}

//③while循环
var i=0;
while(i<strs.length){
    console.log(i,strs[i]);
    i++;
}
//④do while循环
var i=0;
do{
    console.log(i,strs[i]);
    i++;
}while(i<strs.length);

数组检测

Array.isArray()

var arr=[];
console.log(Array.isArray(arr));//true

数组序列化

toString()

var arr=[100,200,{name:'ls'}];
console.log(arr.toString());//100,200,[object Object]

console.log(['hello','world'].toString());//hello,world

join();

将数组转换为一个字符串
不对原数组产生影响

// 应用场景：纯净的数据环境，指定连接符
var arr=[100,200,[1,2,3]];
//var str=arr.join();//默认 ,做分隔符
var str=arr.join('|');//100|200|1,2,3 这里有嵌套，因此未完全处理好
console.log(str);

JSON

JSON.stringify()

序列化
该方法用于将 JavaScript 值转换为 JSON 字符串

var arr=[100,200,{name:'ls'},function(){},[1,2,3]];
var str=JSON.stringify(arr);
//JSON不处理函数，因此输出null
console.log(str);//[100,200,{"name":"ls"},null,[1,2,3]]

JSON.parse()

反序列化
该方法用于将一个 JSON 字符串转换为对象

var str="[100,200,300]";//接口约束：相同的数据类型
var r=JSON.parse(str);
console.log(r);//[ 100, 200, 300 ]
console.log(Array.isArray(r));//true r是一个数组

var arr='{"name":"zs","age":100}';
var c=JSON.parse(arr);
console.log(c);//{ name: 'zs', age: 100 }
console.log(Array.isArray(c));//false

栈方法

push()

pop()

队列

shift()

unshift()

举例：

var arr=[];
arr.push(100,200);
arr.unshift('hello','world');
console.log(arr);//[ 'hello', 'world', 100, 200 ]
console.log(arr.pop());//200
console.log(arr.shift());//hello
console.log(arr);//[ 'world', 100 ]

排序

排序依据默认是ASCII
字符串类型的数据项不能以算术操作符进行排序依据

reverse()

用来反转数组
会直接修改原数组
默认排序：

var arr=[3,4,2,6,1];
console.log(arr.reverse());//[ 1, 6, 2, 4, 3 ]

**自定义排序：**该方法可以接受一个比较函数作为参数，比较函数有两个参数

var arr=[1,10,2,23];
function compare(v1,v2){
    return v1-v2;
arr.reverse(compare);
console.log(arr);//[ 23, 2, 10, 1 ] 仅实现了反序列，排序操作用sort就可以完成

sort()

用来对数组中的元素进行排序
会影响原数组，默认按照Unicode编码进行排序
默认排序：

var arr=[3,4,2,6,1];
var result=arr.sort();
console.log(result);//[ 1, 2, 3, 4, 6 ]
console.log(arr);//[ 1, 2, 3, 4, 6 ]

var arr=[1,10,2,22];
console.log(arr.sort());//[ 1, 10, 2, 22 ]
console.log(arr.reverse());//[ 22, 2, 10, 1 ]
//这都是按照ASCII码进行排序的结果

自定义排序：

var arr=[1,10,2,23];
function compare(v1,v2){
    return v1-v2;
    //数值的大小比较，比它大就排在后面，比它小就排在前面
}
arr.sort(compare);
console.log(arr);//[ 1, 2, 10, 23 ]  升序排列

var arr=[1,10,2,23];
function compare(n1,n2){
    return n2-n1;
}
arr.sort(compare);
console.log(arr);//[ 23, 10, 2, 1 ]  降序排列

截取方法

concat()

可以连接两个或多个数组，并将新的数组返回
原数组不受影响

var arr=[100,200];
var result=arr.concat(300);
var result2=arr.concat('hello');
var result3=arr.concat([1,2,3]);
console.log(arr,result,result2,result3);
//[ 100, 200 ] [ 100, 200, 300 ] [ 100, 200, 'hello' ] [ 100, 200, 1, 2, 3 ]

slice

根据索引下标截取数据项 [start,end)
如果传递一个负值，则从后往前计算
原数组不受影响

var arr=[100,200,300,400,500];
var result1=arr.slice(0,-2);//[ 100, 200, 300] 
console.log(result1);

应用场景1：深拷贝

var arr=[100,200,300,400,500];
var result1=arr.slice(0);//[ 100, 200, 300, 400, 500 ] 全部截取
//深拷贝（指向的不是同一个内存空间）：将arr堆中的数据复制到result1的堆中
var result2=arr.slice(0,3);//[ 100, 200, 300 ] 左开右闭
//slice(截取开始位置的索引,截取的结束位置的索引)
console.log(arr,result1,result2,result3);

应用场景2：类数组对象（如arguments） 转换成 数组对象

function add(){
    console.log(arguments,arguments.length);
    //[Arguments] { '0': 1, '1': 2, '2': 3, '3': 4 } 4
    //var arr=arguments.slice(0);
    //arguments不是数组，因此不可直接使用slice方法,需使用call/apply来反向建立关系
    var arr=Array.prototype.slice.call(arguments,0);
    console.log(arr);//[ 1, 2, 3, 4 ]
}
add(1,2,3,4);

splice

作用：删除数组中的指定元素(使用splice会影响到原数组，会将指定元素从原数组中删除，并将被删除的元素作为返回值)
两个参数：

var arr=['冯','陈','楚','卫'];
var team=arr.splice(0,2);//左闭右开
//splice(要删除的起始位置的索引，要删除的项数)
console.log(team);//[ '冯', '陈' ]
console.log(arr);// [ '楚', '卫' ]

var arr=[100,200,300,400];
// var result=arr.splice(0,arr.length);//深度拷贝后清空原数组
var result=arr.splice(7,3);//索引下标为正值不存在时，就原样输出,并且result为[]
// var result=arr.splice(-3,3);//索引下标[0，-3,-2,-1]
//使用API时，索引为负值，就倒序进行查找
console.log(arr);

三个参数：

var arr=[10,20,30,40];
var result=arr.splice(1,2,'a','b');
//替换操作：指定三个参数(起始位置，要删除的项数，要插入的任意数量的项)
console.log(arr);//[ 10, 'a', 'b', 40 ]

var arr=[10,20,30,40];
var result=arr.splice(1,0,'a','b');
//插入操作：指定三个参数(起始位置，0，要插入的项任意数量的项)
console.log(arr);//[ 10, 'a', 'b', 20, 30, 40 ]

索引方法

都是通过数据项的值查找在数据中的索引位置 ===

indexOf()

var arr=[100,200,300,100,200,300,400];
var result=arr.indexOf(100);//0
var result2=arr.indexOf(100,2);//3
var result3=arr.indexOf(600);//-1
var result4=arr.lastIndexOf(100);//3
var result5=arr.indexOf('100');//-1
console.log(result,result2,result3,result4,result5);

lastIndexOf()

var arr=[
    {name:'zs',age:10},
    {name:'ls',age:20},
]
var result=arr.indexOf({name:'zs',age:10});
//对象类型的因为在栈中的地址值不一样，因此这样查询找不到
console.log(result);//-1
//可以用如下方式来查找索引↓
var ob={name:'zs',age:10};
var arr=[
    {name:'zs',age:10},
    {name:'ls',age:20},
    ob
];
var result=arr.indexOf(ob);
console.log(result);//2

迭代方法

函数作为参数：

functionName(数组中迭代的值，索引下标，数组本身){
//运行该函数的参数是可选的↑
     		规定业务逻辑和算法
			return 返回值;
}

every()

对数组中的每一运行给定的函数，如果该函数对每一项都返回true,则该函数返回true

var arr=[100,200,300,400];
//every，判断数组中的值是否都大于200
function bigger(value){
    return value>200;
    //相当于↓
    // if(value>200){
    //     return true;
    // }else return false;
}
var result=arr.every(bigger);
console.log(result);//false

some()

对数组中的每一运行给定的函数，如果该函数对任一项返回true,则返回true

var arr=[100,200,300,400];
function bigger(value){
    return value>200;
}
//some，判断数组中的值是否有大于200的
var result=arr.some(bigger);
console.log(result);//true

filter()

（过滤：）对数组中的每一运行给定的函数，会返回满足该函数的项组成的数组

var arr=[100,200,300,400];
function bigger(value){
    return value>200;
}
var result=arr.filter(bigger);
console.log(result);//[ 300, 400 ]

map()

（映射：）对数组中的每一运行给定的函数,返回每次函数调用的结果组成的数组

var arr=[100,200,300,400];
function bigger(value){
    return value>200;
}
var result=arr.map(bigger);
console.log(result);//[ false, false, true, true ]

var arr=[100,200,300,400];
function bigger(value){
    return value>200;
}
var result =arr.map(function(item,index,arr{
    return item * 2;
    //将数组中每个数都乘以2后输出
    });
console.log(result);//[ 200, 400, 600, 800 ]

forEach()

对数组中的每一运行给定的函数,没有返回值，常用来遍历元素

var arr=[100,200,300,400];
function bigger(value){
    return value>200;
}
arr.forEach(function(value,index){
    console.log(value,index);
});
/* 100 0
    200 1
    300 2
    400 3*/

例题

var stus=[
    {name:'张三',age:10},
    {name:'李四',age:18},
    {name:'王五',age:20},
    {name:'赵六',age:30}
];
//判断有没有成年人
var bool=stus.some(function(value){
    return value.age>=18;
});
console.log(bool);//true

//判断有没有未成年人
var bool=stus.some(function(value){
    return value.age<18;
});
console.log(bool);true

//判断是否都成年
var bool=stus.some(function(obj){
    return obj.age>=18;
});
console.log(bool);//true

//把未成年人都找到
var arr=stus.filter(function(obj){
    return obj.age>=18;
});
console.log(arr);
/*[
  { name: '李四', age: 18 },
  { name: '王五', age: 20 },
  { name: '赵六', age: 30 }
] */

//找到所有的用户名name
var arr=stus.map(function(obj){
    // return obj.name;
    return '学生'+obj.name;//给结果加前缀
});
console.log(arr);
//[ '学生张三', '学生李四', '学生王五', '学生赵六' ]

//找到所有的年龄
var arr=stus.map(function(obj){
    return obj.age;
})
console.log(arr);//[ 10, 18, 20, 30 ]
arr.forEach(function(value){
    console.log("年龄"+value+"岁");
});
/*年龄10岁
年龄18岁
年龄20岁
年龄30岁 */