- 小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
目录
创建数组与随机生成数组增删改查转数组判读数组类型
一 创建数组与 随机生成数组
1) 创建数组
- new Array
- 字面量
- Array
new Array 与 Array 与 字面量
// new Array 与 Array 与 字面量
var arr = [1,2,3];
console.log(arr); // [1, 2, 3]
var arr = new Array(1,2,3);
var arr = Array(1,2,3); // new 可省略
console.log(arr); // [1, 2, 3]
var arr = new Array(3).fill(1); // [1,1,1]
var arr = Array(3).fill(0); // [0,0,0]
字符串转数组 - 创建数组 split ... from
// 字符串转数组 - 创建数组
var str = '1,2,3';
str.split(',') // ["1", "2", "3"]
var str = '123';
str.split('') // ["1", "2", "3"]
var str = '123';
var arr = [...str]; // ["1", "2", "3"]
1.1) 特殊情况 存在空值的数组
var arr = [1,2,3,,,3];
console.log(arr); // [1, 2, 3, empty × 2, 3]
var arr = new Array(3); // [empty × 3]
2) 随机生成数组 Math.random()
var generateArray = function(length) {
let arr = Array(length);
for(let i=0; i<length; i++) {
arr[i] = (Math.random() * 100).toFixed(0);
}
return arr;
};
generateArray(10); // ['24', '27', '24', '47', '30', '22', '37', '1', '44', '15']
generateArray(10); // ['40', '30', '43', '21', '53', '1', '16', '86', '47', '44']
二 增 push unshift splice
尾部增加元素push头部增加元素unshift任意位置增加元素splice
1) 尾部增加元素 push
push
返回值是数组长度,会改变原始数组
var arr = [1,2,3];
var res = arr.push(4,5);
console.log(arr,res); // [1, 2, 3, 4, 5] 5
2) 头部增加元素 unshift
unshift
返回值是数组长度,会改变原始数组
var arr = [1,2,3];
var res = arr.unshift(4,5);
console.log(arr,res); // [4, 5, 1, 2, 3] 5
3) 任意位置 增加元素 splice
splice
返回值为空,会改变原始数组
var arr = [1,2,3];
var res = arr.splice(0,0,111);
console.log(arr,res); [111, 1, 2, 3] []
var arr = [1,2,3];
var res = arr.splice(1,0,111,222,333);
console.log(arr,res); // [1, 111, 222, 333, 2, 3] []
var arr = [1,2,3];
var res = arr.splice(arr.length,0,111);
console.log(arr,res); // [1, 2, 3, 111] []
三 删 shift pop splice
1) 删除头部元素
pop 返回头部删除的一个元素,不支持传入参数, 会修改原始数据
var arr = [1,2,3];
var res = arr.shift();
console.log(arr,res); // [2, 3] 1
2) 删除 任意位置 元素 splice
pop 返回删除的元素, 会修改原始数据
头部删除
var arr = [1,2,3];
var res = arr.splice(0,1);
console.log(arr,res); // [2, 3] [1]
中间删除
var arr = [1,2,3];
var res = arr.splice(1, 1);
console.log(arr,res); // [1, 3] [2]
尾部删除
var arr = [1,2,3];
var res = arr.splice(arr.length-1, 1);
console.log(arr,res); // [1, 2] [3]
3) 删除尾部元素
pop 返回尾部删除的一个元素,不支持传入参数, 会修改原始数据
var arr = [1,2,3];
var res = arr.pop();
console.log(arr,res); // [1, 2] 3
四 改 splice reverse sort
1) 从任意位置 (删除| 添加) 修改数组 splice
从第
1个位置开始, 删除1个元素,增加N个元素
var arr = [1,2,3];
var res = arr.splice(1,1,'N');
console.log(arr,res); // [1, 'N', 3] [2]
2) reverse 反转
改变原始数组, 返回反转后的数组
var arr = [1,2,3];
var res = arr.reverse()
res.push(5)
console.log(arr,res); // [3, 2, 1, 5] [3, 2, 1, 5]
3) sort 排序
小 -> 大 改变原始数据
var arr = [10,1,3];
var res = arr.sort((a,b)=>a-b)
console.log(arr,res); // [1, 3, 10] [1, 3, 10]
大 -> 小 改变原始数据
var arr = [10,1,3];
var res = arr.sort((a,b)=>b-a)
console.log(arr,res); // [10, 3, 1] [10, 3, 1]
冒泡排序 - 最慢
快速排序 - 最快
归并排序
五 查 slice splice indexOf lastIndexOf find findIndex
1) slice(start, end) 不包括 end
支持传入
负数, 从后面开始查找
slice
var arr = [1,2,3];
var res = arr.slice(4,5);
console.log(arr,res); // [1, 2, 3] []
var arr = [1,2,3];
var res = arr.slice(1);
console.log(arr,res); // [1, 2, 3] [2, 3]
var arr = [1,2,3];
var res = arr.slice(-1);
console.log(arr,res); // [1, 2, 3] [3]
2) indexOf lastIndexOf
indexOf 输入item, 输出 第一次 元素的索引,不存在返回-1
(第一次出现的位置)
var arr = [0,1,2,1,3];
var res = arr.indexOf(1);
console.log(arr,res);// [0, 1, 2, 1, 3] 1
lastIndexOf 输入item, 输出 最后一次 元素的索引,不存在返回-1
(最后一次出现的位置)
var arr = [1,2,3,1,2];
var res = arr.lastIndexOf(1);
console.log(arr,res);// [1, 2, 3, 1, 2] 3
3) find 返回item findIndex返回index
find接受一个函数, 返回在数组中满足条件的第一个值
var arr = [1,2,3];
var res = arr.find(item => item % 3 === 0);
console.log(arr,res);// [1, 2, 3] 3
findIndex接受一个函数, 返回在数组中满足条件的第一个值的下标
var arr = [1,2]
var res = arr.findIndex(item => item % 2=== 0);
// 2 % 2 是 0 , 1 % 2 是 1
console.log(arr,res); // [1, 2] 1
六 转数组 [...o] [].slice.call(obj) Array.from
[...o][].slice.call(obj)Array.from
1) 字符串 转 数组 | 伪数组 转 数组
var str = '123';
Array.from(str); // ['1', '2', '3']
Array.from({0:'a',1:'b',2:'c',length:3}) //["a", "b", "c"]
伪数组 转 数组
function fn(a,b){
console.log(arguments);
console.log([...arguments]);
console.log([].slice.call(arguments));
};
fn(1,2);
七 判读数组类型
1) 准确
var arr =[1];
Array.isArray(arr); // true
Object.prototype.toString.call(arr) === '[object Array]'; // true
2) 不准确 (constructor可以被修改覆盖, instanceof 可能是多个构造函数)
(constructor可以被修改覆盖, instanceof 可能是多个构造函数)
typeof arr;// 'object' 不准确
arr instanceof Array; // true 不准确
arr instanceof Object; // true 不准确
arr.constructor === Array; // true
arr.constructor === Object // false
arr.constructor = Object; // 修改 实例的 constructor
arr.constructor === Array;// false 返回错误
arr.constructor === Object;// true
总结
constructor可以被修改覆盖,instanceof 可能是多个构造函数slice`` 不改变原始数据splicepoppushshiftunshift改变原始数据- 通过 length 改变数组不可取
