JavaScript Array

Array

定义
  • 数组是一组有序的数据,数组中每个槽位可以储存任意类型的数据
  • 在计算机中,数组指的是一组连续的内存地址
  • 数组赋值给变量时,其实赋值的是数组在内存中的地址
  • 数组作为参数,也是按值传递,传递的是数组在内存中的地址
创建数组
  • 使用Array构造函数

    • let colors = new Array();
      //如果在括号中只输入一个正整数,则代表创建数组的长度
      //也可以在括号中输入数组中的元素
      
  • 使用字面对象创建

    • let names = [1,2,3];
      
    • 访问数组中的元素,使用’’[]“操作符,在”[]"中写入数组的索引值

    • 添加元素直接进行赋值

      • arr[索引值]=5//如果输入索引值超过原数组长度,则会使原数组增长
        
    • 注意:在使用字面量创建数组时,不会调用Array构造函数

  • from( )和of( )

    • from( )
      • 用于将类数组结构转化为数组
    • of( )
      • 用于将一组参数转化为数组
数组空位
  • var arr = [,,,,,];//创建一个有五个元素的数组
    

    ES6新增方法普遍将这些空位当成存在的元素,只不过值为undefined

  • ES6之前的方法会忽略这个空位,但具体的行为也会因方法而异

    var arr = [1,,,,5];
    //map( )会跳过空位置
    console.log(arr.map(()=>6)); //[6,undefined,undefined,undefined,6]
    //join( )会把空位置当成空字符串
    console.log(arr.join('-')); //'1----5'
    
  • 注意:要避免使用数字空位,需要空位则可以显式的使用undefined值代替

数组索引
检测数组
instanceof

主要是用来判断某个实例是否属于某个对象

  • let arr = [];
    console.log(arr instanceof Array); // true
    
Array.isArray
  • let arr = [];
    console.log(Array.isArray(arr)); // true
    
迭代器方法
keys

返回数组索引的迭代器

values

返回数组元素的迭代器

entries

返回索引/值对的迭代器

复制和填充方法
fill
copyWithin
转换方法
toLocaleString

描述:把数组转换为本地字符串

语法:arr.toLocaleString( );

toString

描述:将数组中所有的元素都toString,然后使用“,”连接

语法:arr.toString( );

返回值:字符串

不推荐使用,推荐使用join

var arr = [1, 23, 'abc', true, NaN, null, {}, undefined, 3];
var str = arr.toString();
var str2 = arr.join('-');
console.log(str);
console.log(str2);
——join

描述:join方法将数组中或一个类数组对象的所有元素连接成一个字符串

​ 如果该数组只有一个项目,将直接返回该项目,不使用分隔符

语法:arr.join(separator);

参数:separator(string字符串格式)分隔符,默认值(’,’)

返回值:string 一个新的字符串,使用分割符进行连接的字符串

注意点:join会将数组中所有的元素都进行 toString 操作,然后使用分割符连接它

null 和 undefined 没有toString方法

var arr = [1, 2, 3, true, 'abc', 'null', null, undefined];
var str = arr.join();
console.log(str)//1, 2, 3, true, abc , null,,

var str2 = arr.join('-');
console.log(str2);//1-2-3-true-abc-null--
valueOf

描述:函数返回指定对象的原始值

语法:arr.valueOf( );

栈方法

ECMAScript数组也提供了一种让数组的行为类似于其他数据结构的方法

具体来说数据可以表现的像栈一样,后者是一种可以限制插入和删除项的数据结构

栈是一种LIFO(Last-In- First- Out)的数据结构,也就是最新添加的项最早被移除,而栈中项的插入(叫做推入)和移除(叫做弹出),只发生在一个位置栈的顶部

ECMAScript为数组 专门提供了push和pop方法,以便实现类似栈的行为

push

描述:方法push将在数组的尾部依次插入元素(一个或多个)

语法::arr.push(element);

参数:element(any) 任意类型,需要插入到数组尾部的内容

返回值:length(number) 插入数据后的数组新长度

注意点:直接修改源数组

