Web前端面试题及答案——HTML&CSS、JS、DOM

虽然个人认为有些知识不是必须记忆的，需要的时候可以查阅笔记，但是对于得到面试的机会还是很重要的。 

HTML&CSS

1、清除浮动的几种方式，各自的优缺点

清除浮动：使父元素围住浮动的子元素，避免对后续元素造成影响。

（1）给父元素设置overflow:hidden;或float:left;或position:absolute;或position:relative;。触发块级格式化上下文（BFC），从正常文档流脱离，父元素本身实现独立布局，围住其中的浮动元素。但专门这样设置，可能会改变布局，对于后三者，使block变为inline-block，父元素宽度变化。

适用于父元素也需要浮动。

（2）在子元素后面添加空的block元素，并设置其样式为clear:both。添加了额外的元素，且block元素带有margin等。

（3）在父元素上加clearfix类名，在父元素的最后加块级元素.（伪元素选择器），通过clear:both使父元素括住浮动的元素来清除float的影响，使.不可见。常用这种方式，Bootstrap支持clearfix类名。

通常推荐这种方式。

  
p1
 
  
p2
 
  

2、块级元素水平垂直居中的方法

  
DEMO

父元素和子元素的大小不确定。

（1）table-cell+inline-block

兼容IE6,7需要把结构换为

，通过display:inline; zoom:1;模拟inline-block。

.parent{display:table-cell; text-align:center; vertical-align:middle;}
.child{display:inline-block;}

（2） relative+absolute+transform

绝对定位脱离文档流，不会对其它元素产生影响。transform是CSS3新增内容，对IE6,7,8可能没法兼容，在高版本浏览器需要加前缀。

.parent{position:relative;}
.child{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}

（3）flex

IE6,7,8可能没法兼容flex。

.parent{display:flex; justify-content:center; align-items:center;}

如果子元素大小确定。

.parent{position:relative;}
.child{
  width:100px; height:100px;
  position:absolute; top:0; right:0; bottom:0; left:0; margin:auto;
}

3、CSS选择器有哪些？优先级如何计算

（1）普通选择器：通配符选择器*、标签选择器、id选择器#、类选择器.、属性选择器[]、伪类选择器:

（2）伪元素选择器::

（3）组合选择器：后代选择器 、子选择器、兄弟选择器+、只要前面有某种元素~

优先级：将权重相加。a=行内样式style，1000；b=id选择器，100；c=类、伪类和属性选择器，10；d=标签选择器和伪元素选择器，1。相同属性优先级高覆盖低、后面覆盖前面，不同属性合并。

超链元素伪类的设置顺序:link :visited :hover :active

4、px、em和rem的区别

px，像素，相对于显示器屏幕分辨率而言；

em，相对长度单位，相对于当前对象内文本的字体大小，若字体大小未显式设置，则相对于浏览器默认的字体大小；

rem，相对长度单位，相对于html根元素的字体大小。

5、display:none和visibility:hidden的区别

display:none设置元素不显示，是彻底消失，不在文档流中占位，浏览器也不会解析该元素。visibility:hidden是视觉上消失，可理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素。

使用visibility:hidden比display:none性能上要好。display:none切换显示时，页面产生回流reflow（页面中的部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建）。而visibility:hidden切换是否显示时则不会引起回流，只是元素的外观被改变，且在没有改变布局的情况下发生。

6、用一个div写出三条横线的小图标

div{
  height:5px;
  width:30px;
  background-color:#DD575C;
  background-clip:content-box;
  padding-top:5px;
  padding-bottom:5px;
  border-top:#DD575C solid 5px;
  border-bottom:#DD575C solid 5px;
}

7、用一个div实现倒三角

div{
  width:0;
  border-top:10px solid #DD575C;
  border-left:5.77px solid transparent;
  border-right:5.77px solid transparent;
}

其它方法仅供参考。ASCII码31是倒三角。 

/* 正方形旋转加截取 */
.parentDiv {
  height:50px;
  overflow:hidden;
}
.triangleDiv {
  position: relative;
  height:70.7px;
  width:70.7px;
  top:-35.4px;
  left:19.6px;
  background-color:#DD575C;
  transform:rotate(45deg);
}

8、盒模型

在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容（content）、内边距（padding）、边框（border），外边距（margin）四个部分。

标准盒子模型 ＝ margin + border + padding + content （content =  width | height）

IE盒子模型 ＝ margin + content （content = border + padding + width | height）

box-sizing:content-box|border-box  切换标准模型和IE模型

9、position的absolute和fixed的共同点与不同点

共同点：脱离文档流，文档流中没有它的空间，未设置偏移时在原位置。默认宽度为内容宽度。

absolute：绝对定位。参照物为第一个定位元素（非static）/根元素html（与浏览器窗口同等大小的首屏区域）。元素随页面的滚动而滚动。

fixed：固定定位。参照物是视窗。不随页面的滚动而滚动。

