js基础知识

92 阅读6分钟

输入输出语句

alter(msg) 弹出框
console.log(msg)  控制台打印
prompt(info) 弹出用户输入框

声明变量

区分大小写
var age;
age = 18;
先声明才能赋值 ,也可以写在一起
var name = 'wython'

同时声明多个变量
var name='wython',age=18,add='南京';
只需写一个var ,变量之间用逗号隔开

不声明直接赋值使用是可以正常输出的,但是不建议使用

数据类型

基本数据类型:
Number数字类型,包含整型和浮点型,默认值为0
isNan()  判断是不是数字,是返回False
Boolean布尔类型,如true、flase,默认false
String字符串类型,注意字符串类型都是带引号的,默认“”
长度:var str="";str.length;,
拼接:str1+str2,数值相加,字符相连

Undefined声明变量但是未给值
Null声明变量为空值var a=null

字符串转义符,以\开头
\n 换行符
\\ 斜杠\
\' 单引号
\" 双引号 
\t tab缩进
\b 空格,blank


typeof 获取数据类型
console.log(typeof 变量名);

数据类型之间的转换

转字符串
var num = 10
toString(),String(),加号拼接字符串
num.toString(),String(num),num+''

转数字型
parseInt(string)函数,将字符串转为整型
parseFloat(string)函数,将字符串转为浮点型
Number()强制转换函数,强制转换Number('10')

js隐式转换(- * /) 利用算术运算隐式转换为数值型 '12'-0
console.log('12'-0) 
布尔类型

算术运算符

浮点数存在精度问题,最好不用与计算,更不能用于比较。
判断一个数是否能被整除,取余为0即可
算术的优先级小括号>乘除>加减

递增(++)和递减(--)
递增(递减)运算符放在变量前面称为前置递增(递减)运算符,放在变量后面称为后置递增(递减)运算符,前提必须和变量配合使用
后置:先返回原值,再相加 console.log(num++ + 10);返回的值是num+10,但是age等于num+1 了。

逻辑运算符

&&和;||或;! not 非;
短路运算符(逻辑中断):
逻辑与:如果表达式1为真,则返回表达式2;如果表达式1为假,,则直接返回表达式1
逻辑或:如果表达式1为真,则返回表达式1;如果表达式1为假,,则直接返回表达式2

运算符优先级

1、() 2、++ -- ! 3、*/ +- 4、> >= < <= 5、== != === !== 6、&& || 7、= 8、,

流程结构:顺序,分支,循环

if语法的结构
if (条件表达式1){
	//执行语句1
}else if(条件表达式2){
 // 执行语句2
}else{
 // 执行语句3
}

三元表达式

条件表达式 ? 表达式1 :表达式2
条件为真返回表达式1,条件为假返回表达式2

switch

switch(表达式){
	case value1:
		执行语句1;
		break;
  case value2:
  	执行语句2;
  	break;
  ...
  default:
  	执行最后的语句;
}

表达式 === value才可执行,break需要写,否则会继续执行 
表达式值和case后面的选项值相匹配,匹配上就执行语句,如果没有匹配的,就执行default

循环

for 循环:循环体和终止条件
for(初始化表了;条件表达式;操作表达式){
	//循环体
}

while
while(条件表达式){
		//循环体
}


do...while 先执行一次循环体,再判断条件是否满足,满足就再执行一次循环体
do{
		//循环体
}while(条件表达式)


continue跳出本次循环 break 结束循环

数组

创建数组
new创建数组
var arr = new Array(); //创建了一个新的空数组,A大写
数组字面量创建数组
var arr = []
数组里的数据用逗号分隔

获取数组元素
数组名[索引]  没有的元素会输出undefined

arr.length //获取数组的长度

新增元素
// 修改length长度
var arr = [1,2,3];
arr.length = 5;
console.log(arr[3],arr[4]) //打印undefined
// 新增数组元素,追加索引号
arr[4] = 4
// 如果无数据则新增,有数据则替换

函数

