- 数组的创建和赋值
两种方式创建:
1)字面量方式 var arr = ['you','me','their']
2)使用 new 关键字创建(构造函数) var arr = new Array();
数组赋值:
var arr = [];
arr[0] = 123;
arr[1] = '第三个发';
arr[2] = '命运交响曲'
- 数组方法 列举30个
1)改变原数组:shift 、pop、unshift、push、sort、reverse、splice
2)不改变原数组:slice、 concat、 join 、filter、some、map、find、toReverted 、toSorted、toSpliced、with
length属性 在末尾添加一个新项,返回有一个新的数组。
var arr = ["1","2","3"];
arr[arr.length]="4"; //在坐标为 length 的位置添加一个新项
console.log(arr) //返回为【“1”,“2”,“3”,“4”】
shift() 删除数组的第一个元素,返回删除的值。 //0
unshift(3,4) 把参数添加到数组头部,返回数组的长度。// [3,4,0,1,2].unshift[0] -> 6
pop() 删除数组的最后一个元素,返回删除的值。//2
push(3) 将参数添加到数组最后,返回数组的长度。(可以添加多个,以逗号隔开)// [0,1,2,3]
reverse() 数组反序 。
sort(orderfunction) 按照参数指定的方法进行排序
splice(i,n) 删除从i(索引值)开始之后的n个元素,返回值是删除的元素。splice(start,deleteCount,val1,val2,...) 从start位置开始删除deleteCount 项,并从该位置起插入值val1,val2,... str.split() 将字符串转化为数组
slice(start,end) 返回参数区间的值作为新数组输出(首项下标0,左闭右开)。
concat(3,4) 把两个数组拼接起来。//[0,1,2,3,4]
join() 返回字符串,包含数组中的所有元素由指定的分隔符分隔。
map() filter() some() erery()
.toSpliced() 非破坏性版本,它会返回原数组变更后的版本,因此我们拿不到被删除的元素
const array = [1, 2, 3, 4, 5, 6];
const result = array.tospliced(1, 2, 0);
console.log(result); // [1, 0, 4, 5, 6]
console.log(array); // [1, 2, 3, 4, 5, 6]
.toSorted()
是 .sort()
的非破坏性版本:
const array = ['c', 'o', 'n', 'a', 'r', 'd', 'l', 'i'];
const result = array.toSorted();
console.log(result); // ['a', 'c', 'd', 'i', 'l', 'n', 'o', 'r']
console.log(array); // ['c', 'o', 'n', 'a', 'r', 'd', 'l', 'i']
.toReversed()
是 .reverse()
的非破坏性版本:
const array = ['c', 'o', 'n', 'a', 'r', 'd', 'l', 'i'];
const result = array.toReversed();
console.log(result); // ['i', 'l', 'd', 'r', 'a', 'n', 'o', 'c']
console.log(array); // ['c', 'o', 'n', 'a', 'r', 'd', 'l', 'i']
.find(callback) 找到第一个符合条件的数组成员
.findIndex(callback) 找到第一个符合条件的数组成员的索引值
.fill(target, start, end) 使用给定的值,填充一个数组,ps:填充完后会改变原数组
.includes() 判断数中是否包含给定的值
toString() 直接转换为字符串,每个元素之间用逗号隔开。
isArray() 判断一个对象是否为数组类型 ,返回布尔值 true / false。
.keys() 遍历数组的键名
.values() 遍历数组键值
.entries() 遍历数组的键名和键值
.forEach(callback) 遍历数组,无return
.map(callback) 映射数组(遍历数组),有return 返回一个新数组
.every(callback) 依据判断条件,数组的元素是否全满足,若满足则返回ture
.some() 依据判断条件,数组的元素是否有一个满足,若有一个满足则返回ture
arr.filter(a => !['l','i'].includes(a)) 过滤数组,返回一个满足要求的数组
arr.reduce(callback, initialValue) 迭代数组的所有项,累加器,数组中的每个值(从左到右)合并,最终计算为一个值
arr.reduceRight(callback, initialValue) 与arr.reduce()功能一样,不同的是,reduceRight()从数组的末尾向前将数组中的数组项做累加。
.indexOf() 查找某个元素的索引值,若有重复的则返回第一个查到的索引值,若不存在则返回 -1
.lastIndexOf() 和arr.indexOf()的功能一样,不同的是从后往前查找
Array.from() 将伪数组变成数组,就是只要有length的就可以转成数组。 ---es6
Array.of() 将一组值转换成数组,类似于声明数组 ---es6.with()
const array = ['c', 'o', 'n', 'a', 'r', 'd', 'l', 'i'];
const result = array.with(0, 'ConardLi')
console.log(result); // ['ConardLi', 'o', 'n', 'a', 'r', 'd', 'l', 'i'];
console.log(array); // ['c', 'o', 'n', 'a', 'r', 'd', 'l', 'i']
.copyWithin() 在当前数组内部,将指定位置的数组复制到其他位置,会覆盖原数组项,返回当前数组
- 数组排序 arr.sort()
sort()方法将在原数组上进行排序,即排序时不创建新的数组副本。
sort()没有使用参数,将按照字符编码的顺序排序。首先应把数组的元素都转换成字符串(如果有必要的话),以便进行比较。
如果想按照别的顺序进行排序,就必须提供比较函数,该函数要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数a和b,
sort(function(a,b){}) 根据设定的评判标准,其返回值如下:
var a = [1, 4, 2, 3, 5];
var b = a.sort();
console.log(a, b); //[ 1, 2, 3, 4, 5 ] [ 1, 2, 3, 4, 5 ]
如果a<b,排序后a应该出现在b之前,就返回一个小于0的值。
如果a等于b,就返回0。
如果a大于b,就返回一个大于0的值。
注意,数组中undefined的元素都排列在数组末尾。即使你提供了自定义的排序函数也是这样,因为undefined值不会被传递给你提供的orderfunc
数字数组进行由小到大的顺序
var arr = [22,12,3,43,56,47,4];
arr.sort();
console.log(arr); // [12, 22, 3, 4, 43, 47, 56]
arr.sort(function (m, n) {
if (m < n) return -1
else if (m > n) return 1
else return 0
});
console.log(arr); // [3, 4, 12, 22, 43, 47, 56]
字符串数组不区分大小写排序
var arr = ['abc', 'Def', 'BoC', 'FED'];
console.log(arr.sort()); // ["BoC", "Def", "FED", "abc"]
console.log(arr.sort(function(s, t){
var a = s.toLowerCase();
var b = t.toLowerCase();
if (a < b) return -1;
if (a > b) return 1;
return 0;
})); // ["abc", "BoC", "Def", "FED"]
对象数组的属性值排序
var arr = [{'name': '张三', age: 26},{'name': '李四', age: 12},{'name': '王五', age: 37},{'name': '赵六', age: 4}];
var objectArraySort = function (keyName) {
return function (objectN, objectM) {
var valueN = objectN[keyName]
var valueM = objectM[keyName]
if (valueN < valueM) return 1
else if (valueN > valueM) return -1
else return 0
}
}
arr.sort(objectArraySort('age'))
console.log(arr) // [{'name': '王五', age: 37},{'name': '张三', age: 26},{'name': '李四', age: 12},{'name': '赵六', age: 4}]
- 数组遍历的几种方法: every(), filter(), forEach() , map(), some()
- 数组去重哪个方法效率高:
- 数组扁平化
- 用 js 实现随机选取 10 -100 之间的 10 个数字,存入一个数组并排序。
function randomNum(aArray, len, min, max) {
if (len >= (max - min)) {
return '超过' + min + '-' + max + '之间的个数范围' + (max - min - 1) + '个的总数';
}
if (aArray.length >= len) {
aArray.sort(function (a, b) {
return a - b
});
return aArray;
}
// console.log(aArray)
let nowNum = parseInt(Math.random() * (max - min - 1)) + (min + 1);
for (let j = 0; j < aArray.length; j++) {
if (nowNum === aArray[j]) {
randomNum(aArray, len, min, max);
return;
}
}
aArray.push(nowNum);
randomNum(aArray, len, min, max);
return aArray;
}
let arr = [];
console.log(randomNum(arr, 10, 10, 100));
输出结果:
[ 12, 15, 18, 24, 25, 30, 31, 32, 42, 50 ]
[ 27, 34, 35, 51, 59, 60, 78, 82, 86, 89 ]
- ES5 实现数组 map 方法
var selfMap = function(fn,context){
var arr = Array.prototype.slice.call(this)
var mappedArr = []
for (let i=0;i<arr.length;i++){
mappedArr.push(fn.call(context,arr[i],i,this))
}
return mappedArr
}
Array.prototype.slice.call() 可以理解为:改变数组的 slice 方法的作用域,在特定的作用域中去调用 slice 方法。
call() 方法是在特定的作用域中调用函数,实际上等于设置函数体内 this对象的值,call 方法的第一个参数是特定的作用域。
- 向JavaScript 固有类型 Array 扩展一个取最小值方法
Array.prototype.min = function () {
let min = this[0];
for (let i = 1; i < this.length; i++) {
if (this[i] < min) {
min = this[i]
}
}
return min;
}
console.log([1, 56, 34, 12].min()); //1
陷阱:向Array 的原型中扩展了min方法后,使用 for .in . 循环时会拿到这个 min() 方法
let arr = [1, 56, 34, 12];
let total = 0;
for (let i in arr) {
total += parseInt(arr[i], 10);
}
console.log(total); // NaN
var arr = [1, 56, 34, 12];
var total = 0;
for (var i in arr) {
console.log('=' + arr[i])
if (Array.hasOwnProperty(i)) {
total += arr[i]
}
console.log(total);
}
//输出:
1
0
56
0
34
0
12
0
[Function]
0
- 删除数组中指定索引的项
const arr = [
{ photo: "photo" },
{ name: "name" },
{ phoneNumber: "phoneNumber" },
{ part: "part" },
{ role: "role" },
{ name: "fsdfvzxc94" },
{ name: "fsdfvzxc80" },
{ name: "fsdfvzxc68" },
{ name: "fsdfvzxc54" },
{ name: "fsdfvzxc92" }
]
function remove(array, index) {
if (index <= (array.length - 1)) {
for (var i = index; i < array.length; i++) {
array[i] = array[i + 1];
}
}
else {
throw new Error('超出最大索引!');
}
array.length = array.length - 1;
return array;
}
console.log(remove(arr , 2));