文章目录

浅拷贝
深拷贝
防抖
节流
去重
- 数组去重
- 数组对象去重
扁平化
- 数组扁平化
- 对象扁平化
数组结构与树形结构转换

浅拷贝

获取了一个对象的引用，而不是复制实体。例如：假设我们有两个对象A和B，把A复制给B，当我们修改B里面的值时，如果A发生了改变，那么就是浅拷贝。

直接赋值（=）
Object.assign()

var obj2 = Object.assign({}, obj1);

Array.prototype.concat()和Array.prototype.slice()

var arr2 = arr1.concat();
var arr2 = arr1.slice();

深拷贝

获取了一个对象的复制实体，而不是引用。例如：假设我们有两个对象A和B，把A复制给B，当我们修改B里面的值时，如果A没有改变，那么就是深拷贝。

递归
缺点：
当遇到两个互相引用的对象时，会出现死循环的情况，从而导致爆栈。

function deepClone(obj) {//Array.isArray() 用于确定传递的值是否是一个 Array。let objClone = Array.isArray(obj) ? [] : {};if (obj && typeof obj === "object") {for (let key in obj) {//hasOwnProperty()方法来忽略继承属性。if (obj.hasOwnProperty(key)) {//判断obj子元素是否为对象，如果是，递归复制if (obj[key] && typeof obj[key] === "object") {objClone[key] = deepClone(obj[key]);} else {//如果不是，简单复制objClone[key] = obj[key];}}}}return objClone;
}

JSON对象的parse和stringify
缺点：
① 如果对象中有时间对象，那么用该方法拷贝之后的对象中，时间是字符串形式而不是时间对象。
② 如果对象中有RegExp、Error对象，那么序列化的结果是空。
③ 如果对象中有函数或者undefined，那么序列化的结果会把函数或undefined丢失。
④ 如果对象中有NAN、infinity、-infinity，那么序列化的结果会变成null。
⑤ JSON.stringify()只能序列化对象的可枚举自有属性，如果对象中有是构造函数生成的，那么拷贝后会丢弃对象的constructor。
⑥ 如果对象中存在循环引用也无法正确实现深拷贝。

function deepClone(obj) {return JSON.parse(JSON.stringify(obj));
}

jQuery的extend方法

$.extend(true, [], array);
//第一个参数true为深拷贝，false为浅拷贝
//第二个参数为目标数组
//第三个及以后参数为源数组

函数库lodash提供的_.cloneDeep

var _ = require('lodash');
var obj1 = {a: 1,b: { f: { g: 1 } },c: [1, 2, 3]
};
var obj2 = _.cloneDeep(obj1);
console.log(obj1.b.f === obj2.b.f);
// false

防抖

定义
触发事件后在n秒内函数只能执行一次，如果在n秒内又触发了事件，则会重新计算函数执行时间。
应用
① 搜索框搜索输入。只需用户最后一次输入完，再发送请求。
② 手机号、邮箱验证输入检测 onchange oninput事件。
③ 窗口大小Resize。只需窗口调整完成后，计算窗口大小。防止重复渲染。

const debounce = (fn, wait, immediate) => {let timer = null;return function (...args) {if (timer) clearTimeout(timer);if (immediate && !timer) {fn.call(this, args);}timer = setTimeout(() => {fn.call(this, args);}, wait);};
};

节流

定义
当持续触发事件时，保证一定时间段内只触发一次事件。
应用
① 懒加载、滚动加载、加载更多或监听滚动条位置。
② 百度搜索框，搜索联想功能。
③ 防止高频点击提交，防止表单重复提交。

function throttle(fn, wait) {let pre = 0;return function(...args) {let now = Date.now();if( now - pre >= wait) {fn.apply(this, args);pre = now;}};
}

去重

数组去重

利用Set + Array.from

function removeDuplicate(arr) {return Array.from(new Set(arr));
}

利用forEach + indexOf

//无法对NaN去重
function removeDuplicate(arr) {const newArr = [];arr.forEach(item => {if (newArr.indexOf(item) === -1) {newArr.push(item);}});return newArr;
}

利用forEach + includes

//includes在判断是否包含某元素时调用sameValueZero方法，遇到NaN会使用isNaN()进行转化，故其可以对NaN去重
function removeDuplicate(arr) {const newArr = [];arr.forEach(item => {if (!newArr.includes(item)) {newArr.push(item);}});return newArr;
}

利用filter + indexOf

//结果不包含NaN，因为arr.indexOf(NaN)始终为-1
function removeDuplicate(arr) {return arr.filter((item, index) => {return arr.indexOf(item) === index;});
}

利用forEach + Map

function removeDuplicate(arr) {const map = new Map();const newArr = [];arr.forEach(item => {if (!map.has(item)) {map.set(item, true);newArr.push(item);}});return newArr;
}

利用forEach + 对象属性唯一

function removeDuplicate(arr) {const obj = {};const newArr = [];arr.forEach(item => {if (!obj[item]) {obj[item] = true;newArr.push(item);}});return newArr;
}

