原生js的笔记

JavaScript/前端
35
0
0
2024-07-03

javascript笔记

一个 = 是赋值 两个 = = 是值相等 三个  = = = 是值和类型相等。
typeof 查看 console.log(typeof _) 查询类型
+号除了运算 还有 链接作用 数字+字符=数字字符(1+“1”)=11 类型 string
一切皆对象(object) var x=null console.log(typeof x) 输出 object 
javascript是轻量级弱类型脚本语言 
是一种解释性脚本语言。 
向html页面添加交互行为。 
javascript与java区别:
java是SUN公司开发的 是强类型,基于面向对象的后端语言。 
javascrip是Netsape公司,是弱类型,基于对象的客户端脚本语言。

严格区分大小写
console.log() 控制台日志 
document.write() 会把页面body里面的内容全部覆盖掉。

console.time(“名字”) 代码 console.timeEnd(“名字”) 控制台计时,
可以控制台输出代码运行的事件,用来检测代码消耗浏览器资源的多少。
Javascript 分为3部分 ECMAscripDOMBOMECMAscript 是一个标准,不同厂商不同标准。
DOM document object modle 文档对象模型。
BOM Browser object modle 浏览器对象模型。
五个基本数字类型
null undefined number string boolean
Javascript输出方式 3个弹窗 2个输出。
3个弹窗 :
1. alert( “—” )带确定按钮的弹窗。
2. confirm( “—” )带确定和取消按钮的弹窗。
3. prompt ( “—” )带确定,取消和输入框的弹窗。
2个输出:
1. document.write(“—”)( 可以加标签的)。
2. console.log(“—”) 控制台输出。 
引入Javascript 的方式有三种
1.在html 中直接放到 <script></script>
2.外部引入js文件<script src="路径"></script>
3.在标签直接写 <p onclick="javascript:alert('_____')"></p>
var 声明变量
变量:可变的量,可变的未知数 
变量的值可以使具体数值也可以是公式 var a=x+y
var x=1; ;
x="啦啦啦"
javascript基本数据类型
1.number 数字
2.string 字符串 用 “ ” 引起来的
3.null4.boolean 布尔值 truefalse [fɔːls] 只有俩
5.undefined 未定义 null==undefined
引用数据类型
1. object 对象
2. function 函数
3. array 数组
运算符:
+ - * / +号除了运算还有 链接功能 a=1 b="1" console.log(a+b) 结果是11 类型是 string
- * / % number - , * , /string=number number+srting=string.
%取模(取余) 
1 a=true; b=3; console.log(a+b) 结果是4 类型number
就是对一个数或多个数进行运算,并将其结果返回。
运算符分为 算术运算符、 比较运算符、 逻辑运算符。
当+时如果有字符串和非字符串类型相加,会将其他非string类型转换为string。
字符串之间相加 是拼串 “55”+“8”=558。
拼串 就是将两个字符串拼到一起并返回。
非number类型 运行 - * / % 会将其转换为Number类型。
任何类型与NaN进行 / * - %运算 结果都是NaN。 除了Strging类型
数据转换:
输出结果都是以Δ字符串的形式输出的 
非数字类型运算 - * / % 都会将其转化为number类型 多个想联系 可以用
()分开 string+(“10”+1)=string101
强制类型 转换 注意首字母 大写
1. 转为 字符串类型。String( ) 
2.转为 数字类型。.Number( ) 
NaN是数字类型,但是不是一个具体的数字 NaNNaN不相等 因为他不是一个具体的数 
字符串转化为数字类型 “9” 结束数字就是9 。
非数字类型的字符串 “中文或字母” 结果为 NaNundefined转化为 数字类型 结果是NaN
布尔值转化为数字类型 true 转化结果是 1 false 转化结果是0.
null转化为数字 就是0
“ ”空字符串也是 0 
3.转换为 布尔值。Boolean( ) 
数字转换为布尔值 正数 负数都是 true, 0NaNfalse
字符串转换为布尔 true
null转化为布尔 false
undefied转化为布尔值 false
隐式类型 转换 注意首字母 大写
隐士类型转换可以通过 -0 *1 /1 转化为number类型。
1. 转换为Number
1.String转化为Number 除了 + 成为字符串 别的都是 - * / % 都是number1” + 1 = 11 string + number = string +除了运算还有相连的功能
“1 ”- 1 = 0 string - number = number1” * 1 = 1 string * number = number1” / 1 = 1 string / number = number1” % 1 = 0 string % number = number 
2.Boolean转化为Number + - * / % 都是number 除了 + string
true + "2" = true2 boolean + string = string
true + 2 = 3 boolean + number = number
true - 2 = -1 boolean- number =number
true * 2 = 2 boolean * number = number 
true / 2 = 1 boolean / number = number
3.Null转化为Number + - * / % 都是 numbernull当除数时 值为NaN 除了 + string
null + 1 = 1 null + number = number 
null - 1 = 0 null + number = number
null * 1 = 0 null * number = number
null / 1 = 0 null / number = number
null % 1 = 0 null % number = number
1 % null = NaN number % null = number
4.undefined转化为Number + - * / % 都 是 NaN 数据类型为 number 除了 + string
undefined + 1 = NaN undefined + number = number 

