摘要:检测数组或者检测对象的原型链是否指向构造函数的对象或者终极大招注意不可以用此方法检查常用方法合并多个数组,返回合并后的新数组,原数组没有变化。返回值是由被删除的元素组成的一个数组。
定义数组
const array = [1, 2, 3]; 或者 const array = new Array(); array[0] = "1"; 建议尽量使用第一种形式定义数组,采用new的形式在大量的数组定义时,会比较耗时。 new关键字的使用,除了在需要实例化一个对象,或罕见的需要延时加载数据的情况外,你基本上不需要使用new关键字。在Javascript里分配大量的new变量地址是一项很慢的操作,为了效率起见,你应该始终使用对象符号。
在另外一个搜索结果中,有提到这样的一个说法:“很简单,Array()是一个对象,[]是一个数据原型。使用new Array()系统每次都会新生成一个对象(浏览器每生成一个对象都会耗费资源去构造他的属性和方法),他的子集是[];个人推荐使用[],效率高。浏览器对于CPU很吃紧,所以很多时候要有技巧。比如数字转换成字符只要a=a+"";就可以了,比用String效率高了很多。
检测数组Array.isArray([]); // true Array.isArray(undefined); // false; 或者 array instanceof Array; // true 检测对象的原型链是否指向构造函数的prototype对象 或者 array.constructor === Array; // true 终极大招: if (!Array.isArray) { Array.isArray = function(arg) { return Object.prototype.toString.call(arg) === "[object Array]"; }; } 注意:typeof []; // "object" 不可以用此方法检查!!!常用方法 1. array.concat(array1, array2,...arrayN);
const array = [1,2].concat(["a", "b"], ["name"]); // [1, 2, "a", "b", "name"]2. array.every(callback[, thisArg]);
// callback定义如下: element:当前元素值;index:当前元素下标; array:当前数组 function callback(element, index, array) { // callback函数必须返回true或者false告知every是否通过测试 return true || false; }3. array.filter(callback[, thisArg]);
// callback定义如下,三个参数: element:当前元素值;index:当前元素下标; array:当前数组 function callback(element, index, array) { // callback函数必须返回true或者false,返回true保留该元素,false则不保留。 return true || false; } const filtered = [1, 2, 3].filter(element => element > 1); // filtered: [2, 3];4. array.find(callback[, thisArg]);
const finded = [1, 2, 3].find(element => element > 1); // finded: 2
const findIndex = [1, 2, 3].findIndex(element => element > 1); // findIndex: 16. array.includes(searchElement, fromIndex);
[1, 2, 3].includes(2, 2); // false7. array.indexOf(searchElement[, fromIndex = 0]);
[2, 9, 7, 8, 9].indexOf(9); // 18. array.join(separator=",");
[1, 2, 3].join(";"); // "1;2;3"9. array.map(callback[, thisArg]);
const maped = [{name: "aa", age: 18}, {name: "bb", age: 20}].map(item => item.name + "c"); // maped: ["aac", "bbc"];10. array.pop() 与 array.shift();
[1, 2, 3].pop(); // 3
const shifted = ["one", "two", "three"].shift(); // shifted: "one"11. array.push(element1, element2, ....elementN) 与 array.unshift(element1, element2, ...elementN);
const arr = [1, 2, 3]; const length = arr.push(4, 5); // arr: [1, 2, 3, 4, 5]; length: 5
const vegetables = ["parsnip", "potato"]; const moreVegs = ["celery", "beetroot"]; // 将第二个数组融合进第一个数组 // 相当于 vegetables.push("celery", "beetroot"); Array.prototype.push.apply(vegetables, moreVegs); 或者 [].push.apply(vegetables, moreVegs); // vegetables: ["parsnip", "potato", "celery", "beetroot"]12. array.reduce(callback[, initialValue]);
const total = [0, 1, 2, 3].reduce((sum, value) => { return sum + value; }, 0); // total is 6 const flattened = [[0, 1], [2, 3], [4, 5]].reduce((a, b) => { return a.concat(b); }, []); // flattened is [0, 1, 2, 3, 4, 5] // initialValue累加器初始值, callback函数定义: function callback(accumulator, currentValue, currentIndex, array) { } accumulator代表累加器的值,初始化时,如果initialValue有值,则accumulator初始化的值为initialValue,整个循环从第一个元素开始;initialValue无值,则accumulator初始化的 值为数组第一个元素的值,currentValue为数组第二个元素的值,整个循环从第二个元素开始。initialValue的数据类型可以是任意类型,不需要跟原数组内的元素值类型一致。 const newArray = [{ name: "aa", age: 1 }, { name: "bb", age: 2 }, { name: "cc", age: 3 }].reduce((arr, element) => { if (element.age >= 2) { arr.push(element.name); } return arr; // 必须有return,因为return的返回值会被赋给新的累加器,否则累加器的值会为undefined。 }, []); // newArray is ["bb", "cc"]; 上面代码的同等写法: const newArray = [{ name: "aa", age: 1 }, { name: "bb", age: 2 }, { name: "cc", age: 3 }].filter(element => element.age >= 2).map(item => item.name); // newArray is ["bb", "cc"]; 对于reduce的特殊用法,其实类似于省略了一个变量初始化步骤,然后通过每次的callback的返回修改该变量,最后返回最终变量值的过程,类似于一个变量声明 + 一个forEach执行过程。 const newArray = []; [{ name: "aa", age: 1 }, { name: "bb", age: 2 }, { name: "cc", age: 3 }].forEach(item => { if (item.age >=2) { newArray.push(item.name); } });13. array.reverse();
["one", "two", "three"].reverse(); // ["three", "two", "one"],原数组被翻转14. array.slice(begin, end)
const newArray = ["zero", "one", "two", "three"].slice(1, 3); // newArray: ["one", "two"];15. array.some(callback[, thisArg]);
[2, 5, 8, 1, 4].some(item => item > 6); // true16. array.sort([compareFunction]);
[1, 8, 5].sort((a, b) => { return a-b; // 从小到大排序 }); // [1, 5, 8]17. array.splice(start[, deleteCount, item1, item2, ...]);
const myFish = ["angel", "clown", "mandarin", "sturgeon"]; const deleted = myFish.splice(2, 0, "drum"); // 在索引为2的位置插入"drum" // myFish 变为 ["angel", "clown", "drum", "mandarin", "sturgeon"],deleted为[]小结
push、 shift、 pop、 unshift、 reverse、 sort、 splice方法会对原来的数组进行修改,其他的数组操作方法只有返回值不同,对原数组都没有影响,即原数组不变。小结
在看vue代码的时候,发现vue教程里面Array.apply(null, {length: 20})的用法,apply一直以为第二个参数只能是[]或者Arguments这样的类数组,了解了下发现{length: 20}也是类数组。 带有length属性的obj在apply函数里都被认定为类数组。可以理解为这里的{length: 20}会被默认为是一个数组了。下图的slice操作是只能在数组对象执行的操作,所以这里是一个数组。
看了下代码,apply生成的数组里面被初始化为了undefined,就是生成了长度为5的数组,而且数组的每个元素都被初始化为了undefined。
Array(5)和new Array(5)调用效果是一致的。官网解释为:当把构造函数作为函数调用,不使用 new 运算符时,它的行为与使用 new 运算符调用它时的行为完全一样。 它们也生成了长度为5的数组,但是是个空数组,数组中的每个元素都没有初始化。
为什么要这么写?
map函数并不会遍历数组中没有初始化或者被delete的元素(有相同限制还有forEach, reduce方法)。
Array.apply(null, { length: 5 }) 是用来初始化一个长度为5,每项的初始值都是undefined的数组。
render (createElement) { return createElement("div", // 这里apply第一个对象为null, 当调用的函数不需要this对象时,可以传null,在es5之前浏览器会将null代表的this指向window。es5之后,浏览器不会再将this指向window。这里传null是因为Array构造函数会重新创建this,不需要传入this对象。 Array.apply(null, { length: 20 }).map(function () { // 这里如果用Array(2)的形式,map的回调函数不会被执行 return createElement("p", "hi") }) ) }
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/112876.html
摘要:检测数组或者检测对象的原型链是否指向构造函数的对象或者终极大招注意不可以用此方法检查常用方法合并多个数组,返回合并后的新数组,原数组没有变化。返回值是由被删除的元素组成的一个数组。 定义数组 const array = [1, 2, 3]; 或者 const array = new Array(); array[0] = 1; 建议尽量使用第一种形式定义数组,采用new的形式在大量的数...
摘要:特意对前端学习资源做一个汇总,方便自己学习查阅参考,和好友们共同进步。 特意对前端学习资源做一个汇总,方便自己学习查阅参考,和好友们共同进步。 本以为自己收藏的站点多,可以很快搞定,没想到一入汇总深似海。还有很多不足&遗漏的地方,欢迎补充。有错误的地方,还请斧正... 托管: welcome to git,欢迎交流,感谢star 有好友反应和斧正,会及时更新,平时业务工作时也会不定期更...
阅读 1881·2021-11-09 09:46
阅读 2444·2019-08-30 15:52
阅读 2403·2019-08-30 15:47
阅读 1302·2019-08-29 17:11
阅读 1730·2019-08-29 15:24
阅读 3473·2019-08-29 14:02
阅读 2425·2019-08-29 13:27
阅读 1173·2019-08-29 12:32