var arr = [1, 2, 3];
var len = arr.push(4, 5, 6);
console.log(arr);//(4)[1,2,3,4]
console.log(len);//4(数组的长度)
pop

描述:方法pop将用于删除数组中的最后一个元素

语法:arr.pop( );

返回值:被删除的元素(数组中没有元素则返回undefined)

注意点:直接修改源数组

var arr = [1, 2, 3];
var result = arr.pop();
console.log(result);//3(被删除的数)
console.log(arr);//(2)[1,2]
队列方法
shift

描述:将数组第一个元素移出数组,将数组中后面所有的元素向前移动一位

​ 将数组的长度-1,如果没有可删除的元素则返回undefined

语法:arr.shift( );

返回值:firstElm 数组中的第一个元素

注意点:直接修改源数组

var arr = [1, 2, 3, 4, 5, 6, 7];
var result = arr.shift();
console.log(result);
console.log(arr);
unshift

描述:依次把value添加到数组的头部,并将数组原有元素向后移动

语法:arr.unshift(value);

参数:要添加到数组头部的值

返回值:length(number) 添加内容后的数组长度

注意点:直接修改源数组

var arr = [1, 2, 3, 4, 5];
var result = arr.unshift('ok');
console.log(arr);
console.log(result);
排序方法
reverse

描述:erverse会颠倒数组中所有元素的顺序

语法:arr.reverse( );

返回值:源数组

注意点:直接修改源数组

var arr = [1, 2, 3, 4];
arr.reverse();
console.log(arr);
sort

描述:通过特定的规则对数组进行排序

语法:arr.sort.([compareFunction]);

参数:compareFunction(function) 可选

​ 用来指定按某种顺序进行排列的函数,如果省略,元素按照转换为的字符串的各个字符的Unicode位点进行排序

​ firstEl

​ 第一个用于比较的元素

​ secondEl

​ 第二个用于比较的元素

返回值:排序后的源数组

注意点:直接修改源数组

var arr = ['123', '111', '11', '53', '111', '23', '21', '221', '215'];
arr.sort();
console.log(arr);//按照每个数组元素的的一个数字的Unicode位点进行排序

var arr2 = ['ab', 'acc', 'abc', 'bc', 'cab', 'aa', 'ba'];
arr2.sort();
console.log(arr2);//按照每个数组元素的的一个字符的Unicode位点进行排序

var arr3 = [2, 3, 3, 22, 61, 11, 178, 25, 115, 31, 26];
arr3.sort();
console.log(arr3);//按照每个数组元素的的一个数字的Unicode位点进行排序


var arr4 = [5423, 61, 431, 33, 1, 786];

// 升序排列数组(从小到大)
function fn(a, b) {
		a - b;
	}
arr4.sort(fn);
console.log(arr4);

// 降序排列数组(从大到小)
function fn2(a, b) {
		return b - a;
	}
arr4.sort(fn2);
console.log(arr4);

arr4.sort(function(a, b) {
		console.log(a, b);
		return a - b;
	});
// 如果添加了 compareFunction 那么数组会按该函数的返回值结果进行排序

// 即 compareFunction(a,b) 表示 a,b的比较结果,规则如下:

// 如果 compareFunction(a, b) 小于 0 , a 会被排列到 b 之前;

// 如果 compareFunction(a, b) 等于 0 , a 和 b 的相对位置不变

// 如果 compareFunction(a, b) 大于 0 , b 会被排列到 a 之前

// 备注: ECMAScript 标准并不保证这一行为,而且也不是所有浏览器都会遵守(例如 Mozilla 在 2003 年之前的版本);

// compareFunction(a, b) 必须总是对相同的输入返回相同的比较结果,否则排序的结果将是不确定的


// 使用sort实现类似于reverse的效果

var arr4 = [5423, 61, 431, 33, 1, 786];
arr4.sort(function() {
		return -1;
	});
console.log(arr4);

// 对数组进行随机排序(对数组实现乱序)

var arr5 = [1, 2, 3, 4, 5, 6, 7];
arr5.sort(function() {
		return Math.random() - 0.5;
	});
console.log(arr5);

// 按照对象的某个特定属性的值进行升序或降序排列