5.Boolean转化为Number 除了 + string 
true + "10" = true10 boolean + number = string
true - "10" = -9 boolean - number = number
true + "aaa" = NaN boolean + 非数字类型字符串 = NaN
true * "10" = 10 bollean * 数字类型字符串 = number
true * "aaa" = NaN boolean * 非数字类型字符串 = NaN
true / "10" = 0.1 bollean / 数字类型字符串 = number
true / "aaa" = NaN boolean / 非数字类型字符串 = NaN
true % "10" =1 bollean % 数字类型字符串 = number
true %"aaa" = NaN boolean % 非数字类型字符串 = NaN
2.转化为String
加号 “1”+1=11 string+number=string 

字面量 也叫直接量,就是程序中直接使用的。 就是变量后面的值(变量就是声明一个未知可变的量 a=1)
变量声明unicode编码,所以变量符合utf-8的编码都可以。
标识符(包含在变量之中) :
1、必须是 字母,数字,_, $符号开头的。
2、以驼峰命名规则
——开始单词小写 后面的单词首字母大写 例如 helloWorld boyAge suZiXing
保留字 
js中大小写严格区分的 alert弹框 String()
保留字不能用于普通表示符
一元算符: 自增 和 自减
+ 正号 任何数值前面加上 +(正号)对本身没有影响 +(-1)
- 负号 对数值进行负号的取反。
+ - 可以对非number类型转化 转换成number类型 

a++ 先运算 后 a-- 先运算 后-1
++a 先+1后运算 --a 先-1后运算
比较运算符:> < >=   = =   = = = !=值不等  != = 值和类型都不等
=是赋值  = =  值相等   = =  = 值和数据类型都相等
console.log(null= =undefined) 输出true 因为null(空值) 和 undefined 未定义也是空值
“ ” == 0 true ’‘ ’‘转化为number0,所以值相等 
0= =null false 0是具体的值 null是空值没有值
’’ ‘’ = =null false ‘’ ‘’中是有空格的 null是没有值
0==undefined false 0是具体指 undefined是未定义的空值
‘’ ‘’ ==undefined false ‘’ ‘’中是有空格的 undefined是未定义的空值
NaN!=NaN 
var a = typeof NaN console.log(isNaN(a)) 结束true 判断NaN的方法
逻辑运算符: &&与 ||或 !非
&&与(且) 同真为真  其余都是假        所有的条件都要满足 有一个不满足就是false
||或  有真为真   其余都是假        满足其中任意一个条件即可 都不满足就是false
!取非(相反结果) console.log(!(true)) 结果是flase


代码块:
程序是由一条一条语句构成的,
语句数自上而下执行的,
在javascript中使用{} 来分组的,
特点:要么一起执行 要不都不执行。
用{}分组之后叫代码块。

赋值运算符: 在赋值的同时进行运算
=赋值 += -= *= /= %=
x + = y -- x = x + y;
x - = y -- x = x - y;
x * = y -- x = x * y;
x / = y -- x = x / y;
x % = y -- x = x % y;

一元算符: 自增 和 自减 单 目 一 个变量自增或自减 
二元运算符 a+b a-b 双 目 两个变量进行运算+ - * /
条件运算符: 也叫三元运算符 三 目 
变量=(条件)?“符合条件的”:“不符合条件”
var a = 69;
a=(a>=60)?console.log("及格了"):console.log("不及格")
循环语句:
for , while ,do{}while() ,switch
for 循环语句
while 循环语句
do..while 循环语句
for循环语句 

