JavaScript初探 三 (学习js数组)
javascript初探 (三)
javascript数组
定义
创建数组
- var 数组名 = [元素0,元素1,元素2,……] ;
var arr = ["huawei","china","mirror"];
同时javascript也支持 new array 创建数组。但是建议使用上面的文本方式创建数组
数组访问
- 通过引用 索引号(下标) 来引用某个数组元素
var name = arr[0]; // name = huawei
ps:数组的索引是从 0 开始的
- 可以直接使用数组名不加索引属性,直接访问所有数组内容
var arr = ["huawei","china","mirror"]; document.getelementbyid("demo").innerhtml = arr ; // 结果输出: huawei,china,refueling
更新数组元素
- 直接使用数组索引赋值方式,就可更改数组内元素
数组是对象
-
typeof arr_name 会返回 object
javascript的数组实际上是一种对象的表现,但是
数组最好还是以数组方式来描述
-
两者的区别:
- 数组是利用索引位置访问数组内容属性的
- 对象是利用对象属性名来访问属性名对象的属性值的
-
数组元素可以是对象:
由于数组的特点,数组是特殊类型的对象
故此,可以在数组中存放不同类型的变量
可以数字、字符串、函数、函数……
而且,还可以在数组中存储另一个数组
数组属性
length属性
- length:返回数组的长度(数组的元素数目)
var arr = ["huawei","china","mirror"]; arr.length; // 结果:返回 3
由于arr索引是从零开始,而length数目计算是从1开始的
所以length-1 === 数组最后一个元素的下标索引
- 访问数组最后一个元素的技巧:
var arr[arr.length - 1] ; // 结果返回 mirror
遍历数组
- 遍历数组理论上最好的是使用 for 循环
var arr = ["huawei","china","mirror"]; var text = "<ul>"; for(i = 0 ; i < arr.length-1 ; i ++){ text += "<li>" + arr[i] + "</li>"; }
array.foreach()
var arr = ["huawei","china","mirror"]; var text ; text = "<ul>"; arr.foreach(myarr); text += "</ul>"; function myarr(value){ text += "<li>" + value + "</li>"; }
添加元素:push()
- push():向数组添加新元素的最佳方法就是push()方法
var arr = ["huawei","china","mirror"]; arr.push("refueling");
- 手动添加元素
arr[arr.length] = ("refueling"); // 或者 arr[x] = ("refueling");
关联数组
- 在javascript中只支持数字索引;并不支持命名索引方法
var arr = []; arr[0] = "huawei"; arr[1] = "china"; arr[2] = "refueling"; var x = arr.length ; //返回 3 var y = arr[0]; //返回 huawei
- 如果使用了命名索引,则会把数组重定义为 对象
var arr = []; arr["a"] = "huawei"; arr["b"] = "china"; arr["c"] = "refueling"; var x = arr.length ; // 返回 0 var y = arr[0] ; //返回 undefined
对象和数组的区别
- 在javascript中,数组 使用数字索引
在javascript中,对象使用命名索引
-
对象和数组的不同应用
如果希望元素名为字符串(文本),则使用对象
如果希望元素名数字,则使用数组
-
避免 new array()
没有必要使用内建数组构造器 new array()
识别数组变量
- 我们用 typeof 判断数组数据类型的时候,会返回 object ,因为数组是特殊的对象,但是还是区分不了对象和数字变量。我们可以使用数组的内建:array.isarray()方法
数组方法
tostring() 数组输出
- 将数组转为字符串值输出(元素间逗号分隔)
var arr = ["huawei","china","mirror"]; document.getelimentbyid("demo").innerhtml = arr.tostring(); // 结果:huawei,china,mirror
join() 数组输出
- join(c):将所有数组元素结合为一个字符串;同时还可以规定分隔符 c
var arr = ["huawei","china","mirror"]; document.getelimentbyid("demo").innerhtml = arr.join("&"); // 结果:huawei&china&mirror
popping()(删除元素)
- pop():从数组中删除最后一个元素
var arr = ["huawei","china","mirror"]; arr.pop(); //删除最后一个元素 mirror
pop():返回被删除的那个数
pushing()(添加元素)
- push():在数组的最后一个数组元素,向数组后添加一个新元素
var arr = ["huawei","china","mirror"]; arr.push("refueling"); // 添加 refueling到数组中,并返回最新数组的长度
push():返回新数组的长度
位移元素(开头元素添/删)
- shift():删除首个数组元素,并把所有其他元素”位移“到更低的索引
var arr = ["huawei","china","mirror"]; arr.shift(); // 返回 huawei
shift() 返回被移出(删除)的元素
- unshift():在数组开头添加元素 ,并把所有其他元素向后”位移“索引标志
var arr = ["huawei","china","mirror"]; arr.unshift("refueling"); // 返回 新的数组长度 5
unshift():返回新的数组长度
更改元素
- 通过对应的索引号引用直接赋值,来改变该索引位置的元素内容
删除元素 delete
- javascript 数组属于对象类型,其中的元素可以使用 javascript delete 运算符来删除
var arr = ["huawei","china","mirror"]; delete arr[0]; //把 "huawei" 改为 undefined
不建议使用delete运算符,可以使用pop() 或 shift() 代替
原因:后者的数组方法,会自动抹除数组索引,而delete则会保留索引并导致空洞
拼接数组 splice()
- splice():用于向数组添加新项
var arr = ["huawei","china","mirror"]; arr.splice(2,0,"refueling","hello");
第一个参数:定义添加新元素的位置
第二个参数:定义应删除多少元素
其余参数:定义要添加的新元素
- splice():删除元素
var arr = ["huawei","china","mirror"]; arr.splice(0,1); // 删除 arr 数组中的第一个元素
第一个参数:定义新元素添加的元素
第二个参数:定义删除多个元素
其余参数: 被忽略,没有新元素添加
splice()会返回被删除的元素
而原数组的内容就会被修改
合并数组 concat()
- concat():通过合并(连接)现有数组来创建一个新数组
var str1 = ["huawei","refueling"]; var str2 = ["china","refueling"]; var mystr = str1.concat(str2) ; // 连接 str1 和 str2
array1.concat(array2,……)
同样的,concat()也可以和数值合并
array1.concat([值,……])
裁剪数组 slice()
- slice():裁剪数组的某个片段,返回一个新的数组
var arr = ["huawei","china","refueling","hello","world"]; var array = arr.slice(1); var array = arr.slice(1,3);
第一个元素:裁剪的开始位置
第二个元素:裁剪的结束位置
若第二个元素被省略,
则从开始的位置截取到数组的最后一个元素
javascript数组排序
排序 sort()
- sort():按照ascii顺序对数组(字符和数字)进行升序排序
var arr = ["huawei","china","refueling","hello","world"]; arr.sort(); // 结果:china,hello,huawei,refueling,world
反转数组 reverse()
- reverse() :将数组中的所有元素反转
var arr = ["huawei","china","refueling","hello","world"]; arr.reverse()
- 利用 sort() + reverse() 对数组进行降序排序
var arr = ["huawei","china","refueling","hello","world"]; arr.sort(); arr.reverse();
比值函数 *
比较函数目的是定义另一种排序顺序
比较函数应该返回一个负、零或正值,这取决于参数
function(a,b){return a-b}
当 sort() 函数比较两个值时,会将值发送到比较函数,并根据返回的值,对这些值进行排序。
-
实例:
当比较 40 和 100 时,sort() 方法会调用比较函数 function(40,100)
该函数计算 40 - 100 ,然后返回一个 负值
排序函数将40排序为比100更低的值
<div> <button onclick="myfunction1()">字母顺序</button> <button onclick="myfunction2()">数字顺序</button> <p id = "demo"></p> </div> <script> var points = [40,100,1,5,25,10] ; document.getelementbyid("demo").innerhtml = points ; function myfuntion1() { points.sort(); document.getelementbyid("demo").innerhtml = points ; } function myfuntion2() { points.sort(function(a,b){return a - b}) ; document.getelementbyid("demo").innerhtml = points ; } </script>
以随机顺序排序
var points = [40,100,1,5,25,10] ; points.sort(function(a,b){return 0.5 - math.random()});
原理就是:0.5减去一个随机数
查找最值
math.max()
- math.max.apply:查找数组中的最高值
function myarraymax(arr) { return math.max.apply(null,arr); }
math.max.apply([1,2,3]) === math.max(1,2,3)
math.min()
- math.min.apply:查找数组中的最小值
function myarraymin(arr) { return math.min.apply([null,arr]); }
math.min.apply([1,2,3]) === math.min(1,2,3)
自定义的max和min
function myarraymax(arr) { var len = arr.length ; var max = -infinity ; //最小的负值 while (len --) { if (arr[len] > max) { max = arr[len] ; } } return max ; }
function myarraymin(arr) { var len = arr.length ; var min = infinity ; while (len --) { if (arr[len] < min) { min = arr[len]; } } return min ; }
排序对象数组
- javascript 数组的定义中,是允许存储对象的;
var cars = [ {name:"huawei",age:"good"}, {name:"mi",age:"where"}, {name:"java",age:"no:1"} ];
即使对象拥有不同数据类型的属性,sort()方法仍然可以对数组进行排序
解决方法就是利用比较函数对比属性值
cars.sort(function(a,b){return a.year - b.year});
通过比较函数,将属性中的属性值内容进行对比
javascript 数组迭代方法
array.foreach()
- foreach():为每个数组元素调用一次函数(回调函数)
var txt = "" ; var number = [45,4,9,16,25] ; numbers.foreach(myfunction) ; function myfunction (value , index , array) { txt += value + "<br>" ; }
- 注释:
- 项目值
- 项目索引
- 数组本身
上述代码的作用:数组中每个值传递并调用函数
array.map()
- map():通过对每个数组元素执行函数来创建数组
- map():不会对没有值的数组元素执行函数
- map():不会改变原始数组
var number1 = [45,4,9,16,25] ; var number2 = number1.map(myfunction) ; function myfunction(value,index,array){ return value * 2 ; // 数组中的元素 * 2 并返回 }
- 注释:
- 项目值
- 项目索引
- 数组本身
array.filter()
- filter():创建一个包含通过测试的数组元素的新数组
var number = [45,4,9,16,25] ; var over18 = number.filter(myfunction) ; function myfunction(value , index , array){ return value > 18 ; // 返回大于18的数组元素并组成一个新数组 }
- 注释:
- 项目值
- 项目索引
- 数组本身
array.reduce()
- reduce():在每个数组元素上运行函数,生成单个值;方法在数组中从左到右运行;不会改变原始的数组。
var number = [45,4,9,16,25] ; var sum = number.reduce(myfunction) ; function myfunction(total , value , index , array){ return total + value ; }
- 注释:
- 总数(初始值/先前返回的值)
- 项目值
- 项目索引
- 数组本身
reduce():方法能够接收一个初始值
array.reduceright()
- 和reduce() 类似
array.every()
- every():检查所有数组值是否可以通过测试
var number = [45,4,9,16,25] ; var allover18 = number.every(myfunction) ; function myfunction(value , index , array) { return value > 18 ; }
array.some()
- some():检查某些数组值是否通过测试
var number = [45,4,9,16,25] ; var someover18 = number.some(myfunction) ; function myfunction(value , index , array) { return value > 18 ; }
array.indexof()
- indexof():在数组中搜索元素值并返回其位置
var number = [45,4,9,16,25] ; var a = number.indexof(45);
array.indexof(item,start)
item:必须,要检索的项目
start:可选,检索的起点
未找到项目,返回 -1
如果搜索的内容出现多次,则返回第一个出现的位置
array.lasindexof()
- lasindexof():和indexof()功能类似,不同的是,从数组结尾开始搜索
array.find()
- find():返回通过测试函数的第一个数组元素的值
var number = [45,4,9,16,25] ; var first = number.find(myfunction) ; function myfunction(value , index , array) { return value > 18 ; }
array.findindex()
- findindex():返回通过测试函数的第一个数组元素的下标索引
var number = [45,4,9,16,25] ; var first = number.findindex(myfunction) ; function myfunction(value , index , array){ return value > 18 ; }
上一篇: 百度联盟推出一站式媒体服务平台“百青藤”
下一篇: 大话设计模式笔记(三)の六大原则