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)   // 6let 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]

欢迎访问我的个人博客

ES6学习笔记四(数组)相关推荐

JS学习笔记 (四) 数组进阶
1.基本知识 1.数组是值的有序集合.每个值叫做一个元素,而每个元素在数组中的位置称为索引,以数字表示,以0开始. 2.数组是无类型的.数组元素可以是任意类型,并且同一个数组中的不同元素也可能有不同的 ...
Es6学习笔记(7)----数组的扩展
参考书<ECMAScript 6入门> http://es6.ruanyifeng.com/ 数组的扩展 1.扩展运算符:可以将数组转化成逗号隔离的单个参数 ...[1,2,3] //控制 ...
ES6学习笔记(四)
数值的扩展和对象的扩展 ES6提供了二进制和八进制数值的新的写法,粉笔用前缀0b和0o表示 ES6在Number对象上新提供了Number.isFinite() 和Number.isNaN()两个方法 ...
ES6学习笔记二arrow functions 箭头函数、template string、destructuring
接着上一篇的说. arrow functions 箭头函数 => 更便捷的函数声明 document.getElementById("click_1").onclick = ...
es6学习笔记-字符串的扩展_v1.0_byKL
es6学习笔记-字符串的扩展_v1.0 字符的Unicode表示法 JavaScript 允许使用uxxxx的形式表示一个字符,但在 ES6 之前,单个码点仅支持u0000到uFFFF,超出该范围的必 ...
ES6学习笔记（五）：轻松了解ES6的内置扩展对象
前面分享了四篇有关ES6相关的技术,如想了解更多,可以查看以下连接 <ES6学习笔记(一):轻松搞懂面向对象编程.类和对象> <ES6学习笔记(二):教你玩转类的继承和类的对象> ...
ES6学习笔记04：Set与Map
ES6学习笔记04:Set与Map JS原有两种数据结构:Array与Object,ES6新增两种数据结构:Set与Map 一.Set数据结构 Set类似于数组,但是成员值不允许重复,因此主要用于数据 ...
ES6学习笔记03：变量的解构赋值
ES6学习笔记03:变量的解构赋值如果想从复杂数据结构(数组.对象)中获取某一个数据,可能需要大量的遍历操作才能完成.通过解构赋值,这一过程可以得到简化. 1.字符串的解构赋值其实,Python也 ...
JavaScript学习笔记(四)(DOM)
JavaScript学习笔记(四) DOM 一.DOM概述二.元素对象 2.1 获取方式 (1).通过ID获取一个元素对象,如果没有返回null (2).通过`标签名`获取一组元素对象,,如果没有返 ...
Polyworks脚本开发学习笔记(四)-利用FILE IMPORT进行数据导入及对齐
Polyworks脚本开发学习笔记(四)-利用FILE IMPORT进行数据导入及对齐导入参考及数据 FILE IMPORT_REFERENCE导入参考的CAD文件如igs格式括号内参数分别为(导 ...

ES6学习笔记四(数组)

数组

ES6学习笔记四(数组)相关推荐

最新文章

热门文章