首页  思维导图  详情

js基础-行为js

2020-04-29 15:53:59   9  举报





AI智能生成

个人前端学习

学习笔记

作者其他创作

大纲/内容

JS错误处理

语法错误

简单的说，语法错误就是不符合js语法的错误，出现语法错误，控制台会进行自动报错并告知错误的行号（但是行号不一定准确）。 常见语法错误： 符号漏写，多打，少打，错打 使用了不合语法的变量名 语句写错，没写完等等。 浏览器一次总是只告诉你第一个错误 SyntaxError语法错误 unexpected token(连续字母，符号) 逗号也是一个合法表达式，使用逗号，一般会返回逗号后面的结果 js中函数可以当参数传，但是格式要写对【看大图】

SyntaxError:语法错误 token：符号（连续的字符，符号） identifier：变量名

运行时错误

-ReferenceError ，变量引用异常触发【比如变量没有被声明就开始使用】

-TypeError，类型使用错误时触发 TypeError发生的两种情况： 1、获取未初始化的变量的属性或方法 2、调用类型错误

RangeError，不太常见，一般会在递归爆栈时触发，即递归深度太深【比如，function a（）{ a（）； } 此时代码定义了一个无限递归的函数，运行的话就会触发这个错误】 图示代码函数不会产生递归情况

如何区分语法错误和运行时错误 对于新手来说，语法错误跟运行时错误在近看代码的情况下太容易区分。 一个简单的区分方法是： -语法错误无论如何都不可能运行成功 -运行时错误是有可能运行成功的

逻辑错误：一般指的是计算结果不符合预期

单步跟踪调试 1、debugger；进入调试 watch,实时检测作用域所能访问到的变量的值（console中也可以检测） 功能：可以让代码在debugger;处停止 2、也可直接在行号处打断点Breakpoints 使用方法：直接点击某一行

主动触发错误

主动触发一个错误 当发生一些不可避免的错误时，可以使用下面的语句来抛出这个错误 throw语句 eg：throw new Error(' arguments should all be numeber!') 会把错误抛给离他最近的try catch语句【当throw语句抛出错误后，所在的函数就会停止执行，throw语句后面的内容不会再运行，程序的执行位置会一直往外跑，直到碰到最近的try catch语句】