10、sprite精灵图

把设计稿上的小图标拼合到同一张图片中，减少网络请求，提升网页加载速度。

①排列常用横向排列和纵向排列。 ②图片之间必须保留孔隙，小图标20像素。如果更改按钮大小，CSS里背景图位置属性不须改变；容错，如果CSS设置错误，不会导致下面图片露出来。③合并原则：同属于一个模块、大小相近、色彩相近。只本页用到的图片合并、集中使用，有状态的图标合并。④IE6不支持PNG24半透明，存两份：高级浏览器PNG24 sprite.png、IE6 PNG-8 sprite_ie.png。

background-image:url("/images/x.png");
background-repeat:no-repeat;
background-position:20px 60px;
background-size:10px 10px;

11、HTML5

表现页面中的章节结构：

嵌入资源：

新的类型：email、url、number、tel、search、range、color、date

新的表单元素（datalist、keygen、output）和属性

getCurrentPosition()、web存储（localStorage、sessionStorage）、拖放

12、CSS3

选择器：属性选择器、伪类选择器

盒模型：box-shadow、box-sizing

边框：border-radius、border-image

背景：background-image、background-size、background-origin、background-clip、渐变

文字特效：text-shadow、text-overflow、word-wrap、word-break、字体@font-face

2D/3D转换：transform、transform-origin、transform-style、perspective、perspective-origin、backface-visibility

过渡和动画：transition、animation、@keyframes

多列布局：column-count、column-width、column-fill、column-gap、column-rule、column-span

用户界面：resize、outline-offset

弹性盒子：flex

13、的alt和title

alt：描述图片含义。地址写错或网络状况不好，无法查看图像时，显示该说明。可用于屏幕阅读软件和搜索引擎。

title：光标悬浮在图像上时以提示的方式显示该特性内容。

14、href和src的区别

href标识超文本引用，在当前元素和引用资源之间建立联系。。当浏览器解析到css文件时会下载，但不会停止对当前文档的处理。

src引用资源，指向外部资源的位置，将外部资源下载并替换当前元素。用在

(function() {
  var a=b=5;
})();
console.log(b); // 5
console.log(a); // Uncaught ReferenceError: a is not defined

2、操作符

使用加法操作符+时，如果其中一个操作数是字符串，则把另一个操作数也转换为字符串，并将两字符串拼接。
var foo=10+'20'; // '1020'

x||y如果x表达式运行结果转换为Boolean值为false，则返回表达式y的运行结果
(window.foo||(window.foo='bar'));
console.log(window.foo); // 'bar'

指针和赋值运算符的执行顺序
var foo={n:1};
var bar=foo; // {n: 1}
foo.x=foo={n:2};
foo.x // undefined
foo // {n: 2}
bar // {n: 1, x: {n: 2}}

3、==和===的区别

===判断左右两边对象或值是否类型相同且值相等。==判断操作符两边对象或值是否相等，类型不同时，使用Number()转换。例外规则，null==undefined，null/undefined进行==运算时不进行隐式类型转换。通常把值转为Boolean值，进行条件判断。

[1]==[1] false

var a="123";
var b="123";
var c="4";
var oa=new String("123");
var ob=new String("123"); var oc=oa; a===oa; //false，a为值类型，oa为对象类型 oa===ob; //false，不是同一个引用 oa===oc; //true，同一个引用 a===b; //true，值相等，且都是值类型 a===c; //false "99"==99; //true new String("99")==99; //true false=="0"; //true 0==null; //false "undefined"==undefined; //false

4、js各类型在转换为Boolean时的规则

 

5、数值

Number()函数，用于任何数据类型。对于字符串向数值型转换，数字、浮点数、十六进制数->十进制数，前导0被忽略；””->0；除此之外（包含非数字等）转换为NaN。

Number(undefined) // NaN
Number(null) // 0
Number(false) // 0
Number('11') // 11
Number('11.2') // 11.2
Number('011') // 11
Number('0x13') // 19
Number('11a') // NaN

parseInt()，忽略空格，找到第一个非空格字符，直到遇到无效字符。第二个参数为转换进制。前导0被忽略。

parseFloat()，前导0被忽略，只解析十进制。如果没有小数点或小数点后都是0则返回整数。 

parseInt('10/01') // 10
parseInt('011') // 11
parseInt('x08') // NaN
parseInt('0x08') // 8
parseInt('11.12a') // 11
parseFloat('11.12a') // 11.12

4、字符串

字符串replace查找字符串替换成目标字符。
第一个参数是RegExp对象或字符串，第二个参数是字符串或函数。要想替换所有字符串，提供正则表达式，指定g标志，否则只替换第一个满足要求的字符串。

split(separator,howmany)方法，按分割符将字符串分割成字符串数组。
第一个参数分隔符是字符串或RegExp对象，第二个参数用于指定数组大小，返回数组不会超过既定大小。

"I have a cat".split("").reverse().join("-") // 't-a-c- -a- -e-v-a-h- -I'

