JavaScript读书笔记(一数组的总结)

2022-09-23 13:51:43

##

数组的总结

一、数组的介绍

javascript中数据集合有:数组、对象、Map集合、Set集合,数组中可以包括任意数据类型。

二、创建数组方式

  • 1、使用字面量创建

    let arry = ['哈哈', '你好', 1, 2, {'name': '哈哈'}];

  • 2、使用类的实例创建

    let array = new Array('哈哈', 1, 24, {'name': '男', 'gender': '男'});

三、修改数组的方式

  • 1、使用push()尾部追加数组

    可以一次追加一个也可以一次性追加多个,使用push后的返回值是数组的长度

    let ary = [1,2,3,4];
ary.push(21, 12);

  • 2、使用unshift()头部追加数组

    跟push一样的可以一次追加多个元素,返回的值是当前数组的长度

    ary.unshift(12,12);

  • 3、使用pop()删除数组最后一个

  • 4、使用shift()删除数组第一个元素

  • 5、使用splice()删除元素、添加元素

    • 当传递参数是一个参数的时候(默认第二个参数为数组长度)

    • 当传递是两个参数的时候是删除元素(第一个参数表示从什么下标开始, 删除数组的元素个数),返回值是被删除的元素

      let ary = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let result = ary.splice(2, 4);
// result = [3, 4, 5, 6]
// ary = [1, 2, 7, 8, 9];

    • 当传递的参数是大于等于三个的时候(返回值跟上面的一样)

      var ary = [1, 2, 3, 4, 5, 6, 7, 8, 9];
ary.splice(1, 1, '哈哈'); // 相当于直接替换一个,从第一个元素开始到第一个元素,
ary.splice(1, 2, '哈哈', '哈哈', '呵呵'); // 从第一个个元素开始删除两个元素,用后面的几个元素来填充
ary.splice(1, 2, ['哈哈', '嘻嘻', '呵呵']) // 第三个参数可以是集合

  • 6、slice()提取数据,不修改原来数据

    var ary = [1, 2, 3, 4, 5, 6, 7, 8, 9];
ary.slice(1,3); // 返回2, 3

  • 7、delete删除数组

    删除数组,但是数组长度不变,只是被删除的位置是empty

    let ary = [1, 2, 3, 4];
delete ary[1];
console.log(ary);

  • 8、总结:

    • 1.如果要修改数组的时候劲量使用pop或push这样仅仅是改变数组最后一位
    • 2.shift、unshift、splice会改动数组的位置,性能要低点

四、数组遍历

  • 1、传统的for遍历

  • 2、ES6中for..of遍历

    let ary3 = ['哈哈', '嘻嘻', '呵呵'];
// 直接使用
for(let item of ary3){
	console.log(item);
}
// 带序列号的
for(let [index, item] of ary3.entries()){
	console.log(index, item);
}
// 使用keys
for (let index of ary3.keys()){
	console.log(index, ary3[index]);
}

// 使用values()
for(let k of ary3.values()){
	console.log(k)
}

  • 3、使用forEach()遍历,无返回值

    // forEach定义:forEach(callbackfn: (value: T, index: number, array: T[]) => void, thisArg?: any): void;
ary3.forEach((item, index, ary) => {
	console.log(item, index, ary)
});

五、映射数组

  • 1、map()返回新的数组

    // map定义: map<U>(callbackfn: (value: T, index: number, array: T[]) => U, thisArg?: any): U[];
let ary4 = ary3.map((item, index, ary) => {

})

