Js 总结

 

1--JavaScript 显示数据
（1）使用 window.alert() 弹出警告框。
（2）使用 document.write() 方法将内容写到 HTML 文档中（ps：如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖）。
（3）使用 innerHTML 写入到 HTML 元素。
（4）使用 console.log() 写入到浏览器的控制台。

SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

 

2--JavaScript 注释
// 单行注释
/*
多行
注释
*/

 

3--JavaScript 语句标识符
语句              描述
break            用于跳出循环。
catch            语句块，在 try 语句块执行出错时执行catch语句块。
continue      跳过循环中的一个迭代。
do ... while   执行一个语句块，在条件语句为 true 时继续执行该语句块。
for               在条件语句为 true 时，可以将代码块执行指定的次数。
for ... in       用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）。
function      定义一个函数
if ... else      用于基于不同的条件来执行不同的动作。
return         退出函数
switch         用于基于不同的条件来执行不同的动作。
throw         抛出（生成）错误 。
try              实现错误处理，与 catch 一同使用。
var             声明一个变量。
while         当条件语句为 true 时，执行语句块。

 

4--JavaScript 数据类型

字符串（String）、数字(Number)、布尔(Boolean)、数组(Array)、对象(Object)、空（Null）、未定义（Undefined）
JavaScript 有多种数据类型：数字，字符串，数组，对象等等：

var length = 16; // Number 通过数字字面量赋值 
var points = x * 10; // Number 通过表达式字面量赋值
var lastName = "Johnson"; // String 通过字符串字面量赋值
var cars = ["Saab", "Volvo", "BMW"]; // Array 通过数组字面量赋值
var person = {firstName:"John", lastName:"Doe"}; // Object 通过对象字面量赋值

 

1.对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：

var person={firstname:"John", lastname:"Doe", id:5566};

 

对象属性有两种寻址方式：

实例
name=person.lastname;
name=person["lastname"];

 

2.Undefined 这个值表示变量不含有值。可以通过将变量的值设置为 null 来清空变量。
3.当您声明新变量时，可以使用关键词 "new" 来声明其类型：

var carname=new String;
var x=      new Number;
var y=      new Boolean;
var cars=   new Array;
var person= new Object;

 

注：JavaScript 变量均为对象。当您声明一个变量时，就创建了一个新的对象。

 

 

5--JavaScript 对象

1.对象的方法定义了一个函数，并作为对象的属性存储。

对象方法通过添加 () 调用 (作为一个函数)。

例如：

var person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() 
{
return this.firstName + " " + this.lastName;
}
};
document.getElementById("demo").innerHTML = person.fullName();

 

注：如果要访问 person 对象的 fullName 属性（name = person.fullName;），它将作为一个定义函数的字符串返回。
2.你可以使用以下语法创建对象方法：
methodName : function() { code lines }
你可以使用以下语法访问对象方法：
objectName.methodName()

 

6--JavaScript 变量
1.局部 JavaScript 变量：在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它（该变量的作用域是局部的）。
2.全局 JavaScript 变量：在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。
3.JavaScript 变量的生存期：JavaScript 变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。
4.如果把值赋给尚未声明的变量，该变量将被自动作为全局变量声明。
5.在 HTML 中, 全局变量是 window 对象: 所有数据变量都属于 window 对象。
注：声明但未赋值的变量，其值实际上是 undefined。
注：如果重新声明 JavaScript 变量，该变量的值不会丢失。

 

7--JavaScript 事件
常见的HTML事件的列表:
事件                    描述
onchange          HTML 元素改变
onclick               用户点击 HTML 元素
onmouseover    用户在一个HTML元素上移动鼠标
onmouseout      用户从一个HTML元素上移开鼠标
onkeydown        用户按下键盘按键
onload               浏览器已完成页面的加载
HTML 元素中添加事件属性：<some-HTML-element some-event="some JavaScript">

 

