ES6学习笔记四(数组)

数组

1、Array.from()

//将类数组对象和可遍历的对象转换为数组进行使用。

//类数组对象
const arrLike = {
  '0': 'apple',
  '1': 'banana',
  '2': 'orange',
  length: 3
};
let arr = Array.from(arrLike);
console.log(arr)  // ['apple', 'banana', 'orange']

//可遍历的对象
Array.from('china'); // [ "c", "h", "i", "n", "a" ]

const set = new Set(['a', 'b', 'c', 'd']);
Array.from(set);// [ "a", "b", "c", "d" ]

const map = new Map([[1, 2], [2, 4], [4, 8]]);
Array.from(map);  // [[1, 2], [2, 4], [4, 8]]


//回调函数（二者等价）
let arr = Array.from([1, 2, 3], function (x) {
  return 2 * x;
});
let arr = Array.from([1, 2, 3]).map(function (x) {
  return 2 * x;
});
//arr: [2, 4, 6]


//对回调函数中 this 的指向进行绑定
let obj = {
  handle: function(n){
    return n + 2
  }
}

Array.from([1, 2, 3, 4, 5], function (x){
  return this.handle(x)//当前this指向obj
}, obj)// [3, 4, 5, 6, 7]

/*
 * 我们可以将被处理的数据和处理对象分离，将各种不同的处理数据的方法
 * 封装到不同的的对象中去，处理方法采用相同的名字。只要控制好注入的对象即可，方法名都一致
 */




//数组去重
function combine(){ 
  let arr = [].concat.apply([], arguments);  //没有去重复的新数组 
  return Array.from(new Set(arr));
} 

var m = [1, 2, 2], n = [2,3,3]; 
console.log(combine(m,n));  //[1,2,3]
           

2、Array.of()

//创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型

Array.of(7);          // [7] 
Array.of(1, 2, 3);    // [1, 2, 3]
Array.of(undefined)   // [undefined]
Array.of(3).length    // 1

//也可以自己定义，一个方法实现上述情况
if (!Array.of) {
  Array.of = function() {
    return Array.prototype.slice.call(arguments);
  };
}
           

3、includes ()

//用于查找一个数组中是否包含一个指定的元素

let arr = ['china', 'USA', 'CHN'];
console.log(arr.includes('CHN'));//true

/*
 * 第二个参数为负数时(是从arr.length+当前第二个参数的位置进行查找，并且是升序)
 * 如果算出来的值小于0，则整个数组进行搜寻
 */
let arr = ['china', 'USA', 'CHN'];
console.log(arr.includes('china',-1));//false (从‘CHN’开始查)


//当没有参数时，includes() 方法会把第一个参数置成 undefined(不是字符串 “undefined”)
[undefined].includes();		// true
['undefined'].includes();	// false


//可以判断数组里面是否为空，包含NaN
[,,,,,].includes(undefined)           // true
[null, undefined, NaN].includes(NaN)]   // true

           

4、find () 和 findIndex ()

//find 方法返回的是数组中符合条件的第一个值
//findIndex 方法则返回符合条件的第一个索引的位置。

//一个参数
let arr = [1, 6, 3, 4, 5]
let target = arr.find(function(item) {
  return item % 2 === 0
})
console.log(target)   // 6

let target = arr.findIndex(function(item) {
  return item % 2 === 0
})
console.log(target)   // 1

//两个参数
const obj={
		handle:function(item){
			return item % 2 === 0
				}
			}
		let arr = [1, 6, 3, 4, 5]
        let target = arr.find(function(item) {
            return this.handle(item)
       },obj)
       console.log(target)   // 6
           

5、copyWithin()

//实现数组内元素的复制和替换，不会改变原数组的长度

/*
 * 先说明 正序(参数为正)判断条件为下标 倒序(参数为负)判断条件为位置 
 * 第二个参数是包含本身，第三个参数是不包含本身
 */



//第一个参数为0或为空时,全部复制
let arr = [1, 2, 3, 4, 5];
arr.copyWithin(0);      // [1, 2, 3, 4, 5]
arr.copyWithin();       // [1, 2, 3, 4, 5]
//第一个参数不为0或者参数大于数组长度
[1, 2, 3, 4, 5].copyWithin(2);      // [1, 2, 1, 2, 3](先将数组全部复制下来，然后找下标为2(包含本身))
[1, 2, 3, 4, 5].copyWithin(6);      // [1, 2, 3, 4, 5](原数组)
//第一个参数为负数(位置)
var arr = [1, 2, 3, 4, 5];
arr.copyWithin(-2);     // [1, 2, 3, 1, 2](倒序，数2个位置为起始位(包括本身)替换)






