一.JS知识点梳理

作者: 2点半 | 来源:发表于2017-06-30 14:02 被阅读0次

数据类型:

一,原始类型: Number String Boolean null undefined
二,引用类型

转字符串:

x.toString() 如果x为undefined 和 null 报错
String(x) 万能
快速转换 x+""

转数字

Number(x)
parseInt(str)
parseFloat(str)
"6"-0=6

转布尔

true
false "" null 0 undefined NaN
!x
!!x

逻辑运算&& ||

&&：两个条件必须都为true，才返回true,只要有一个为false，则返回false
||：两个条件只要有一个为true，就返回true,除非所有条件都为false，才返回false

短路逻辑:

1件事，满足条件就做，不满足条件，就不做！
条件&&(操作);
何时使用：如果操作仅有一两句话时
如果前一个值有效，就用前一个，否则就用后一个
值1| |值2

三目运算(如果操作语句简单就用三目吧)

条件1?(值1或操作1):
条件2?(值2或操作2):
默认值或操作;

编码

url中不允许出现多字节字符
encodeURI()将多字节字符编码为utf-8格式的单字节字符(中文转) encodeURI("百")=>"%E7%99%BE"
decodeURI()将受到编码后的单字节字符解码为多字节字符原文 decodeURI("%E7%99%BE")=>"百"

url中不允许出现保留字比如:/
encodeURIComponent()编码
decodeURIComponent()解码

eval()执行字符串格式的语句或表达式

js中分母是0，不报错！返回：Infinity
isFinite(n) 判断是否有效数字范围内

分支结构

if(){}else{}...

switch..case结构当条件为"全等"比较时

switch(表达式){
    case x1: 代码段;
    break;
    case x2: 代码段;
    break;
       ....
     default;
}

循环结构

var 循环变量=初始值;
while(循环条件){
    循环体;
    迭代修改循环变量;
}

var 循环变量=初始值;
do{
    循环体;
    迭代修改循环变量;
}while(循环条件)

for(var 循环变量=初始值;循环条件;迭代修改循环变量){循环体;}

数组

创建数组的集中方法:

var arr=[];
var arr=new Array();

var arr=[1,2,3...]

var arr=new Array(n)

var arr=new Array(1,2,3...)

案例:找最大值

function getMax(arr){
    var max=arr[0];
    for(var i=1;i<arr.length;i++){
        arr[i]>max&&(max=arr[i]);
    }
    return max;
}
console.log(getMax([3,7,8,9,6,2,5,3]))

案例:冒泡排序

 function bSort(arr) {
        for(var r=1;r<arr.length;r++){
            for (var i = 0; i < arr.length-r; i++) {
                if(arr[i]>arr[i+1]){
                    arr[i]+=arr[i+1];
                    arr[i+1]=arr[i]-arr[i+1];
                    arr[i]-=arr[i+1]
                }
            }
        }
        return arr;
    }
bSort([6,5,3,8,96,9,0]);
console.log( bSort([6,5,3,8,96,9,0]))

关联数组(hash数组)

遍历:

for(var key in arr){
    arr[key]
}

案例:利用关联数组统计个数或去重

 var arr=[5,3,6,9,8,2,6,5,9];
    var hash=[];
    for(var i=0;i<arr.length;i++){
        if(hash[arr[i]]!=undefined){
            hash[arr[i]]++;
        }else{
            hash[arr[i]]=1;
        }
    }
    console.log(hash)//[2: 1, 3: 1, 5: 2, 6: 2, 8: 1, 9: 2] hash[key]出个数了
    arr=[];
   for(var key in hash){
        arr[arr.length]=(key-0)
   }

数组API

 数组排序sort方法:
      升序:function compare(a,b){return a-b;}
      降序:function compare(a,b){return b-a;}
      arr.sort(compare);

 arr.toString()
 arr.join()  //频繁字符串拼接，推荐使用数组的join方法作为替代
 arr.concat()
 arr.slice()
 arr.splice()
 arr.reverse()
 arr.sort()  //只能将所有元素转化为字符串再排序 无法对数字类型排序
 arr.push() //末尾入栈
 arr.pop() //末尾出栈
 arr.unshift() //开头入栈
 arr.shift()  //开头入栈

二维数组:arr[r][l]

遍历二维数组：固定套路：外层循环遍历行，内层循环遍历列

for(var r=0;r<arr.length;i++){
   for(var l=0;l<arr[r].length;l++){
       arr[r][l]
   }
}

