JavaScript数组

用户1591748569338749
107 阅读4分钟

数组

创建数组

创建数组第一种数组文本方法比较好，new 会影响执行效率

var arr = ["arr1", "arr2", "arr3"];
console.log(arr);// ["arr1", "arr2", "arr3"]
var arr = new Array("arr1", "arr2", "arr3");
console.log(arr);// ["arr1", "arr2", "arr3"]

访问数组

var arr = ["arr1", "arr2", "arr3"];
//访问数组的第一项
console.log(arr[0]);// arr1
//访问数组的最后一项
console.log(arr[arr.length - 1]);// arr3

修改数组

var arr = ["arr1", "arr2", "arr3"];
arr[0] = 'arr0';
console.log(arr); // ["arr0", "arr2", "arr3"]

遍历数组

使用 for 最安全

var arr = ["arr1", "arr2", "arr3"];
for(var i = 0; i < arr.length; i++){
    console.log(arr[i]);
}

arr.forEach(function(value){
    console.log(value);
})

判断是否是数组

  • 使用 isArray() , 不过老版浏览器不支持
var arr = ["arr1", "arr2", "arr3"];
console.log(Array.isArray(arr));// true
  • 自己创建 isArray() 函数
var arr = ["arr1", "arr2", "arr3"];
function isArray(x) {
    return x.constructor.toString().indexOf("Array") > -1;
}
console.log(isArray(arr));// true
  • 使用 instanceof
var arr = ["arr1", "arr2", "arr3"];
console.log(arr instanceof Array);// true

数组方法

数组转换成字符串

join() : 传入指定的分隔符

var arr = ["arr1", "arr2", "arr3"];
console.log(arr.toString());// arr1,arr2,arr3
console.log(arr.join("*"));// arr1*arr2*arr3

删除最后一个元素

pop() : 返回被删除的元素

var arr = ["arr1", "arr2", "arr3"];
console.log(arr.pop());// arr3
console.log(arr);// ["arr1", "arr2"]

在最后添加一个元素

push() : 返回添加后数组的长度

var arr = ["arr1", "arr2", "arr3"];
console.log(arr.push("arr4"));// 4
console.log(arr);// ["arr1", "arr2", "arr3", "arr4"]

删除第一个元素

shift() : 返回被删除的元素

var arr = ["arr1", "arr2", "arr3"];
console.log(arr.shift());// arr1
console.log(arr);// ["arr2", "arr3"]

在开头添加元素

unshift() : 返回添加后数组的长度

var arr = ["arr1", "arr2", "arr3"];
console.log(arr.unshift("arr0"));// 4
console.log(arr);// ["arr0", "arr1", "arr2", "arr3"]

删除元素

delete : 删除元素只是把值替换成 undefined , 会留下一个空洞

var arr = ["arr1", "arr2", "arr3"];
console.log(delete arr[0]);// true
console.log(arr);// [empty, "arr2", "arr3"]

删除添加数组

splice() : 返回删除的元素
参数一：定义添加元素的位置
参数二：从参数一位置开始，删除多少个元素
其他参数：添加的元素

var arr = ["arr1", "arr2", "arr3"];
console.log(arr.splice(1));// ["arr2", "arr3"]
console.log(arr);// ["arr1"]

var arr = ["arr1", "arr2", "arr3"];
console.log(arr.splice(1, 1));// ["arr2"]
console.log(arr);// ["arr1", "arr3"]

var arr = ["arr1", "arr2", "arr3"];
console.log(arr.splice(1, 1, "arr2.1", "arr2.2"));// ["arr2"]
console.log(arr);// ["arr1", "arr2.1", "arr2.2", "arr3"]

合并数组

concat() : 返回一个新的数组 , 不会改变原来的数组

var arr1 = ["arr1", "arr2"];
var arr2 = ["arr3", "arr3"];
console.log(arr1.concat(arr2));// ["arr1", "arr2", "arr3", "arr3"]
console.log(arr1);// ["arr1", "arr2"]

数组剪切

slice() : 返回一个新的数组，不会改变原来的数组
参数一： 定义索引开始的位置
参数二： 定义索引结束的位置
剪切参数二 - 参数一 个元素 [参数一，参数二)

var arr = ["arr1", "arr2", "arr3","arr4"];
console.log(arr.slice(1));// ["arr2", "arr3"]
console.log(arr);// ["arr1", "arr2", "arr3"]
console.log(arr.slice(1, 3));// ["arr2", "arr3"]
console.log(arr.slice(1, 1));// []

数组排序

sort()

var arr = ["b", "d", "a", "c"];
console.log(arr.sort());// ["a", "b", "c", "d"]
    // 因为排序是根据 Unicode 进行排序的所以，数字排序会又问题
var arr = ["20", "1001", "100", "23"];
console.log(arr.sort());// ["100", "1001", "20", "23"]

arr.sort(function(a, b){
    return a - b
});
console.log(arr);// ["20", "23", "100", "1001"]
arr.sort(function(a, b){
    return b - a
});
console.log(arr);// ["1001", "100", "23", "20"]

反转数组

reverse()

var arr = ["arr1", "arr2", "arr3"];
console.log(arr.reverse());//  ["arr3", "arr2", "arr1"]

查找元素

indexOf()
lastIndexOf()

var arr = ["arr1", "arr2", "arr3", "arr1"];
console.log(arr.indexOf("arr1")); //0
console.log(arr.lastIndexOf("arr1"));// 3

数组迭代

  • forEach() : 为每个数组元素调用一次函数
    • 参数一：元素值
    • 参数二：索引
    • 参数三：数组本身
var arr = [1, 2, 3];
var num = 0
arr.forEach(function(value, index, arr){
    num = num + value;
});
console.log(num);// 6
  • map() : 通过对每个数组元素执行函数来创建新数组 , 不会改变原始数组
    • 参数一：元素值
    • 参数二：索引
    • 参数三：数组本身
var arr = [1, 2, 3];
var newArr = arr.map(function(value, index, arr){
    return value * 2;
});
console.log(newArr);//  [2, 4, 6]
  • filter() : 过滤
var arr = [1, 2, 3];
var newArr = arr.filter(function(value, index, arr){
    return value > 2;
})
console.log(newArr);// [3]
  • reduce() :
    • 参数一：回调函数
    • 参数二：设置 taotal 的初始值
var arr = [1, 2, 3];
var newArr = arr.reduce(function(total, value, index, arr){
    return total + value;
});
console.log(newArr); // 6

var newArr = arr.reduce(function(total, value, index, arr){
    return total + value;
}, 10);
console.log(newArr);// 16
  • every()
//当数组的元素都大于 2 的时候返回 true
var arr = [1, 2, 3];
var bool = arr.every(function(value){
    return value > 2;
})
console.log(bool);// false
  • some()
//数组其中一项大于 2 就返回 true
var arr = [1, 2, 3];
var bool = arr.some(function(value){
    return value > 2;
})
console.log(bool);// true
  • find()
//返回大于 1 的第一个元素的值
var arr = [1, 2, 3];
var newArr = arr.find(function(value, index, arr){
    return value > 1;
})
console.log(newArr);// 2
//返回大于 1 的第一个元素的索引
var newArr = arr.findIndex(function(value, index, arr){
    return value > 1;
})
console.log(newArr);// 1
avatar
文章
阅读
粉丝