函数使用分两步:声明函数,调用函数
//声明
匿名函数:
var 变量名 = function(){}
​
普通函数:
function 函数名(){
  // 函数体
};
​
// 调用
函数名();
​
参数
function 函数名(形参1,形参2...){
  
}
实参
函数名(实参1,实参2...)
​
如果实参多于形参那只会取形参相同个数的实参,多余的省略
如果少,缺少的形参被定义为undefined,最终结果为NaN
​
​
返回值
function 函数名(){
  return 需要返回的结果 ;
}
return只能返回一个值,多个值用逗号隔开,只返回最后一个值
如果没有返回值返回undefined
​
​
arguments的使用
不确定有多少个参数传递时,可以用arguments来接收参数
会产生一个伪数组,并不是真正意义上的数组,具有length属性,按照索引进行存储
​
function fn(){
  console.log(arguments);
  
}
fn(1,2,3);  //

对象

一组无序的相关属性和方法的集合,所有的事物都是对象,例如字符串、树枝、数组、函数等
属性:事物的特征,在对象中用属性来表示(常用名词)
方法:事物的行为,在对象中用方法来表示(常用动词)
​
创建对象的方式
//字面量创建对象
var obj = {};//创建一个空对象
var obj = {
  name : 'wython';
  age : '18';
}
​
调用:对象名.属性名 | 对象名['属性名']
obj.name | obj['name']
​
//new Object创建对象
var obj = new Object();创建了一个空的对象
obj.name = 'wython';
​
//构造函数创建对象
function 构造函数名(){
  this.属性 = 值;
  this.方法 = function(){
    
  }
  new 构造函数名();
}
​
构造函数名首字母必须要大写
function Star(name,age,sex){
  this.name = name;
  this.age = age;
  this.sex = sex;
}
var ldh = new Star('刘德华','18','男');
不需要return就可以返回对象

作用域和名称空间

var name1 = 'python';
age1 = 18;
function myFunction(){
  var name2 = 'wython';
  age2 = 19;
}
​
//作用域:全局作用域和局部作用域,变量或函数可以使用的范围
//名称空间也就是声明的变量可以使用的空间
​
定义在页面内的如name1称为全局变量,因为可以在这个页面任意地方使用,但是name2定义在函数内部,只能在函数内使用,函数运行完自动删除,页面中函数之外的地方无法调用,所以称为局部变量。但是未声明的,像age1和age2就没有var关键字声明,该变量就都是全局变量。
​

事件

获取时间一
<button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>
<p id="demo"></p>
获取时间二
<button onclick="this.innerHTML=Date()">现在的时间是?</button>
<p id="demo"></p>
获取时间三
<button onclick="displayDate()">现在的时间是?</button>
<p id="demo"></p>
<script>
    function displayDate(){
        document.getElementById('demo').innerHTML=Date();
    }
</script>
​
<!--常见的Html事件
onchange  HTML 元素改变
onclick 用户点击 HTML 元素
onmouseover 用户在一个HTML元素上移动鼠标
onmouseout  用户从一个HTML元素上移开鼠标
onkeydown 用户按下键盘按键
onload  浏览器已完成页面的加载-->
​

构造函数和对象的区别

构造函数泛指的是某一大类,而我们的对象是指具体的某一个对象
例如刘德华是明星,明星就是一个大类,就是用构造函数,刘德华可以有明显特征,就是我们的对象
​

new关键字执行过程

function Star(uname,age,sex){
  this.name = uname;
  this.age = age;
  this.sex = sex;
  this.sing = function(sang){
    console.log(sang);
  }
}
var ldh = new Star('刘德华',18,'男');
​
// 1.new 构造函数可以在内存中创建一个空的对象
// 2.this 就会指向刚才创建的空对象
// 3.执行构造函数里面的代码,给这个空对象添加属性和方法
// 4.返回这个对象(所以构造函数里面不需要return)

遍历对象

for...in语句,用于对数组或者对象的属性进行循环操作
for(变量 in 对象){}
​
​

内置对象

