25、数组
1)声明数组:
①构造函数创建数组
var arr = new Array();
console.log(arr): //[]
var arr = new Array(20); //设置数组的长度为20
console.log(arr); //[,,,,,,,,,,,] 单个打印的值为undefined
var arr = new Array('zhangsan', 'lisi');
console.log(arr); //['zhangsan', 'lisi']
console.log(arr.length); //2
console.log(arr[1]); //lisi
console.log(arr[100]) //undefined
②数组字面量创建数组
var arr = [];
console.log(arr); //[]
var arr = ['zhangsan', 'lisi' ];
console.log(arr); //['zhangsan', 'lisi']
2)访问数组
var arr = [1, 'zhangsan', 'lisi', 'hello'];
console.log(arr[2]); //lisi
console.log(arr[100]); //undefined
//给index为10的位置设置123,空余的位置补undefined
arr[10] = 123;
console.log(arr); //[1, 'zhangsan', 'lisi', 'hello',,,,,,,,,123]
console.log(arr.length); //11
//更改数组的长度100,空余的位置补undefined
arr.length = 100;
console.log(arr); //[1, 'zhangsan', 'lisi', 'hello',,,,,,,,,,,,,,,,]
//更改数据的长度2,0,1的位置的值保持不变,其余删除
arr.lenght = 2;
console.log(arr); //[1, 'zhangsan',]
3)数组测试和数组序列化
①数组测试
var arr = [1,2,3,4];
console.log(typeof arr); //object
consolel.log(arr instanceof Array); //true
console.log(arr instanceof Object); //true
console.log(Array.isArray(arr)); //true
//arguments不是一个数组
function test(){
console.log(Array.isArray(arguments));
}
test(); //false
②数组序列化
console.log(arr); //[1,2,3,4] 这里是数组类型
//数组序列化
console.log(arr.toString()); //1,2,3,4
console.log(arr.join()); //1,2,3,4
console.log(arr.join(&)); //1&2&3&4
console.log(JSON.stringify(arr)); // [1,2,3,4] 这里是字符串类型
4)栈,队列方法
①栈 LIFO (Last-In-First-Out)
push() 可接受任意类型的参数,将它们逐个添加到数组的末尾,并返回数组的长度
var arr = [2,3,4,5,6,7];
console.log(arr.push(8)); //7
console.log(arr); //[2,3,4,5,6,7,8]
pop() 从数组的末尾移除最后一项,减少数组的length值,返回移除的项
console.log(arr.pop()); //8
console.log(arr); //[2,3,4,5,6,7]
②队列 FIFO (First-In-First-Out)
shift() 移除数组中的第一个项并且返回该项,同时将数组的长度减一。
console.log(arr.shift()); //2
console.log(arr); //[3,4,5,6,7]
unshift() 在数组的前端添加任意个项,并返回新数组的长度。
console.log(arr.unshift(2)); //6
console.log(arr); //[2,3,4,5,6,7]
5)排序
①reverse() 反转数组项的顺序 (原数组发生更改)
var arr = [5,2,4,67,32,64,752,45];
console.log(arr); //[5,2,4,67,32,64,752,45]
console.log(arr.reverse()); // [45,752,64,32,67,4,2,5]
console.log(arr); //[45,752,64,32,67,4,2,5]
②sort()
默认排序:该方法会调用每个数组项的toString() 方法,然后按照字符序列排序
console.log(arr.sort()); //[2,4,5,32,45,64,67,752]
自定义排序:
a.该方法可以接受一个比较函数作为参数,比较函数有两个参数
b.如果第一个参数位于第二个参数之前,返回负数
c.如果第一个参数位于第二个参数之后,返回正数
这个是相当于冒泡排序一样
function com(a, b){
return a-b
}
console.log(arr.sort(com)); //[2,4,5,32,45,64,67,752]
//根据字段进行排序
var stus = [
{name:'zhangsan',age:21,},
{name:'lisi',age:22,}
];
console.log(stus); //[{name:'zhangsan',age:21,}, {name:'lisi',age:22,}]
stus.sort(compare('name', 'asc'))
console.log(stus); //[ {name:'lisi',age:22,}, {name:'zhangsan',age:21,}]
function compare(attr,rules){
return function(o1,o2){
if(rules === 'asc'){
if(o1[attr]<o2[attr){
return -1;
}
else{
return 1;
}
}
else{
if(o1[attr]>o2[attr]){
return -1;
}
else{
return 1;
}
}
};
}
26、数组(后续)
①截取方法
concat() 数组拼接,先创建当前数组的一个副本,然后将接收到的参数添加到这个副本的末尾, 返回副本,不改变原数组。
var arr = [3,4,5,2,4];
var arr2 = [1,2,3,4,5];
arr.push(arr2)
//这是直接用push的方法,会将整个列表添加在末尾,而且原数组也会改变
console.log(arr); //[3,4,5,2,4,[1,2,3,4,5] ]
//这里可以采用遍历arr2数组,再arr.push(arr[i])
if(Array.isArray(arr2)){
for(var i = 0; i < arr2.length; i++){
arr.push(arr2[i]);
}
}
//如果是数组类型的值,就展开放进去
var result = arr.concat(arr2);
console.log('原数组',arr); //原数组[3,4,5,2,4]
console.log('结果',result);//结果[3,4,5,2,4,1,2,3,4,5 ]
//如果不是数组类型的数据,直接放在末尾
var result = arr.concat('hello');
console.log('原数组',arr); //原数组[3,4,5,2,4]
console.log('结果',result);//结果[3,4,5,2,4,'hello' ]
concat的执行过程:
Ⅰ.不改变原数组,创建副本
Ⅱ.如果参数是数组,展开放进去
Ⅲ.如果参数是其他类型,直接将这个值放在末尾
Ⅳ.返回副本
重写concat方法
Array.prototype.myConcat = function(param){
//1、创建副本
var temp = [];
for(var i = 0; i < this.length; i++){
temp.push(this[i]);
}
//2、数组类型
if(Array.isArray(param)){
for(var j = 0; j < param.length; i++){
temp.push(param[i]);
}
}
//3、其他类型
else{
temp.push(param);
}
//4、返回副本
return temp;
}
var result = arr.myConcat(arr2);
console.log('原数组',arr); //原数组[3,4,5,2,4]
console.log('结果',result);//结果[3,4,5,2,4,1,2,3,4,5 ]
slice() 数组切割,可接受一个或者两个参数(返回项的起始位置,结束位置),返回的是一个数组,不改变原数组
①当接受一个 参数,从该参数指定的位置开始,到当前数组末尾的所有项
var arr = [12,34,45,65,76,89,98];
var result = arr.slice(2);
console.log(arr); //[12,34,45,65,76,89,98]
console.log(resule); //[45,65,76,89,98]
②当接受两个参数,起始 到结束之间的项,但是不包含结束位置的项。
var result2 = arr.slice(2,4);
console.log(result2); //[45,65]
splice() 向数组的中部插入数据将始终返回一个数组,该数组中包含从原始数组中删除的项。
删除:指定两个参数(删除的起始位置,要删除的项数,返回的是一个删除项组成的数组)
var arr = [32,4,9,3,0];
var result = arr.splice(1,3);
console.log(result); //[4,9,3]
console.log(arr); //[32,0] //原数组改变
插入:指定三个参数(起始位置,0,要插入的项任意数量的项) 在起始位置插入项
arr.splice(1,0,'hello','sss');
console.log(arr); //[32,'hello','sss',0]
替换:指定三个参数(起始位置,要删除的项数,要插入的任意数量的项)
arr.splice(1,2,1,2);
console.log(arr); //[32,1,2,0]
②索引方法(索引值都是从左到右定义的)
indexOf() 从数组开头向后查找,使用全等操作符,找不到该元素返回-1。第一个参数为要查找 的项,第二个参数(可选)为索引开始位置
var arr = [2,5,67,'2',3,2,45];
console.log(arr.indexOf(2)); //0
console.log(arr.indexOf(2,1)); //5 从索引为1的位置开始查找
console.log(arr.indexOf(22)); //-1
lastIndexOf() 从数组末尾向前查找,使用全等操作符,找不到该元素返回-1。第一个参数为要查找 的项,第二个参数(可选)为索引开始位置
var arr = [2,5,67,'2',3,2,45];
console.log(arr.lastIndexOf(2)); //5
console.log(arr.lastIndexOf (2,3)); //0 从索引为1的位置开始查找
console.log(arr.lastIndexOf (22)); //-1
③迭代方法 参数: 每一项上运行的函数,运行该函数的作用域对象(可选)
every() 对数组中的每一运行给定的函数,如果该函数对每一项都返回true,则该函数返回true
var arr = [23,45,1,4,3,45,7];
var result = arr.every(function(item, index, arr){
console.log(this); //{} 这个结果是因为第二个参数是{}
return item > 40;
},{})
console.log(result); //false
//如果是return item > 20,输出是{} {} {} false
every()方法重写
Array.prototype.myEvery = function(fun, funThis){
var result;
for(var i = 0; i < this.length; i++){
result = fun.call(funThis, this[i], i, this); //result = fun.apply(funThis, [this[i], i, this];
if(!result){
break;
}
}
return result;
}
var arr = [23,45,1,4,3,45,7];
var result = arr.myEvery(function(item, index, arr){
console.log(this); //{} 这个结果是因为第二个参数是{}
return item > 40;
},{})
console.log(result); //false
//如果是return item > 20,输出是{} {} {} false
some() 对数组中的每一运行给定的函数,如果该函数对任一项都返回true,则返回true
var stus = [
{name:'xiaoer',age:12, },
{name:'zhangsan',age:22,},
{name:'lisi',age:20, },
{name:'wangwu',age:22,},
];
console.log(stus);
//判断数组中是否都是成年人,都是返回true,否则返回false
var result = !(stus.some(function(item,index,arr){
return item.age < 18;
}));
console.log(result); //false
//判断是否有未成年人,有返回true,否则返回false
var result = stus.some(function(item,index,arr){
return item.age < 18;
});
console.log(result); //true
filter() 对数组中的每一运行给定的函数,会返回满足该函数的项组成的数组
var result = stus.filter(function(item, index, arr){
return item.age >= 18;
});
console.log(result); //[{name:'zhangsan',age:22,},{name:'lisi',age:20, },{name:'wangwu',age:22,}]
map() 对数组中的每一元素运行给定的函数,返回每次函数调用的结果组成的数组
//只查找名字
var result = stus.map(function(item, index, arr){
return item.name;
});
console.log(result); //['xiaoer','zhangsan', 'lisi', 'wangwu',]
//查找所有未成年人的名字
var result = stus.filter(function(item,index,arr){
return item.age < 18;
}).map(function(item, index, arr){
return item.name;
});
console.log(result); //['xiaoer']
forEach() 对数组中的每一元素运行给定的函数,没有返回值,常用来遍历元素
var arr = [
{name:'zhangsan'},
{name:'lisi'},
{name:'terry'}
] ;
var ageInit = 10;
arr.forEach(function(item, index, arr){
//console.log(item, index, arr); //
item.age = 12; //每个对象的年龄都为12
item.age = ageInit++; //每个对象的年龄都在累加
});
- 前端开发JS白板编程题目若干
在前端开发参加面试的时候,无论是校招还是社招,往往都会碰到让我们直接在白纸或者白板上手撸代码的题目.由于是手撸代码,这些题目肯定不会过于复杂和冗长,否则面试那么一小会时间根本写不完.本文总结了几个我本 ...
- ES6 常用总结(前端开发js技术进阶提升总结)
一.变量声明const和let 在ES6之前,我们都是用var关键字声明变量.无论声明在何处,都会被视为声明在函数的最顶部(不在函数的最顶部就在全局作用域的最顶部).这就是函数变量提升例如: 不用关心 ...
- 前端开发JS——引用类型
10.流程控制语句 注:var obj = {}:这里的obj转换boolean语句为true if语句和java是一样的,判断条件也是根据上篇博客提到的假性值 // 弹出一个带输入框的 ...
- 前端开发JS——快速入门
1.JS的核心标准ECMAScript 组成 ECMAScript------>核心语法标准 DOM------------->对文档节点的操作 ...
- [JS前端开发] js/jquery控制页面动态加载数据 滑动滚动条自动加载事件
页面滚动动态加载数据,页面下拉自动加载内容 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样的效果:进入qq空间,向下拉动空 ...
- [JS前端开发] js/jquery控制页面动态载入数据 滑动滚动栏自己主动载入事件
本人小菜鸟一仅仅.为了自我学习和交流PHP(jquery,linux,lamp,shell,javascript,server)等一系列的知识,小菜鸟创建了一个群.希望光临本博客的人能够进来交流.寻求 ...
- Web前端开发--JS技术大梳理
什么是JS JavaScript是一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语 ...
- 前端开发 —— js 常用工具函数(utilities)
1. 时间 function getCurTime() { var date = new Date(); return date.toLocaleTimeString(); } date.toLoca ...
- [浪风前端开发]JS获取当前时间戳的方法
由于最近在研究轻交互式web设计,所以整理了下面的东东,仅供分享测试学习交流之用. JavaScript 获取当前时间戳:第一种方法: var timestamp = Date.parse(new D ...
随机推荐
- dart lang 开发环境
========================Dart SDK 下载========================Dart SDK 主页: https://dart.dev/toolsDart S ...
- [b0028] python 归纳 (十三)_队列Queue在多线程中使用
# -*- coding: UTF-8 -*- """ 多线程同时读队列 总结: 1. 会阻塞 if self._jobq.qsize() > 0 进入逻辑,此时被 ...
- MySQL 部署 MHA 高可用架构 (二)
实现 MHA VIP 功能 配置 master_ip_failover 脚本(db3) 把 master_ip_failover 上传到 /iba/software 上 master_ip_failo ...
- centos7.6离线安装mysql5.7(附下载链接)
本来打算直接用原生yum源安装,但是跨国访问网络太慢,只好采用离线安装的方式,原理就是把所需的rpm下载下来再上传服务器安装. 1.rpm文件下载地址: 目录: http://repo.mysql.c ...
- mysql命令大全一
mysql -u root -p;create database qa;show databases;use qa; create table results(id int not null auto ...
- day4_7.2
流程语句 1.if判断语句 在python中if语句可以依据判断的条件,决定执行哪个语句.其格式如下: if 条件: 代码1 else: 代码2 当满足条件1时,执行代码1,否则执行代码2.所以条件语 ...
- python27期JavaScript:
JavaScript:(简称“JS”) 是一种轻量级的编程语言(ECMAscript5或6)是一种解释性脚本语言(代码不进行预编译)主要用来向HTML页面添加交互行为JavaScript 是互联网上最 ...
- 剑指Offer-19.顺时针打印矩阵(C++/Java)
题目: 输入一个矩阵,按照从外向里以顺时针的顺序依次打印出每一个数字,例如,如果输入如下4 X 4矩阵: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 则依次打印出数字 ...
- ActiveMQ基础使用
概述 ActiveMQ是由Apache出品的,一款最流行的,能力强劲的开源消息总线.ActiveMQ是一个完全支持JMS1.1和J2EE 1.4规范的 JMS Provider实现,它非常快速,支持多 ...
- Java连载36-IDE使用
一.主方法注意 每一个类都可以编写一个主方法,但是一般情况下,一个系统只有一个入口,所以主方法一般写一个 二.Myeclipse的使用 1.在workspace中工作区中有一个文件夹.metadata ...