两个for循环嵌套,内循环输出一行内个数,外循环输出多少行。



for(初始值;循环条件;循环方式){
执行代码
}

for是关键字
for()括号里面的是条件 例如 for( var i=0;(初始条件) )
{}里面是要执行的代码块
语法一
for(①初始值;②循环条件;④循环方式){
③执行语句
}
①初始化变量,可以在小括号里面,也可以放到循环外面。、
②判断是否符合循环条件。符合条件,就继续执行。不符合条件,不执行。
③执行循环体中的语句。
④执行循环方式,若是++那就加,若是--那就减。
②判断是否符合循环条件。符合条件,就继续执行。不符合条件,不执行。
初始值只执行一次
语法二:
①初始值
for(;②循环条件;④循环方式){
③执行语句()
}

语法三:
①初始值
for(;②循环条件;){
③执行语句+(④循环条件)
}
语法四:
①初始值
②添加条件
for(;;){
       if(条件){条件符合  执行语句;
}else{
        break;(跳出循环);
       }
       i++;
}
注意: 即使初始值,循环条件,循环方式都放在外面之后for(;;)里面的分号 必须还在
两个循环嵌套
for(var i=0;i<10;i++){
for(var j=0;j<0;j++){}
}
for循环嵌套 外面循环每执行一次 
里面就循环执行一个周期(循环方式执行完)
for(初始值;循环条件;循环方式){
for(初始值;循环条件;循环方式){
执行代码
}
}
判断语句:if(){ }else{ }
if( ){ }else{ } 如果...否则...
if(a>30&&a<50) 也可以
语法一
if(判断条件){
条件符合,执行语句
} 
语法二
if(判断条件){
条件符合,执行语句
}else{
语句
}
语法三
if(判断条件){
条件符合,执行语句
}else if(判断条件){
语句 
}else{
语句除了上面所有判断条件都不满足的结果
}
if执行流程
只要满足第一个判断条件就执行对应语句,下面无论是否满足都不执行。
不满足第一个条件,就在判断下一个条件没如果下一个满足就停止判  
输出对应语句,如果不满足条件就继续判断下一个条件。
所以把最大的范围写在上面,再往下写小范围。或者分段写判断条件。

parseInt( ) 取整,是javascript当中的内置方法,小数点后面都删掉。 
parseFloat( )去浮点 去掉小数点后面的020.156000 
parsenInt可以将字符串转化为数字类型,parsenInt("12.012")-----12 数字类型、

条件分支语气switch:
var x = 1;
switch( 1(条件)){
case 1:(是冒号)
console.log( );
break;(防止多次循环)
default:
console.log( )
}
caseswitch中匹配的每个案例。必须用break中断每一个案例,
有break则只显示符合条件的匹配项,否则只要符合条件,后面的都显示。
default默认,在switch中放到最后一项,作为最后的默认选项。
(就是除了已经写的案例,其余的)后面可以不加break.因为default执行完了就直接跳出了 加不加没关系。
case 'a':
alert("apple")
记得casedefault后面写 :