内置对象:ES标准中规定,浏览器厂商已经实现的对象 11

String Number Boolean Array RegExp Math Date Error Function Object Global(全局对象window)

String API

 str[i]
 str.length
 str.slice()
 str.substring() //正牌截取字符串的api
 str.substr() //丛几开始 获取几个only
 str.split() //切割完了之后是数组
 str.concat()
 str.toUpperCase()
 str.toLowerCase()
 str.charAt(i) //=str[i]
 str.charCodeAt(i) //指定下标的unicode号
 str.indexOf()           //返回的关键词第一个字符的下标的位置
 str.lastIndexOf()

正则表达式查找验证替换切割

预定义字符集:
一个数字==>\d [0-9]
一个数字/字母/下划线 ==>\w [0-9a-zA-Z_]
一个空白字符 ==> \s [\n\r\t\v\f]
除了回车和换行的任意单个字符==> . [^\n\r]

数量
至少m个,最多n个 ==> {m,n}
m个以上 ==> {m,}
必须m个 ==> {m}
可有可无,多了不限==> *
可有可无,最多一个==> ?
1个以上 ==> +

选择和分组 ==> | ( )

匹配开头和结尾^正则$

正则API

var i=str.search(reg) //只适合判断有没有如果没有返回-1
var kwords=str.match(reg)//i区分大小写 g全局如果不加g只匹配第一个返回的是一个数组如果没找到返回null 用之前最好先判断
str.replace(reg,"替换值") 注:reg后一般都要加g

查找:==>

var arr=reg.exec(str)
返回数组
arr[0]获取内容
arr.index关键词首字母位置

验证==>几乎都要加^ $

var bool=reg.test(str)

数学方法

Math.ceil(n) 上取整
Math.floor(n) 下取整
Math.round(n) 四舍五入取整
n.toFixed(d) 按任意小数位数返回String
ParseInt(Math.random()*(max-min+1)+min) --->随机数

日期对象

var now=new Date()
var date=new Date("2017/06/30 10:04:00")
var date=new Date(2017,06,30,10,05,00)
getTime() //获取的是毫秒数

分量值(get或set) 星期没有set方法 Month需要+1

getFullYear()
getMonth()
getDate()
getDay()
getHours()
getMinutes()
getSeconds()
getMilliseconds()

错误处理

try{
       可能发生错误的代码
}catch(err){ //err中发生错误时会自动收到创建的error对象
    err.message: 保存了错误的详细原因
    err.name: 保存了错误对象的名称
如果发生错误，才执行的错误处理代码
}[finally{ //无论是否发生错误，都执行的代码 *一定会在退出*之前*执行*
    一般释放用过的对象资源：xxx=null
}]

js的语法不支持重载--->可使用arguments实现重载效果。
arguments.length ------------->参数值的个数
arguments[i] ------------------->获得下标为i位置的参数值

创建函数的三种方式

function 函数名(参数列表){函数体;return 值}
var 函数名=function(参数列表){函数体;return 值}
var 函数名=new Function("参数1","参数2",...,"函数体");

匿名函数

(function(参数列表){
    函数体;
   return 值
})(参数值列表);

闭包

函数嵌套！内层函数使用外层函数的局部变量,内层函数被返回到外部，在外部调用。

面向对象--->将多个相关的属性和函数集中定义在一个对象中

创建对象的三种方法: 直接量 new创建利用构造函数反复创建多个相同结构的对象

var obj{属性名:属性值,方法名:function(){} }
var obj=new Object();   obj.属性名=值;  obj.方法名=function(){}

function fun(a,b){
    this.a=a;
    this.b=b;
    this.intrSelf=function(){xxx}
}
var obj=new fun("lili",20)

obj.a-->lili
obj.b-->20

原型和原型链

判断对象的属性是自有，还是共有：3种情况
自有属性：保存在对象本地的属性
共有属性：保存在公共原型对象中的属性
如何判断一个属性是否可用 2种
1.in关键字："属性名" in 对象
如果"属性名"在当前对象的原型链中，返回true 如果在整条原型链上都没找到，返回false
eg:console.log("intrSelf" in hmm)
2.使用===undefined：说明不包含！简写为(!对象.成员名)
专门判断是否自有属性：obj.hasOwnProperty("成员");
如果obj本地有指定"成员"，则返回true,没有返回false
判断共有属性：不是自有的，还要存在于原型链上
if(!obj.hasOwnProperty("成员")&&"成员" in obj)
获得任意对象的proto属性：获得父级对象
var 父对象=Object.getPrototypeOf(对象);
判断父对象是否处在子对象原型链的上级：
父对象.isPrototypeOf(子对象)
只要父对象在子对象的原型链上，就返回true 否则返回false

