CC酱写前端的博客

mac配置ssh钥

el-table-column文字过长 进行省略处理

侧边栏随着文档位置移动高亮亮

mac: brew切换node版本

高级js数组常用方法

JS继承与设计模式

callback回调

数组计算

ES6 REDUCE

js事件冒泡与捕获

防抖节流以及使用场景

JS工具类

vue 放大缩小

js循环机制，微任务宏任务

原型与原型链

深拷贝与浅拷贝

excel上传下载

点击按钮复制链接

js编码解码

js遍历对象

js定时器整理(执行一次setTimeout、重复执行setInterval)在javascritp中，有两个关于定时器的专用函数，分别为：1.倒计定时器：timename=setTimeout(“function();”,delaytime);​2.循环定时器：timename=setInterval(“function();”,delaytime);第一个参数“function()”是定时器触发时要执行的动作，可以是一个函数，也可以是几个函数，函数间用“；”隔开即可。比如要弹出两个警告窗口，

N个模板，单选，选中的改变样式（青色的边框）HTML代码： <ul class="templates-style"> <li class="filter-nav" v-for="(item, index) in touristList" :key="index" :class="{active:(clickIndex == index )}" @

一、CSS1、flex布局给父盒子设置display： flex，里面的元素就是弹性元素；父亲常见属性；1） 父元素属性-flex-direction： 设置主轴的方向；就是x轴，y轴；默认值：flex-direction： row，里面的元素从左到右；flex-direction： row-reverse：里面的元素从右到左；flex-direction： column： 改变主轴变成轴，元素从上到下；flex-direction： column-reverse： y轴是主轴，元素从下到

JS高级一、 js基础1. 数据类型分类：基本（值）类型：num, string, boolean, null, undefined;对象（引）用类型：object, function, array; (function, array是特殊的对象)2. 判断数据类型typeof： 结果返回的是数据类型，但是所有的obejct返回都是objectinstanceof: 判断对象的具体类型，对typeof对object的补充；===全等号: undefined, null 可以使用 全

掘金上看到分析事件冒泡，事件捕获和事件委托超级详细的文章，保存下来方便以后查看。事件冒泡、事件捕获、事件委托、事件绑定可以说是JavaScript基础中最为重要的知识点。DOM事件流事件流描述的是从页面中接收事件的顺序。事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。包括三个阶段：事件捕获阶段处于目标阶段事件冒泡阶段我们知道，在dom模型中，html是多层次的，当一个html元素上产生事件时，该事件会在dom树元素节点之间按照特定的顺序去传播。传播路径的每一个

面试中高频被问到的数组题目数组的方法与迭代方法一、 数组的方法1. 数组方法pop() push() unshift() shift(),sort(), reverse(),concat(), indexOf()1）基本方法push()尾部添加 ---arr.push('q'), 向原来的arr数组尾部增加qpop()尾部删除 unshift()头部添加 shift()头部删除sort(): 按升序排列数组。 使用比较函数作为参数<script> functio

JS常见面试题1. javascript的typeof返回哪些数据类型. 答案：string,boolean,number,undefined,function,object,symbol（第一无二的值） 基本数据类型： 字符串，数字，布尔值，undefined，null 引用数据类型： 对象{ 函数，对象} 注意： typeOf(NaN),结果是number， 使用isNaN(NaN) 结果是true，表示非有效数字； 2. 例举3种强制类