ifswitch的区别
if语句:表达式的结果是boolean布尔类型(常用于区间判断)
switch语句:表达式类型不能是boolean布尔类型,可能是byte,int,char,string,枚举(常用于等值判断)
switch需要case来跳转一个循环条件 每一个循环条件需要加break结束循环,
(1switch case的优点:

当分支较多时,用switch的效率是很高的。因为switch是确定了选择值之后直接跳转到那个特定的分支.

(2switch case的缺点:

1.switchcase占用较多的代码空间,因为它要生成跳表,
特别是当case常量分布范围很大但实际有效值又比较少的情况,switchcase的空间利用率将变得很低。
while循环语句:
while也可以嵌套while使用
语法一
①初始化变量
while(②循环条件){
③执行的代码块;
④循环方式
}
语法二
①初始化变量
while(②循环条件){
③执行的代码块+(④循环方式)例如( document.write(a++) )
}
语法三
while( true ){ }
当while后面的条件是true,就是一个死循环,为了避免问题。有需要情况,
可以再循环体内进行判断,达到某个条件然后break跳出循环。 
breakcontinue,通过判断语句-- 处理死循环中执行停止,跳过 。 
跳转语句
break 跳出循环 不继续了。
continue 跳出当前循环 进行下一个循环。
若是判断字母的话 case ‘字母’ 加上引号即可。
注意 continue时 循环方式 要写在 执行语句的上面!!!!!!!!!!!
while执行流程
①初始化变量;在循环外面初始化。
②判断是否符合循环条件,符合条件 执行下一步。不符合条件,跳出循环
③执行代码块;
④循环方式,如果放到输出前,先会按照循环方式增加或者减小,然后再输出。
如果放到输出后面,会先执行输出,然后进行下一个循环之前,按照循环方式增加或减少。
do{ }while( )
do{
执行语句;
循环方式;
}while( 循环条件)
whiledo{ }while( )的区别
while是先判断后执行,当条件为符合时才会执行;
do{}while()时先执行 再判断,即使条件不符合 也会先执行一次。

for, while ,do while区别
for 的初始值,循环条件,循环方式可以写到外面 括号里面必须写;
whiledo while 都是写在小括号外面的不能写在里面。
whiledo while 初始值是写在外面的,循环条件写在小括号里面,循环方式写到循环体内
do while 是先执行后判断,无论条件符不符合都会先执行一次,
forwhile 都是先判断,符合就执行 ,不符合就不执行。
函数:
1、什么是函数:
函数是一个对象。
函数可以封装一些功能(代码),需要时可以执行这些代码。 function功能的意思
封装好的函数必须调用才执行,不调用不执行。
如果typeof 创建之后的 function,返回结果就是function。


创建函数的方式 :
1、构造函数创建: var fun = new Function( );
2、函数字面量创建: function ___(起个函数名)( ){ }。
3、函数表达式的方式 var fun1 = function( ){ }; fun1( )。 
函数创建完之后并不能直接执行,需要调用才能执行函数。function ___( ){ } __( )这个是调用
带参数的函数:
小括号中可以直接写参数(形参),不需要变量声明,参数本身就是一个变量。
形参对应的值通过调用函数中传入的实参(具体数值)
函数参数:
如果函数在调用时缺少参数,参数会默认设置为: undefined
我们可以将变量放在小括号中,作为形参(形式参数,相当于变量,只是不需要声明。相当于在函数体中var 变量;只是没有值)
在调用函数时传入实参(实际参数,形参对应的 可以使任何数据类型。
在函数中实参可以传对象
调用函数时,解析器不会判断实参个数,多余的实参不会被赋值, 如果实参个数比形参个数少,形参没有对应的实参,形参返回的结果是 undefined。
形参语法:function 函数名(形参1,形参2,形参3....){ 
} 
实参语法: 函数名( )
function sum (a,b...){
conosle.log(a+b...);
}
sum(数值,数值...) . 再需要输出就直接在下面直接写 sum( 数值,数值...)
函数的返回值:
return 函数返回值 
可以将函数体中需要的值返回。可以不再函数体内直接写输出。
可以在函数体外 var 新变量=调用函数输出。
语法:return 值;
直接return;后面没有值 返回undefined;
return 值;下面的任何代码都不执行;跟break差不多效果。
函数内可以再放函数:
return返回的类型可以使任何数据类型,可以是基本数据类型,也可以是引用数据类型,也可以是一个函数。
匿名函数或者立即执行函数(自调用函数):
只能执行一次。
语法:( function(){要输出的内容} ) ()用小括号把没函数名称的函数括起来,然后后 
面再加小括号调用。
call和apply是函数的方法
是函数的方法,需要通过函数来调用;
当函数调用 数组.call()和 数组.apply()都会调用函数执行;
call和apply第一个参数是一样的,该参数将替代Function类里面的this对象
call和apply可以改变函数中的this指向;
在调用call和apply时可以将一个对象作为第一个参数,后面可以加实参,但是apply加实参的时候必须用
数组传实参 [ ]。 所传的对象就是this的指向。
call和apply的区别
call( )方法可以将实参放到对象后面依次传递;call(obj,2,3,34,1,12,3) obj就是一个对象
apply( )方法 需要将实参封装到数组中统一传递;apply(obj,[1,......]), 即使是一个实参也要用 [ ] 
对象、数组、函数联系:
创建对象的方法:
1、构造函数创建: var obj = new Object2、字面量创建: var obj = { }。
3、字面量加属性创建: var obj = {属性:属性值,属性:属性值}。
创建数组的方法:
1、构造函数创建: var arr = new Array2、字面量创建: var arr = { }。
3、字面量加属性创建: var arr = {属性:属性值,属性:属性值}。
创建函数的方法:
1、构造函数创建: var fun = new Function2、字面量创建: function __(起个名字)( ){ 代码体 }。
3、自运行函数 一次性的 (function( ){ }( ))不同起名字的函数 外面用小括号包起来,只执行一次。
全局作用域:
在js中作用域: 一个变量作用的范围
1、全局作用域(整个 <script> 标签中):
页面打开全局作用域被打开,页面关闭全局作用域被销毁;
全局作用域的变量叫全局变量,全部变量可以在全局作用域中使用,还可以在函数作用域中使用;
在全局作用域中的全局对象window,它是由浏览器创建的,我们可以使用
在全局作用域中的声明变量,都会作为window的属性 。
如果在函数作用域中想使用全局变量,window.变量就可以使用到全局变量。
在函数作用域中 不加var 该变量也变成全局变量
全局作用域中函数会作为window对象属性的方法保存。
通常如果是window.alert(),可以省略window.直接写alert()。
2、函数作用域(局部作用域):
函数作用域,就是函数体内,函数调用时函数作用域开始,函数执行完,函数作用域销毁。
函数作用域中的变量叫局部变量,局部变量只能在函数体内使用,不能再全局作用域中使用。
变量声明提前:
var 声明变量,可以将变量声明提前;
如果不加var,变量就不会声明提前;
如果先输出变量 在下面var 变量,返回undefined;
如果先输出变量在下面并没有var 变量,会报错; 
函数声明提前:
当函数字面量创建函数时,function fun () {} 函数声明就会提前,所以调用函数可以再上面也可以在 下面。
函数表达式创建时,var fun1 = function(){} 函数不会声明提前,所以调用时只能在下面调用,不能在上面调用。

this:

在解析器调用函数时向函数传递一个隐含的参数,这个隐含的参数就是this
this指向的是一个对象;
这个对象我们成为函数执行上下文的对象;
调用方式不同指向的对象不同,
1、在以函数调用 this指向 window 整个页面的
2、在对象属性方法调用 this指向的调用这个方法的对象。
this总结: 
1、当以函数形式调用时,this指向window;
function test(){
    this.x = 1;
    alert(this.x);
  }
  test(); 
console.log(this)
2、当以对象属性方法调用时,this指向的调用的对象;
3、当以构造函数调用时,this指向新创建的对象;
4、当以call()和apply调用时,this指向的就是他们所传递的对象。
工厂模式创建对象:
通过工厂函数可以大批量创建对象。
步骤: 1、创建函数 
2、在函数中创建对象。
3、将对象作为返回值返回。
4、给对象添加属性。
构造函数创建Person:
构造函数就是普通函数,创建时与普通函数一样。
构造函数的名称是首字母大写,
调用时,普通函数是直接调用;构造函数时通过 new 关键字调用。
构造函数 ,是一种特殊的方法。主要用来在创建对象时初始化对象, 即为对象成员变量赋初始值,总与new 
运算符一起使用在创建对象的语句中。特别的一个类可以有多个构造函数 ,可根据其参数个数的不同或参数 
类型的不同来区分它们 
创建一个构造函数,专门用来创建Person对象的
* 构造函数就是一个普通的函数,创建方式和普通函数没有区别,
* 不同的是构造函数习惯上首字母大写
*
* 构造函数和普通函数的区别就是调用方式的不同
* 普通函数是直接调用,而构造函数需要使用new关键字来调用
*
构造函数的执行流程:
* 1.立刻创建一个新的对象
* 2.将新建的对象设置为函数中this,在构造函数中可以使用this来引用新建的对象
* 3.逐行执行函数中的代码
* 4.将新建的对象作为返回值返回
* 使用同一个构造函数创建的对象,我们称为一类对象,也将一个构造函数称为一个类。
* 我们将通过一个构造函数创建的对象,称为是该类的实例
*
this的情况:
* 1.当以函数的形式调用时,this是window,默认就是window
* 2.当以方法的形式调用时,谁调用方法this就是谁
* 3.当以构造函数的形式调用时,this就是新创建的那个对象