8--JavaScript 字符串
下面列举了在字符串中可以使用转义字符转义的特殊字符：
代码    输出
\'       单引号
\"      双引号
\\      反斜杠
\n     换行
\r      回车
\t      tab(制表符)
\b     退格符
\f      换页符
var x = "John";
var y = new String("John");
(x === y) // 结果为 false，因为是x是字符串，y是对象
ps：=== 为绝对相等，即数据类型与值都必须相等
字符串属性
属性               描述
constructor   返回创建字符串属性的函数
length           返回字符串的长度
prototype     允许您向对象添加属性和方法
字符串方法
charAt()：返回指定索引位置的字符
charCodeAt()：返回指定索引位置字符的 Unicode 值
concat()：连接两个或多个字符串，返回连接后的字符串
fromCharCode()：将 Unicode 转换为字符串
indexOf()：返回字符串中检索指定字符第一次出现的位置
lastIndexOf()：返回字符串中检索指定字符最后一次出现的位置
localeCompare()：用本地特定的顺序来比较两个字符串
match()：找到一个或多个正则表达式的匹配
replace()：替换与正则表达式匹配的子串
search()：检索与正则表达式相匹配的值
slice()：提取字符串的片断，并在新的字符串中返回被提取的部分
split()：把字符串分割为子字符串数组
substr()：从起始索引号提取字符串中指定数目的字符
substring()：提取字符串中两个指定的索引号之间的字符
toLocaleLowerCase()：根据主机的语言环境把字符串转换为小写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLocaleUpperCase()：根据主机的语言环境把字符串转换为大写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLowerCase()：把字符串转换为小写
toString()：返回字符串对象值
toUpperCase()：把字符串转换为大写
trim()：移除字符串首尾空白
valueOf()：返回某个字符串对象的原始值
规则:如果把数字与字符串相加，结果将成为字符串！

 

9--JavaScript 标签
如需标记 JavaScript 语句，请在语句之前加上冒号：
label:
statements
break 和 continue 语句仅仅是能够跳出代码块的语句。
语法:
break labelname;
continue labelname;
continue 语句（带有或不带标签引用）只能用在循环中。
break 语句（不带标签引用），只能用在循环或 switch 中。
通过标签引用，break 语句可用于跳出任何 JavaScript 代码块。

 

10--JavaScript typeof, null, 和 undefined
1.可以使用 typeof操作符来检测变量的数据类型（ps:数组是一种特殊的对象类型,如 typeof [1,2,3,4] 返回 object）。
2.null是一个只有一个值的特殊类型，表示一个空对象引用。
3.在 JavaScript 中, undefined 是一个没有设置值的变量。
Undefined 和 Null 的区别

typeof undefined // undefined
typeof null // object
null === undefined // false
null == undefined // true

 

 

11--JavaScript 类型转换
Number() 转换为数字， String() 转换为字符串， Boolean() 转化为布尔值。
5 种不同的数据类型：string、number、boolean、object、function
3 种对象类型：Object、Date、Array
2 个不包含任何值的数据类型：null、undefined
constructor 属性返回所有 JavaScript 变量的构造函数。
实例：

"John".constructor // 返回函数 String() { [native code] }
(3.14).constructor // 返回函数 Number() { [native code] }
false.constructor // 返回函数 Boolean() { [native code] }
[1,2,3,4].constructor // 返回函数 Array() { [native code] }
{name:'John', age:34}.constructor    // 返回函数 Object() { [native code] }
new Date().constructor // 返回函数 Date() { [native code] }
function () {}.constructor    // 返回函数 Function(){ [native code] }

 

数字转换为字符串的方法：
toExponential()：把对象的值转换为指数计数法。
toFixed()：把数字转换为字符串，结果的小数点后有指定位数的数字。
toPrecision()：把数字格式化为指定的长度。

日期转换为字符串的函数：
方法                         描述
getDate()                从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay()                  从 Date 对象返回一周中的某一天 (0 ~ 6)。
getFullYear()           从 Date 对象以四位数字返回年份。
getHours()              返回 Date 对象的小时 (0 ~ 23)。
getMilliseconds()   返回 Date 对象的毫秒(0 ~ 999)。
getMinutes()          返回 Date 对象的分钟 (0 ~ 59)。
getMonth()            从 Date 对象返回月份 (0 ~ 11)。
getSeconds()         返回 Date 对象的秒数 (0 ~ 59)。
getTime()               返回 1970 年 1 月 1 日至今的毫秒数。

字符串转为数字的方法：
方法                          描述
parseFloat()             解析一个字符串，并返回一个浮点数。
parseInt()                 解析一个字符串，并返回一个整数。
全局方法 Number() 可以将字符串转换为数字。
1.字符串包含数字(如 "3.14") 转换为数字 (如 3.14).
2.空字符串转换为 0。
3.其他的字符串会转换为 NaN (不是个数字)。
一元运算符+可用于将变量转换为数字：
实例

var y = "5"; // y 是一个字符串
var x = + y; // x 是一个数字

 

如果变量不能转换，它仍然会是一个数字，但值为 NaN (不是一个数字):
实例

var y = "John"; // y 是一个字符串
var x = + y; // x 是一个数字 (NaN)

 

 

