JS基础知识总结

总览

输出方法

数据类型

String

1. 转义字符

\'	单引号
\"	双引号
\\	反斜杠
\n	换行
\r	回车
\t	tab(制表符)
\b	退格符
\f	换页符

2. 属性

constructor 返回创建字符串属性的函数
length      返回字符串的长度
prototype	允许您向对象添加属性和方法

3. 方法

charAt()	返回指定索引位置的字符
charCodeAt()	返回指定索引位置字符的 Unicode 值
concat()	连接两个或多个字符串，返回连接后的字符串
fromCharCode()	将 Unicode 转换为字符串
indexOf()	返回字符串中检索指定字符第一次出现的位置
lastIndexOf()	返回字符串中检索指定字符最后一次出现的位置
localeCompare()	用本地特定的顺序来比较两个字符串
match()	找到一个或多个正则表达式的匹配
replace()	替换与正则表达式匹配的子串
search()	检索与正则表达式相匹配的值
slice()	提取字符串的片断，并在新的字符串中返回被提取的部分
split()	把字符串分割为子字符串数组
substr()	从起始索引号提取字符串中指定数目的字符
substring()	提取字符串中两个指定的索引号之间的字符
toLocaleLowerCase()	根据主机的语言环境把字符串转换为小写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLocaleUpperCase()	根据主机的语言环境把字符串转换为大写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLowerCase()	把字符串转换为小写
toString()	返回字符串对象值
toUpperCase()	把字符串转换为大写
trim()	移除字符串首尾空白
valueOf()	返回某个字符串对象的原始值 

undefined和null的异同

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

1、定义
（1）undefined：是所有没有赋值变量的默认值，自动赋值。
（2）null：主动释放一个变量引用的对象，表示一个变量不再指向任何对象地址。
2、何时使用null?
当使用完一个比较大的对象时，需要对其进行释放内存时，设置为 null。
3、null 与 undefined 的异同点是什么呢？
共同点：都是原始类型，保存在栈中变量本地。
不同点：
（1）undefined——表示变量声明过但并未赋过值。
它是所有未赋值变量默认值，例如：

var a;    // a 自动被赋值为 undefined

（2）null——表示一个变量将来可能指向一个对象。
一般用于主动释放指向对象的引用，例如：

var emps = ['ss','nn'];
emps = null;     // 释放指向数组的引用

正则表达式

元字符

\d	查找数字。
\s	查找空白字符。
\b	匹配单词边界。
\uxxxx	查找以十六进制数 xxxx 规定的 Unicode 字符。

量词

n+	匹配任何包含至少一个 n 的字符串。
n*	匹配任何包含零个或多个 n 的字符串。
n?	匹配任何包含零个或一个 n 的字符串。

常见表单验证

/*是否带有小数*/
function    isDecimal(strValue )  {  
   var  objRegExp= /^\d+\.\d+$/;
   return  objRegExp.test(strValue);  
}  

/*校验是否中文名称组成 */
function ischina(str) {
    var reg=/^[\u4E00-\u9FA5]{2,4}$/;   /*定义验证表达式*/
    return reg.test(str);     /*进行验证*/
}

/*校验是否全由8位数字组成 */
function isStudentNo(str) {
    var reg=/^[0-9]{8}$/;   /*定义验证表达式*/
    return reg.test(str);     /*进行验证*/
}

/*校验电话码格式 */
function isTelCode(str) {
    var reg= /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/;
    return reg.test(str);
}

/*校验邮件地址是否合法 */
function IsEmail(str) {
    var reg=/^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
    return reg.test(str);
}

表单

自动验证

<form action="demo_form.php" method="post">
  <input type="text" name="fname" required="required">
  <input type="submit" value="提交">
</form>

必填项目

function validateForm()
{
  var x=document.forms["myForm"]["fname"].value;
  if (x==null || x=="")
  {
    alert("姓必须填写");
    return false;
  }
}

<form name="myForm" action="demo-form.php" onsubmit="return validateForm()" method="post">
姓: <input type="text" name="fname">
<input type="submit" value="提交">
</form>

邮件

function validateForm(){
  var x=document.forms["myForm"]["email"].value;
  var atpos=x.indexOf("@");
  var dotpos=x.lastIndexOf(".");
  if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length){
    alert("不是一个有效的 e-mail 地址");
    return false;
  }
}

