数组
一、概念
- 什么是数组?
数组是JavaScript内置对象 Array,数组可以保存大批量的数据 - 如何检测是否是数组类型
typeof一般用于检测基本类型,而检测对象类型,结果均为object,不精确;instanceof一般用于检测引用数据类型(对象类型) 返回结果为布尔值 -
var arr = new Array(); console.log(arr instanceof Array);//true
- 创建数组?
- var arr = new Array() 定义一个空数组
- var arr = new Array(item,item,item…); 定义数组同时即初始化
- var arr = new Array(length) 定义数组同时,指定数组长度
- var arr = [] 代表数组
- 数组赋值
-
var arr = new Array();//空数组 arr[0] = 1; //数值 arr[1] = true; //布尔值 arr[1] = false; //重复赋值,覆盖 arr[2] = "你好"; //字符串 arr[3] = []; //空数组 arr[4] = {}; //空对象 //数组内的元素不限制数据类型 var arr1 = new Array(4); arr1[0] = 10; //10 arr1[5] = 20; //20 console.log(arr1.length);//6 console.log(arr1[1]); //已经开辟内存空间,却没有值undefined
-
- 数组的常见属性和方法
- 属性:length 数组中元素的个数
-
var arr = new Array(4); console.log(arr.length);//4
- 数组的常见特性
- 索引:数组中每一个元素都有一个索引 索引从0开始
- 给数组赋值: 数组名[索引]=值;
- 取出数组的内容:变量=数组名[索引]
- “两个不限制”:JavaScript中数组不限制长度和数据类型
- 数组的遍历
- 使用for循环
-
for(var i=0;i<arr.length;i++){ console.log(arr[i]); }
- 使用for…in
- for…in中索引是字符串类型
-
for(var i in arr){ console.log(typeof i);// string console.log(arr[i]); }
二、数组对象的方法
- 栈方法(先进后出)
- push() 压栈 向数组末尾添加元素 支持多参
-
var arr=[10,20]; arr.push(100,200); console.log(arr);//[10,20,100,200]
- pop() 出栈 删除数组的尾部元素
-
var arr=[10,20,30]; arr.pop();//一次性删除一个元素(数组末尾元素) console.log(arr);//[10,20]
- 队列(先进先出)
- push() 进队 向尾部添加元素
-
var arr=[10,20]; arr.push(100); console.log(arr);//[10,20,100]
- shift() 出队 删除数组头部元素
-
var arr=[]; arr.push(10); arr.push(100,90);//一次性添加多个数据 console.log(arr);//[10,20,100,90] arr.shift();//删除数组头部元素 console.log(arr);//[20,100,90]
-
- unshift() 在数组头部添加元素 支持多参
-
var arr=[]; arr.push(10); arr.push(100,200);//一次性添加多个数据 arr.unshift('hello');//在数组头部添加元素 console.log(arr);//['hello',10,100,200]
-
- splice()(增加、删除、替换元素)
- splice(index,howmany) 从index位置开始,删除 howmany个元素
-
var arr=[10,200,89,50,100]; arr.splice(2,3);//2 索引 3 个数 [10,100]
- splice(index,howmany,item,item…) 从index开始,先删除howmany个元素,再添加元素,若删除的元素个数与新增的元素个数相同,就是替换功能
-
var arr=[10,200,89,50]; arr.splice(1,1,'hello','world'); //[10,'hello','world',89,50] arr.splice(3,1,'hello');//[10,20,89,'hello'] //删除一个,添加一个,等同于替换 arr.splice(0,0,'hello');//['hello',10,200,89,50] //头部插入元素 arr.splice(arr.length,0,'hello');//[10,200,89,50,'hello'] //末尾插入元素
- 排序 sort
- sort方法可以对数组元素进行排序,按照字符串进行排序(ASCII码),默认升序
- sort方法可以接收一个函数作为参数,作为参数的函数可以接收两个数据作为参数
sort(function(a,b){}) - 作为参数的函数是一个比较函数;a,b代表数组中相邻的两个元素
-
sort(function(a,b){ return a-b;//升序 //return b-a;//降序 })
-
var arr = [ { name: "张三", age: 20, brith: "2000-01-02" }, { name: "李四", age: 60, brith: "1960-01-02" }, { name: "王五", age: 40, brith: "1980-01-02" }, { name: "赵六", age: 50, brith: "1970-01-02" }, { name: "钱七", age: 30, brith: "1990-01-02" } ] //sort方法可以接收一个函数作为参数,作为函数的参数可以接收两个数据作为参数 //第一个元素大于第二个元素,则返回一个正数 //第一个元素小于第二个元素,则返回一个负数 //两者相等,返回0 //根据年龄排序 默认升序a-b 降序b-a arr.sort(function (a, b) { return a.age-b.age; }) //根据姓名排序 中文排序 arr.sort(function(a,b){ return a.name.localeCompare(b.name, 'zh'); }) //根据出生年月排序 //Date.parse() 将时间字符串转换为时间戳 arr.sort(function(a,b){ return Date.parse(a.brith)-Date.parse(b.brith); }) console.log(arr);
- 数组的其它方法
-
reverse() 将数组元素倒序排列
-
var arr=[10,20,30,100,90,6,4]; arr.reverse();//倒叙 console.log(arr); //[4, 6, 90, 100, 30, 20, 10]
-
join() 使用指定字符将数组元素拼接成字符串
-
var arr=[10,20,30,100,90,6,4]; var str=arr.join('-');//使用“-”将数组元素拼接 console.log(str,typeof str);//10-20-30-100-90-6-4 string
-
concat() 拼接数组(合并数组) 支持多参
-
var arr=[200,300]; var arr1=['hello','world']; var arrx=arr.concat(arr1,arr,['yes']); console.log(arrx);//[10, 20, "hello", "world", 200, 300, "yes"]
-
slice() 截取数组
-
var arr=[100,200,10,20,50]; var arr0=arr.slice(2,4); console.log(arr0);//[10,20] console.log(arr);//[100,200,10,20,50] //原数组不发生改变
-
indexOf() 获取元素在数组中的位置,找不到 返回 -1
-
var arr=[100,200,10,20,50]; var index=arr.indexOf(10);//2 var index=arr.indexOf(1000);//-1
-
lastIndexOf() 获取元素在数组的位置,,从后向前找不到返回 -1
-
var arr=[100,10,10,20,50]; var index=arr.lastIndexOf(10);//2 var index=arr.lastIndexOf(1000);//-1
-
- 实例
- 字符串翻转
-
var str='how are you'; //将字符串翻转 --> you are how var arr=str.split(' '); arr.reverse(); var s=arr.join(' '); console.log(s);
- 数组去重
-
//去重函数 function trimSingle(arr) { var arr0 = [];//新数组 //遍历旧数组 for (var i = 0; i < arr.length; i++) { if (arr0.indexOf(arr[i]) == -1) { //判断新数组中是否包含该元素 arr0.push(arr[i]); } } return arr0; }
- 数组的迭代方法
- 迭代在JavaScript中就是遍历的意思,与for循环相似。但是这些方法不兼容IE8之下的浏览器。
- forEach() 遍历数组 不能被中断(break)
-
var arr = [10, 90, 30, 50, 68]; arr.forEach(function (item,index,arr) { console.log(item,index,arr); });//元素 索引 数组 arr.forEach(function (item) { console.log(item); });//0 1 2 3 4 索引
- every() 若数组中的每一个元素都满足条件,则会返回一个true ,有一个不满足,返回false
-
var arr = [10, 90, 30, 50, 68]; var flag = arr.every(function (item) { return item > 0; }); console.log(flag);//true
- some() 若数组中有一个元素满足条件,返回true,均不满足,false
-
var arr = [10, 90, 30, 50, 68]; var tag = arr.some(function (item) { return item <60 }); console.log(tag);//true
- filter() 将数组中满足条件的元素过滤出来,生成一个新数组
-
var arr = [10, 90, 30, 100, 68]; var arr0=arr.filter(function(item){ return item>=80; }); console.log(arr0);//[90,100]
- map() 将数组元素进行操作之后,返回一个新数组
-
var arr = [1, 2, 3, 4, 5]; var arr0 = arr.map(function (item) { // return item + 5; //return item * item;//[1, 4, 9, 16, 25] return item + "hello";//["1hello", "2hello", "3hello", "4hello", "5hello"] }); console.log(arr0);
- 迭代方法均需要接收函数作为参数,作为参数的函数可以接受三个参数:
-
function(item,index,arr){} item 数组元素 Index 数组元素的索引 arr 数组自身
-
- 排序算法-冒泡排序
- 原理:相邻的两个元素作比较,若前一个比后一个大,则交换位置。
-
//控制排序轮数 for (var i = 0; i < arr.length; i++) { //遍历数组 for (var j = 0; j < arr.length - i; j++) { //若前一个比后一个大,则交换位置 if (arr[j] > arr[j + 1]) { var temp=arr[j];//前一个元素 arr[j]=arr[j+1];//后一个元素的内容赋值前一个元素 arr[j+1]=temp;//前一个元素的内容赋值后一个元素 } } }