JavaScript总结之内置对象(数组)

1、数组对象

1.1、数组对象的创建

创建数组对象的两种方式

字面量方式
new Array()

1.2、检测是否为数组

instanceof 运算符，可以判断一个对象是否属于某种类型
Array.isArray() 用于判断一个对象是否为数组，isArray() 是 HTML5 中提供的方法

var arr = [1, 23];
var obj = {
    
    };
console.log(arr instanceof Array); // true
console.log(obj instanceof Array); // false
console.log(Array.isArray(arr));   // true
console.log(Array.isArray(obj));   // false

1.3、添加删除数组元素

方法名	说明	返回值
push(参数1…)	末尾添加一个或多个元素，注意修改原数组	并返回新的长度
pop()	删除数组最后一个元素	返回它删除的元素的值
unshift(参数1…)	向数组的开头添加一个或更多元素，注意修改原数组	并返回新的长度
shift()	删除数组的第一个元素，数组长度减1，无参数，修改原数组	并返回第一个元素

// 1.push() 在我们数组的末尾，添加一个或者多个数组元素 push 推
	var arr = [1, 2, 3];
	arr.push(4, '不三');
	
	console.log(arr); // [1, 2, 3, 4, '不三']
	
	console.log(arr.push(4, '不三')); //返回新数组长度  7
	
	console.log(arr); //[1, 2, 3, 4, '不三', 4, '不三']
	
	
	// 2. unshift 在我们数组的开头 添加一个或者多个数组元素
	
	arr.unshift('red');  // ['red', 1, 2, 3, 4, '不三', 4, '不三']
	
	console.log(arr);
	
	// pop() 它可以删除数组的最后一个元素，一次只能删除一个元素
	
	console.log(arr.pop())  返回删除的元素 不三
	
	console.log(arr) //['red', 1, 2, 3, 4, '不三', 4]
	
	// shift() 它删除数组的第一个元素,一次只能删除一个元素
	
	console.log(arr.shift())   // 返回删除的元素1
	
	console.log(arr)  //[1, 2, 3, 4, '不三', 4]

1.4、数组排序

方法名	说明	是否修改原数组
reverse()	颠倒数组中元素的顺序，无参数	该方法会改变原来的数组，返回新数组
sort()	对数组的元素进行排序	该方法会改变原来的数组，返回新数组

const array1 = ['one', 'two', 'three'];
const reversed = array1.reverse();
console.log('reversed:', reversed);  //reversed ['three', 'two', 'one']
console.log(array1) // ['three', 'two', 'one']

// 参数 compareFn 可选用来指定按某种顺序进行排列的函数。如果省略，元素按照转换为的字符串的各个字符的 Unicode 位点进行排序。
//  a第一个用于比较的元素。
// b 第二个用于比较的元素
//情况1 没有参数
const numbers = [4, 2, 5, 1, 100]; 
numbers.sort();
console.log(numbers); //[1, 100, 2, 4, 5]
//情况二 带参数
const numbers = [4, 2, 5, 1, 100]; 
numbers.sort(function (a, b) {
    
    
	return a - b;
});
console.log(numbers); // [1, 2, 4, 5, 100]

1.5、 find()

参数
callbackFn 在数组每一项上执行的函数，接收 3 个参数：

element 当前遍历到的元素。
index 当前遍历到的索引。可选
array 数组本身。可选

方法返回值是数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。

const array = [5, 4, 3, 2, 1];
const found = array.find(element => element > 10);
console.log(found); //undefined

const array1 = [5, 12, 8, 130, 44];
const found1 = array1.find(element => element > 10);
console.log(found1); // 12

1.6、findIndex()

参数
callback 针对数组中的每个元素，都会执行该回调函数，执行时会自动传入下面三个参数：

element当前元素。
index当前元素的索引。可选
array调用findIndex的数组。可选

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

const array1 = [5, 12, 8, 130, 44];
const isLargeNumber = (element) => element > 13;
console.log(array1.findIndex(isLargeNumber)); // 3

1.7、findLast()

参数：
callbackFn 数组中测试元素的函数。函数在被调用时会传递以下参数：

elemen t当前遍历到的元素。
index 当前遍历到的元素的索引（位置）。可选
array 调用 findLast() 的数组本身。可选

方法返回数组中满足提供的测试函数条件的最后一个元素的值。如果没有找到对应元素，则返回 undefined。

const array1 = [5, 12, 50, 130, 44];
const found = array1.findLast((element) => element > 45);
console.log(found); //130

1.8、findLastIndex()

参数
callback针对数组中的每个元素，都会执行该回调函数，执行时会自动传入下面三个参数：

element当前元素。
index当前元素的索引。
array调用findIndex的数组。

** 方法返回数组中满足提供的测试函数条件的最后一个元素的索引。若没有找到对应元素，则返回 -1。**

const array1 = [5, 12, 8, 130, 44];
const isLargeNumber = (element) => element > 13;
console.log(array1.findIndex(isLargeNumber)); //3

const array = [1,2,3,4,5];
const isLargeNumber1 = (element) => element > 13;
console.log(array.findIndex(isLargeNumber1)); //-1

