导航：首页 > 开发技术 >

javascript小知识点有哪些

发表于：2024-11-22 作者：千家信息网编辑

千家信息网最后更新 2024年11月22日，本篇内容主要讲解"javascript小知识点有哪些"，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习"javascript小知识点有哪些"吧!设置图片时单设置

千家信息网最后更新 2024年11月22日javascript小知识点有哪些

本篇内容主要讲解"javascript小知识点有哪些"，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习"javascript小知识点有哪些"吧!

设置图片时单设置一个长或宽则剩下的边长按比例自动设置。
鼠标移至图片上时变成小手给图片添加样式 cursor：pointer；
阻止表单提交
设置盒子权重时在样式中写 z-index:数字越大优先级越高。
id选择器与类选择器的区别：同一个页面中一个标签只能对应一个id但是可以选择多个类，类也可以应用在多个标签中。
给a标签的href="_javascript:;" 其中_javascript:是伪协议，它可以让我们通过一个链接来调用javascript函数.而采用这个方式 _javascript:;可以实现A标签的点击事件运行时，如果页面内容很多，有滚动条时，页面不会乱跳，用户体验更好。相当于执行了一段javascript空代码，地址不发生跳转。与这个相同
去掉li前面的小点用list-style-type: none;
使li或span的外形变为圆形用border-radius: 50%; 添加圆角边框。
textarea设置resize：none；可以防止用户改变文本框大小。
想让盒子根据里面内容多少改变大小将盒子height改成auto。
使按钮或者表单不可用this.disable=true；
a&&b 如果a 为假，则返回 a ；如果a 为真，则返回 b 。
i. a||b 如果 a 为假，则返回b ；如果 a 为真，则返回a 。
img {vertical-align: top; } /取消图片底部3像素距离/
一定要注意在javascript里修改style样式时候赋值都要用""以字符串形式赋值。
javascript修改style中的数值后都可以到行内数值样式上看到。
使用webstorm新建javascript文件时候先把右下角的编码格式改为utf－8否则后面运行会出错。新建css文件也一样。
如果在head里面引用javascript文件则需要考虑文件内函数是否在_window.onload里面否则会产生因为网页未加载完造成javascript出错。
表单中的input可以直接通过name属性获取到DOM对象，form.控件name
创建字符串时若里带有标签的最好用单引号括起来避免和里面的双引号冲突。
JS 页面跳转: _window.location.href = "http://www.itcast.cn"。
要获取当前页面宽度用document.documentElement.clientWidth。
获取当前页面相对滚动document.documentElement.scrollTop||document.body.scrollTop;
input的type改为search时可以将回车当确认键。
获取屏幕触摸用addEventListener（"touchstart"，function(event){}）在函数中用event.touches[0].clientY;来获取鼠标点击的Y坐标用touchmove来获取触摸离开时鼠标最后所在的坐标。
使用var img=new Image(width，height );效果和cratelement的效果相同。用img.src添加图片。
字符串转换成JSON对象用全局的JSON函数 JSON.parse(string);
可以利用instanceof来判断对象的构造函数。
若函数中加return就不能当做构造函数来看，构造函数return的是一个对象。
判断数据类型时常用typeof和call，在使用 typeof 运算符时采用引用类型存储值（NULL，数组，对象）会出现一个问题，无论引用的是什么类型的对象，它都返回 "object"。
console.log(toString.call({})) //[object Object]
console.log(toString.call([])) //[object Array]
用window.addListener("hashchange",function(e){})来监听地址栏中#后的哈希值变化，利用_window.location来得到地址对象。
解析一个地址先创建一个a对象var aLink=document.creatElement("a")
再给a标签对象href赋值为地址字符串，之后既可通过aLink.hash得到地址哈希值
小技巧给一个数组不断添加内容可以arr[arr.length]=…;来给数组不断赋值。
从数组中删除元素也可以splice（元素索引，删除元素数目）。
for循环数组或对象时若用（index in arry）作为条件index表示当前元素索引。
可以使用外部链接的标签img（支持跨域但无法获取服务端数据）、iframe（可以接受数据单操作复杂）、link（在CSS处理阶段会报错）、script（可以获取服务器数据，被选做jsonp传送方式）。
为了使代码易于维护采用开闭原则，对于后期会产生变化的量一定不能写死，以后需要通过修改来迭代。
变化点封装，一般都把今后会变化的地址类的写在config函数里面，后面通过别名来使用。一定不要暴露在代码中。
将一个对象利用"="赋值给另一个对象时传递的是一个内存对象，若修改其中一个的属性则都会发生改动，想要避免源对象被篡改可以利用object.assign()方法或者object.creat()方法。
js中函数对象是有长度的，它的长度是由参数的个数决定。(function (a, b, c, d) {}).length === 4。
想要正确处理上传的文件，并接受到文件的内容，需要把表单的enctype属性设置为multipart/form-data,这是个适用于于BLOB（大型二进制文件）的MIME类型。
想要将一个包含对象的数组以字符串的形式保存到文件中，需要循环遍历数组并用JSON对象的.stringify方法将对象转化为字符串形式，再进行保存。
写静态网页可以使用gulp+browersync（yo webapp生成模板），编写动态网站用express+ejs+sass.
Sass监听文件夹：sass --watch sassFileDirectory:cssFileDirectory；
Sass监听单个文件：sass --watch style.scss:style.css；
函数的柯里化（Currying）是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数的技术。增加了函数的适用性，但同时也降低了函数的适用范围。
惰性载入表示函数执行的分支只会在函数第一次掉用的时候执行，在第一次调用过程中，该函数会被覆盖为另一个按照合适方式执行的函数，这样任何对原函数的调用就不用再经过执行的分支了。如函数功能是对应不同浏览器创建XMLHttpRquest当第一次执行时判断完浏览器类型并创建完成后及可以返回一个被修改过后的本函数，覆盖原来的函数，这样以后调用此函数时就不需要再判断浏览器类型，可以直接创建对应XMLHttpRquest。
面向切面编程AOP主要实现的目的是针对业务处理过程中的切面进行提取，它所面对的是处理过程中的某个步骤或阶段，以获得逻辑过程中各部分之间低耦合性的隔离效果。比如最常见的就是日志记录了.
String的search、match、replace参数都可以为正则表达式。
任何语言在浮点数运算时都会有误差，浮点数运算的时候，先转化为二进制，用二进制来算，结果再转回十进制，转换的过程中会装换成无限循环小数，所以最后结果会有误差。js中使用Number.prototype.toFixed()来设置保留小数的位数,返回的是字符串。可以使用valueOf()来再转为number类型。
数组的归约函数reduce（function(prev,cur，i){}）会从左到右进行迭代，每次返回的值作为下一次的prev参数。
在循环遍历数组时若是想在找到结果后将结果在数组中剔除防止重复，因为若是直接删除会影响数组的循环，解决办法是将此值赋为NaN，这样在数组中显示时为null。使用delete删除数值元素，删除元素会产生空缺，不会更新length，空缺部分显示undefined。如果没按照数组顺序给数组某一索引赋值，数组将不连续，中间空缺部分会显示undefined。forEach()会忽略undefined。使用splice()函数可以移除元素而不产生空缺。若修改数组的length为某个值，数组在此索引之外的部分都会被删除。使用array.filter(function(v){return true;})可以滤出空缺函数。
使用闭包要注意，由于变量被保存在内存中，所以会对内存造成消耗，所以不能滥用闭包。解决方法是在退出函数之前，将不使用的局部变量全部删除。
使用array.filter(function(val){})可以遍历数组里的所有内容，return true的话数组会保留当前内容，false移除当前内容。
获得所有传入的参数放入一个数组args = Array.prototype.slice.call(arguments);
写递归函数时要注意：无论是否满足跳出递归的条件，下一步的执行都要带上return，即在调用自身时前面一定要带上return，满足跳出条件时才能一步一步跳出循环。
```
var lefted,sliced = [];function chunkArrayInGroups(arr, size) {
```

