【面筋烧烤手册】JavaScript数组API和常见任务

文章目录

• API
• • join()：用指定的分隔符将数组每一项拼接为字符串
  • push() ：向数组的末尾添加新元素
  • pop()：删除数组的最后一项
  • shift()：删除数组的第一项
  • unshift()：向数组首位添加新元素
  • slice()：按照条件查找出其中的部分元素
  • splice()：对数组进行增删改
  • fill(): 方法能使用特定值填充数组中的一个或多个元素
  • concat()：用于连接两个或多个数组
  • indexOf()：检测当前值在数组中第一次出现的位置索引
  • lastIndexOf()：检测当前值在数组中最后一次出现的位置索引
  • every()：判断数组中每一项都是否满足条件
  • some()：判断数组中是否存在满足条件的项
  • includes()：判断一个数组是否包含一个指定的值
  • sort()：对数组的元素进行排序
  • reverse()：对数组进行倒序
  • forEach()：ES5 及以下循环遍历数组每一项
  • map()：ES6 循环遍历数组每一项
  • copyWithin():用于从数组的指定位置拷贝元素到数组的另一个指定位置中
  • find():返回匹配的值
  • findIndex():返回匹配位置的索引
  • toLocaleString()、toString():将数组转换为字符串
  • flat()、flatMap()：扁平化数组
  • entries() 、keys() 、values():遍历数组
• 任务1、实现重复字符串
• 任务2、实现Array.from给数组传的参每个+1的函数，且+1的这个函数存在另一个对象里，1这个参数也在这个对象里
• 任务3、实现降序排序
• 任务4、解释splice的增删改功能
• 任务5、实现[1,2,3,4,5]的从后向前累加，且最后结果还要+10
• 任务6、实现将数组[1,2,3,'arr',5]前2个元素复制到最后2个元素上
• 任务7、将[2,3,4]每项乘以2组成原来每项和新的项构成的数组集合，然后最终将集合每个数连接起来
• 任务8、手写扁平化（必须有：跳过空项和指定深度）
• 任务9、遍历对象中的键值对（用for of和next）
• 任务10、辨别splice slice splite
• • 作用
  • 纯函数、非纯函数
  • • 纯函数
    • 非纯函数
  • split，slice是纯函数，splice是非纯函数，
• 任务11、模拟实现Array.prototype.splice

API

join()：用指定的分隔符将数组每一项拼接为字符串

push() ：向数组的末尾添加新元素

pop()：删除数组的最后一项

shift()：删除数组的第一项

unshift()：向数组首位添加新元素

slice()：按照条件查找出其中的部分元素

splice()：对数组进行增删改

fill(): 方法能使用特定值填充数组中的一个或多个元素

concat()：用于连接两个或多个数组

indexOf()：检测当前值在数组中第一次出现的位置索引

lastIndexOf()：检测当前值在数组中最后一次出现的位置索引

every()：判断数组中每一项都是否满足条件

some()：判断数组中是否存在满足条件的项

includes()：判断一个数组是否包含一个指定的值

sort()：对数组的元素进行排序

reverse()：对数组进行倒序

forEach()：ES5 及以下循环遍历数组每一项

map()：ES6 循环遍历数组每一项

copyWithin():用于从数组的指定位置拷贝元素到数组的另一个指定位置中

find():返回匹配的值

findIndex():返回匹配位置的索引

toLocaleString()、toString():将数组转换为字符串

flat()、flatMap()：扁平化数组

entries() 、keys() 、values():遍历数组

任务1、实现重复字符串

function repeatString(string, num){
	return new Array(num + 1).join(string);
}

任务2、实现Array.from给数组传的参每个+1的函数，且+1的这个函数存在另一个对象里，1这个参数也在这个对象里

obj = {
	number : 1;
	add(value){
		return value + this.number;
	}
}
function translate(){
	return Array.from(arguments, obj.add, obj);
}
	

任务3、实现降序排序

function compare(value1, value2){
	if(value1 > value2){return -1}
	else if(value1 < value2){return 1}
	else {return 0} 
}
arr.sort(compare)

任务4、解释splice的增删改功能

• 增加：
  • 第一个参数：起始位置（在这个位置前面添加）
  • 第二个参数：0（不用删除后面的）
  • 后面的参数：要添加的值
• 删除：
  • 只需两个参数
  • 第一个参数：保留的开头
  • 第二个参数：保留的结尾
  • 其他直接删除
• 修改替换：
  • 第一个参数：从这个位置开始
  • 第二个参数：删除几个数
  • 后面的参数：添加的值

任务5、实现[1,2,3,4,5]的从后向前累加，且最后结果还要+10

var values = [1,2,3,4,5];
var sum = values.reduceRight(function(prev, cur, index, array){
return prev + cur;
},10);   //数组一开始加了一个初始值10,可以不设默认0
console.log(sum);  //25

任务6、实现将数组[1,2,3,‘arr’,5]前2个元素复制到最后2个元素上

//将数组的前两个元素复制到数组的最后两个位置
let arr = [1, 2, 3, 'arr', 5];

