前端进阶JS数组高级用法大全教程示例_javascript技巧_

function createData() { const data = []; for (let i = 0; i < 1000; i++) { data.push({ name: `name${i + 1}`, }); } return data; } const data = createData(); console.log(data); 

function createData() { // 如果不 fill 循环默认会跳过空值 return new Array(1000).fill(null).map((v, i) => ({ name: `name${i + 1}` })); } const data = createData(); console.log(data); 

function createData() { return Array.from({ length: 1000 }, (v, i) => ({ name: `name${i + 1}` })); } const data = createData(); console.log(data); 

const arr1 = [1, 2, 3]; const arr2 = [3, 4, 5]; console.log(new Set([...arr1, ...arr2])); 

const arr1 = [1, 2, 3]; const arr2 = [3, 4, 5]; function mergeArray(arr1, arr2) { // 克隆 const cloneArr1 = arr1.slice(0); let v; for (let i = 0; i < arr2.length; i++) { v = arr2[i]; // 按位非，反转操作数的位，表象是对后面数字取负减一 // 当数组中不存在此项 indexOf 返回 -1 按位非得 0 不走 if 逻辑 // 如果两个数组都包含NaN，想要去重可使用includes if (~cloneArr1.indexOf(v)) { continue; } cloneArr1.push(v); } return cloneArr1; } console.log(mergeArray(arr1, arr2)); 

const arr1 = [{ id: 1 }, { id: 2 }, { id: 3 }]; const arr2 = [{ id: 3 }, { id: 4 }, { id: 5 }]; console.log(Array.from(new Set([...arr1, ...arr2]))); // [ { id: 1 }, { id: 2 }, { id: 3 }, { id: 3 }, { id: 4 }, { id: 5 } ] // 这样对象都是独立的引用，肯定无法去除属性相同的数据啦 

const obj3 = { id: 3 }; const arr1 = [{ id: 1 }, { id: 2 }, obj3]; const arr2 = [obj3, { id: 4 }, { id: 5 }]; console.log(Array.from(new Set([...arr1, ...arr2]))); // 确实可以，但是你开发这样做？ 

const arr1 = [{ id: 1 }, { id: 2 }, { id: 3 }]; const arr2 = [{ id: 3 }, { id: 4 }, { id: 5 }]; function mergeArray(arr1, arr2) { // 克隆 const cloneArr1 = arr1.slice(0); let v; for (let i = 0; i < arr2.length; i++) { v = arr2[i]; // 能找到相同 id 属性值的数据则进入判断 if (~cloneArr1.findIndex((el) => el.id === v.id)) { continue; } cloneArr1.push(v); } return cloneArr1; } console.log(mergeArray(arr1, arr2)); // [ { id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 } ] 

// 字面量 const arr1 = [1, 2, 3, ...[4, 5, 6]]; // 1,2,3,4,5,6 const arr2 = [, , , , ,]; // [empty × 5] 

const arr3 = new Array(5); // [empty × 5] const arr4 = new Array(1, 2, 3); // 1,2,3 const arr5 = new Array("a"); // ["a"] 

const arr6 = Array.of(5); // [5] const arr7 = Array.of(1, 'abc', true); // [1, "abc", true] 

const arr8 = Array.from([1, 2, 3]); // [1,2,3] const arr9 = Array.from({ length: 3 }, (value, index) => { return index + 1; }); // [1,2,3] const arr10 = Array.from({ 0: "a", 1: "b", 2: "c", length: 3 }); // ["a", "b", "c"] 

// Array.prototype.slice const arr11 = Array.prototype.slice.call(document.querySelectorAll("div")); // [div, div, div....] // Array.prototype.concat const arr12 = Array.prototype.concat.call([], [1, 2, 3]); // [1, 2, 3] 

const arrayLike = { 0: "a", 1: "b", 2: "c", name: "test", length: 3, push: Array.prototype.push, //自己实现 splice: Array.prototype.splice, }; //由于类数组对象length属性声明了对象有多少个属性,所以可以使用for遍历对象属性: for (let i = 0; i < arrayLike.length; i++) { console.log(i + ":" + arrayLike[i]); } 

function person(name, age, sex) { console.log("person arguments:", arguments); console.log("person type:", Object.prototype.toString.call(arguments)); } person("name", "age", "sex"); 

const nodeList = document.querySelectorAll("box"); console.log("querySelectorAll type:", Object.prototype.toString.call(nodeList)); const htmlCollection = document.getElementsByTagName("div"); console.log("getElementsByTagName type:", Object.prototype.toString.call(htmlCollection)); const DOMTokenList = document.querySelector("div").classList; console.log("classList:", DOMTokenList); 

const str = "abc"; console.log(Object.keys(str)); // ['0', '1', '2'] console.log(Array.from(str)); // ['a', 'b', 'c'] 

function isArrayLikeObject(arr) { // 不是对象直接返回 if (arr == null || typeof arr !== "object") return false; const lengthMaxValue = Math.pow(2, 53) - 1; // 是否有 length 属性 if (!Object.prototype.hasOwnProperty.call(arr, "length")) return false; // length 属性是否是number类型 if (typeof arr.length != "number") return false; //使用 isFinite() 判断是否在正常数字范围 if (!isFinite(arr.length)) return false; // 构造函数等于Array if (Array === arr.constructor) return false; // 长度有效值 if (arr.length >= 0 && arr.length < lengthMaxValue) { return true; } else { return false; } } console.log(isArrayLikeObject(null)); // false console.log(isArrayLikeObject({ 0: "a", 1: "b", length: 2 })); // true console.log(isArrayLikeObject({ 0: 1, 2: 3, length: "" })); // false console.log(isArrayLikeObject({ 0: 1, 2: 3 })); // false console.log(isArrayLikeObject([1, 2])); // false 

const arr = []; const arrayLike = { 0: 1, 1: 2, length: 2, }; for (let i = 0; i < arrayLike.length; i++) { arr[i] = arrayLike[i]; } console.log(arr); // [1, 2] 

const arrayLike = { 0: 1, 1: 2, length: 2, }; const array1 = Array.prototype.slice.call(arrayLike); console.log(array1); // [ 1, 2 ] const array2 = Array.prototype.concat.
                
提示：
                    本文由神整理自网络，如有侵权请联系本站删除！
                    

                    本站声明： 

                    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持； 

                    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！
                
                

                

                                            
上一篇：React前端DOM常见Hook封装示例上_React_
                                                                
下一篇：Vue项目中打包优化的四种方法详解_vue.js_