var data = [
	   {
        name: 'zhangsan',
		age: 25
	}, {
		name: 'lisi',
		age: 15
	}, {
		name: 'wangwu',
		age: 13
	}, {
		name: 'zhaoliu',
		age: 27
	}, {
		name: 'fengqi',
		age: 11
	}];

function sortby(prop, desc = true) {

	// prop 需要排序的属性名
	// desc 降序排列
		return function(a, b) {
				var val1 = a[prop];
				var val2 = b[prop];
				return desc ? val2 - val1 : val1 - val2;
			}
		}
data.sort(sortby('age', false));
console.log(data);
操作方法
concat

描述:concat方法用于合并两个或多个数组

语法:arr.concat(value);

参数:value(any) 数组或值,所有value会被依次添加到新数组中

返回值:array 新数组

注意点:此方法不改变现有数组,而返回一个新数组

var arr = [1, 2, 3];
var arr2 = arr.concat(4, 5);
console.log(arr);//(3)[1,2,3]
console.log(arr2);//(5)[1,2,3,4,5]


var arr3 = [1, 2, 3];
var arr4 = arr3.concat([4, 5, 6], [7, [8, 9]]); // concat会自动展开第一层数组
console.log(arr4);//(8)[1,2,3,4,5,6,7,[8,9]]  第二层数组不展开

arr3.push([4, [5, 6]]); // push不会展开数组
console.log(arr3);//(4)[1,2,3,[4,[5,6]]]

var arr5 = arr3.concat(); // 可以使用concat复制数组
console.log(arr5);
console.log(arr5 === arr3);//false concat会返回一个新数组
slice

描述:中截取一个数组片段

​ 截取的内容从开始索引(start)参数至结束索引(end)参数

​ 截取的内容不包含结束索引(end)

​ 如果没有参数end slice将截取到数组的结尾

​ 如果没有start和end将从数组的开头截取到数组的结尾,获得一个数组的浅拷贝

语法:art.slice(start[,end]);

参数:start(number) 开始索引

​ end(number) 结束索引

返回值:array 一个包含从start开始到end结束的数组片段

注意点:方法不修改源数组,返回新数组

​ 参数允许是负数

​ 当参数为负数时表示,元素计算从后向前

​ -1 表示最后一个元素,-2表示倒数第二个元素,以此类推

var arr = [1, 2, 3, 4, [5, 6, 7], 8];
var arr2 = arr.slice(1, 3);
console.log(arr2);

var arr3 = arr.slice(1);
console.log(arr3);

var arr4 = arr.slice();
arr4[4][0] = 0;
console.log(arr4);//[1, 2, 3, 4, [0, 6, 7], 8]
console.log(arr);//[1, 2, 3, 4, [0, 6, 7], 8]
// 浅拷贝只拷贝第一层,如果第一层是引用,则拷贝引用


// 深拷贝数组

var arr5 = JSON.parse(JSON.stringify(arr));
arr5[4][0] = 0;
console.log(arr5);
console.log(arr);

// 如果是负值则从后往前数
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var arr2 = arr.slice(1, -2);
var arr3 = arr.slice(-5, -2);
console.log(arr2);
console.log(arr3);
splice

描述:1、在指定的索引位置删除元素

​ 2、 在指定的索引插入元素

​ 3、在指定索引位置替换元素

语法:arr.splice(start[,deleteCount[,value,...valueN]]);

参数:start(number) 开始索引

​ deleteCount(number) 删除个数

​ value(any) 插入的元素

返回值:array 包含所有被删除的元素 如果没有删除元素则返回 一个空数组

//删除元素
var arr = [1, 2, 3, 4, 5];
var result = arr.splice(2, 2);
console.log(result);
console.log(arr);
//插入元素(在[2]前面插入)
var arr2 = arr.splice(2, 0, 1, 5);
console.log(arr2);
console.log(arr);
//替换元素
var arr3 = arr.splice(2, 2, 3, 5);
console.log(arr);
搜索和位置方法
严格相等

indexOf

描述:indexOf用于在数组中arr中查找searchElement

​ 找到第一个匹配元素后返回它在数组中的索引值