发生不可避免的错误时怎么办？ 某些运行时错误不可避免 使用try catch语句 (只能捕获运行时错误) try{//如果内部的代码抛出错误，则代码直接跳入catch运行块，且把错 误对象赋值给catch括号内的变量，然后执行catch内的语句。 console.log(); }catch(e){ console.log(); }finally{ //做一些清理性的工作 //finally块是一定会执行的 }

【执行了try语句以后，不管catch语句是否执行，finally语句都一定会执行；如果finally语句中也有return语句的话，即使try或catch语句中执行了return语句，那最终返回的结果也会是finally语句中的return内容】

JavaScript，负责交互，一种语言，浏览器就是它的解释器 JavaScript是单线程语言，单线程就是所执行的代码必须按照顺序执行的。

写法

写在script标签之间

引入外部scrip文件

写在标签上

注释

//单行注释

/*多行注释*/

标识符：变量、函数、属性的名字，或者函数的参数 标识符命名规则： 1. 字母、数字、下划线、美元符号组成 2. 不能数字开头 3. 不能使用关键字保留字做标识符

变量：本质是内存中一个存储单元

变量的声明与赋值 (1) 变量声明： 变量的声明要使用var操作符，语法：var 变量名 (2) 变量赋值： 声明的同时赋值：var 变量名=值； 先声明后赋值：var 变量名；变量名=值； 一次声明多个变量，用逗号隔开：var 变量名1=值,变量名2=值,变量名3=值,变量名4； 说明：省略var声明变量是全局变量，但不推荐这个使用

数据类型

字符串string：单引号或双引号括起来的字符。“ ”不是空字符串，有空格

所有加了“”的量都是string；

数字类型number。number：表示整数和浮点数； NaN : Not a Number 是一个特殊的数值；也属于数值；

1、任何涉及NaN的操作，都会返回NaN; 2、NaN和任何值都不相等，包括NaN 本身； isNaN(n) -检测n是否是一个“非数值”，返回 true 和 false； isNaN(n) 对接收的数值，会先尝试将字符转化为数值，在转不了的情况下，才会认定为非数

boolean布尔类型。true或者false

null空类型，不占据空间

undefined值是派生自null值的，所以undefined==null的返回结果是true。

undefined未定义类型

undefined值是派生自null值的，所以undefined==null的返回结果是true。

数据类型转化。利用console（tpyeof 变量）在控制台输出数据类型

强制数据类型转化

转字符串

数字变量-->字符串：数字变量.toString（）

布尔-->字符串：布尔.toString（）

转布尔

字符串-->布尔：Boolean（字符串）。只有空字符串会输出false

数字-->布尔：Boolean（数字）。数字0、数字NaN、空字符才会输出false

转数字变量

字符-->数字：

字符串是纯数字

Number（字符串）会转正常数字

parseInt（字符串）会转整数

parseFloat（字符串）会转正常数字

字符串是空字符串

Number（字符串）转0

parseInt（字符串）转NAN

parseFloat（字符串）转NAN

字符串不是纯数字

字符串数字开头

Number（字符串）转NaN

praseInt（字符串）转去前面数字部分的整数

praseFloat（字符串）取数字,并且，非有效数字后面的字符将不再进行转化

字符串不是数字开头

都转NaN

布尔-->数字

Number（布尔），true转1，false转0

parseInt和parseFloat都转NaN

undefined变量转其他类型

变量.toString（），会报错

Boolean（变量），会转false

Number（变量）、parseInt（变量）、parseFloat（变量）都会转NaN

操作符

算术操作符：+ - * / % ++ -

在运算中，除了加法，其余的运算都会将字符串先转换为数字之后再进行计算，但是两个数据相加，如果有一方是字符串的话，加号的作用就是将他们进行拼接

除+以外，其他所有操作符如果涉及字符串等非数值的运算，会返回NaN,

NaN和任何数据运算都是NaN

赋值操作符

简单赋值： =

复合赋值：+=、-=、*=、/=、%=

比较操作符。返回值：布尔

==：只比较值是否相等

===：全等，比较值的同时还比较类型是否相等

！=：只比较值是否不相等

！==：不全等，比较值的同时还比较类型是否不相等

三元操作符

语法：条件？执行代码1：执行代码2 说明： 可代替简单的if语句，如果条件成立，执行代码1，否则执行代码2

逻辑操作符

&& : 与(并且) （只要有一个条件不成立，返回false）

在有一个操作数不是布尔值的情况，逻辑与操作就不一定返回值， 此时它遵循下列规则： 1.如果第一个操作数隐式类型转换后为true,则返回最后的操作数 2.如果第一个操作数隐式类型转换后为flase,则返回第一个操作数 3.如果有一个操作数是null,则返回null 4.如果有一个操作数是NaN,则返回NaN 5.如果有一个操作数是undefined,则返回undefined 按1-5的顺序看输出规则

var num_1 = 10; var num_2 = 20; var num_3 = 30; var str = "hello word"; var bool = true; var n = null; var m; console.log(num_1<num_2 && num_2<num_3); // 返回true,因为都成立！ console.log(num_1<num_2 && num_2==num_3); // 返回flase,因为前面成立，后面不成立，数值不一样 console.log(num_2<num_3 && num_3>num_1 && bool); // 所有条件都为true，所以返回 true // 如果第一个操作数隐式类型转换后为true,则返回最后的操作数（多个操作数如果都为真则返回最后的操作数，若至少有一个为假则返回第一个假的操作数）： console.log(str && num_3); //除""之外的所有字符，转换为布尔都为true，最后默认返回第最后的操作数：30 console.log(80 && 55); // 除0之外的所有数字，转换为布尔型都为true,最后默认返回最后的操作数：55 console.log("hello" && 65 && "abc"); // 都为true,则返回最后一个操作数：abc // 如果第一个操作数隐式类型转换后为flase,则返回第一个操作数： console.log(0 && 88); // 返回第一个操作数，因为第一个为flase console.log("" && 0 && 30>20); // 第一个就为flase,则返回第一个操作数 // 如果有一个操作数是null,则返回null console.log(n && num_3); // 返回null,因为只要有null就返回null console.log(33*"abc" && 55); // 返回NaN,因为数字和字符串无法加减乘除，正常得到NaN,有一个NaN,就返回NaN // 如果有一个操作数是undefined,则返回undefined console.log(m && bool && 99); // 返回undefined,因为有一个是未定义，就返回undefined

逻辑或： || 或：（只要有一个条件成立，返回true）

在有一个操作数不是布尔值的情况，逻辑或操作就不一定返回布尔值 1.如果第一个操作数隐式类型转换后为true,则返回第一个操作数 1.如果第一个操作数隐式类型转换后为false,则依次往后判断，直到最后是否为true

逻辑非： ! : 无论操作数是什么数据类型，逻辑非都会返回一个布尔值 !! : 第二个逻辑非则对该布尔值求反

函数

JavaScript函数的定义 function functionName([arg0,arg1,...argn]){ statements }

1、functionName是要定义的函数名，属于标识符 2、[]中的arg0,arg1,...argn为函数的参数 3、[]说明里面的内容不是必须的，它不是语法

函数的返回值 任何函数通过return语句，后面跟着返回的值来实现返回值

说明： 1、函数会在执行完return语句之后停止并立即退出 2、return语句也可以不带有任何返回值，用于提前停止函数执行又不需要返回值的情况。 //return 后不一定跟返回值

arguments ECMAScript中的参数在内部用一个数组来表示， 在函数体内通过argument对象来访问这个数组参数。

说明： （1）arguments对象只是与数组类似，并不是Array的实例。 （2）[]语法访问它的每一个元素，下标从0开始 （3）length属性确定传递参数的个数。 arguments.length 可以知道传递进来的参数的个数

条件语句

分支语句

分支语句if

if（条件）{ 代码1； }else if（条件）{ 代码2； }...[...代表可以增加无数个else if] else{ 代码3； }

if 语句的嵌套 举个栗子： var password=prompt（”请设置您的密码“）； //判断密码的长度，如果不是6位，否则 if（password.length!=6）{ alert("请输入6位的数字密码")； }else{ //如果密码不是非数字，否则是数字 if（isNaN（password）==true）{ alert（”密码必须要是数字“）； }else{ alert（”密码设置正确“）； } }

-switch语句 多条件判断用switch，三个以内条件用if

语法： switch(expression){ case value:statement break; case value:statement break; ...... default:statement }

default是所有case都找不到时候的出口

循环语句

for语句

语法： for（语句1；语句2；语句3）{ 被执行的代码块； } 说明： 语句1：在循环（代码块）开始前执行（循环初始值） 语句2：定义运行循环（代码块）的条件（循环条件） 语句3：在循环（代码块）已被执行之后执行（变量的变化）

循环嵌套 当循环与循环发生嵌套时遵循下列规则： 1)外层为假时内层不执行 2)先执行外层再执行内层，直至内层的条件为假时再返回外层去执行。

