JS数组 全解析(创建数组的方法、稀疏数组、检测数组、数组元素的增删、常用的数组方法)
2017-04-19 17:26
941 查看
JS数组 简介
数组对象的作用是:使用单独的变量名来存储一系列的值。在JS中,数组也是一种对象
JS中的数组是弱类型的,一个数组中可以包含不同类型的元素,甚至是其他对象或数组。
简单的 Array 对象参考手册:http://www.w3school.com.cn/js/js_obj_array.asp
完整的 Array 对象参考手册:http://www.w3school.com.cn/jsref/jsref_obj_array.asp
创建数组的方法
字面量
var arr = [ '白小明', [1, 2, 3], { name : 'bxm', age : 20 }, null ]; console.log(arr[0]); console.log(arr[1][1]); console.log(arr[2].age); console.log(arr[3]);
new Array (注意:new可以省略)
var arr1 = new Array(); // 如果调用构造函数 Array() 时没有使用参数,那么返回的数组为空,length 字段为 0。 var arr2 = new Array(100); // 当调用构造函数时只传递给它一个数字参数,该构造函数将返回具有指定个数、元素为 undefined 的数组。 var arr3 = new Array(true, null, 2, 'hi'); // 当其他参数调用 Array() 时,该构造函数将用参数指定的值初始化数组。
多维数组
// 二维数组,99乘法表 var arr = [] for (var i = 1; i <= 9; i++) { arr[i] = []; for (var j = 1; j <= i; j++) { arr[i][j] = j + '×' + i + '=' + i*j; document.write(arr[i][j] + ' '); } document.write('<br>'); }
稀疏数组
稀疏数组表示索引是不连续的的数组。var arr = new Array(); arr[3] = 100; console.log(3 in arr); // true console.log(2 in arr); // false console.log(arr.length); // 4 console.log(arr[2]); // undefined console.log(arr[3]); // 100 console.log(arr[4]); // undefined
数组元素的增删
入栈(入队) push()
var arr = new Array(true, null, 2, 'hi'); arr3.push("elem"); // 在数组尾部添加一个元素
出栈 pop()
var arr = new Array(true, null, 2, 'hi'); arr.pop()
出队 shift()
var arr = new Array(true, null, 2, 'hi'); arr.shift(); // 移除数组头部的元素
unshift()
var arr = new Array(true, null, 2, 'hi'); arr.unshift('haha'); // 在数组头部添加一个元素
delete
var arr = new Array(true, null, 100, 'hi'); delete arr[2]; // 长度不变,删除的位置变为 undefined // 注意: // 与 arr[2] = undefined; 不等价 // 前者 console.log(100 in arr); 返回false // 后者 console.log(100 in arr); 返回true
arr[arr.length]
var arr = new Array(true, null, 2, 'hi'); arr[arr.length] = 'hello'; // arr[arr.length] 总是指向数组最后一个元素的下一个,所以可以通过这种方式赋值。相当于 arr.push('hello')
arr.length -=1;
var arr = new Array(true, null, 2, 'hi'); arr.length -= 1; // 删除最后一个元素
检测数组
instanceof
var arr = new Array(true, null, 2, 'hi'); console.log(arr instanceof Array);
更好的方法:Array.isArray()
var arr = new Array(true, null, 2, 'hi'); console.log(Array.isArray(arr));
常用的数组方法
join():将数组转化为字符串,通过指定的分隔符进行分隔
var arr = [5, 2 ,3]; console.log(arr.join()); console.log(arr.join('-'));
toString():把数组转换为字符串,用逗号分隔,并返回结果。
返回值与没有参数的 join() 方法返回的字符串相同。var arr = [1, 2 ,3, 4, 5]; console.log(arr.toString()); // 1,2,3,4,5
concat():数组合并
注意:该方法不会改变原数组var arr = [5, 2 ,3]; console.log(arr.concat([100, 6])); console.log(arr.concat([100, 6, [1, 2]]));
slice(start, end):返回数组的片段
注意:该方不会改变原数组var arr = [5, 2 ,3, 15, 666]; console.log(arr.slice(1)); // [2, 3, 15, 666],如果 end 未被规定,那么 slice() 方法会选取从 start 到数组结尾的所有元素。 console.log(arr.slice(1,3)); // [2 ,3] console.log(arr.slice(2,-1)); // [3, 15],-1表示最后一个元素,-2表示倒数第二个元素
splice(index, howMany):删除数组的片段
注意:该方法会改变原数组var arr1 = [5, 2 ,3, 15, 666]; console.log(arr1.splice(2)); // [3, 15, 666] console.log(arr1); // [5, 2] var arr2 = [5, 2 ,3, 15, 666]; console.log(arr2.splice(3, 1)); // [15] console.log(arr2); // [5, 2 ,3, 666] var arr3 = [5, 2 ,3, 15, 666]; console.log(arr3.splice(3, 1, '白', '小明')); // [15] console.log(arr3); // [5, 2 ,3, 白, 小明, 666]
重排序方法
升序:sort()
var arr = new Array(4, 2, 3, 15); console.log(arr.sort()); // ASCII 升序 // [15, 2, 3, 4]
降序:reverse()
var arr = new Array(4, 2, 3, 5); console.log(arr.reverse()); // ASCII 降序 // [4, 3, 2, 15]
注意:使用sort() 和 reverse() 方法之后,原数组被修改
sort() 和 reverse() 方法会调用每个数组元素的toString()方法,转化为字符串再比较()。
var arr = new Array(4, 2, 3, 15); function sortCompare(value1, value2) { return value1 -value2; // if (value1 < value2) { // return -1; // } else if (value1 > value2) { // return 1; // } else { // return 0; // } } function reverseCompare(value1, value2) { return value2 -value1; // if (value1 < value2) { // return 1; // } else if (value1 > value2) { // return -1; // } else { // return 0; // } } console.log(arr.sort(sortCompare)); // 升序 console.log(arr.reverse(reverseCompare)); // 降序
数组迭代方法
注意:下面这些方法都不会改变原数组forEach:让数组中的每一个元素做一件事
var arr = [5, 2 ,3, 15, 666]; arr.forEach(function(element, index){ console.log(element + 10); // 15, 12, 13, 25, 676 }); console.log(arr); // [5, 2, 3, 15, 666]
map:让数组通过某种运算产生一个新数组
var arr = [5, 2 ,3, 15, 666]; var arrMap = arr.map(function(index, elem) { return index + 10; }); console.log(arrMap); // [15, 12, 13, 25, 676] console.log(arr); // [5, 2, 3, 15, 666]
filter:筛选出数组中符合条件的元素,组成新的数组
var arr = [5, 2 ,3, 15, 666]; var newArr = arr.filter(function(item, index) { return item > 3; }); console.log(newArr); // [5, 15, 666] console.log(arr); // [5, 2, 3, 15, 666]
reduce:让数组的前项和后项做某种运算,并累计最终值
var arr = [1, 2 ,3, 4, 5]; var newArr = arr.reduce(function (prev, next) { return prev + next; }); console.log(newArr); // 15 (1+2+3+4+5) console.log(arr); // [1, 2 ,3, 4, 5]
every:检测数组中的每一项是否符合条件
var arr = [1, 2 ,3, 4, 5]; var newArr = arr.every(function (item, index) { return item > 3; }); console.log(newArr); // false,全部满足才为true
some:检测数组中是否有某项符合条件
var arr = [1, 2 ,3, 4, 5]; var newArr = arr.some(function (item, index) { return item > 3; }); console.log(newArr); // true,全不满足才为false
相关文章推荐
- js创建数组的四种方法、常用方法、属性
- js中两个常用方法(1.获取当前工程的虚拟目录;2.移除数组指定位置上的元素)
- IE8对JS的数组,采用属性遍历的方法,解析不一样的地方:
- js克隆对象、数组的常用方法介绍
- JS数组操作常用方法
- js/jquery解析json和数组格式的方法详解
- js 数组常用方法
- 解析js原生方法创建表格效率测试
- js克隆对象、数组的常用方法介绍
- js中数组Array的一些常用方法总结
- js数组去重的三种常用方法总结
- JS 实现 创建类、继承、方法添加、对象克隆、数组封装操作
- JS解析json数据并将json字符串转化为数组的实现方法
- JS 操作Array数组的方法及属性实例解析
- js 数组常用方法
- PHP基础学习:数组的创建和常用系统方法
- js常用数组函数方法
- IE8对JS的数组,采用属性遍历的方法,解析不一样的地方:
- js/jquery解析json和数组格式的方法详解
- JS 操作Array数组的方法及属性实例解析