js基础知识(3)

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