​ 没有找到则返回-1

语法: arr.indexOf(searchElement[,fromIndex=0]);

参数:searchElement需要在数组中查找的元素

​ fromIndex(number)开始查找的索引,默认值0

返回值:返回searchElement在arr中的索引值

var arr = [1, 2, 32, 4, 5, 226, 1, 32, 56];
console.log(arr.indexOf(32, 3));//7
//indeOf的原理分析
var arr = [1, 2, 32, 4, 5, 226, 1, 32, 56];
   // console.log(arr.indexOf(32, 5));

Array.prototype.indexof = function(searchElement, fromIndex) {
	fromIndex = fromIndex || 0;
    // console.log(this);
    // this关键字出现在函数中,谁调用该函数,this就指向谁
	for (var i = fromIndex; i < this.length; i++) {
		if (this[i] === searchElement) return i;
	}
	return -1;
}
console.log(arr.indexof(32, 5));

lastIndexOf

描述:方法返回指定元素在数组中的最后一个的索引,如果不存在则返回 -1

​ 从数组的后面向前查找,从 fromIndex(可选,从此位置开始逆向查找,默认为数组的长度减1)处开始

语法: arr.lastIndexOf(searchElement[,fromIndex=0])

参数:searchElement需要在数组中查找的元素

​ fromIndex(number)开始查找的索引

返回值:返回searchElement在arr中的最后一个索引值

var arr = [1, 2, 32, 4, 5, 226, 1, 32, 56];
console.log(arr.lastIndexOf(32, 3));//2
//indeOf的原理分析
var arr = [1, 2, 32, 4, 5, 226, 1, 32, 56];
   // console.log(arr.indexOf(32, 5));

Array.prototype.indexof = function(searchElement, fromIndex) {
	fromIndex = fromIndex || 0;
    // console.log(this);
    // this关键字出现在函数中,谁调用该函数,this就指向谁
	for (var i = fromIndex; i < this.length; i--) {
		if (this[i] === searchElement) return i;
	}
	return -1;
}
console.log(arr.indexof(32, 5));//2

includes

描述:判断一个数组是否包含一个指定的值,如果包含则返回 true,否则返回false(可以被用于其他类型的对象)

语法: arr.includes(valueToFind[,fromIndex=0])

参数:valueToFind需要在数组中查找的元素

​ fromIndex(number)开始查找的索引,如果是负值,则倒数,然后往后搜寻,如果索引值过小,则会搜索整个数组

返回值:返回一个布尔值

断言函数

find

描述:find方法返回数组中满足提供的测试函数的第一个元素的值,否则返回 undefined

语法:arr.find(callback);

参数:callback(function)

​ 回调函数:currentValue

​ index

​ array

返回值:返回第一个符合布尔表达的值

var arr = [11, 654, 65, 35, 72];
var result = arr.find(function(val) {
    return val % 5 == 0;
});
console.log(result);
//find原理
Array.prototype.find1 = function(callback) {
    for (var i = 0; i < this.length; i++) {
        if (callback(this[i], i, this)) {
            return this[i];
        }
    }
}

var arr = [11, 654, 65, 35, 72];
var result = arr.find1(function(val) {
    return val % 17 == 0;
});

console.log(result);

findIndex

描述:findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回-1

语法:arr.findIndex(callback);

参数:callback(function)

​ 回调参数:currentValue

​ index

​ array

var arr = [11, 654, 65, 35, 72];
var index = arr.findIndex(function(val) {
    return val % 19 == 0;
});
console.log(index);
//findIndex原理
Array.prototype.findIndex1 = function(callback) {
    for (var i = 0; i < this.length; i++) {
        if (callback(this[i], i, this)) {
            return i;
        }
    }
    return -1;
}
迭代方法
every

描述: every会遍历数组,为每一个数组的元素执行一个回调函数

​ 在回调函数中提供一个布尔表达式,如果数组中的每一个元素都通过布尔表达式的测试则every的结果返回true,否则返回false

语法: arr.every(callback(element[,index[,array]]));

参数:callback(回调函数)

​ 回调参数: element 元素

​ [index] 当前值对应的索引

