js 基础知识
JS中的简单属性及常用函数(需完善)
属性
style属性:
- 获取元素的行内样式,并控制
className属性:
- 获取元素的class名,并控制
innerHtml属性:
- 获取元素里的内容,并修改(可以识别标签)
innerText属性:
- 获取元素里的内容,并修改
box.style
box.innerHTML
box.innerText
box.className
常用函数
Number()
- 其它数据类型转数字类型
parseInt()
- 其它数据类型先转字符串,再转数字类型
parseFloat()
- 其它数据类型先转字符串,再转数字类型,可识别第一个小数点
isNaN()
- 检测一个值是否为非有效数字
.toString()
- 把其它数据类型转字符串类型
Boolean()
- 把其它数据类型转布尔类型
console.log()
- 在控制台输出,常用于
alert()
-弹窗,常用于阻断代码
document.getElementById()
-获取上下文元素
创建function函数、执行函数
函数
函数就是一个方法,把实现某些功能的代码封装到一起,以后执行这个方法,就可以直接运行函数,函数可以减少页面重复代码,提高代码复用率(高内聚、低耦合)
(创建函数)
(把实现某些功能的代码封装到一起)
(存放的变量在函数里叫形参变量)
(函数return 返回结果)
(函数执行),
(在函数运行时放的变量就是实参)
let sum = 10+10;
sum=sum/2;
console.log(sum);
let sum1 = 12+13;
sum1=sum1/2;
console.log(sum);
//封装函数
function sum(n,m){
//函数创建时的小括号中放的就是形参
let num=m+n;
num=num/2;
return num
}
//函数名加括号,就是函数的执行,函数执行时传的是实参
sum(10,10)
//输出函数
console.log(sum(10,10))
function函数
实参与形参 是一一对应的
return是返回
允许函数里的值输出
阻止return之后的代码执行
function x(y,z,m,n....){
//封装着一系列代码,一系列运算
let num=m+n;
num=num/2;
return num//返回
}
x(10,11,16,1....)//函数执行
let sum = x(10,11,16,1....);
console.log(sum)
//实参与形参 是一一对应的
函数表达式
let fn = function(n,m){
console.log(n,m) //undefined
return
}
console.log(fn()) //undefined
自执行函数
(function(m){
console.log(m)
})(1)
function fn(n,m){
let num = m+n;//NaN
return n;
}
let s = fn(200);
console.log(s);//200
JS常用的鼠标事件
onclick//点击事件
- box.onclick = function(){}
onmouseenter//移入
- box.onmouseenter = function(){}
onmouseout//移出
- box.onmouseout = function(){}
常见的出现null、undefined的情况
出现undefined的几种情况
- 创一个变量不赋值,获取这个变量是undefined
- 获取对象里的属性名所对应的属性值获取不到,是undefined
- 函数里,实参没有给形参变量赋值,也是undefined
- 函数里没有return(或有return但没有返回值),函数的执行结果是undefined
出现null的几种情况
- 手动赋值为null
- 通过ID获取元素获取不到也是null
函数的堆内存存储的是字符串格式的代码,普通对象和数组存储的是键值对
arguments
他是函数实参的集合,代表了所有的实参,他是一个类数组,它不受实参和形参的影响
//任意数求和
function fn(){
let total = null;//创建变量,用来累积求和
for (var i = 0; i<arguments.length; i++){
let item = arguments[i]//数组每一项
item = Number(item);//把item转数字
if(!isNaN(item)){//验证item是否为一个非有效数字,是有效数字条件成立
total = total + item//数字累加
}
}
return total;
}
let num = fn(12,13,true,'12',NaN)
console.log(num)//38
arguments.callee
//他代表函数本身, 在严格模式下禁止使用
function fn(){
console.log(111)
console.log(arguments.callee())
}
fn();//无限执行下去,一直执行,一直开堆栈内存,会报错,超过最大堆栈大小
函数表达式
let fn = function(){}
fn()
箭头函数(ES6)
箭头函数没有this、没有arguments
let fn = () =>{
console.log()
}
fn()
如果只有一个形参 可以省略小括号
function fn(m){}
let fn = (m) => {}
let fn = m => {}
fn()
如果函数中只有return一行代码,可以省略大括号和return
let fn = (m) => {return m}
let fn = (m) => m
console.log(fn(3))
如果return后边是一个对象,对象外边要加括号表明
let fn = () => {return {}}
let fn = () => ({})
…x 展开、收缩运算符
let fn = (...a){
//把所有实参以数组的形式 收集到变量a里
console.log(a)
}
let num = fn(1,2,3,4)
//展开运算符
let ary = [1,2,3,4]
console.log(...ary)
//利用展开收缩运算符给数组添加第一项及最后一项
let ary = [1,2,3,4];
ary = [12,...ary];
ary = [...ary,12];
console.log(ary)
给形参赋默认值(ES6)
如果用户不传实参,那就走默认值,如果用户传实参,就走实参的值
function fn(n=0,m=0){
console.log(n,m)
let total = n+m;
return total
}
fn()//0