DOM

核心DOM适合操作节点，如创建，删除，查找等 HTML DOM适合操作属性，如读取或修改属性的值

查找元素

var elem=document.getElementById("id值");              ----->按id查找
var elems=node.getElementsByTagName("tagName")         ----->按标签名查找
var elems=node.getElementsByClassName("类名")；        ----->按className查找
var elems=document.getElementsByName("name属性的值")   ----->按name名 查找
var form=document.forms["form的id值"]；                ----->按id查找form
var input=form["name属性值"];                          ----->获取form下指定name元素
var elem=node.querySelector("任意选择器");             ----->查找一个符合条件的元素
var elems=node.querySelectorAll("任意选择器");         ----->查找全部符合条件的元素

读取修改元素的属性

var str=elem.getAttribute("属性名");                   ----->获取元素的属性名
elem.setAttribute("属性名","属性值");                  ----->设置元素的属性为XX
var str=elem.属性名                                    ----->获取元素的属性  HTML DOM
elem.属性名="值";                                      ----->设置元素的属性为XX  HTML DOM
elem.removeAttribute("属性名");                        ----->移除属性
elem.属性名="";                                        ----->移除属性 HTML DOM
elem.attributes:返回属性数组                           ----->获取元素所有属性
elem.hasAttribute("属性名")                            ----->判断是否包含某个属性

创建节点

var newNode=document.createElement("标签名")           ---->创建一个空标签名
newNode.属性名="值"                                    ---->给标签添加设置属性
parent.appendChild(newNode);                           ---->追加到指定父元素后边
parent.insertBefore(newNode,oldNode);                  ----> 插入到指定父元素前边

增加文档片段

var frag=document.createDocumentFragment();            ----> 创建文档片段
frag.appendChild(新节点);                              ---->将子元素追加到片段中
parent.appendChild(frag);                              ---->将片段追加到指定父元素中

删除节点

var deleted=parent.removeChild(childNode);             ---->删除节点
var deleted=parent.replaceChild(newChild,oldChild);    ---->替换节点

对话框

alert("提示信息");---只有确定按钮
var str=prompt("提示信息");
var bool=confirm("提示信息");--确定和取消

css样式设置

var str=elem.style.css属性
function getStyle ( obj, attr ) { 
    return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr]; 
}
elem.style.css属性名="属性值"

Table

var tr=table.insertRow(i);              ---->增加行 省略i，表示在末尾追加一行
table.deleteRow(i);                     ---->删除行，必须知道要删除行的下标
tBodies                                 ---->多个tbody元素对象的集合 必须用[i]获取每个tbody
table.rows;                             ---->所有行的数组
table.rows[table.rows.length-1]         ---->最后一行
var newTd=row.insertCell(i);            ---->最后一个单元格
tr.deleteCell(i);                       ---->删除单元格
tr.cells;                               ---->一行中所有格的数组
tr.cells[row.cells.length-1];           ---->一行中最后一单元格
tr.rowIndex;---专用于删除行             ---->行下标
cell.cellIndex                          ---->当前单元格的下标

Form

var form=document.forms[下标/"name"/"id"]
var elem=form.elements[i];
var elem/elems=form.name属性值/form["name属性值"]

select

var option=new Option(innerHTML,value);select.add(option);   --->增加option
Option:select.remove(option.index);                          --->删除option
封装了所有option对象
select.remove(select.options.length-1);                      ---->删除最后一个选项

cookie

cookie:document.cookie="key=value;expires="+date  --->创建
cookie:document.cookie                            --->读取

节点树和元素树

parentNode              parentElement
childNodes              children
lastChild               lastElementChild
firstChild              firstElementChild
previousSibling         previousElementSibling
nextSibling             nextElementSibling

javascript思维导图

1.javascript变量

javascript变量.jpg

2.javascript运算符

javascript运算符.jpg

3.javascript数组

javascript数组.jpg

4.javascript流程语句

javascript流程语句.jpg

5.javascript字符串函数

javascript字符串函数.jpg

6.javascript函数基础

javascript函数基础.jpg

7.javascript DOM操作

javascriptdom操作.jpg

8.javascript正则表达式

javascript正则表达式.jpg

注:以上思维导图均摘自其他网站,用来共享学习