while语句

whlie(条件){需要执行的代码；}        先判断条件，再执行脚本

do{需要执行的代码；}while(条件)    先执行脚本，再判断条件，至少会执行一次；

说明：这种语法的循环至少要被执行一次，尽量多使用while，少使用do while，因为do while总是至少要执行一次。

循环相关

for与while的区别 for:适合已知循环次数的循环体 while:适合未知循环次数的循环体

break：立即退出整个循环； continue：退出本次循环，继续执行下一次循环；

内置对象

数组：数组主要是用来存储一组数据的。

创建数组的基本方式有两种

1)使用Array构造函数 语法：var 变量名 = new Array（） 小括号（）里有两种情况： ①一个数字的话就是数组要保存的项目数量 ②多个用逗号隔开的数据，就是向Array构造函数中传递数组应包含的项

2）使用数组字面量表示法 由一对包含数组的方括号[]表示，多个数组项之间以逗号隔开。 举个栗子： var 变量名=["red","yellow","blue"]; connsole.log(变量名); //数组里的数组项可以是不同的数据类型 var infos=[6,"marry",true,{email:"marry@shuzu.com"}]; console.log(infos);

数组元素的读写 读取和设置时，使用方括号[ ]并提供相应的索引 说明：索引是从0开始的正整数

数组长度 语法：array.length 功能：获取数组array的长度 返回值：number

说明： 1)通过设置length可以从数组的末尾移除项或向数组中添加新项。 2)把一个值放在超出当前数组大小的位置上时，会重新计算数组长度值，长度值等于最后一项索引加1.

数组方法

栈方法就是：指在栈的栈顶对栈里面的元素进行添加（进站）或删除（出栈）的操作方法。

一、push() 语法：arrayObject.push(newele1,newelew,...neweX) 功能：把它的参数顺序添加到arrayObject的【尾部】 返回值：把指定的值添加到数组后，数组的新长度

二、pop（） 语法： arrayObject.pop() 功能： 删除arrayObject的最后一个元素 返回值：被删除的那个元素