​ [array] 当前数组

返回值:布尔值

//判断数组中的每一个元素是否都是奇数
var arr = [15, 221, 31, 77, 19];
var result = arr.every(function(val) {
	return val % 2;
});
console.log(result);

//判断年龄是成年人
var data = [{
    name: 'zhangsan',
    age: 25
}, {
    name: 'lisi',
    age: 18
}, {
    name: 'wangwu',
    age: 21
}, {
    name: 'zhaoliu',
    age: 27
}, {
    name: 'fengqi',
    age: 19
}];
var res = data.every(function(val) {
	return val.age >= 18;
});
console.log(res);
//every原理
Array.prototype.every1 = function(callback) {
	var temp;
	for (var i = 0; i < this.length; i++) {
		temp = callback(this[i], i, this);
		if (!temp) return false; 
		// 只要有一个是false就retrun结果
	}
	return true; //循环结束都没有false则返回true
}
var arr = [152, 221, 31, 77, 19];
var res = arr.every1(function(val) {
	return val % 2;
});
console.log(res);
some

描述: some会遍历数组,为每一个数组的元素执行一个回调函数

​ 在回调函数中提供一个布尔表达式,如果数组中有一个元素都通过布尔表达式的测试则every的结果返回true,否则返回false

语法: arr.some(callback(element[,index[,array]]));

参数:callback(回调函数)

​ 回调参数: element 元素

​ [index] 当前值对应的索引

​ [array] 当前数组

返回值:布尔值

var arr = [1, 2, 3, 4, 5];
var res = arr.some(function(val) {
	return val > 10;
});
console.log(res);
filter

描述:filter方法用于检测数组中的每一个元素是否符合给定函数中的布尔表达式条件

​ 将所有结果为true的数组 组成一个新数组并返回

语法:arr.filter(callback);

参数:callback(回调函数)

​ 回调参数:currentValue 当前值

​ [index] 当前值对应的索引

​ [array] 当前数组

返回值:新数组,包含了所有通过测试的元素

var arr = [6, 543, 867, 543, 32, 13, 12, 11, 28, 513, 52];
//选出数组中所有的偶数
	//for循环
	var arr2 = [];
	for (var i = 0; i < arr.length; i++) {
		if (arr[i] % 2 == 0) arr2.push(arr[i]);
	}
	console.log(arr2);
	//forEach
	arr.forEach(function(elm) {
		if (elm % 2 == 0) arr2.push(elm);
	});
	console.log(arr2);
	//filter
	var result = arr.filter(function(val) {
		return val % 2;
	});
	console.log(result);
//选出age大于18的对象
	var data = [{
            name: 'zhangsan',
            age: 25
        }, {
            name: 'lisi',
            age: 15
        }, {
            name: 'wangwu',
            age: 13
        }, {
            name: 'zhaoliu',
            age: 27
        }, {
            name: 'fengqi',
            age: 11
        }];
	var result = data.filter(function(val) {
		return val.age >= 18;
        });
	console.log(result);
//filter原理分析
Array.prototype.filter1 = function(callback) {
	var result = [];
	for (var i = 0; i < this.length; i++) {
		if (callback(this[i], i, this)) {
			result.push(this[i]);
		}
	}
	return result;
}
var arr = [6, 543, 867, 543, 32, 13, 12, 11, 28, 513, 52];
var result = arr.filter1(function(val, i) {
 	return val % 2 == 0;
});
console.log(result);
forEach

描述:forEach函数会遍历数组 为每一个数组的元素执行一个回调函数

语法:arr.forEach(callback);

参数:callback(回调函数)

​ 回调参数:currentValue 当前值

​ [index] 当前值对应的索引

​ [array] 当前数组

var arr = [1, 2, 3, 4, 5];
arr.forEach(function(currentValue, index) {
	console.log(currentValue, index);
});

arr.forEach(function(val) {
	console.log(val * 5);
});
//forEach原理分析
Array.prototype.foreach = function(callback) {
	for (var i = 0; i < this.length; i++) {
		callback(this[i], i, this);
        // this关键字出现在函数中,谁调用该函数,this就指向谁
	}
}
var arr2 = [2, 3, 4, 5, 6];
arr2.foreach(function(val, i) {
	console.log(val, i);
});
map