函数防抖是：用户频繁操作后，n秒内只执行一次函数节流是：用户频繁操作后，把频繁操作变成少量操作一、防抖触发高频函数事件后，n秒内函数只能执行一次，如果在n秒内这个事件再次被触发的话，那么会重新计算时间思路：每次触发事件时都取消之前的延时调用方法 function debounce(fn) { let timeout = null; // 创建一个标记用来存放定时器的返回值 return function() { c

Class 可以通过对象语法和数组语法进行动态绑定：对象语法：<div v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>data: { isActive: true, hasError: false}数组语法：<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>d

肥胖-超重–正常–偏瘦，四个区间，用渐变色柱体显示，小三角标记位置。根据接口返回的值，小三角移动到不同的区间不同的位置。百分比显示；<template> <div class="box"> <div class="bmi-show"> <div class="triangle" :style="{ bottom: percentage }"></div> <div class="linearShow"

单个字符最简单的正则表达式可以由简单的数字和字母组成，没有特殊的语义，纯粹就是一一对应的关系。如想在’apple’这个单词里找到‘a’这个字符，就直接用/a/这个正则就可以了。但是如果想要匹配特殊字符的话，就得请出我们第一个元字符***， 它是转义字符字符，顾名思义，就是让其后续的字符失去其本来的含义。举个例子：我想匹配这个符号，由于*这个符号本身是个特殊字符，所以我要利用转义元字符\来让它失去其本来的含义：/\*/如果本来这个字符不是特殊字符，使用转义符号就会让它拥有特殊的含义。我们常常需要

Date()常用方法如下：var date = new Date() console.log(date.getMonth()); //获取月份(0-11,0代表1月，所以在显示当前时间的时候需要date.getMonth() + 1） console.log(date.getYear()); console.log(date.getFullYear()); //2021 console.log(date.getDate()); // 获取日(1-31) con

文字太长，点击向下的箭头（按钮），展开文字， 箭头变成向上箭头，点击这个向上的箭头，收缩，同时箭头变成向下。箭头是用两张图片来完成的，有些是展开与收起的文字按钮，写法相似。<template> <div class="box"> <p class="title"> 秋 </p> <p class="sug" :class="{ close: infoLength > 1 && !more

一行代码搞定的： 时间格式为 2019-07-01 12:00:00function time(time = +new Date()) { console.log(time) var date = new Date(time + 8 * 3600 * 1000); // 增加8小时 return date.toJSON().substr(0, 19).replace('T', ' ');}console.log(time(+new Date("2014-10-

动态绑定图片URL地址显示。<img :src="imgURL" style="width: 25px;height: 25px; "/></span> <img :src="more ? up : down " alt="">点击按钮，切换向上向下的箭头图标（图片），主要应用于，文字太长，省略号显示，点击箭头展开文字与收起文字功能。<template> <div @click="change"> <!-- 点

ES5之后的JS语法统称ES6！！！一、关于取值的吐槽取值在程序中非常常见，比如从对象obj中取值。const obj = { a:1, b:2, c:3, d:4, e:5,}吐槽：const a = obj.a;const b = obj.b;const c = obj.c;const d = obj.d;const e = obj.e;或者const f = obj.a + obj.d;const g = obj.c + obj.

Math.random(): 生成的是随机16/17位小数.通过toString（36): 发现小数点后的数字转为0·9a·z的值;substring(3, 8): 从下标3开始，到8结束，不包括8 //生成的是随机16/17位小数 console.log(Math.random()); //0.02613552458980939 //通过toString（36）后发现小数点后的数字转为0·9a·z的值 console.log(Math.r

问号点（?.）参考文档：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining当访问多层对象属性(比如 res.data.list)时，如果属性res.data为空，则会报引用错误为此我们不得不这么处理：let dataList = res && res.data && res.data.list看着非常不美观，今天介绍的新语法就是

给定一个排序数组和一个目标值，在数组中找到目标值，并返回其索引。如果目标值不存在于数组中，返回它将会被按顺序插入的位置。请必须使用时间复杂度为 O(log n) 的算法。示例 1:输入: nums = [1,3,5,6], target = 5输出: 2示例 2:输入: nums = [1,3,5,6], target = 2输出: 1示例3：输入: nums = [1,3,5,6], target = 7输出: 4示例 4:输入: nums = [1,3,5,6], tar

给你一个下标从 0 开始的整数数组 nums ，请你找到 最左边 的中间位置 middleIndex （也就是所有可能中间位置下标最小的一个）。中间位置 middleIndex 是满足 nums[0] + nums[1] + … + nums[middleIndex-1] == nums[middleIndex+1] + nums[middleIndex+2] + … + nums[nums.length-1] 的数组下标。如果 middleIndex == 0 ，左边部分的和定义为 0 。类似的，如果