六、测试数组

  • 1、some()一个返回true就返回true

    some定义:some(callbackfn: (value: T, index: number, array: T[]) => boolean, thisArg?: any): boolean;

  • 2、every()一个返回false就返回false

    ``every定义: every(callbackfn: (value: T, index: number, array: T[]) => boolean, thisArg?: any): boolean;`

  • 3、Array.isArray(数组)判断是否为数组

七、数组查找

  • 1、find()查找第一个返回的结果

    let ary3 = ['哈哈', '嘻嘻', '呵呵'];
let res = ary3.find((item, index, ary) => {
	console.log(item, index, ary)
	return item == '哈哈';
});

console.log(res)

  • 2、findIndex()返回第一个序列号

    let res2 = ary3.findIndex((item, index, ary) => {
	return item == '嘻嘻';
});

console.log(res2);

  • 3、indexOf(查找的元素, 开始查找位置)查找返回序列号,如果没有查找到就返回-1

    // indexOf定义方式: indexOf(searchElement: T, fromIndex?: number): number;
ary.indexOf(1, 2)

  • 4、lastIndexOf()与indexOf()一样的

  • 5、filter()过来数组,返回的一个新数组

    let ary4 = [12, 13, 30, 1, 4, 6, 2, 7, 9, 10];

let res4 = ary4.sort((a, b) => a - b);
console.log(res4);

let res5 = ary4.filter((item, index ,ary) => {
	return item > 5;
});

console.log(res5);

  • 6、includes()查找一个元素是否在数组中

    ary4.includes(查找的元素, 起始位置[可以不写]);

八、数组的排序

  • 1、sort()排序

    // 源码定义方式:sort(compareFn?: (a: T, b: T) => number): this

九、合计数组

  • 1、reducer()的使用

    /**
 * reduce(函数, 初始化值)
 * 其中函数的参数(计算后的结果, 当前值, 当前值的序列号, 数组)
 */
let result = [1, 2, 3, 4, 5].reduce((total, currentVal, currentIndex, ary) => {
	console.log(total)
	return total + currentVal
}, 0)
console.log(result)

十、数组的转换

  • 1、Array.from()

    可以将类数组、可迭代对象转换为数组

    Array.from('hello')
// ['h', 'e', 'l', 'l', 'o']

let namesSet = new Set(['a', 'b'])
Array.from(namesSet) // ['a', 'b']

  • 2、...转换为数组

    [...'hello']
["h", "e", "l", "l", "o"]

  • 3、Array.of()方法用于将一组值，转换为数组

    Array.of(3, 11, 8) // [3,11,8]

  • 4、join()数组转换为字符串

    [...'hello'].join('')

  • 5、split()是字符的方法,转换为数组

  • 6、toString()只是join()的简化版(用,连接数组)

十一、数组的拷贝

  • 1、concat()方法不改变原来数组,返回一个新数组

    • 1.如果concat()里面不传递参数表示数组的拷贝
    • 2.如果concat()里面含有参数,或者集合都是合并到新数组中

  • 2.copyWithin()数组内部的复制,直接修改了原数组,返回当前数组

    /**
 * Array.prototype.copyWithin(target, start = 0, end = this.length)
 * target: 是必须的,表示要替换的位置
 * start: 表示数组内从哪里开始取值
 * end: 表示数组内取值结束位置
 * 如果是负数就用数组长度 + 负数值
 * */
let ary5 = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

// 把第八个元素拷贝替换到第二个位置上
ary5.copyWithin(2, 8, 9);
console.log(ary5);
// 把从第六位开始到最后拷贝到第二位,
ary5.copyWithin(2, 5);
console.log(ary5);

十二、网上比较常用的方法

  • 1、数组最大值

    const arrMax = (arr) => Math.max.apply(null, arr);

  • 2、数组最小值

    const arrMin = (arr) => Math.min.apply(null, arr);

  • 3、数组随机排序

    const shuffle1 = (target) => {
	function randomsort(a, b) {
		return Math.random() > .5 ? -1 : 1;
		//用Math.random()函数生成0~1之间的随机数与0.5比较，返回-1或1  
	}
	return target.sort(randomsort);
};

  • 4、数组中随机取出一个值

    const randomItem = (ary) => {
	return ary[Math.ceil(Math.random() * ary.length)];
}

  • 5、判断数组中是否有重复的值

    const isRepeat: function(arr) { //arr是否有重复元素
	var hash = {};
	for(var i of arr) {
		if(hash[arr[i]]) return true;
		hash[arr[i]] = true;
	}
	return false;
}

  • 6、数组去重(根据对象key不能重复)

    const unique = (ary) => {
	var result = [],
		hash = {};
	for(var i = 0, elem;
		(elem = arr[i]) != null; i++) {
		if(!hash[elem]) {
			result.push(elem);
			hash[elem] = true;
		}
	}
	return result;
};

  • 7、使用ES6新方法去重

    const unique = (ary) => [...new Set(ary)];

十三、扩展数组原型(不建议直接扩展)

  • 1、查看数组本来的方法属性console.dir(Array.prototype)
    JavaScript读书笔记(一数组的总结)

  • 2、自己重写数组的forEach方法

    Array.prototype.myForEach = function (fn) {
	for (let [index, item] of this.entries()) {
		fn(item, index, this);
	}
};
[1, 2, 3, 5].myForEach((item, index ,ary) => {
	console.log(item, index, ary);
})

  • 3、自己重写map方法

    Array.prototype.myMap = function (fn) {
	let result = [];
	for (let [index, item] of this.entries()) {
		result.push(fn(item, index, this));
	}
	return result;
};
let result1 = [1,2,3,4].myMap((item, index, ary) => {
	return item * 2;
});

console.log(result1);

  • 4、自己重写reduce方法

    Array.prototype.myReduce = function(fn, initVal) {
	let total;
	if (initVal != undefined) {
		total = initVal;
	} else {
		total = this[0];
	}
	if (initVal === undefined) {
		for (let i = 1; i < this.length; i++) {
			total = fn(total, this[i], i, this);
		}
	} else {
		for (let [index, val] of this.entries()) {
			total = fn(total, val, index, this);
		}
	}
	return total;
};

let result1 = [1, 2, 3, 4, 5].myReduce((total, currentVal) => {
	return total + currentVal;
});

console.log(result1);

  • 5、判断一个数组是否包含在另外一个数组里面

    /**
 * 判断一个数组元素是不是在数组里面
 * @param obj
 * @returns {boolean}
 */
Array.prototype.contains = function(obj) {
	var i = this.length;
	while(i--) {
		if(this[i] === obj) {
			return true;
		}
	}
	return false;
};

  • 6、如果自己喜欢可以把自己想要的方法放到原型上

十四、查看博主更多文章

上一篇：03-编译小Parser


下一篇：2021-10-26