5、正则表达式 

\d：数字[0-9]    \D：[^0-9]
\s：空白字符[\t\n\x0B\f\r]    \S
\w：单词字符[a-zA-Z_0-9]    \W

^ 以...开始    $ 以...结束

*：0到多
+：1到多
?：0或1
{n}：匹配确定的n次
{n,}：至少匹配n次
{n,m}：最少匹配n次且最多匹配m次

var reg=/^w+[^d]+$/;
console.log(reg.test('ww_32r')); // true
console.log(reg.test('123_dskr')); // false
console.log(reg.test('w7_d2')); // false

6、比较typeof和instanceof

（1）typeof运算符 typeof 变量名; //返回字符串 可以识别标准类型（Null除外），不能识别具体的对象类型（Function除外）。 （2）instanceof 变量名 instanceof 类型; 判别内置对象类型、自定义对象类型，不能判别标准类型。给定引用类型的实例则返回true，检测基本类型值返回false。

 

7、包装类类型识别

包装类Boolean、Number、String。所有基本包装类型的对象（new创建）都会被转换为布尔值true，typeof均得到object。

var strObj=new String('abc');
console.log(strObj instanceof String); // true
console.log(typeof strObj=='string'); // false

8、对象的深克隆

function deepClone(obj){}

9、数组

数组的sort()，默认按升序排列，返回排序后的数组。 sort()方法调用每个数组项的toString()方法，比较得到的字符串，即使是数值。sort()方法可以接收一个比较函数作为参数，指定排序方法。比较函数接收两个参数，如果第一个参数位于第二个参数之前则返回一个负数，两个参数相等则返回0，如果第一个参数应该位于第二个参数之后则返回一个正数。

colors.slice(1,4); 截取，取1-3，返回新数组 返回从起始位置到结束位置-1的项；只有一个参数，则至数组末尾；有负数，则与length相加；结束位置小于起始位置则返回空数组。 splice(start, deleteCount[, item1[, item2[, …]]])，从数组中删除或添加元素，并更改数组内容，返回一个数组，该数组包含从原始数组中删除的项。

var foo=[];foo[2]=1;foo.push(2);alert(foo.length); // 4

10、数组去重并排序，打印重复字符及次数

10、函数

var m=1; 
function add(n){ 
  return n=n+1; 
} 
y=add(m); // 4
function add(n) { 
  return n=n+3; 
} 
z=add(m); // 4

a(); // '函数声明'
function a(){
  console.log("函数声明");
}
b(); // Uncaught TypeError: b is not a function
var b=function(){
  console.log('函数表达式');
}

一个函数实现add(1)(2)(3)和add(1,2)不同的调用方式。

function add(...a){
  let sum=0;
  for(let num of a){
    sum+=num;
  }
  function s(...b){
    for(let num of b){
      sum+=num;
    }
    return s;
  }
  s.toString=function(){return sum;}
  return s;
}
console.log(add(2,3)); // 5
console.log(add(2)(3)); // 5
console.log(add(1)(2,3)(4,5,6)); // 21

11、闭包

闭包是指有权访问另一个函数作用域中的变量的函数，由函数和与其相关的引用环境组成。闭包允许函数访问其引用环境中的变量，有可能是外部环境变量，该变量称为自由变量。创建闭包的常见方式，在一个函数内部创建另一个函数。

闭包的应用，保存变量现场。闭包只能取得包含函数中任何变量的最后一个值，但可以强制创建另一个匿名函数强制让闭包的行为符合预期。

闭包的应用，私有作用域的匿名函数。临时需要一些变量，就可以使用私有作用域，限制向全局作用域中添加过多的变量和函数。私有变量包括函数的参数、局部变量和在函数内部定义的其他函数。

for(var i=0;i<6;i++){
  setTimeout(function(){
    console.log(i); // 打印6个6
  },1000);      
}