var arr = [1, 2, 3, 4, 5];
//二个参数
let arr = [1, 2, 3, 4, 5];
arr.copyWithin(0, 3); // [4,5,3,4,5]   
	/* 复制
	 * 正序
	 * 第二个参数是3，下标为3开始复制(包括本身)
	 * 因为没有第三个参数，所以默认到结尾，即[4,5]
	 * 
	 * 替换
	 * 第一个参数为0，则在数组下标为0的位置开始替换(将复制的数组替换完即可)
	 * 即[4,5,3,4,5]
	 */
arr.copyWithin(0,-3);// [3, 4, 5, 4, 5]
    /* 复制
	 * 倒序
	 * 第二个参数的绝对值是3，倒序数3个位置(包括本身)
	 * 因为没有第三个参数，所以默认到结尾，即[3,4,5]
	 * 
	 * 替换
	 * 第一个参数为0，则在数组下标为0的位置开始替换(将复制的数组替换完即可)
	 * 即[3,4,5,4,5]
	 */





//三个参数(第三个参数是开始复制元素的结束位置，不包括这个位置)
arr.copyWithin(1, 3, 4);     // [1, 4, 3, 4, 5] 根据规则复制4,在下标为1的位置进行替换
//如果只有第三个参数为负时，则返回原数组
arr.copyWithin(1, 3, -4);     // [1, 2, 3, 4, 5]
//后俩个参数为负数时，倒序
arr.copyWithin(0, -3, -1);  //[3,4,3,4,5] 根据规则复制[3,4]
arr.copyWithin(0, -2, -1);    // [4,,2,3,4,5] 根据规则复制[4]
           

6、fill()

//fill()可以替换一个指定的值,copyWithin 则是复制数组中的值去替换指定位置的值，不能指定值。


//快速初始化一个数组，并填充一个值。
let arr = Array(5).fill(1)
console.log(arr)    // [1, 1, 1, 1, 1]



//两个参数
[1, 2, 3].fill(0, 0);      // [0, 0, 0] 从第二个参数的指定位置(下标)进行填充
[1, 2, 3].fill(0, 1);      // [1, 0, 0] 从第二个参数的指定位置(下标)进行填充
[1, 2, 3].fill(0, -1);     // [1, 2, 0] 负数，倒序，长度1开始填充
[1, 2, 3].fill(0, -3);     // [0, 0, 0] 负数等于数组长度，全部填充




//三个参数
/*
 * 先说明 正序(参数为正)判断条件为下标 倒序(参数为负)判断条件为位置 
 * 第二个参数是包含本身，第三个参数是不包含本身
 */

let arr=['a', 'b', 'c']
arr.fill(4, 1, 2);//["a", 4, "c"]
arr.fill(4, -3, -2);//[4, "b", "c"]
arr.fill(4, -3, 1);//[4, "b", "c"]
arr.fill(4, -2, 1); //["a", "b", "c"] 后两个参数都指向b，一个包含一个不包含，故不替换


//填充的内容为对象
var arr = Array(3).fill({})  // [{}, {}, {}]
//只要填充一个位置，其他位置就已经被添加了
arr[1].name = 'china';       // [{name: 'china'}, {name: 'china'}, {name: 'china'}] 
           

7、Array.isArray()

//判断 JS 对象，如果值是 Array

// 下面的函数调用都返回 true
Array.isArray([]);
Array.isArray([10]);
Array.isArray(new Array());
Array.isArray(new Array('a', 'b', 'c'))
// 鲜为人知的事实：其实 Array.prototype 也是一个数组。
Array.isArray(Array.prototype); 

// 下面的函数调用都返回 false
Array.isArray();
Array.isArray({});
Array.isArray(null);
Array.isArray(undefined);
Array.isArray(17);
Array.isArray('Array');
Array.isArray(true);
Array.isArray(false);
Array.isArray(new Uint8Array(32))
Array.isArray({ __proto__: Array.prototype });
           

8、flat()

//将一个嵌套多层的数组进行降维操作

var arr = [1, 2, [3, 4, [5, 6]]];
arr.flat();      // [1, 2, 3, 4, [5, 6]]
//参数2表示降维度为2
arr.flat(2);     // [1, 2, 3, 4, 5, 6]

//使用 Infinity，可展开任意深度的嵌套数组
var arr = [1, 2, [3, 4, [5, 6, [7, 8]]]];
arr.flat(Infinity);  // [1, 2, 3, 4, 5, 6, 7, 8]


//去除空项
var arr = [1, 2, , 4, 5];
arr.flat();      // [1, 2, 4, 5]
           

欢迎访问我的个人博客