Math数学对象,不是一个构造函数,不需要new来调用,直接使用里面的的属性和方法
Math.random() //随机返回一个小数0到1之间,包含0.function getRandom(min,max){
    return Math.floor(Math.random()*(max-min+1))+min;
}
//随机返回整数
console.log(getRandom(1,3));
​
Date()日期对象,是一个构造函数,必须使用new来调用创建我们的日期对象
var arr = new Array(); //创建一个数组对象
var obj = new Object(); //创建了一个对象实例
//使用Date
var date = new Date();
console.log(date)
// 获取毫秒
var date = new Date(); // 获取的是1970年至今的毫秒 
//通过valueOf(),getTime()
date.valueOf()
date.getTime()
//简单写法
var date1 = +new Date();
// H5新增,获得总的毫秒数
Date.now()
​
//倒计时案例
规定时间减去现在时间,时间不能直接相减,可以用时间戳来减,用户输入减现在的时间,在转换为时分秒
展转换公式:
  d = parseInt(总秒数/60/60/24); // 计算天数
  h = parseInt(总秒数/60/60%24); // 计算小时
  m = parseInt(总秒数/60%60);    // 计算分数
  s = parseInt(总秒数%60);       // 计算当前秒数

数组

// 检测是否为数组
instanceof
console.log(arr instanceof Array)
Array.isArray() // H5新增方法,IE9以上支持
console.log(Array.isArray(arr))
// 添加和删除数组元素方法
//1.push() 在我们数组的末尾添加一个或多个数组元素
var arr = [1,2,3];
arr.push(4,'wython');
// push完毕返回结果是新数组长度,原数组也会变化//2.unshift() 在我们的数组开头添加一个或多个数组元素,返回结果和push一样
arr.unshift('val1','val2');
​
//3.pop() 删除数组最后一个元素,不跟参数,返回值是删除的那个元素
arr.pop()
​
// shift() 删除数组的第一个元素, 返回删除的那个元素
arr.shift()
​
//数组翻转
arr.reverse()
//数组排序
arr.sort() //有问题,如果是个位数和两位数比较,个位数会和两位数的十位进行比较,导致一个排序错误
解决:
arr.sort(function(a,b){
  // return a-b; 升序的顺序排列
  // return b-a; 降序的顺序排列
})
​
​
//返回数组元素索引号的方法,只返回第一个满足条件的索引号,如果没有则返回-1
var arr = [...]
arr.indexOf('value')
// 返回最后一个满足条件的
arr.lastIndexOf('value')
​
​
// 转换为字符串
arr.toString()
arr.join('分隔符')// 可写参数,写什么就是用什么连接,不写默认逗号// concat 连接两个后多个数组,不影响原数组,返回一个新的数组
//slice 数组截取slice(begin,end),返回被截取项目的新数组
//splice 数组删除splice(第几个开始,要删除个数),返回被删除项目的新数组,会影响原数组

字符串对象

str.indexOf('要查找的字符',[起始位置])
//应用:查找'o'的位置和次数
var str = 'abcoefoxyozzopp';
var index = str.indexOf('o');
// 不等于-1继续执行
while (index != -1){
    console.log(index)
  // 查找的字符还是'o',但起始位置需要+1了
    index = str.indexOf('o',index+1)
}
​
​
//根据位置返回字符
str.charAt(index) 
// 可以用这个方法遍历所有的字符
for (var i=0;i<str.length;i++){
  console.log(str.charAt(i));
}
​
// 返回相应索引号的字符ASCII值,可用于判断用户按下了那个键
str.charCodeAt(args);
​
// concat(str1,str2,....) 用于连接两个或多个字符串,等效于+,+更常用
var str = 'abc';
str = str.concat('red','blue')
​
//substr(start,length)  从start 位置开始(索引号),length是取得个数
var str = 'abcgfff';
str = str.substr(2,2)
console.log(str)  // cg// slice(start,end) 从start位置开始,截取到end位置,两个都是索引号,不包含end// substring(start,end) 从start位置开始,截取到end位置,end不包含,基本和slice相同,但是不包含负值// 替换字符 replace('被替换的字符','替换为的字符'),只会替换第一个字符// 字符转换为数组split('分隔符'),前面学的join是把数组转换为字符串
var str = 'red','blue','pink';
str.split(',');
​
// toUpperCase() 转换大写
// toLowerCase() 转换小写

简单数据类型和复杂数据类型

简单数据类型又叫基本数据类型或者值类型
复杂数据类型又叫引用类型
值类型:在存储变量中存储的是值本身
// 简单数据类型null 返回一个空对象,
​
复杂类型:在存储变量中存储的仅仅是引用地址,所以又叫引用类型
// 通过new关键字创建的对象