<form name="myForm" action="demo-form.php" onsubmit="return validateForm();" method="post">
    Email: <input type="text" name="email">
    <input type="submit" value="提交">
</form>

对象，作用域，事件

运算符

条件语句

错误的处理方法

关键字

let，const和var

• var
  使用var关键字声明的全局作用域变量属于window对象。
  可以先使用后声明
  其声明的变量在任何地方都可以修改。
• let
  先声明后使用
  其声明的全局作用域变量不属于window对象。
  在相同的作用域或块级作用域中，不能使用let关键字来重置var，let关键字声明的变量。
  在不同作用域，或不用块级作用域中是可以重新声明赋值的。
• const
  在不同作用域，或不同块级作用域中是可以重新声明赋值的:
  其定义的常量，声明时必须进行初始化，且不可再修改。
  在相同的作用域或块级作用域中，不能使用const关键字来重置var，const和let关键字声明的变量。

this

1、在对象方法中， this 指向调用它所在方法的对象。
2、单独使用 this，它指向全局(Global)对象。
3、函数使用中，this 指向函数的所属者。
4、严格模式下函数是没有绑定到 this 上，这时候 this 是 undefined。
5、在 HTML 事件句柄中，this 指向了接收事件的 HTML 元素。
6、apply 和 call 允许切换函数执行的上下文环境（context），即 this 绑定的对象，可以将 this 引用到任何对象。

JSON

JSON 字符串转换为 JavaScript 对象

// 1.创建 JavaScript 字符串，字符串为 JSON 格式的数据：
var text = '{ "animals" : [' +
'{ "name":"Pig" , "url":"www.pig.com" },' +
'{ "name":"Dog" , "url":"www.dog.com" } ]}';
// 2.使用 JavaScript 内置函数 JSON.parse() 将字符串转换为 JavaScript 对象:
var obj = JSON.parse(text);
// 3.页面中使用新的 JavaScript 对象：
document.getElementById("demo").innerHTML = obj.animals[1].name + " " + obj.animals[1].url;

验证API

约束验证DOM方法

• checkValidity()
  如果 input 元素中的数据是合法的返回 true，否则返回 false。
• setCustomValidity()
  设置 input 元素的 validationMessage 属性，用于自定义错误提示信息的方法。
  使用 setCustomValidity 设置了自定义提示后，validity.customError 就会变成true，则 checkValidity 总是会返回false。如果要重新判断需要取消自定义提示，方式如下：
  setCustomValidity(’’)
  setCustomValidity(null)
  setCustomValidity(undefined)

约束验证 DOM 属性

• validity
  布尔属性值，返回 input 输入值是否合法
• validationMessage
  浏览器错误提示信息
• willValidate
  指定 input 是否需要验证

Validity 属性

• customError
  设置为 true, 如果设置了自定义的 validity 信息。
• patternMismatch
  设置为 true, 如果元素的值不匹配它的模式属性。
• rangeOverflow
  设置为 true, 如果元素的值大于设置的最大值。
• rangeUnderflow
  设置为 true, 如果元素的值小于它的最小值。
• stepMismatch
  设置为 true, 如果元素的值不是按照规定的 step 属性设置。
• tooLong
  设置为 true, 如果元素的值超过了 maxLength 属性设置的长度。
• typeMismatch
  设置为 true, 如果元素的值不是预期相匹配的类型。
• valueMissing
  设置为 true，如果元素 (required 属性) 没有值。
• valid
  设置为 true，如果元素的值是合法的。

ex

//输入的值大于 100，显示一个信息：

<input id="id1" type="number" max="100">
<button onclick="myFunction()">验证</button>
<p id="demo"></p>
 
<script>
function myFunction() {
    var txt = "";
    if (document.getElementById("id1").validity.rangeOverflow) {
       txt = "输入的值太大了";
    }
    document.getElementById("demo").innerHTML = txt;
}
</script>

异步编程

同步&异步

ex

setTimeout 就是一个消耗时间较长（3s）的过程，它的第一个参数是个回调函数，第二个参数是毫秒数，这个函数执行之后会产生一个子线程，子线程会等待 3 秒，然后执行回调函数 “print”，在命令行输出 “Time out”：

setTimeout(function () {
​    document.getElementById("demo").innerHTML="over!";
}, 3000);