JS实用技术
JS外部引用其他文件(建议)
<script src="myScript1.js"></script>
JS输出显示方式
- 使用 window.alert() 写入警告框
- 使用 document.write() 写入 HTML 输出,仅用于测试。
- 使用 innerHTML 写入 HTML 元素
- 使用 console.log() 写入浏览器控制台
Undefined
在 JavaScript 中,没有值的变量,其值是 undefined。typeof 也返回 undefined。
任何变量或者对象均可通过设置值为 undefined 进行清空。其类型也将是 undefined。
Null
在 JavaScript 中,null 是 "nothing"。它被看做不存在的事物。
不幸的是,在 JavaScript 中,null 的数据类型是对象。
可以把 null 在 JavaScript 中是对象理解为一个 bug。它本应是 null。
可以通过设置值为 null 清空对象。
typeof
typeof 运算符可返回以下两种类型之一:function,object
typeof 运算符把对象、数组或 null 返回 object。
typeof 运算符不会把函数返回 object。
请注意:
- NaN 的数据类型是数值
- 数组的数据类型是对象
- 日期的数据类型是对象
- null 的数据类型是对象
- 未定义变量的数据类型是 undefined
- 尚未赋值的变量的数据类型也是 undefined
您无法使用 typeof 去判断 JavaScript 对象是否是数组(或日期)。
constructor 属性返回所有 JavaScript 变量的构造器函数。
JavaScript 改变 HTML 内容
document.getElementById("demo").innerHTML = "Hello JavaScript";
改变 <img> 标签的 src 属性(source)来改变一张 HTML 图像
document.getElementById('myImage').src='/i/eg_bulbon.gif';
JavaScript 改变 HTML 样式 (CSS)
document.getElementById("demo").style.fontSize = "25px";
JavaScript 隐藏 HTML 元素
document.getElementById("demo").style.display="none";
JavaScript 能够显示 HTML 元素
document.getElementById("demo").style.display="block";
字符串函数
length 属性返回字符串的长度indexOf(str) 和 lastIndexOf(str),如果没有找到则返回-1, 返回字符串中指定文本首次(最后)出现的索引。indexOf(str,index) ,表示从index开始搜索。search() 方法搜索特定值的字符串,并返回匹配的位置。search() 方法无法设置第二个开始位置参数。indexOf() 方法无法设置更强大的搜索值(正则表达式)
提取部分字符串
- slice(start, end),提取字符串的某个部分并在新字符串中返回被提取的部分。如果某个参数为负,则从字符串的结尾开始计数。
如果省略第二个参数,则该方法将裁剪字符串的剩余部分,负值位置不适用 Internet Explorer 8 及其更早版本
- substring(start, end)
- substr(start, length),从start开始,截取length长度。
- replace(str,str2) 用str2替换在字符串str值,不会改变调用它的字符串,它返回的是新字符串。同时,对大小写敏感,str2支持正则表达式。
- toUpperCase()
- concat(str1,str2),连接两个或多个字符串,字符串不能更改,只能替换。
- trim() 方法删除字符串两端的空白符.不适用 Internet Explorer 8 及其更早版本
- ==str.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, ''))
提取字符串字符
这是两个提取字符串字符的安全方法:
- charAt(position) 方法返回字符串中指定下标(位置)的字符串
- charCodeAt(position) 方法返回字符串中指定索引的字符 unicode 编码,
- 如果找不到字符,[ ] 返回 undefined,而 charAt() 返回空字符串。
- split(str) 根据str,将字符串转换为数组
JS数值方法:
toString() 以字符串返回数值。
toExponential() 返回字符串值,它包含已被四舍五入并使用指数计数法的数字。该参数是可选的。如果您没有设置它,JavaScript 不会对数字进行舍入。
var x = 9.656; x.toExponential(2); // 返回 9.66e+0 x.toExponential(4); // 返回 9.6560e+0 x.toExponential(6); // 返回 9.656000e+0
toFixed() 返回字符串值,它包含了指定位数小数的数字
var x = 9.656; x.toFixed(0); // 返回 10 x.toFixed(2); // 返回 9.66 x.toFixed(4); // 返回 9.6560 x.toFixed(6); // 返回 9.656000
toPrecision() 返回字符串值,它包含了指定长度的数字
var x = 9.656; x.toPrecision(); // 返回 9.656 x.toPrecision(2); // 返回 9.7 x.toPrecision(4); // 返回 9.656
valueOf() 以数值返回数值,一般不在代码中使用。
把变量转换为数值
- Number() 方法,返回数字,由其参数转换而来。如果无法转换数字,则返回 NaN
- parseInt() 方法,解析其参数并返回浮点数。
- parseFloat() 方法,解析其参数并返回整数。
这些方法并非数字方法,而是全局 JavaScript 方法。所有数字方法可用于任意类型的数字(字面量、变量或表达式)
溢出时返回 POSITIVE_INFINITY;var x = 1 / 0;(正无穷)
溢出时返回 NEGATIVE_INFINITY;var x = -1 / 0;(负无穷)
Infinity (或 -Infinity)是 JavaScript 在计算数时超出最大可能数范围时返回的值。
数组方法
遍历数组的最安全方法是使用 "for" 循环:
也可以使用 Array.foreach() 函数
list.forEach(myFunction); 向数组添加新元素的最佳方法是使用 push() 方法
list.push("Lemon");
也可以使用 length 属性向数组添加新元素
list[list.length] = "Lemon";
没有必要使用 JavaScript 的内建数组构造器 new Array()。new 关键词只会使代码复杂化。它还会产生某些不可预期的结果。请使用 [ ] 取而代之!
识别数组:
方案1:ECMAScript 5 定义了新方法 Array.isArray();(ECMAScript 5 不支持老的浏览器);
Array.isArray(list);
方案2:创建您自己的 isArray() 函数以解决此问题:
function isArray(x) { return x.constructor.toString().indexOf("Array") > -1; }
方案3:假如对象由给定的构造器创建,则 instanceof 运算符返回 true
var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits instanceof Array // 返回 true
数组方法
toString() 把数组转换为数组值(逗号分隔)的字符串。
join() 方法也可将所有数组元素结合为一个字符串。它的行为类似 toString(),但是您还可以规定分隔符,list.join(" * ")
Popping 和 Pushing
在处理数组时,删除元素和添加新元素是很简单的。
Popping 和 Pushing 指的是:
从数组弹出项目,或向数组推入项目。
pop() 方法从数组中删除最后一个元素:
var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.pop();
pop() 方法返回“被弹出”的值
var fruits = ["Banana", "Orange", "Apple", "Mango"]; var x = fruits.pop(); // x 的值是 "Mango"
push() 方法(在数组结尾处)向数组添加一个新的元素
var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.push("Kiwi"); // 向 fruits 添加一个新元素
push() 方法返回新数组的长度
var fruits = ["Banana", "Orange", "Apple", "Mango"]; var x = fruits.push("Kiwi"); // x 的值是 5
位移元素
位移与弹出等同,但处理首个元素而不是最后一个。
shift() 方法会删除首个数组元素,并把所有其他元素“位移”到更低的索引。shift() 方法返回被“位移出”的字符串
unshift() 方法(在开头)向数组添加新元素,并“反向位移”旧元素,unshift() 方法返回新数组的长度。
删除元素
既然 JavaScript 数组属于对象,其中的元素就可以使用 JavaScript delete 运算符来删除;
使用 delete 会在数组留下未定义的空洞。请使用 pop() 或 shift() 取而代之。
拼接数组
splice() 方法可用于向数组添加新项
var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.splice(2, 0, "Lemon", "Kiwi");
第一个参数(2)定义了应添加新元素的位置(拼接)。
第二个参数(0)定义应删除多少元素。
其余参数(“Lemon”,“Kiwi”)定义要添加的新元素。
splice() 方法返回一个包含已删除项的数组。
var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.splice(2, 2, "Lemon", "Kiwi");
使用 splice() 来删除元素
通过聪明的参数设定,您能够使用 splice() 在数组中不留“空洞”的情况下移除元素:
var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.splice(0, 1); // 删除 fruits 中的第一个元素
裁剪数组
slice() 方法用数组的某个片段切出新数组。
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"]; var citrus = fruits.slice(3);//返回Apple,Mango
slice() 可接受两个参数,比如 (1, 3)。
该方法会从开始参数选取元素,直到结束参数(不包括)为止。
slice() 方法创建新数组。它不会从源数组中删除任何元素。
合并(连接)数组
concat() 方法通过合并(连接)现有数组来创建一个新数组。
concat() 方法不会更改现有数组。它总是返回一个新数组。
concat() 方法可以使用任意数量的数组参数
var myChildren = arr1.concat(arr2, arr3); var myChildren = arr1.concat(["Emil", "Tobias", "Linus"]);
数组排序
sort() 方法以字母顺序对数组进行排序。
如果数字按照字符串来排序,则 "25" 大于 "100",因为 "2" 大于 "1"。
正因如此,sort() 方法在对数值排序时会产生不正确的结果。
我们通过一个比值函数来修正此问题:
var points = [40, 100, 1, 5, 25, 10]; points.sort(function(a, b){return a - b});
function myArrayMax(arr) { return Math.max.apply(null, arr); }
Math.min.apply([1, 2, 3]) 等于 Math.min(1, 2, 3)。
通过比较函数来对比属性值
cars.sort(function(a, b){return a.year - b.year});
反转数组
reverse() 方法反转数组中的元素。
您可以使用它以降序对数组进行排序
var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.sort(); // 对 fruits 中的元素进行排序 fruits.reverse(); // 反转元素顺序
数组迭代
Array.forEach() 方法为每个数组元素调用一次函数(回调函数)
map() 方法通过对每个数组元素执行函数来创建新数组。map() 方法不会对没有值的数组元素执行函数。map() 方法不会更改原始数组
filter() 方法创建一个包含通过测试的数组元素的新数组。
var numbers = [45, 4, 9, 16, 25]; var over18 = numbers.filter(myFunction); function myFunction(value, index, array) { return value > 18; }
reduce() 方法在每个数组元素上运行函数,以生成(减少它)单个值。reduce() 方法在数组中从左到右工作。reduce() 方法不会减少原始数组。
Array.reduceRight();
every() 方法检查所有数组值是否通过测试。
some() 方法检查某些数组值是否通过了测试。
indexOf() 方法在数组中搜索元素值并返回其位置。
Array.lastIndexOf() 与 Array.indexOf() 类似,但是从数组结尾开始搜索。
find() 方法返回通过测试函数的第一个数组元素的值。
所有浏览器都支持 上述方法,除了 Internet Explorer 8 或更早的版本。
findIndex() 方法返回通过测试函数的第一个数组元素的索引。
JS实用技术的更多相关文章
- 前端常用的库和实用技术之JavaScript多线程
多线程概念: 多线程是指从软件或硬件上实现多个线程并发执行的技术.具有多线程能力的计算机因有硬件支持而能够在 同一时间执行多于一个线程,进而提升整理处理性能.具有这种能力的系统包括对称多处理机,多核心 ...
- 前端常用的库和实用技术之JavaScript高级技巧
javascript高级技巧 变量作用域和闭包 <!DOCTYPE html> <html lang="en"> <head> <meta ...
- 前端常用的库和实用技术之JavaScript 模块化
模块化概念 AMD是requirejs在推广过程中对模块化定义的规范化产出. 异步加载模块,依赖前置,提前执行 Define定义模块define(['require','foo'],function( ...
- Vue.js 和 MVVM 小细节
MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...
- js学习笔记:操作iframe
iframe可以说是比较老得话题了,而且网上也基本上在说少用iframe,其原因大致为:堵塞页面加载.安全问题.兼容性问题.搜索引擎抓取不到等等,不过相对于这些缺点,iframe的优点更牛,跨域请求. ...
- js学习笔记:webpack基础入门(一)
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- JS调用Android、Ios原生控件
在上一篇博客中已经和大家聊了,关于JS与Android.Ios原生控件之间相互通信的详细代码实现,今天我们一起聊一下JS调用Android.Ios通信的相同点和不同点,以便帮助我们在进行混合式开发时, ...
- jquery和Js的区别和基础操作
jqery的语法和js的语法一样,算是把js升级了一下,这两种语法可以一起使用,只不过是用jqery更加方便 一个页面想要使用jqery的话,先要引入一下jqery包,jqery包从网上下一个就可以, ...
- 利用snowfall.jquery.js实现爱心满屏飞
小颖在上一篇一步一步教你用CSS画爱心中已经分享一种画爱心的方法,这次再分享一种方法用css画爱心,并利用snowfall.jquery.js实现爱心满屏飞的效果. 第一步: 利用伪元素before和 ...
随机推荐
- Unity 5.6中的混合光照(下)
https://mp.weixin.qq.com/s/DNQFsWpZm-ybIlF3DTAk2A 在<Unity 5.6中的混合光照(上)>中,我们介绍了混合模式,以及Subtracti ...
- 2014-11-2 NOIP模拟赛1
Noip2009 团结模拟赛如题目理解困难,请自行阅读或参考样例.内存限制均为 256MB,时间限制均为 1s.出题人不会 故意 在题目中设置陷阱,但请自己注意程序的正确性.IO 文件名(.in/.o ...
- React `controlled` 及 `uncontrolled` 组件
通过 props 来设置其 value 值的组件便是一种 controlled 组件.典型的 form 表单中,像 输入框 <input> 下拉框 <select> 多选框 & ...
- Python模块介绍
模块 1.模块定义 用来从逻辑上组织python代码(变量,函数,类,逻辑:实现一个功能),本质上就是.py结尾python文件 分类:内置模块(又称标准库)执行 help('modules')查看所 ...
- 【手撸一个ORM】第四步、Expression(表达式目录树)扩展
到这里,Orm的基架已经搭起来了,接下来就是激动人心的部分,表达式目录树转Sql语句,SqlDataReader转数据实体等等,但是在这之前,我们需要扩展下表达式目录树的方法,以方便后面的相关操作. ...
- qt QMessageBox 中文乱码的问题
QMessageBox::information(this,"Warn", "请插入U盘"); ==================> QMessageB ...
- EOJ Problem #3261 分词 trie + dp + 小剪枝
http://acm.ecnu.edu.cn/problem/3261/ 分词 Time limit per test: 1.0 seconds Time limit all tests: 1.0 s ...
- 《从0到1学习Flink》—— 如何自定义 Data Source ?
前言 在 <从0到1学习Flink>-- Data Source 介绍 文章中,我给大家介绍了 Flink Data Source 以及简短的介绍了一下自定义 Data Source,这篇 ...
- 渣渣菜鸡的 ElasticSearch 源码解析 —— 环境搭建
关注我 转载请务必注明原创地址为:http://www.54tianzhisheng.cn/2018/08/25/es-code01/ 软件环境 1.Intellij Idea:2018.2版本 2. ...
- 《javascript设计模式》笔记之第九章:组合模式
之前一直都是按照书的结构顺序做总结,觉得好像不是很好,现在试着完全按照自己的理解做总结.例子还是书上的例子. 一:组合模式的作用: 在web开发中,主要用于创建嵌套的html结点,使得我们方便的把各种 ...