1.9、flat()

参数

depth 可选 指定要提取嵌套数组的结构深度，默认值为 1。

方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

const arr1 = [0, 1, 2, [3, 4]];
console.log(arr1.flat()); // [0, 1, 2, 3, 4]

const arr2 = [0, 1, 2, [[[3, 4]]]];
console.log(arr2.flat(3));  // [0, 1, 2, 3, 4]
//方法会移除数组中的空项
var arr4 = [1, 2, , 4, 5];
console.log(arr4.flat();)  // [1, 2, 4, 5]

2.0、flatMap()

参数：
callback可以生成一个新数组中的元素的函数，可以传入三个参数：

currentValue 当前正在数组中处理的元素
index 可选。数组中正在处理的当前元素的索引。
array 可选。被调用的 map 数组

方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。它与 map 连着深度值为 1 的 flat 几乎相同，但 flatMap 通常在合并成一种方法的效率稍微高一些。

const arr1 = [1, 2, [3], [4, 5], 6, []];
const flattened = arr1.flatMap(num => num);
console.log(flattened); //  Array [1, 2, 3, 4, 5, 6]

2.1、forEach()

callbackFn为数组中每个元素执行的函数。函数调用时带有以下参数：

element 数组中正在处理的当前元素。
index 数组中正在处理的当前元素的索引。
array forEach() 方法正在操作的数组。

方法对数组的每个元素执行一次给定的函数。

const array1 = ['a', 'b', 'c'];
array1.forEach(element => console.log(element)); // a b c

2.2、map()

参数：

callbackFn生成新数组元素的函数，使用三个参数：

currentValue 数组中正在处理的当前元素。
index 数组中正在处理的当前元素的索引。
array 方法调用的数组。

方法创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。

const array1 = [1, 4, 9, 16];
const map1 = array1.map(x => x * 2);
console.log(map1);//  Array [2, 8, 18, 32]

2.3、slice()

参数

begin 可选 提取起始处的索引（从 0
开始），从该索引开始提取原数组元素。如果该参数为负数，则表示从原数组中的倒数第几个元素开始提取，
end 可选 提取终止处的索引（从 0 开始），在该索引处结束提取原数组元素。slice 会提取原数组中索引从 begin 到end 的所有元素（包含 begin，但不包含 end）

方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。原始数组不会被改变。

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
console.log(animals.slice(2));// Array ["camel", "duck", "elephant"]
console.log(animals.slice(2, 4));// Array ["camel", "duck"]
console.log(animals.slice(1, 5)); //  Array ["bison", "camel", "duck", "elephant"]
console.log(animals.slice(-2)); //Array ["duck", "elephant"]
console.log(animals.slice(2, -1));// Array ["camel", "duck"]
console.log(animals.slice()); //Array ["ant", "bison", "camel", "duck", "elephant"]

2.4、splice()

参数：

start 指定修改的开始位置（从 0 计数）。如果超出了数组的长度，则从数组末尾开始添加内容；如果是负值，则表示从数组末位开始的第几位（从 -1 计数，这意味着 -n 是倒数第 n 个元素并且等价于 array.length-n）；如果负数的绝对值大于数组的长度，则表示开始位置为第 0 位。
deleteCount 可选 整数，表示要移除的数组元素的个数。如果 deleteCount 大于 start之后的元素的总数，则从 start 后面的元素都将被删除（含第 start 位）。如果 deleteCount被省略了，或者它的值大于等于array.length -start(也就是说，如果它大于或者等于start之后的所有元素的数量)，那么start之后数组的所有元素都会被删除。如果deleteCount 是 0 或者负数，则不移除元素。这种情况下，至少应添加一个新元素
item1, item2, … 可选 要添加进数组的元素，从start 位置开始。如果不指定，则 splice() 将只删除数组元素。

方法通过删除或替换现有元素或者原地添加新的元素来修改数组，并以数组形式返回被修改的内容。此方法会改变原数组。

const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
console.log(months);// Array ["Jan", "Feb", "March", "April", "June"]
months.splice(4, 1, 'May'); //返回被修改的内容
console.log(months);// Array ["Jan", "Feb", "March", "April", "May"]
months.splice(1);
console.log(months) //['Jan']

2.5、toString()

方法返回一个字符串，表示指定的数组及其元素。

const array1 = [1, 2, 'a', '1a'];
console.log(array1.toString()); //返回字符串

2.6、includes()

参数：

searchElement 需要查找的元素值。
fromIndex 可选 从fromIndex 索引处开始查找 searchElement。如果为负值，则按升序从array.length + fromIndex 的索引开始搜（即使从末尾开始往前跳 fromIndex的绝对值个索引，然后往后搜寻）。默认为 0。

方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回 false。
注意: 使用 includes() 比较字符串和字符时是区分大小写的。

const array1 = [1, 2, 3];
console.log(array1.includes(3));// true
const pets = ['cat', 'dog', 'bat'];
console.log(pets.includes('cat'));// true
console.log(pets.includes('at'));//false