arr.copyWithin(3, 0);
console.log(arr);//[1,2,3,1,2]

let arr = [1, 2, 3, 'arr', 5, 9, 17];

//从索引3的位置开始粘贴
//从索引0的位置开始复制
//遇到索引3时停止复制
arr.copyWithin(3, 0, 3);
console.log(arr);//[1,2,3,1,2,3,17]

任务7、将[2,3,4]每项乘以2组成原来每项和新的项构成的数组集合，然后最终将集合每个数连接起来

// 相当于 [[2, 4], [3, 6], [4, 8]].flat()
[2, 3, 4].flatMap((x) => [x, x * 2])
// [2, 4, 3, 6, 4, 8]
//先map再flat

任务8、手写扁平化（必须有：跳过空项和指定深度）

let arr = [1, [2, 3, [4, 5, [12, 3, "zs"], 7, [8, 9, [10, 11, [1, 2, [3, 4]]]]]]];

//万能的类型检测方法
const checkType = (arr) => {
	return Object.prototype.toString.call(arr).slice(8, -1);
}
//自定义flat方法，注意：不可以使用箭头函数，使用后内部的this会指向window
Array.prototype.myFlat = function(num) {
	//判断第一层数组的类型
	let type = checkType(this);
	//创建一个新数组，用于保存拆分后的数组
	let result = [];
	//若当前对象非数组则返回undefined
	if (!Object.is(type, "Array")) {
		return;
	}
	//遍历所有子元素并判断类型，若为数组则继续递归，若不为数组则直接加入新数组，num传了则去掉几个维度
	this.forEach((item) => {
		let cellType = checkType(item);
		if (Object.is(cellType, "Array")) {
			//形参num，表示当前需要拆分多少层数组，传入Infinity则将多维直接降为一维
			num--;
			if (num < 0) {
				let newArr = result.push(item);
				return newArr;
			}
			//使用三点运算符解构，递归函数返回的数组，并加入新数组
			result.push(...item.myFlat(num));
		} else {
			result.push(item);
		}
	})
	return result;
}
console.time();

console.log(arr.flat(Infinity)); //[1, 2, 3, 4, 5, 12, 3, "zs", 7, 8, 9, 10, 11, 1, 2, 3, 4];

console.log(arr.myFlat(Infinity)); //[1, 2, 3, 4, 5, 12, 3, "zs", 7, 8, 9, 10, 11, 1, 2, 3, 4];

任务9、遍历对象中的键值对（用for of和next）

for (let [index, elem] of ['a', 'b'].entries()) {  
	console.log(index, elem);  
}  

let letter = ['a', 'b', 'c'];  
let entries = letter.entries();  
console.log(entries.next().value); // [0, 'a']  
console.log(entries.next().value); // [1, 'b']  
console.log(entries.next().value); // [2, 'c'] 

任务10、辨别splice slice splite

作用

• slice：截取，返回新的数组
  array.slice(start, end)
  • start：
    可选。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。
  • end：
    可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。

var fruits = [“Banana”, “Orange”, “Lemon”, “Apple”, “Mango”];
var myBest = fruits.slice(1,4);
console.log(myBest); // 结果为 [ “Orange”, “Lemon”, “Apple”]

• splice：增删改，改变原来数组
  array.splice(index,howmany,item1,…,itemX)
  • index 必需。规定从何处添加/删除元素。该参数是开始插入和（或）删除的数组元素的下标，必须是数字。
  • howmany 必需。规定应该删除多少元素。必须是数字，但可以是 “0”。如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。
  • item1, …, itemX 可选。要添加到数组的新元素
• split：分割字符串，不会改变原字符串
  string.split(separator,limit)
  • separator 可选。字符串或正则表达式，从该参数指定的地方分割 string Object。
  • imit 可选。该参数可指定返回的数组的最大长度。如果设置了该参数，返回的子串不会多于这个参数指定的数组。如果没有设置该参数，整个字符串都会被分割，不考虑它的长度。

var str=“How are you doing today ?”;
var n=str.split(" ");
console.log(n); // [“How”, “are”, “you”, “doing”, “today”, “?”]

纯函数、非纯函数

纯函数

纯函数对于相同的参数总是返回相同的结果。它不依赖程序执行过程中任何状态和数据的变化。它仅仅依赖于输入的参数。它们没有任何副作用，如网络或数据库调用，也不改变任何传递给它们的变量参数。

例子

function getSquare(x) {
   return x * x;
}

非纯函数

任何改变它的参数的内部状态，或者外部变量的值的函数，都是非纯函数。它们可能有副作用，如网络或数据库的调用，并且可能改变传递给它们的变量的值。

例子

function getSquare(items) {
  var len = items.length;
  for (var i = 0; i < len; i++) {
    items[i] = items[i] * items[i];
  }
  return items;
}

Math.random()是非纯函数；它会改变Math对象的内部状态，这样你才能成功获得不同的值。

split，slice是纯函数，splice是非纯函数，

任务11、模拟实现Array.prototype.splice

参考链接

来源：

https://mp.weixin.qq.com/s/DGIrDf2Yz_l62IzTspaDZg