javaScript知识汇总
这里只是一些简单的javascript知识
javascript特点:脚本语言,解释型语言,弱语言类型,语法和c相似,一般用来编写客户端脚本
用途:主要是在html中添加交互行为,制作页面特效;或者在客户端提交表单给服务器时,先做一个数据验证,减轻服务端压力。
组成部分:ECMAScript、DOM、BOM
输入方式
函数名 | 作用 |
---|---|
document.write() | 可以在文档中写入想要的字符串、标签 |
console.log() | 往控制台打印日志,抛出一套信息 |
console.error() | 往控制台抛出一套错误 |
console.dir() | 输入一个对象的全部属性 |
console.clear() | 清除控制台内容 |
alert() | 弹出警告框 |
prompt() | 弹出输入框,返回输入的结果,用来接收输入 |
元素对象.innerHTML./innerText | 获取或者向指定元素内添加内容 |
元素对象.innerHTML | 获取元素内所有的内容,还可以解析内容样式 |
元素对象innerText | 获取元素内的文本内容 |
console控制台在浏览器中怎么打开?
按F12或者右击检查
如何输入hello world?
console.log(‘hello world’);
在html中引入javascript的方法
1.行内式
注意:通常都写body后面,因为我们要等dom页面加载完成后再执行相应的脚本操作
示例:
<script type="text/javascript"></script>
2.内部式
写在标签内
示例:
<p id='p1' onclick="clickhandler()">123</p>
3.外链式(常用)
可以写在head内 ,最好放在body后,等页面加载完毕再执行js代码
示例:
<script src=""></script>
变量
声明变量:var a; (默认值:undefined)
a可以放置任何数据类型
命名规范:
- 严格区分大小写
- 可以使用数字、字母、下划线,但不能以数字开头
- 不能使用关键字和保留字
命名方法
- 驼峰法(推荐):多个单词组成,第一个单词首字母小写,后面单词首字母大写。 例如:var EatFood = 'yes';
- 匈牙利命名:以数据类型的单词首字母作为前缀
数据类型
js中数据类型主要包含两种:基本数据类型和引用数据类型
- 基本数据类型:number,string,boolen,null,undefined
- 引用数据类型:object,包含function,array,date
运算符
- 算数运算符:+、-、*、/(真正的除,有小数)、%、++、–(同c语言自增,自减)
- 赋值运算符:=、+=、-=、*=、/=、%=
- 比较运算符:==、===全等(值和类型)、!=、*=、/=、%=
- 逻辑运算符:&&、||、!
数据类型转换
隐式转换
在字符串和数字运算时有以下几个方面要注意:
运算符 | 注意事项 | 示例 |
---|---|---|
+ | 表示字符串连接,将数字转换为字符串,而不是做加法运算 | 13+‘12’结果为’1312’ |
- | 如果字符串中全是数字,将其转换为数字,做减法运算 | ‘15’ - 3 结果为 12 |
* | 如果字符串中全是数字,将其转换为数字,做乘法运算 | ‘15’ * 3 结果为 45 |
/ | 如果字符串中全是数字,将其转换为数字,做除法运算 | ‘15’ / 3 结果为 5 |
== | 如果字符串中全是数字,将其转换为数字,比较大小 | ‘33’ == 33结果为true |
=== | 值和类型必须相同 | ‘33’ == 33结果为false |
注意:如果字符串不为数字时,进行减乘除运算时,将会返回NaN(not a number),类型为number
强制类型转换
转换函数 | 作用 |
---|---|
String()、toString() | 将数字类型转换为字符串类型 |
Number() | 将字符串转换为数字(字符串必须为数字) |
parseInt() | 将字符串转换为int类型(找到字符串中前面的整数转换为int) |
parseFloat() | 将字符串转换为浮点数(找到字符串中所有数字,组成浮点数) |
boolean转换 | 所有数据类型都可以转换为浮点类型(0,NaN,undefined,null为假,其余全为真) |
流程控制语句
如果学过c,判断,循环和c语法都一样哦
if语法:
if(条件1){
语句1;
}else if(条件2){
语句2;
}
else{
语句3;
}
示例:
if(ji > 20)
{
console.log('吃鸡成功')
}
else if(ji > 15)
{
console.log('吃鸡失败')
}
else
{
consloe.log('未知错误?')
}
switch语法:
switch(){
case 条件1: 语句1;
case 条件2: 语句2;
...
defalut:语句n;
}
示例:
switch(gameScore){
case 'good':
console.log('玩的很好');
break;
case 'batter':
console.log('玩的牛逼');
break;
default:
console.log('很遗憾')
}
注意:别忘了在case语句后写break,否则会从符合条件的语句开始一直执行到末尾的语句
while语法
while(循环退出条件){
循环执行语句
}
示例
while(i <= 9){
console.log(i);
i = i+1;
}
do while语法
do{
循环执行语句
}while(循环退出条件);
示例
do{
console.log(i);
i = i+1;
}while(i <= 9);
数组
创建数组
方法一:
var colors=['red','color','yellow'];
(推荐)
方法二:
var colors2=new Array();
var colors3=new Array('red','blue');
数组赋值:arr[0] = 123;
数组的取值:通过下标取到相应的值var a = arr[2]
数组的遍历:
var colors=['red','blue','yellow'];
for(var i = 0;i < colors.length;i++){
console.log(colors)
}
数组的常用方法
函数名 | 功能 |
---|---|
concat() | 数组的合并 示例:north.concat(south) |
toString() | 将数组转换为字符串,每个元素之间使用逗号隔开 示例:score.toString() |
join() | 将数组使用连接符连接起来 示例:score.join(’,’) |
indexOf() | 通过内容找索引(下标不存在则返回-1) 示例:score.indexOf(78) |
lastIndexOf() | 反向查找,但是结果一样,只是过程不一样 |
reverser () | 反转数组 就地反转,返回反转后的结果 |
sort() | 按照字母表顺序排序 就地排序,返回排序后的结果 |
shift() | 移除数组中第一个元素 |
unshift() | 向数组开头添加一个或多个元素,并返回新的长度 |
push() | 向数组的结尾添加一个元素,并返回新的长度 |
pop() | 删除数组结尾的元素,并返回该元素 |
split() | 分割字符串,将字符串拆成字符数组 |
注意:
- 排序都是在原来列表上进行操作,改变原来列表顺序,同时也会返回排序后的结果
- js数组赋值为引用赋值
- 反转字符串方法:先用split将字符串转换为字符数组,再用join拼接
函数
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码
函数的声明
function add(形参1,形参2,....){
函数体
return 返回的内容;
}
函数的执行:add(实参1,实参2)
面向对象
直接创建对象
示例:
var stu={
key:value,
}
注意:括号内是很多键值对,键将自动解释为字符串,值可以为,数,对象,函数。。。。
获取对象的值:stu.name
设置对象的值:stu.name = 34
使用构造函数Object创建对象
示例:
一般是用来创建一个内置对象
var obj = new Object();
obj.name='xiaomage';
创建构造函数的方法
方式一
var Stu = function(){
this.name = 'sir';
this.age=18;
this.fav=function(){
console.log('泡妹子')
}
}
var s = new Stu(); 创建一个对象
方式二:推荐方法
function Anima(){
this.name = 'sir';
this.age=18;
this.fav=function(){
console.log('泡妹子')
}
}
写法二:
function Anima(){
this.name = 'sir';
this.age=18;
}
Animal.prototype,showname = function(){
console.log('泡妹子')
}
在对象外添加对象方法
js内置对象
String对象
string的方法名 | 功能 |
---|---|
length | 返回字符串长度 |
toUpperCase() | 返回字符串大写长度(不改变原字符串) |
toLowerCase() | 返回字符串小写长度(不改变原字符串) |
split() | 切割字符串,参数一为以。。切割,参数二为返回数组长度示例:str.split(’ ',1) 将str以空格(分隔符)进行切割,取1个元素 |
substring() | 取子字符串,参数一和参数二为索引范围,左闭右开示例:str.substring(1,3) 从str索引为1出取到索引为3处,不包含索引3的元素 |
num对象
num的方法名 | 功能 |
---|---|
toString() | 将number类型转换为字符串类型 |
toFixed() | 参数一以指定的小数位,四舍五入 |
Date对象
创建data对象:var myDate = new Date();
显示完整时间:Date()
常用的方法
Date的方法名 | 功能 |
---|---|
getDate() | 获取一个月的某一天(1-31) |
getMonth() | 返回月份(0.11月)需加1 |
getDay() | 获取一周的某一天(0-6)周日对应0 |
具体可以查看(js的chm手册)
Math对象
PI:常数π=3.14
常用的方法
Math的方法名 | 功能 |
---|---|
ceil() | 向上取整;返回值>=x,并且最接近的整数 |
floor() | 向下取整,截尾;返回值<=x,并且最接近的整数 |
max() | 最大值 |
min() | 最小值 |
random() | 随机数[0,1) |
定时器
setInterval(cod,millisec)
setInterval()
可以按照指定的周期(毫秒)调用函数,会不停的调用函数,直到遇到clearInterval()
或调用窗口被关闭(返回ID值可以作为clearInterval()
的参数)
setTimeout()
只执行一次code
示例:(属于window对象,通常情况下window不需要写)
window.setInterval(function()){
n++;
console.log(n);
},1000)
正则表达式
创建对象
第一种方式:var reg = new RegRxp('l','ig');
(检测文本,修饰符) i:不区分大小写 g:全局匹配
第二种方式:var reg1 = /y/ig;
不区分大小写,全局匹配;y为检测文本
检索方式
第一种方式:test()
检测字符串中是否包含定义字符模式 返回布尔 示例:reg1.test(str)
;
第二种方式:exec()
检索字符串中正则表达式的匹配(匹配到就返回结果数组,没有就返回null)
常用方法
match:字符串.match(正则)
示例:
var str ='hello world';
var reg = /o/g;
console.log(str.match(reg)); 结果:['o','o']
replace():替换 str.replace(被替换的,替换的)
示例:console.log(str.replace(reg,'*'))
search():
示例:console.log(str.search(reg));
split:以匹配的规则分割
示例:console.log(str.split(reg));
元字符
单字符匹配
符号 | 作用 |
---|---|
. | 匹配除换行符以外的任意字符(\为转义字符) |
[] | 匹配中括号内任意字符 |
[^] | 匹配所有不在这个范围内的字符 |
\d | 匹配数字 |
\D | 匹配非数字 |
\w | 匹配数字,字母,下划线(通常用在检验账号的合法性上) |
\W | 匹配非数字,字母,下划线 |
\s | 匹配空格 (用trim()也可以去除字符串前后空格) |
\S | 匹配非空白字符 |
^ | 以后面的条件开头 /^www/g 以www开头 |
$ | 以前面的条件结尾 /\.com$/g 以.com结尾重复字符匹配 |
? | 匹配前面的字符0个或一个 |
* | 匹配0个或任意多个 |
+ | 匹配一个或多个 |
{10} | 匹配10个字符 |
{min,max} | 匹配最少min,最多max个(取匹配最大) |
| | 或者 |
() | 分组 |
示例一:regc=/(baidu)|(google)/g regc.exec('www.google')
匹配结果
上述0组表示匹配到的,1组代表第一组(baidu)匹配情况,2组(google)代表第二个匹配情况
可以用RegExp.$1
查看代表第一组匹配情况,同理RegExp.$2
,RegExp.$3
示例二:regc=/(baidu)(google)/g regc.exec('www.google')
不用|
RegExp.$1
会提取出'baidu'
str.replace(reg,'$2 $1')
将匹配到的结果,第二组放在前面,第一组放在后面
结果:google baidu
练习
检索字符串中是否不包含字母
var str1="23sdfsdf";
var regc= /[a-zA-Z]/g;
if (regc.test(str1)) {
console.log('包含')
}else{
console.log('不包含')
}
去除字符串首尾空格
var str1=" 32 4ds fd f ";
var regc1 = /\S+.+\S+/g;
console.log(regc1.exec(str1))
检测用户账号 必须为数字,字母,下划线 \w 开头不能为数字
var str1 = 'sdf_dsfgs';
var regc = /^[a-zA-Z]\w{8,11}$/g
console.log(regc.exec(str1));
检测手机号码11 位1开头
var str1='11234567895';
var regc = /^1\d{10}$/g
console.log(regc.exec(str1));
检验电话号码 0开头 3-4位区号 可以有- 号码7-8位
var str1='0324-09456155';
var regc = /^0\d{2,3}-?\d{7,8}$/g;
console.log(regc.exec(str1));
验证邮箱 @qq.com @163.com
第一部分:数字,字母,下划线, -短线 .点
第二部分:域名由字母。数字。短线-,后缀。xxx .xxx.xx 域名后一般为2-4位
var str1="2929310048@qq.com";
var regc = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/g
console.log(regc.exec(str1));