12--JavaScript 正则表达式
1.语法：/pattern/modifiers;
2.在 JavaScript 中，正则表达式通常用于两个字符串方法 : search() 和 replace()。
search() 方法 用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。
replace() 方法 用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

正则表达式修饰符:
修饰符            描述
i                     执行对大小写不敏感的匹配。
g                   执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m                  执行多行匹配。

正则表达式模式
方括号用于查找某个范围内的字符：
[abc] 查找方括号之间的任何字符。
[0-9] 查找任何从 0 至 9 的数字。
(x|y)查找任何以 | 分隔的选项。

元字符是拥有特殊含义的字符：
\d 查找数字。
\s 查找空白字符。
\b 匹配单词边界。
\uxxxx 查找以十六进制数 xxxx 规定的 Unicode 字符。

量词:
n+：匹配任何包含至少一个 n 的字符串。
n*：匹配任何包含零个或多个 n 的字符串。
n?：匹配任何包含零个或一个 n 的字符串。
在 JavaScript 中，RegExp 对象是一个预定义了属性和方法的正则表达式对象。
test() 方法是一个正则表达式方法，用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。
以下实例用于搜索字符串中的字符 "e"，返回true：

var patt = /e/;
patt.test("The best things in life are free!");

 

exec() 方法是一个正则表达式方法，用于检索字符串中的正则表达式的匹配，该函数返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。
以下实例用于搜索字符串中的字母 "e"，返回e:

/e/.exec("The best things in life are free!");

 

 

13--JavaScript 错误 - throw、try 和 catch
try：语句测试代码块的错误。
catch：语句处理错误。
throw：语句创建自定义错误。

 

14--JavaScript 变量提升
hoisting(变量提升)：函数声明和变量声明总是会被解释器悄悄地被"提升"到方法体的最顶部。

 

15--JavaScript 严格模式(use strict)
"use strict" 的目的是指定代码在严格条件下执行。严格模式下你不能使用未声明的变量。
支持严格模式的浏览器: Internet Explorer 10 +、 Firefox 4+ Chrome 13+、 Safari 5.1+、 Opera 12+。

 

16--JavaScript 使用误区
1.JavaScript 默认是在代码的最后一行自动结束，不用对 return 语句进行断行。
2.JavaScript 不支持使用名字来索引数组，只允许使用数字索引，否则会把数组重新定义为标准对象。
3.在每个代码块中 JavaScript 不会创建一个新的作用域，一般各个代码块的作用域都是全局的

 

17--JavaScript JSON
JSON 是用于存储和传输数据的格式。
以下 JSON 语法定义了 employees 对象: 3 条员工记录（对象）的数组:
JSON Example

{"employees":[
{"firstName":"John", "lastName":"Doe"}, 
{"firstName":"Anna", "lastName":"Smith"},
{"firstName":"Peter", "lastName":"Jones"}
]}

 

JSON 语法规则：数据为 键/值 对； 数据由逗号分隔； 大括号保存对象； 方括号保存数组。
JSON.parse()：用于将一个 JSON 字符串转换为 JavaScript 对象。
JSON.stringify()：用于将 JavaScript 值转换为 JSON 字符串。
href="#"与href="javascript:void(0)"的区别
# 包含了一个位置信息，默认的锚是#top 也就是网页的上端。
而javascript:void(0), 仅仅表示一个死链接。
在页面很长的时候会使用 # 来定位页面的具体位置，格式为：# + id。
命名规则
一般很多代码语言的命名规则都是类似的，例如:
变量和函数为驼峰法（ camelCase）
全局变量为大写 (UPPERCASE )
常量 (如 PI) 为大写 (UPPERCASE )
HTML 和 CSS 的横杠(-)字符:
HTML5 属性可以以 data- (如：data-quantity, data-price) 作为前缀。
CSS 使用 - 来连接属性名 (font-size)。

 

18--JavaScript 函数
1. 在函数表达式存储在变量后，变量也可作为一个函数使用（匿名函数）：
实例

var x = function (a, b) {return a * b};
var z = x(4, 3);

 

2.如果函数在调用时未提供隐式参数，参数会默认设置为undefined（显式参数在函数定义时列出，隐式参数是在函数调用时传递给函数真正的值）。
3.JavaScript 隐式参数通过值来传递：函数仅仅只是获取值。
JavaScript 函数调用
1.在 web 浏览器中全局对象是浏览器窗口（window 对象）。
2.JavaScript 函数有 4 种调用方式（作为一个函数调用, 函数作为方法调用, 使用构造函数调用函数, 作为函数方法调用函数(call() 和 apply()))。
闭包是可访问上一层函数作用域里变量的函数，即便上一层函数已经关闭。

 