三、shift（） 语法： arrayObject.shift() 功能：‘ 删除arrayObject中的第一个元素 返回值：被删除的那个元素

四、unshift（） 语法： arrayObject.unshift(newele1,newele2,.....neweX) 功能： 把它的参数顺序添加到arrayObject的【开头】 返回值：把指定的值添加到数组后的新长度。

join() 语法： arrayObject.join(separator); 功能： 用于把数组中的所有元素放入一个字符串。 返回值： 字符串。 join（）括号里写的是分隔符。默认为逗号“，” join（“”）打印的是一个整的字符串，就是分隔符为空的意思

reverse() 语法： arrayObject.reverse() 功能： 用于颠倒数组中元素的顺序，不会创建新的数组，只是改变原来数组 返回值： 数组。

sort（） 语法： arrayObject.sort(sortby); 功能： 用于对数组的元素进行排序。 返回值： 数组。

说明： 1）即使数组中的每一项都是数值，sort()方法比较的也是字符串。 2）sort()方法可以接收一个比较函数作为参数。 var arr=[9,23,15,-99,88,12,-2]; //arr.sort(function(x,y){return y-x});倒叙从大到小 arr.sort(function(x,y){return x-y});正序从小到大

concat() 语法arrayObject.concat(arrayX ,arrayX.......,arrayX) 功能：用于连接两个或多个数组 返回值：数组

slice() 语法：arrayObject.slice(start,end) 功能：从已有的数组中返回选定的元素，总之含头不含尾 参数： start（必需）规定从何处开始选取，如是负数，从数组尾部开始算起 end（可选）规定从何处结束选取，是数组片段结束处的数组下标 返回值：数组

说明： 1.如没指定end，切分的数组包含从start到数组结束的所有元素 2.如slice()方法的参数中有一个负数，则用数组长度加上该负数得到结果A，用A替换该负数（其实也可以理解为倒数第几个） 3、截取从start到end（不包含该元素）的元素，即从start到end-1的元素】

splice()

1、删除数组项 语法：arrayObject.splice(index,count) 说明：count是要删除的项目数量，如果设置为0，则不会删除项目。如果不设置，则删除从index开始的所有值 功能：删除从index处开始的零个或多个元素 返回值：含有被删除的元素的数组

2、插入数组项 语法：arrayObject.splice(index,0,item1,....,itemX) 功能：在指定位置插入值 参数：index：起始位置    0：要删除的项数    item1,....,itemX：要插入的项 返回值：数组

3、替换数组项(记这个就行) 语法：arrayObject.splice(index,count,item1,.....itemX) 功能：在指定位置插入值，且同时删除任意数量的项 参数：index：起始位置 count：要删除的项数 item1,.....itemX：要插入的项 返回值：从原始数组中删除的项（如果没有删除任何项，则返回空数组）

查找元素

1、indexOf() 语法：arrayObject.indexOf(searchvalue,startIndex) 功能：从数组的开头（位置0）开始向后查找 参数：searchvalue：必需，要查找的项 startIndex：可选，从哪开始查找 返回值：number，查找的项在数组中的位置，没有找到的情况下返回-1

2、lastIndexOf() 语法：arrayObject.lastIndexOf(searchvalue,startIndex) 功能：从数组的末尾开始向前查找 参数：searchvalue：必需，要查找的项 startIndex：可选，起点位置的索引 返回值：number，查找的项在数组中的位置，没有找到的情况下返回-1 说明：1）在比较第一个参数与数组中的每一项时，会使用全等操作符，即要求查找的项必须严格相等 2）数组的位置方法是ECMAScript5为数组实例新增的，所以支持的浏览器有：IE9+、Firefox、Safari、Opera和Chrome

String的方法。string就用变量名代替

charAt() 语法： stringObject.charAt(index) 功能： 返回stringObject中index位置的字符。

charCodeAt() 语法： stringObject。charCodeAt(index) 功能： 返回stringObject中index位置字符的字符编码，Unicode码

indexOf() 语法： stringObject。indexOf("字符"); 功能： 从一个字符串中搜索给定子字符串，返回子字符串的位置。 返回值： 数值。 说明： 如果没有找到该子字符串，则返回-1.

string.search():和string.indexOf一样

lastIndex() 语法： stringObject.lastIndexOf("字符"); 功能： 从一个字符串中搜索给定的子字符串（从后往前搜索），返回子字符串的位置。 返回值： 数值。 说明： 如果没有找到该子字符串，则返回-1.