数组对象去重

利用forEach

function removeDuplicate(arr) {const obj = {};const newArr = [];arr.forEach(item => {if (!obj[item.key]) {obj[item.key] = true;newArr.push(item);}});return newArr;
}

利用reduce

function removeDuplicate(arr) {const obj = {};const newArr = arr.reduce((item, next) => {obj[next.key] ? '' : obj[next.key] = true && item.push(next);return item;}, []);return newArr;
}

扁平化

数组扁平化

将多维数组降维为一维数组，例如：将[1, [2, 3, [4]]]变为[1, 2, 3, 4]。

利用reduce + concat

let flatten = arr => {return arr.reduce((result, item) => {return result.concat(Array.isArray(item) ? flatten(item) : item);}, []);
}

利用some + concat + 扩展运算符…

let flatten = arr => {while (arr.some(item => Array.isArray(item))) {arr = [].concat(...arr);}return arr;
}

对象扁平化

将对象深度降为1，例如：将{a: 1, b: [1, 2, {c: true}], c: {e: 2, f: 3}, g: null}变为{a: 1, b[0]: 1, b[1]: 2, b[2].c: true, c.e: 2, c.f: 3, g: null}。

let flatten = obj => {let result = {};let process = (key, value) => {if (Object(value) !== value) {//基本数据类型（值类型）if (key) {result[key] = value;}} else if (Array.isArray(value)) {//引用数据类型，数组，逐项递归for (let i = 0; i < value.length; i++) {process(`${key}[${i}]`, value[i]);}//空数组if (value.length === 0) {result[key] = [];}} else {//引用数据类型，对象，逐项递归let objArr = Object.keys(value);objArr.forEach(item => {process(key ? `${key}.${item}` : `${item}`, value[item]);});//空对象if (objArr.length === 0 && key) {result[key] = {};}}}process('', obj);return result;
}

数组结构与树形结构转换

数组结构转树形结构

function arrToTree (data, pId) {const loop = pId => {const result = [];data.forEach(item => {if (item.parentId === pId) {item.children = loop(item.id);result.push(item);}});return result;}return loop(pId);
}

树形结构转数组结构

function treeToArr(data) {const result = [];data.forEach(item => {const loop = data => {result.push({id: data.id,name: data.name,parentId: data.parentId});let child = data.children;if (child) {for (let i = 0; i < child.length; i++) {loop(child[i]);}}}loop(item);});return result;
}

前端开发基础——常用处理函数相关推荐

前端开发 —— js 常用工具函数（utilities）
1. 时间 function getCurTime() {var date = new Date();return date.toLocaleTimeString(); } date.toLocale ...
Web前端开发基础三剑客学习知识分享
Web前端开发基础知识学习路线分享,前端开发入门学习三大基础:HTML.CSS.JavaScript.除此之外还要学习数据可视化.Vue.React.Angular相关框架,熟练运用框架提升开发效率, ...
前端开发中常用设计模式-总结篇
本文是向大家介绍前端开发中常用的设计模式,它使我们编写的代码更容易被复用,也更容易被人理解,并且保证代码的稳定可靠性. 1.什么是设计模式通俗来讲,就是日常使用设计的一种惯性思维. 因为对应的这种思 ...
JavaWeb:前端开发基础
JavaWeb:前端开发基础内联元素和块级元素说明: 联元素和块级元素都是html中的范畴,块元素和内联元素的主要差异是块元素是从新的一行开始.而内联元素一般显示在一行上.但是可以通过css的di ...
网站前端开发基础知识学什么？必备技能
网站前端开发基础知识学什么?Web前端开发网页制主要由HTML.CSS.JavaScript三大要素组成.随着企业需求变,前端开发技术的三要素也演变成现今的HTML5.CSS3.jQuery.响应式布 ...
前端开发基础（HTML基础）
前端开发基础目的:开发一个平台(网站)- 前端开发:HTML.CSS.JavaScript- Web框架:接收请求并处理- MySQL数据库:存储数据的地方快速上手:基于Flask Web框架让你快 ...
顾川的前端学习笔记--前端开发基础
阶段一前端开发基础初始HTML 本阶段重难点 3.29小时40小节4个模块 CSS选择器盒模型 CSS三大特性浮动和清楚浮动 CSS四种定位 CSS进阶 CSS3 前端工程师需要会的PS取图案 ...
黑马程序员之Web前端全栈 · 阶段一前端开发基础（3）
Web前端全栈 · 阶段一前端开发基础 (3) 说明三.HTML 标签 1. HTML 语法规范 1.1 基础语法概述 1.2 标签的关系 2. 基本结构标签 2.1 第一个 HTML 2.2 基 ...
前端开发中常用图片格式
前端开发中常用图片格式在我们的日常开发中.必不可少会使用很多种图片. 我们需要根据业务场景来选择所使用的图片类型. 这里我整理了一些常用图片类型.他们的优缺点以及建议的使用场景. 如何在计算机中显示 ...

前端开发基础——常用处理函数