- A+
所属分类:Web前端
内置对象
数组对象
MDN文档链接:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array
创建数组对象
// 1. 数组字母量 var array = []; // 创建一个空数组 var numbers = [1, 2, 4]; // // 2. 数组的构造函数Array var array = new Array(); // 创建一个空数组 var numbers = new Array(2, 2, 5, 8, 9)
判断数组对象
instanceof
运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。console.error()
向 Web 控制台输出一条错误消息。Array.isArray()
用于确定传递的值是否是一个 Array。
// 第一种方法 arr instanceof Array function fn(arr) { if(!(arr instanceof Array)){ console.error("参数arr不是数组对象"); return; } console.log("正常执行") } var numbers = [2, 5, 4]; fn(numbers); // 第二种方法 Array.isArray() ,有浏览器兼容问题,支持HTML5的浏览器支持这种方法 function fn(arr) { if (!Array.isArray(arr)) { console.error("参数arr不是数组对象"); return; } console.log("正常执行") } var d = 1; fn(d);
数组对象的toString()方法和valueOf()方法
每个对象都具有
toString()
和valueOf()
两个方法
var arr = [2, 5, 3, 5, 4]; // 1. toString(),把数组转换成字符串,并且用逗号分割每一项 console.log(arr.toString()); // 2,5,3,5,4 // 2. valueOf(),返回数组本身 console.log(arr.valueOf()); // [2, 5, 3, 5, 4]
数组对象的常用方法
// 1. 栈操作,先进后出 // push(),将一个或多个元素添加到数组的末尾,并返回该数组的新长度(该方法修改原有数组)。 // pop(),从数组中删除最后一个元素,并返回该元素的值。此方法更改数组的长度。 var arr = [1, 2, 3, 4, 5, 6]; arr.push(7); console.log(arr); // [1, 2, 3, 4, 5, 6, 7] var arrPop = arr.pop(); console.log(arr); // [1, 2, 3, 4, 5, 6] console.log(arrPop); // 7 // 2. 队列操作,先进先出 // push() // shift(),从数组中删除第一个元素,并返回该元素的值。此方法更改数组的长度。 // unshift(),将一个或多个元素添加到数组的开头,并返回该数组的新长度(该方法修改原有数组)。 var arr = [1, 2, 3, 4, 5, 6]; var arrShift = arr.shift(); console.log(arr); // [2, 3, 4, 5, 6] console.log(arrShift); // 1 arr.unshift(0,1); console.log(arr); // [0, 1, 2, 3, 4, 5, 6] // 3. 操作方法 // concat(),用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组。 var arr1 = [0, 1, 2]; var arr2 = [4, 5, 6]; var arr3 = ['a', 'b', 'c', 'd'] var arr4 = arr1.concat(arr2, arr3); console.log(arr4); // [0, 1, 2, 4, 5, 6, "a", "b", "c", "d"] // slice(),从当前数组中截取一个新的数组,不影响原来的数组,参数start从0开始,end从1开始。包括start,不包括end。 var arr = [0, 1, 2, 3, 4, 5, 6, 'a', 'b', 'c', 'd']; var arrSlice = arr.slice(3, 6); console.log(arrSlice); // [3, 4, 5] // splice(),删除或替换当前数组的某些项目,参数start,deletCount,options(要替换的项目) var arr = [0, 1, 2, 3, 4, 5, 6, 'a', 'b', 'c', 'd']; arr.splice(5, 2, 's'); console.log(arr); // [0, 1, 2, 3, 4, 's', 'a', 'b', 'c', 'd'] arr.splice(5, 1); console.log(arr); // [0, 1, 2, 3, 4, 'a', 'b', 'c', 'd'] arr.splice(-3, 2, 't'); console.log(arr); // [0, 1, 2, 3, 4, 't', 'd'] // 4. 位置方法 // indexof(),返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1 var arr = [0, 1, 2, 1, 4]; console.log(arr.indexOf(1)); // 1 console.log(arr.indexOf(1, 2)); // 3 console.log(arr.indexOf(1, -4)); // 1 // lastIndexof(),返回指定元素在数组中的最后一个的索引,如果不存在,则返回-1,从后往前查找 var arr = [0, 1, 2, 1, 4]; console.log(arr.indexOf(1)); // 3 console.log(arr.indexOf(1, -3)); // 1 console.log(arr.indexOf(1, -4)); // 1 // 5. 迭代方法,不会修改原数组,HTML5,有浏览器兼容问题,手机端可以用 // every(),方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。 function fn1(currentValue) { return currentValue < 40; } function fn2(currentValue) { return currentValue < 100; } var fn3 = (currentValue) => currentValue < 95; var arr = [2, 5, 2, 6, 3, 52, 95, 84, 25] console.log(arr.every(fn1)); // false console.log(arr.every(fn2)); // true console.log(arr.every(fn3)); // true // filter(),创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。 function fn1(currentValue) { return currentValue < 40; } function fn2(currentValue) { return currentValue < 10; } var fn3 = (currentValue) => currentValue < 5; var arr = [2, 5, 2, 6, 3, 52, 95, 84, 25] console.log(arr.filter(fn1)); // [2, 5, 2, 6, 3, 25] console.log(arr.filter(fn2)); // [2, 5, 2, 6, 3] console.log(arr.filter(fn3)); // [2, 2, 3] // forEach(),对数组的每个元素执行一次给定的函数。 function fn(currentValue) { return console.log(currentValue) } var arr = ['a', 'b', 'c', 'd', 'e'] arr.forEach(fn); // map(),创建一个新数组,其结果是该数组中的每个元素调用一次提供的函数后的返回值。 function fn(currentValue) { return currentValue += 10; } var arr = [0, 10, 20, 30, 40]; var arrMap = arr.map(fn); console.log(arr); // [0, 10, 20, 30, 40] console.log(arrMap); // [10, 20, 30, 40, 50] // some(),测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回的是一个Boolean类型的值。 function fn(currentValue) { return currentValue % 10 === 0; } var arr = [3, 10, 22, 30, 40]; var arrSome = arr.some(fn); console.log(arr); // [3, 10, 22, 30, 40] console.log(arrSome); // true // 6. 将数组的所有元素连接到一个字符串中 // join(), var arr = ['张三', '李四', '王五', '小明', '小红'] var arrJoin1 = arr.join(); console.log(arrJoin1); // '张三,李四,王五,小明,小红' var arrJoin2 = arr.join('|'); console.log(arrJoin2); // '张三|李四|王五|小明|小红' // 模拟join()方法内部实现 function join(array, string) { var stringArr = array[0]; for (var i = 1; i < array.length; i++) { stringArr += string + array[i]; } return stringArr; } var arr = ['张三', '李四', '王五', '小明', '小红'] var stringArr = join(arr, '/'); console.log(stringArr); // '张三|李四|王五|小明|小红'
数组的排序方法
reverse()
将数组中元素的位置颠倒,并返回该数组,该方法会改变原数组
var arr = [1, 2, 3, 4, 5, 6]; arr.reverse(); console.log(arr);
sort()
- 对数组的元素进行排序,并返回数组。默认排序顺序是在将元素转换为字符串,然后比较它们的UTF-16代码单元值序列时构建的
- 语法:arr.sort([compareFunction])
- 参数:compareFunction(可选),用来指定按某种顺序进行排列的函数。如果省略,元素按照转换为的字符串的各个字符的Unicode位点进行排序。
- 返回值:排序后的数组
var arr = ["a", "F", "Adf", "Grew", "hef"]; // 没有参数,元素按照转换为的字符串的各个字符的Unicode位点进行排序。 arr.sort(); console.log(arr); // ["Adf", "F", "Grew", "a", "hef"] // 按数字大小排序 var numberArr = [5, 58, 65, 2, 3, 5, 0, 84]; numberArr.sort(function (a, b) { return a - b; }); console.log(numberArr); // [0, 2, 3, 5, 5, 58, 65, 84] // 按字符串长度排序 var stringArr = ["a", "F", "Adf", "Grew", "hef"]; stringArr.sort(function (a, b) { return a.length - b.length; }); console.log(stringArr); // ["a", "F", "Adf", "hef", "Grew"]
// 模拟sort()方法内部实现 function sort(arr, compareFun) { for (var i = 0; i < arr.length; i++) { for (var j = 0; j < arr.length - 1 - i; j++) { if (compareFun(arr[j], arr[j + 1]) > 0) { var tmp = arr[j]; arr[j] = arr[j + 1]; arr[j + 1] = tmp; } } } return arr } var arr = [5, 10, 5, 68, 8, 6]; sort(arr, function (a, b) { return a - b; }); console.log(arr);
清空数组
var arr = [1, 2, 5, 3, 5]; // 第一种方式,推荐用这种方式 arr = []; // 第二种方式 arr.length = 0; // 第三种方式 // 第一个参数:是从什么位置开始删除索引 // 第二个参数: 删除多少个元素 arr.splice(0, arr.length);
作业
- 工资的数组
[1500, 1200, 2000, 2100, 1800]
,把工资超过2000的删除;
var arr = [1500, 1200, 2000, 2100, 1800]; var arr1 = arr.filter(function (item) { return item < 2000; }); console.log(arr1);
['c', 'a', 'z', 'a', 'x', 'a']
找到数组中每个a出现的位置;
var arr = ['c', 'a', 'z', 'a', 'x', 'a']; var index = -1; do { index = arr.indexOf('a', index + 1); if (index !== -1) { console.log(index); } } while (index !== -1)
- 编写一个方法去掉一个数组的重复元素;
function repeat(arr) { var result = [] for (var i = 0; i < arr.length; i++) { for (var j = i + 1; j < arr.length; j++) { if (arr[j] === arr[i]) { j = ++i; } } result.push(arr[i]); } return result } var arr = [1, 2, 1, 5, 2, 'a', 'b', 'a', 'b'] var arr1 = repeat(arr); console.log(arr1);