// ES6语法可以实现打印1 2 3 4吗？
var numbers=[0,1,2,3];
var functions=[];
for(var i=0;num=numbers[i],i

12、call、apply和bind的区别

函数调用时绑定this值：call()、apply()让函数在特定的作用域下进行调用，即设置函数体内this对象的值。扩充函数运行的作用域，对象不需要与方法有任何耦合关系。区别仅在于接受参数的方式不同， call()方法传递的参数逐个列举，第一个参数是作用域；apply()方法接收两个参数，作用域和参数数组。

为函数绑定this值但并不调用：bind()传入新作用域，返回新函数，该函数在bind作用域执行。第二个参数是参数列表，与call一致。

var scope='window';
env={
  scope:'inner',
  getscope:function(){
    console.log(this.scope);
  }
}
env.getscope(); // 'inner'
env.getscope.apply(window); // 'window'
env.getscope.call(window); // 'window'
env.getscope.bind(window)(); // 'window'

var f=env.getscope;
f(); // 'window'

13、垃圾回收机制和内存管理

js具有自动垃圾回收机制，找出不再使用的变量，垃圾收集器按一定时间间隔（影响性能）释放其占用的内存。“标记清除”是目前主流的垃圾回收算法，给当前不使用的值加上标记，再回收内存。另一种算法是“引用计数”，跟踪记录所有值被引用的次数，当代码中存在循环引用现象时会导致问题。及时解除不再使用的全局对象、全局对象属性及循环引用变量的引用，确保有效回收内存。

14、异步加载JS的方式

使用defer属性让脚本在文档完全呈现之后再顺序执行，async属性同样让脚本立即下载延迟执行，但不保证顺序。

动态生成

你可能感兴趣的:(1.1,前端基础,前端基础——html,CSS,JavaScript,ES6)

• Long类型前后端数据不一致 igotyback 前端
  响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
• swagger访问路径 igotyback swagger
  Swagger2.x版本访问地址：http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口，通常为8080。{context-path}是你的应用上下文路径，如果应用部署在根路径下，则为空。Swagger3.x版本对于Swagger3.x版本（也称为OpenAPI3）访问地址：http://{ip
• 扫地机类清洁产品之直流无刷电机控制 悟空胆好小 清洁服务机器人单片机人工智能
  扫地机类清洁产品之直流无刷电机控制1.1前言扫地机产品有很多的电机控制，滚刷电机1个，边刷电机1-2个，清水泵电机，风机一个，部分中高端产品支持抹布功能，也就是存在抹布盘电机，还有追觅科沃斯石头等边刷抬升电机，滚刷抬升电机等的，这些电机有直流有刷电机，直接无刷电机，步进电机，电磁阀，挪动泵等不同类型。电机的原理，驱动控制方式也不行。接下来一段时间的几个文章会作个专题分析分享。直流有刷电机会自动持续
• html 中如何使用 uniapp 的部分方法 某公司摸鱼前端 htmluni-app前端
  示例代码：Documentconsole.log(window);效果展示：好了，现在就可以uni.使用相关的方法了
• Python数据分析与可视化实战指南 William数据分析 pythonpython数据
  在数据驱动的时代，Python因其简洁的语法、强大的库生态系统以及活跃的社区，成为了数据分析与可视化的首选语言。本文将通过一个详细的案例，带领大家学习如何使用Python进行数据分析，并通过可视化来直观呈现分析结果。一、环境准备1.1安装必要库在开始数据分析和可视化之前，我们需要安装一些常用的库。主要包括pandas、numpy、matplotlib和seaborn等。这些库分别用于数据处理、数学
• Python教程：一文了解使用Python处理XPath 旦莫 Python进阶python开发语言
  目录1.环境准备1.1安装lxml1.2验证安装2.XPath基础2.1什么是XPath？2.2XPath语法2.3示例XML文档3.使用lxml解析XML3.1解析XML文档3.2查看解析结果4.XPath查询4.1基本路径查询4.2使用属性查询4.3查询多个节点5.XPath的高级用法5.1使用逻辑运算符5.2使用函数6.实战案例6.1从网页抓取数据6.1.1安装Requests库6.1.2代
• 四章-32-点要素的聚合 彩云飘过
  本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.
• DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
  ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
• 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
  ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
• HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
  Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
• webpack图片等资源的处理 dmengmeng
  需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p
• node.js学习 小猿L node.jsnode.js学习vim
  node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
• Rust基础知识 GRKF15 rust开发语言后端
  1.Rust语言简介1.1基础语法变量声明：let关键字用于声明变量，可以指定或不指定类型，如leta=10;和letmutc=30i32;。函数定义：使用fn关键字定义函数，并指定参数类型及返回类型，如fnadd(i:i32,j:i32)->i32{i+j}。控制流：包括if、else等，控制语句后需要使用;来结束语句。1.2数据类型整数类型：i8、i16、i32、i64、i128，以及无符号的
• ES聚合分析原理与代码实例讲解 光剑书架上的书 大厂Offer收割机面试题简历程序员读书硅基计算碳基计算认知计算生物计算深度学习神经网络大数据AIGCAGILLMJavaPython架构设计Agent程序员实现财富自由
  ES聚合分析原理与代码实例讲解1.背景介绍1.1问题的由来在大规模数据分析场景中，特别是在使用Elasticsearch（ES）进行数据存储和检索时，聚合分析成为了一个至关重要的功能。聚合分析允许用户对数据集进行细分和分组，以便深入探索数据的结构和模式。这在诸如实时监控、日志分析、业务洞察等领域具有广泛的应用。1.2研究现状目前，ES聚合分析已经成为现代大数据平台的核心组件之一。它支持多种类型的聚
• xilinx vivado PULLMODE 设置思路 坚持每天写程序 fpga开发
  1.xilinx引脚分类XilinxIO的分类：以XC7A100TFGG484为例，其引脚分类如下：1.UserIO(用户IO)：用户使用的普通IO1.1专用(Dedicated)IO：命名为IO_LXXY_#、IO_XX_#的引脚，有固定的特定用途，多为底层特定功能的直接实现，如差分对信号、关键控制信号等，不能随意变更。1.2多功能(Multi-Function)IO：命名为IO_LXXY_ZZ
• 数据结构 | 栈和队列 TT-Kun 数据结构与算法数据结构栈队列C语言
  文章目录栈和队列1.栈：后进先出（LIFO）的数据结构1.1概念与结构1.2栈的实现2.队列：先进先出（FIFO）的数据结构2.1概念与结构2.2队列的实现3.栈和队列算法题3.1有效的括号3.2用队列实现栈3.3用栈实现队列3.4设计循环队列结论栈和队列在计算机科学中，栈和队列是两种基本且重要的数据结构，它们在处理数据存储和访问顺序方面有着独特的规则和应用。本文将详细介绍栈和队列的概念、结构、实
• 第二十 python基础--语句 九樱MOL
  目录具体内容1：if语句的使用格式判断语句2：if-else的使用格式3：if-elif-else的使用格式4：if嵌套1：while循环的格式循环语句2：while循环嵌套3：for循环的格式一、判断语句在程序中如果某些条件满足，才能做某件事情，而不满足时不允许做，这就是所谓的判断1.1if语句的使用格式if要判断的条件:条件成立时，要做的事情案例:判断年纪，如果age大于18，输入成年age=
• 简单说说关于shell中zsh和bash的选择 秋刀prince MacOS小猿们的开发日常bash
  希望文章能给到你启发和灵感～如果觉得文章对你有帮助的话，点赞+关注+收藏支持一下博主吧～阅读指南开篇说明一、基础环境说明1.1硬件环境1.2软件环境二、什么是shell、bash、zsh?2.1bash2.2zsh三、选择Bash还是Zsh？四、一些常见问题开篇说明本篇主要简单说明一下，shell中bash和zsh的区别和选择；我们经常会把这两个搞混，不知道什么时候用哪一个，以及怎么使用；一、基础
• JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy） 跳房子的前端 前端面试javascript开发语言ecmascript
  在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数
• 【Bugs】Python：“ModuleNotFoundError: No module named ‘XXX‘” 系'辞 工具箱pythonbuganaconda
  问题描述Python使用库的前提是必须已安装了相应的库，往往利用“命令行指令”实现安装，一般安装解法类似。但，还是具有延伸问题，本博客对此作记录。【1】Nomodulenamed‘seaborn’(1.1):情况1：为Anaconda安装【图1-2】.定位Anaconda路径【图3】.Anaconda路径加入Path>&
• Vue( ElementUI入门、vue-cli安装) m0_l5z elementuivue.js
  一.ElementUI入门目录：1.ElementUI入门1.1ElementUI简介1.2Vue+ElementUI安装1.3开发示例2.搭建nodejs环境2.1nodejs介绍2.2npm是什么2.3nodejs环境搭建2.3.1下载2.3.2解压2.3.3配置环境变量2.3.4配置npm全局模块路径和cache默认安装位置2.3.5修改npm镜像提高下载速度2.3.6验证安装结果3.运行n
• Spring MVC 全面指南：从入门到精通的详细解析 一杯梅子酱 技术栈学习springmvcjava
  引言：SpringMVC，作为Spring框架的一个重要模块，为构建Web应用提供了强大的功能和灵活性。无论是初学者还是有一定经验的开发者，掌握SpringMVC都将显著提升你的Web开发技能。本文旨在为初学者提供一个全面且易于理解的学习路径，通过详细的知识点分析和实际案例，帮助你快速上手SpringMVC，让学习过程既深刻又高效。一、SpringMVC简介1.1什么是SpringMVC？Spri
• 4 大低成本娱乐方式: 小说, 音乐, 视频, 电子游戏 穷人小水滴 娱乐音视频低成本小说游戏
  穷人如何获得快乐?小说,音乐,视频,游戏,本文简单盘点一下这4大低成本(安全)娱乐方式.这里是穷人小水滴,专注于穷人友好型低成本技术.(本文为58号作品.)目录1娱乐方式1.1小说(网络小说)1.2音乐1.3视频(b站)1.4游戏(电子游戏/计算机软件)2低成本:一只手机即可3总结与展望1娱乐方式这几种,也可以说是艺术的具体形式.更专业的说,(娱乐)是劳动力再生产的重要组成部分.使人放松,获得快乐
• 00. 这里整理了最全的爬虫框架（Java + Python） 有一只柴犬 爬虫系列爬虫javapython
  目录1、前言2、什么是网络爬虫3、常见的爬虫框架3.1、java框架3.1.1、WebMagic3.1.2、Jsoup3.1.3、HttpClient3.1.4、Crawler4j3.1.5、HtmlUnit3.1.6、Selenium3.2、Python框架3.2.1、Scrapy3.2.2、BeautifulSoup+Requests3.2.3、Selenium3.2.4、PyQuery3.2
• 详解：如何设计出健壮的秒杀系统？ 夜空_2cd3
  作者：Yrion博客园：cnblogs.com/wyq178/p/11261711.html前言：秒杀系统相信很多人见过，比如京东或者淘宝的秒杀，小米手机的秒杀。那么秒杀系统的后台是如何实现的呢？我们如何设计一个秒杀系统呢？对于秒杀系统应该考虑哪些问题？如何设计出健壮的秒杀系统？本期我们就来探讨一下这个问题：image目录一：****秒杀系统应该考虑的问题二：****秒杀系统的设计和技术方案三：*
• JavaScript `Map` 和 `WeakMap`详细解释 跳房子的前端 JavaScript原生方法javascript前端开发语言
  在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键
• windows下python opencv ffmpeg读取摄像头实现rtsp推流 拉流 图像处理大大大大大牛啊 opencv实战代码讲解视觉图像项目windowspythonopencv
  windows下pythonopencvffmpeg读取摄像头实现rtsp推流拉流整体流程1.下载所需文件1.1下载rtsp推流服务器1.2下载ffmpeg2.开启RTSP服务器3.opencv读取摄像头并调用ffmpeg进行推流4.opencv进行拉流5.opencv异步拉流整体流程1.下载所需文件1.1下载rtsp推流服务器下载RTSP服务器下载页面https://github.com/blu
• 《 C++ 修炼全景指南：四 》揭秘 C++ List 容器背后的实现原理，带你构建自己的双向链表 Lenyiin 技术指南C++修炼全景指南c++list链表stl
  本篇博客，我们将详细讲解如何从头实现一个功能齐全且强大的C++List容器，并深入到各个细节。这篇博客将包括每一步的代码实现、解释以及扩展功能的探讨，目标是让初学者也能轻松理解。一、简介1.1、背景介绍在C++中，std::list是一个基于双向链表的容器，允许高效的插入和删除操作，适用于频繁插入和删除操作的场景。与动态数组不同，list允许常数时间内的插入和删除操作，支持双向遍历。这篇文章将详细
• 【自动化测试】UI自动化的分类、如何选择合适的自动化测试工具以及其中appium的设计理念、引擎和引擎如何工作 Lossya ui自动化测试工具自动化测试appium
  引言UI自动化测试主要针对软件的用户界面进行测试，以确保用户界面元素的交互和功能符合预期文章目录引言一、UI自动化的分类1.1基于代码的自动化测试1.2基于录制/回放的自动化测试1.3基于框架的自动化测试1.4按测试对象分类1.5按测试层次分类1.6按测试执行方式分类1.7按测试目的分类二、如何选择合适的自动化测试工具2.1项目需求分析2.2工具特性评估2.3成本考虑2.4团队技能2.5试用和评估
• 微信小程序开发注意事项 jun778895 微信小程序小程序
  微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂
• Linux的Initrd机制 被触发 linux
  Linux 的 initrd 技术是一个非常普遍使用的机制，linux2.6 内核的 initrd 的文件格式由原来的文件系统镜像文件转变成了 cpio 格式，变化不仅反映在文件格式上， linux 内核对这两种格式的 initrd 的处理有着截然的不同。本文首先介绍了什么是 initrd 技术，然后分别介绍了 Linux2.4 内核和 2.6 内核的 initrd 的处理流程。最后通过对 Lin
• maven本地仓库路径修改 bitcarter maven
  默认maven本地仓库路径：C:\Users\Administrator\.m2 修改maven本地仓库路径方法：     1.打开E:\maven\apache-maven-2.2.1\conf\settings.xml     2.找到        
• XSD和XML中的命名空间 darrenzhu xmlxsdschemanamespace命名空间
  http://www.360doc.com/content/12/0418/10/9437165_204585479.shtml http://blog.csdn.net/wanghuan203/article/details/9203621 http://blog.csdn.net/wanghuan203/article/details/9204337 http://www.cn
• Java 求素数运算 周凡杨 java算法素数
  网络上对求素数之解数不胜数，我在此总结归纳一下，同时对一些编码，加以改进，效率有成倍热提高。 第一种：   原理: 6N(+-)1法         任何一个自然数，总可以表示成为如下的形式之一： 6N，6N+1，6N+2，6N+3，6N+4，6N+5 (N=0，1，2，…)   
• java 单例模式 g21121 java
  想必单例模式大家都不会陌生，有如下两种方式来实现单例模式：   class Singleton { private static Singleton instance=new Singleton(); private Singleton(){} static Singleton getInstance() { return instance; }
• Linux下Mysql源码安装 510888780 mysql
  1.假设已经有mysql-5.6.23-linux-glibc2.5-x86_64.tar.gz (1)创建mysql的安装目录及数据库存放目录       解压缩下载的源码包，目录结构，特殊指定的目录除外：           
• 32位和64位操作系统 墙头上一根草 32位和64位操作系统
  32位和64位操作系统是指：CPU一次处理数据的能力是32位还是64位。现在市场上的CPU一般都是64位的，但是这些CPU并不是真正意义上的64 位CPU，里面依然保留了大部分32位的技术，只是进行了部分64位的改进。32位和64位的区别还涉及了内存的寻址方面，32位系统的最大寻址空间是2 的32次方= 4294967296（bit）= 4（GB）左右，而64位系统的最大寻址空间的寻址空间则达到了
• 我的spring学习笔记10-轻量级_Spring框架 aijuans Spring 3
  一、问题提问：     → 请简单介绍一下什么是轻量级？     轻量级（Leightweight）是相对于一些重量级的容器来说的，比如Spring的核心是一个轻量级的容器，Spring的核心包在文件容量上只有不到1M大小，使用Spring核心包所需要的资源也是很少的，您甚至可以在小型设备中使用Spring。  
• mongodb 环境搭建及简单CURD antlove WebInstallcurdNoSQLmongo
  一 搭建mongodb环境 1. 在mongo官网下载mongodb 2. 在本地创建目录 "D:\Program Files\mongodb-win32-i386-2.6.4\data\db" 3. 运行mongodb服务 [mongod.exe --dbpath "D:\Program Files\mongodb-win32-i386-2.6.4\data\
• 数据字典和动态视图 百合不是茶 oracle数据字典动态视图系统和对象权限
  数据字典（data dictionary）是 Oracle 数据库的一个重要组成部分，这是一组用于记录数据库信息的只读（read-only）表。随着数据库的启动而启动,数据库关闭时数据字典也关闭   数据字典中包含   数据库中所有方案对象（schema object）的定义(包括表，视图，索引，簇，同义词，序列，过程，函数，包，触发器等等) 数据库为一
• 多线程编程一般规则 bijian1013 javathread多线程java多线程
         如果两个工两个以上的线程都修改一个对象，那么把执行修改的方法定义为被同步的，如果对象更新影响到只读方法，那么只读方法也要定义成同步的。        不要滥用同步。如果在一个对象内的不同的方法访问的不是同一个数据，就不要将方法设置为synchronized的。
• 将文件或目录拷贝到另一个Linux系统的命令scp bijian1013 linuxunixscp
  一.功能说明        scp就是security copy，用于将文件或者目录从一个Linux系统拷贝到另一个Linux系统下。scp传输数据用的是SSH协议，保证了数据传输的安全，其格式如下：        scp 远程用户名@IP地址：文件的绝对路径
• 【持久化框架MyBatis3五】MyBatis3一对多关联查询 bit1129 Mybatis3
  以教员和课程为例介绍一对多关联关系，在这里认为一个教员可以叫多门课程，而一门课程只有1个教员教，这种关系在实际中不太常见，通过教员和课程是多对多的关系。   示例数据：   地址表：   CREATE TABLE ADDRESSES ( ADDR_ID INT(11) NOT NULL AUTO_INCREMENT, STREET VAR
• cookie状态判断引发的查找问题 bitcarter formcgi
  先说一下我们的业务背景： 1.前台将图片和文本通过form表单提交到后台，图片我们都做了base64的编码，并且前台图片进行了压缩 2.form中action是一个cgi服务 3.后台cgi服务同时供PC，H5，APP 4.后台cgi中调用公共的cookie状态判断方法（公共的，大家都用，几年了没有问题） 问题：（折腾两天。。。。） 1.PC端cgi服务正常调用，cookie判断没
• 通过Nginx,Tomcat访问日志(access log)记录请求耗时 ronin47
  一、Nginx通过$upstream_response_time $request_time统计请求和后台服务响应时间 nginx.conf使用配置方式： log_format main '$remote_addr - $remote_user [$time_local] "$request" ''$status $body_bytes_sent "$http_r
• java-67- n个骰子的点数。 把n个骰子扔在地上，所有骰子朝上一面的点数之和为S。输入n，打印出S的所有可能的值出现的概率。 bylijinnan java
  public class ProbabilityOfDice { /** * Q67 n个骰子的点数 * 把n个骰子扔在地上，所有骰子朝上一面的点数之和为S。输入n，打印出S的所有可能的值出现的概率。 * 在以下求解过程中，我们把骰子看作是有序的。 * 例如当n=2时，我们认为（1，2）和（2，1）是两种不同的情况 */ private stati
• 看别人的博客，觉得心情很好 Cb123456 博客心情
     以为写博客，就是总结，就和日记一样吧，同时也在督促自己。今天看了好长时间博客:    职业规划:    http://www.iteye.com/blogs/subjects/zhiyeguihua      android学习:    1.http://byandby.i
• [JWFD开源工作流]尝试用原生代码引擎实现循环反馈拓扑分析 comsci 工作流
      我们已经不满足于仅仅跳跃一次，通过对引擎的升级，今天我测试了一下循环反馈模式，大概跑了200圈，引擎报一个溢出错误      在一个流程图的结束节点中嵌入一段方程，每次引擎运行到这个节点的时候，通过实时编译器GM模块，计算这个方程，计算结果与预设值进行比较，符合条件则跳跃到开始节点，继续新一轮拓扑分析，直到遇到
• JS常用的事件及方法 cwqcwqmax9 js
  事件 描述 onactivate 当对象设置为活动元素时触发。 onafterupdate 当成功更新数据源对象中的关联对象后在数据绑定对象上触发。 onbeforeactivate 对象要被设置为当前元素前立即触发。 onbeforecut 当选中区从文档中删除之前在源对象触发。 onbeforedeactivate 在 activeElement 从当前对象变为父文档其它对象之前立即
• 正则表达式验证日期格式 dashuaifu 正则表达式IT其它java其它
  正则表达式验证日期格式 function isDate(d){ var v = d.match(/^(\d{4})-(\d{1,2})-(\d{1,2})$/i); if(!v) { this.focus(); return false; } } <input value="2000-8-8" onblu
• Yii CModel.rules() 方法 、validate预定义完整列表、以及说说验证 dcj3sjt126com yii
  public array rules () {return} array 要调用 validate() 时应用的有效性规则。 返回属性的有效性规则。声明验证规则，应重写此方法。 每个规则是数组具有以下结构：array('attribute list', 'validator name', 'on'=>'scenario name', ...validation
• UITextAttributeTextColor = deprecated in iOS 7.0 dcj3sjt126com ios
  In this lesson we used the key "UITextAttributeTextColor" to change the color of the UINavigationBar appearance to white. This prompts a warning "first deprecated in iOS 7.0." Ins
• 判断一个数是质数的几种方法 EmmaZhao Mathpython
  质数也叫素数，是只能被1和它本身整除的正整数，最小的质数是2，目前发现的最大的质数是p=2^57885161-1【注1】。 判断一个数是质数的最简单的方法如下： def isPrime1(n): for i in range(2, n): if n % i == 0: return False return True 但是在上面的方法中有一些冗余的计算，所以
• SpringSecurity工作原理小解读 坏我一锅粥 SpringSecurity
    SecurityContextPersistenceFilter   ConcurrentSessionFilter   WebAsyncManagerIntegrationFilter   HeaderWriterFilter   CsrfFilter   LogoutFilter   Use
• JS实现自适应宽度的Tag切换 ini JavaScripthtmlWebcsshtml5
  效果体验：http://hovertree.com/texiao/js/3.htm   该效果使用纯JavaScript代码，实现TAB页切换效果，TAB标签根据内容自适应宽度，点击TAB标签切换内容页。 HTML文件代码： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"
• Hbase Rest API : 数据查询 kane_xie RESThbase
  hbase（hadoop）是用java编写的，有些语言（例如python）能够对它提供良好的支持，但也有很多语言使用起来并不是那么方便，比如c#只能通过thrift访问。Rest就能很好的解决这个问题。Hbase的org.apache.hadoop.hbase.rest包提供了rest接口，它内嵌了jetty作为servlet容器。   启动命令：./bin/hbase rest s
• JQuery实现鼠标拖动元素移动位置（源码+注释） 明子健 jqueryjs源码拖动鼠标
  欢迎讨论指正！   print.html代码： <!DOCTYPE html> <html> <head> <meta http-equiv=Content-Type content="text/html;charset=utf-8"> <title>发票打印</title> &l
• Postgresql 连表更新字段语法 update qifeifei PostgreSQL
  下面这段sql本来目的是想更新条件下的数据，可是这段sql却更新了整个表的数据。sql如下： UPDATE tops_visa.visa_order SET op_audit_abort_pass_date = now() FROM tops_visa.visa_order as t1 INNER JOIN tops_visa.visa_visitor as t2 ON t1.
• 将redis,memcache结合使用的方案? tcrct rediscache
  公司架构上使用了阿里云的服务，由于阿里的kvstore收费相当高，打算自建，自建后就需要自己维护，所以就有了一个想法，针对kvstore(redis)及ocs(memcache)的特点，想自己开发一个cache层，将需要用到list，set，map等redis方法的继续使用redis来完成，将整条记录放在memcache下，即findbyid，save等时就memcache，其它就对应使用redi
• 开发中遇到的诡异的bug wudixiaotie bug
  今天我们服务器组遇到个问题： 我们的服务是从Kafka里面取出数据，然后把offset存储到ssdb中，每个topic和partition都对应ssdb中不同的key，服务启动之后，每次kafka数据更新我们这边收到消息，然后存储之后就发现ssdb的值偶尔是-2,这就奇怪了，最开始我们是在代码中打印存储的日志，发现没什么问题，后来去查看ssdb的日志，才发现里面每次set的时候都会对同一个key

按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他

首页 - 关于我们 - 站内搜索 - Sitemap - 侵权投诉

版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.