截取

silce() stringObject.slice(start,end); 功能： 截取子字符串，含头不含尾 参数说明： 1)start：必需，指定字符串的开始位置。 2)end：可选，表示子字符串到哪里结束，end本身不在截取范围之内，省略时截取至字符串的末尾。 3)当参数为负数时，会将传入的负值与字符串的长度相加，得到的结果代替负数

substring() 说明： 语法及功能同slice()完全一样。 区别在于： 1)当参数为负数时，自动将参数转换为0。 2)substring()会将较小的数作为开始位置，将较大的数作为结束位置。

substr() 语法： stringObject.substr(start,len); 功能： 截取子字符串。 参数说明： 1)start：必需，指定子字符串的开始位置。 2)len：可选，表示截取的字符总数，省略时截取至字符串的末尾。 3)当start为负数时，会将传入的负值与字符串的长度相加后得到结果A，A来替换负数 4)当len为负数时，返回空字符串。

split（） 语法：stringObject.split(分隔符) 功能：把一个字符串分割成字符串数组。// 回忆数组中的join（）方法，把数组转换为字符串 返回值：Array（数组） 说明：分隔符，必需。（字符串的之间用什么分割，方法中分隔符就写什么），如果写的是"则"没一个字符都会被分隔

replace() 语法： stringObject.replace(regexp/substr,replacement) 功能： 在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。 返回值： String 参数： regexp：必需。规定子字符串或要替换的模式RegExp对象。 replacement：必需。一个字符串值。

toUpperCase(): 语法： stringObject.toUpperCase() 功能： 把字符串转换为大写

// 把调用函数的值，变成驼峰形式的值： function camelback(str) { // 通过-号分割符号拆分成数组： var arr = str.split("-"); var newStr = arr[0]; for(var i=1,len=arr.length;i<len;i++) { var world = arr[i]; // 将每一个单词首字母转化为大写,连接剩余字符 newStr += world.charAt(0).toUpperCase()+world.substr(1); } return newStr; } var camelFormat = camelback("border-left-color"); console.log(camelFormat);

toLowerCase()： 语法： stringObject.toLowerCase() 功能： 把字符串转化为小写 -->

Math对象

Math.min(num1,mum2....numN) 功能：求一组数中的最小值。返回值：Number

如果参数是不能转换成数字的非数字值，则返回NaN。

Math.max() 功能：求一组数的最大值。返回值：Number

如果参数是不能转换成数字的非数字值，则返回NaN。

Math.abs() 功能：返回绝对值

取整方法

Math.ceil() 功能：向上取整，即返回大于num的最小整数

Math.floor() 功能：向下取整，返回num的整数部分

Math.round() 功能：四舍五入取整

Math对象：Math.random() Math.random(); 返回大于等于0小于1的随机数；返回number；

说明：求n到m之间的随机整数的公式： random=Math.floor(Math.random()*(m-n+1)+n); m--大数 n--小数 m-n+1表示随机整数的个数 求任意数组之间的随机整数：

data对象

如何创建一个日期对象 语法：new Date（） 功能：创建一个日期时间对象 返回值：不传参的情况下，返回当前的日期时间对象。

获取

getFullYear()：返回4位数的年份

getMonth()：返回日期中的月份，返回值为0-11，所以一般要+1

getDate()：返回月份中的某一天

getDay()：返回星期几，返回值为0-6

getHours()：返回小时

getMinutes()：返回分

getSeconds()：返回秒

getTime（）放回1970年1月1日至今的毫秒数。

设置

setFullYear(year):设置4位数的年份

setMonth(mon):设置日期中的月份，从0开始，0表示1月【如果mon设置的不是0-11而是比11大，系统会自动纠错，将年自动+相应的年数，然后显示剩下的月份。 比如：today.setMonth(13)，则年份自动+1，月份会显示为1（因为0~11表示1月~12月，所以12表示1月，13表示2月，所以13会显示为1） 下面各项设置同理会自动变化】

setDate():设置日期

setHours():设置小时

setMinutes():设置分

setSeconds():设置秒

setTime():以毫秒数设置日期，会改变整个日期

一些操作

alert（）是在页面中弹出一个提示框

console.log（）是在控制台中输出语句内容；

document.write（）是在页面中显示内容

prompt（）是在页面中弹出一个输入框，可以让用户进行输入

获取星期 --语法：new Date(). getDay(); 返回值number（0-6）；0表示周日主要根据系统时间判断