19--JS HTML DOM
1.改变HTML内容：document.getElementById(id).innerHTML=新的HTML
2.改变HTML属性：document.getElementById(id).attribute=新属性值
3.改变HTML样式：document.getElementById(id).style.property=新样式
4.HTML DOM事件：onload 和 onunload 事件，onchange 事件，onmouseover 和 onmouseout 事件，onmousedown、onmouseup 以及 onclick 事件
5.事件监听：element.addEventListener(event, function, useCapture);
第一个参数是事件的类型 (如 "click" 或 "mousedown").
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。
在 冒泡 中，内部元素的事件会先被触发，然后再触发外部元素。
在 捕获 中，外部元素的事件会先被触发，然后才会触发内部元素的事件。
注：addEventListener() 方法允许向同个元素添加多个事件，且不会覆盖已存在的事件。

 

20--JavaScript Number 对象
1.所有 JavaScript 数字均为 64 位浮点数
2.可以使用 toString() 方法 输出16进制、8进制、2进制数字。
实例

var myNumber=128;
myNumber.toString(16); // 返回 80
myNumber.toString(8); // 返回 200
myNumber.toString(2); // 返回 10000000

 

3.无穷大（Infinity），NaN - 非数字值（可以使用 isNaN() 全局函数来判断一个值是否是 NaN 值）。

 

21--JavaScript 字符串（String） 对象
1.使用长度属性length来计算字符串的长度。
2.使用 indexOf() 来定位字符串中某一个指定的字符首次出现的位置（lastIndexOf() 方法在字符串末尾开始查找字符串出现的位置）。
3.match()函数用来查找字符串中特定的字符，并且如果找到的话，则返回这个字符。
4.replace() 方法在字符串中用某些字符替换另一些字符。
5.字符串大小写转换使用函数 toUpperCase() / toLowerCase()。
6.字符串使用split()函数转为数组。

 

22--JavaScript Array（数组） 对象
1.所有的JavaScript变量都是对象，因此，可以在数组中有不同的变量类型。

 

23--JavaScript RegExp 对象
1.语法
var patt=new RegExp(pattern,modifiers);
或更简单的方法
var patt=/pattern/modifiers;
模式描述了一个表达式模型。
修饰符(modifiers)描述了检索是否是全局，区分大小写等。
i - 修饰符是用来执行不区分大小写的匹配。
g - 修饰符是用于执行全文的搜索（而不是在找到第一个就停止查找,而是找到所有的匹配）。
2. test()方法搜索字符串指定的值，根据结果并返回真或假。
3.exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回 null。

 

24--JavaScript浏览器BOM
1.浏览器窗口的内部高度（Internet Explorer、Chrome、Firefox、Opera 以及 Safari），document.documentElement.clientHeight / document.body.clientHeight（Internet Explorer 8、7、6、5）。
2.window.screen 对象包含有关用户屏幕的信息，screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如窗口任务栏。
3.window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。
location.href 属性返回当前页面的 URL。
location.pathname 属性返回 URL 的路径名。
location.assign() 方法加载新的文档。
4.window.history 对象包含浏览器的历史。
history.back() 方法加载历史列表中的前一个 URL，这与在浏览器中点击后退按钮是相同的。
history forward() 方法加载历史列表中的下一个 URL，这与在浏览器中点击前进按钮是相同的。
5.window.navigator 对象包含有关访问者浏览器的信息（警告：来自 navigator 对象的信息具有误导性，不应该被用于检测浏览器版本）。
6. JavaScript 中创建三种消息框：警告框、确认框、提示框。
alert()方法；
confirm()方法，点击 "确认", 确认框返回 true， 点击 "取消", 确认框返回 false；
prompt()方法，当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵，确认返回值为输入的值，取消返回值为 null。
7.JavaScript 计时事件。
setInterval() - 间隔指定的毫秒数不停地执行指定的代码（clearInterval() 方法用于停止 setInterval() 方法执行的函数代码）。
setTimeout() - 暂停指定的毫秒数后执行指定的代码（clearTimeout() 方法用于停止执行setTimeout()方法的函数代码）。
8.Cookies 用于存储 客户端web 页面的用户信息。
使用 document.cookie 属性来创建、读取、及删除 cookies（设置 expires 参数为以前的时间），Cookies 以名/值对形式存储。

 

---------------------
作者：木槿花开lalala
来源：CSDN
原文：https://blog.csdn.net/zl_best/article/details/53033988
版权声明：本文为博主原创文章，转载请附上博文链接！

扫码关注我们

微信号：SRE实战

拒绝背锅 运筹帷幄