数组Array
什么叫数组
一系列数据的集合,每一项可以保存任何类型的数据,称为数组的元素,每个元素之间用逗号隔开
数组格式:[数组元素,数组元素,数组元素]
数组创建方式
//1)字面量(推荐)
var arr = [1,2,3];
//2)使用构造函数创建
var arr = new Array();//创建一个空数组
var arr = new Array('laoxie','lemon' ,'tiantian','yy');//创建数组并同时写入数据
数组操作
数组访问与写入
- 索引(下标):从0开始
var arr = ['html5','css3','javascript']; //访问 arr[0]; //=> 'html5' arr[2]; //=> 'javascript' //写入 arr[3] = 'web前端';
- length:表示数组的长度
arr.length; //=> 3
数组遍历
- for循环
var arr = ['html5','css3','javascript']; for(var i=0;i<arr.length;i++){ console.log(arr[i]); }
常用数组方法
- push(): 往数组尾部添加一个或多个元素,返回数组新的长度
- pop():删除数组最后一个元素,返回删除的元素
- unshift():往数组开头添加一个或多个元素,返回数组新的长度
- shift():删除数组第一个元素,返回删除的元素
- splice(start,deleteNum,...items):在数组中插入、删除、替换的通用方法
- start:起始索引位置
- deleteNum:要删除的数量
- items:插入的元素(可以是多个)
- slice(start[,end]):返回数组的片段或子数组,从start开始到end(不包括end所对应的元素)
如果省略end参数,则截取到数组的最后一项,支持负数
- sort():将数组中的元素排序,并返回排序后的数组
- 默认:以字符串的排列方式(转换成ASCII码进行对比)
- 参数fn(比较函数):利用fn的返回值来确定数组中两个数的位置(假设两个数为a,b)
- 返回负数:确定a在b前,[a,b...]
- 返回0:不改变现有位置
- 返回正数:确定a在b后面,[b,a...]
- reverse():将数组中的元素颠倒顺序,返回逆序后的数组
- join(separator) 返回字符串值,其中包含了连接到一起的数组的所有元素
- separator为分隔符,默认为逗号
数组排序
- 冒泡排序法
- 当前元素跟下一个元素对比
- 把最大的逐个往后排列
- 选择排序法
- 把当前元素分别跟后面的元素对比
- 把最小的逐个往前排列
- 快速排序法
- 利用递归实现
concat() 数据拼接(参数可以是多个),返回一个新数组
//分别用冒泡/选择排序法排列以下数据
var arr = [10,2,8,55,32,18,9,11,30,16,19,20]
值类型与引用类型的区别
内存中的状态
数组复制与传输
- 如何复制数组
- 把数组作为函数的参数
多维数组(数组里面包含数组)(了解)
var arr = [1,2,'html5',[3,4,'css3'],[5,6,'javascript']]
arr[3][2]; //=>'css3'
对象Object
格式:{属性:属性值,属性:属性值}
创建对象
- 字面量(推荐):
var obj = {name:'小明',age:18}
- 构造函数:
var obj = new Object();
读取属性值
obj.name;//==>小明 //如果读取一个不存在的属性,返回undefined obj.nickname;//undefined
添加/修改属性
obj.sex = '男'; obj.marry = false; obj['weight'] = 60
删除属性
var obj = {name:'laoxie',age:18,gender:'man'} //删除age属性 delete obj.age;
遍历对象for...in
var obj = { name:'laoxie', age:18 gender:'男' } //遍历对象 for(var attr in obj){ //遍历过程把每次把对象属性赋值给attr //所以获取对象属性值为:obj[attr] document.write(obj[attr]);//分别输出:'laoxie',18,'男' }
数组与对象的组合
[{ id:'001', name:'iphone7 plugs', imgurl:'img/ip7.jpg', price:5899.00, sale:5888.00, color:'土豪金' },{ id:'002', name:'Note7', imgurl:'img/note7.jpg', price:3899.00, sale:998.00, color:'黑色' },{ id:'003', name:'荣耀7', imgurl:'img/honor7.jpg', price:1999.00, sale:1899.00, color:'白色' }]
ECMAScript5(ES5)Array新增方法
静态方法
- Array.isArray() 判断是否为数组,返回true/false
索引方法
-
indexOf/lastIndexOf(keyword [,startIndex])
- keyword: 要查找的项,
- startIndex:查找起点位置的索引,该参数可选,默认0
方法返回keyword在数组中的索引值,如果数组不存在keyword,则返回-1
indexOf/lastIndexOf的区别就是一个从前往后找,一个从后往前找
迭代(遍历)方法
- forEach(fn) 遍历方法,for循环没有太大差别,比for循环方便
- map(fn) 返回一个数量相等的数组,内容是什么取决于在fn中返回的值
- filter(fn) 得到执行fn后返回true时对应的数组元素,利用这个方法可对数组元素进行过滤筛选
- some(fn) 如果该函数中任何一项返回 true,则返回true
- every(fn) 如果该函数对每一项都返回 true,则返回true
参数fn:函数中有三个形参分别为
- item:数组中的每一项,
- index:遍历过程中对应的索引值,
- array:对数组的引用
归并方法(了解)
这两个方法都会迭代数组中的所有项,然后生成一个最终返回值。
- reduce(fn,initVal)
- reduceRight(fn,initVal)
- fn(prev,cur,index,array): fn是每一项调用的函数,函数接受4个参数分别是
- prev:前一次返回值,
- cur:当前值,
- index:索引值,
- array:当前数组, 函数需要返回一个值,这个值会在下一次迭代中作为prev的值
- initVal: 迭代初始值(可选),如果缺省,prev的值为数组第一项
- fn(prev,cur,index,array): fn是每一项调用的函数,函数接受4个参数分别是