javaScript知识汇总

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内
示例：
<script src=""></script>

变量

声明变量：var a; (默认值：undefined)
a可以放置任何数据类型

命名规范：

严格区分大小写
可以使用数字、字母、下划线，但不能以数字开头
不能使用关键字和保留字

命名方法

驼峰法（推荐）:多个单词组成，第一个单词首字母小写，后面单词首字母大写。例如：var EatFood = ‘yes’;
匈牙利命名:以数据类型的单词首字母作为前缀

数据类型

js中数据类型主要包含两种：基本数据类型和引用数据类型

基本数据类型：number,string,boolen,null,undefined
引用数据类型：function,object,array,string,date

注意：可以用typeof 返回当前数据类型,使用方法：typeof a或者typeof(a)

运算符

算数运算符：+、-、*、/（真正的除，有小数）、%、++、–(同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()	分割字符串，将字符串拆成字符数组

注意：
1. 排序都是在原来列表上进行操作，改变原来列表顺序，同时也会返回排序后的结果
2. js数组赋值为引用赋值
3. 反转字符串方法：先用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="[email protected]";
var regc = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/g
console.log(regc.exec(str1));