描述:映射

​ 1、遍历数组,为数组中的每一个元素执行一个回调函数,传入每一个元素

​ 2、修改(操作)数组中的元素

​ 3、返回一个修改后的新数组

语法:arr.map(callback);

参数:callback(回调函数)

​ 回调参数:currentValue 当前值

​ [index] 当前值对应的索引

​ [array] 当前数组

返回值:新数组

//奇数乘3偶数乘4
var arr = [1, 2, 3, 4, 5];
	arr = arr.map(function(val) {
		if (val % 2) {
			return val * 3;
		} else {
			return val * 4;
		}
	});
console.log(arr);
//挑选出对象中的age并将数值放到一个新的数组
        var data = [{
            name: 'zhangsan',
            age: 25
        }, {
            name: 'lisi',
            age: 15
        }, {
            name: 'wangwu',
            age: 13
        }, {
            name: 'zhaoliu',
            age: 27
        }, {
            name: 'fengqi',
            age: 11
        }];

        var result = data.map(function(val) {
            return {
                ee: val.age
            };
        });
        console.log(result);
//map原理
Array.prototype.map1 = function(callback) {
	var result = [];
	for (var i = 0; i < this.length; i++) {
		result.push(callback(this[i], i, this));
	}
	return result;
}

var arr = [2, 654, 1, 32, 6];
var arr2 = arr.map1(function(val) {
	return val / 2;
});
console.log(arr2);
console.log(arr);
归并方法
reduce

描述:归并

语法:arr.reduce(callback[,object]);

参数:callback(function)

​ object 传入到回调中的对象

​ 回调参数:

​ prev 上一个

​ next 下一个

​ 当拥有object参数时

​ 回调参数:

​ object

​ currentValue

返回值:归并结果

注意:从数组的第一项开始遍历到数组的最后一项

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
arr.reduce(function(prev, next) {
    // 当回调设置返回值后,prev是前一次的返回值
    // 没有设置返回值为undefined
    // 第一次调用回调时,prev是数组中的一个值
    // next始终是下一个值
    console.log(prev, next);
    return 2;
});
//求和
var result = arr.reduce(function(prev, next) {
    return prev + next;
});
console.log(result);

//统计
var arr = [6, 54, 24, 325, 34, 5, 4363, 1654, 87, 6, 327];
var result = arr.reduce(function(obj, cur) {
    // console.log(obj, cur);
    cur % 2 ? obj.odd++ : obj.even++;
    obj.sum += cur;
    return obj;
}, {
    odd: 0,
    even: 0,
    sum: 0
	});
console.log(result);
//reduce原理
Array.prototype.reduce1 = function(callback, object) {
    var result; // 用于临时存放 结果对象
    if (typeof object === 'object' && object !== null) {
        for (var i = 0; i < this.length; i++) {
            result = callback(object, this[i]);
        }
        return result;
    }
}

var arr = [1, 2, 3, 4, 5, 6, 7];
var result = arr.reduce1(function(obj, current) {
    current % 2 ? obj.odd++ : obj.even++;
    return obj;
}, {
    odd: 0,
    even: 0
});

console.log(result);
reduceRight

描述:归并

语法:arr.reduceRight(callback[,object]);

参数:callback(function)

​ object 传入到回调中的对象

​ 回调参数:

​ prev 上一个

​ next 下一个

​ 当拥有object参数时

​ 回调参数:

​ object

​ currentValue

返回值:归并结果

注意:从数组的最后一项遍历到数组的第一项

数组的遍历
//遍历数组元素,通过选择for循环语句,元素的下标做循环变量
var arr1= [10,20,30,40];
for(var i = 0 ; i<arr1.length ; i++){
console.log(arr1[i]);
}

//也可以倒序、或者跳续遍历
for(var i = arr1.length-1 ; i>=0 ; i--){
console.log(arr1[i]);
}

//for.in遍历数组
var nums = [10,21,32,24];
for(var i in  nums ){
console.log(nums[i]);
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值