面向对象

在构造函数中创建共有属性通过this.创建，私有属性通过var 创建。
使用delete collection.tracks，可以删除collection的tracks属性。
数据属性有4个描述的行为特性，通过Object.defineProperty(obj,propKey,propDesc)设置。

writable 表示能否修改属性的值。默认为false
Enumerable 表示能否过过for in循环返回属性是否可以枚举。默认为false可以枚举
configuralbe 表示是否能过来delete删除属性从来重新定义属性，能否修改其配置。默认为false。
value 包含这个属性的数据值。读取属性值的时候，从这个位置读取。

使用Object.keys(obj)可以得到obj对象的所有自有（非继承）可枚举的属性键，属性通常都是可枚举的，Object.getOwnPropertyNames(obj)返回obj对象的所有属性键。
枚举的一般规则是，系统创建的属性不可枚举，用户创建的属性可枚举。枚举的主要目的是判断for-in循环中的哪些属性该忽略。对于自己的代码，通常可忽略枚举属性，且应该避免用for-in循环，属性的枚举特性默认为可枚举。
保护对象的三种方式：

防止扩展：Object.preventExtensions(obj);设置对象不能添加属性。
封闭：Object.seal(obj);可以改变属性的值，但属性的特性不能被改变。
冻结：Object.freeze(obj)使所有的属性不可写，且封闭obj不能扩展。

A instanceof B运算符可以用来判断B构造函数的prototype属性是否存在A对象的原型链上。等价于B.prototype.isPrototypeOf(A);
设置原型的另一种方法Object.creat(proto,propDescObj?);
获取原型的另一种方法Object.getPropertypeOf(obj);

实现模块化编程