在前端的日常开发中,数组使用的频率非常高,所以充分熟悉各种常见的方法後,能提升工作的效率。
数组有三种创建的方法:
//第一种 []
var arr0 = [element0, element1, ..., elementN]
//第二种 构造函数
var arr1 = new Array(element0, element1[, ...[, elementN]])
//第三种 构造函数
var arr2 = new Array(arrayLength)
我们时常会需要对一个array进行遍历,进而针对每个元素进行操作。
某些情况下会使用for --- 当循环满足某种条件下,跳出循环,或是跳出本次循环进入下一个循环。
let arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
for (let i = 0; i < arr.length; i++) {
// 当 i == 3 时,跳过此次循环进入下次
if (i == 3) continue;
console.log(arr[i]);
// 当 i > 7 时,跳出循环
if (i > 7) break;
}
// 0
// 1
// 2
// 4
// 5
// 6
// 7
// 8
语法如下
arr.forEach(callback[, thisArg]);
参数说明:
let a = 123;
let b = {a:456};
(function() {
let arr = [0, 1, 2];
arr.forEach(function(item){
console.log(this.a);// 这里是指向b.a
},b);//b作为thisArg参数传入後,this就指向了b
})();
// 456
// 456
// 456
注意,如果使用箭头函数来传入thisArg参数会被忽略,因为箭头函数绑订了this值。
let a = 123;
let b = {a:456};
(function() {
let arr = [0, 1, 2];
arr.forEach((item)=>{
console.log(this.a);// 这里是window.a
},b);//这里把b作为thisArg参数传入之後,本来this应该指向b,但因为使用了箭头函数表达式,this固定指向包含此函数的外层作用域(也即匿名函数)的this,也就是window
})();
//>> 123
//>> 123
//>> 123
map与forEach相似,只是map会返回一个新的数组,数组内的每一个element都是callback function return的值,所以可以用一个变数去接map的返回值。
let arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
const arr1 = arr.map(item => item + 1);
console.log(arr1);
// [1,2,3,4,5,6,7,8,9,10]
const arr2 = arr.map(item => {item + 1});// 如果没有return任何的值
console.log(arr2);
//输出一个皆是undefined的数组
//>> [undefined, undefined, …… undefined]
for..in是遍历数组的索引,而for...of是遍历数组的值。for..of遍历的只是数组内属性的值,而不包含数组的原型属性跟方法。
Array.prototype.getLength = function () {
return this.length;
}
let arr = [1, 2, 4, 5, 6, 7]
arr.name = "ownArray";
console.log("for...of");
for (let value of arr) {
console.log(value);
}
console.log("for...in");
for (let key in arr) {
console.log(key);
}
// for...of
// 1
// 2
// 4
// 5
// 6
// 7
// for...in
// 0
// 1
// 2
// 3
// 4
// 5
// name
// getLength
可以发现,for..in是可以遍历到原型上的属性和方法,如果不想遍历原型的属性和方法,可以在循完内部使用hasOwnProperty方法判断某属性是否为该object的属性。
Array.prototype.getLength = function () {
return this.length;
}
let arr = [1, 2, 4, 5, 6, 7]
arr.name = "ownArray";
console.log("for...in");
for (let key in arr) {
if(arr.hasOwnProperty(key))
console.log(key);
}
// for...in
// 0
// 1
// 2
// 3
// 4
// 5
// name
与forEach不同,for..of与for..in都可以使用break,continue,return等语句。
>>: 【19】使用 Pooling 和 Conv 来把图片变小 (subsampling) 的比较实验
JDK、JRE 和 JVM 是 Java 编程语言的核心概念!在编程中不使用这些概念,但是作为 Ja...
长话短说,请直接点我进入新世界。 任何事情要从完全没有概念开始是非常困难的,尤其是初次接触程序这方...
tags: OC 30 day 延展: Extension 是一个特殊分类,所以延展也是类的一部分。...
真刚好,总共十章的本文~我花了十天写~总复习一下罗~ (耶~明天开始可以研究控制项了后?) 系统解析...
天呀,没库存今天又晚下班没什麽时间,只剩8天了,不可以开天窗害我们组挑战失败啊! 中途穿插来介绍一个...