【JS基础知识总结1】

一、强制类型转换

强制类型转换为其他数据类型

类型转换主要指:将其他的数据类型转换为String、Number、Boolean

1.将其他的数据类型转换为String

方式一:调用被转换数据类型的toString()方法

调用a的toString()方法 语法:a=a.toString();

注:null和undefined这两个值没有toString方法

方式二:调用string()方法,并将被转换的数据作为参数传递给函数 

使用string()做强制类型转换,实际上是调用toString方法

注:它会将null直接转换为“null",将undefined直接转换为“undefined”

方式三:隐式转换-任意数据类型+“”(引号内的为空串)

对两个字符进行加(+)运算即进行拼串操作,得到一个字符串

任何值和字符串进行运算,先转换为字符串,然后在进行拼串操作。

利用此特点,可将其转换为string;任意数据类型+“”,将任意数据类型先转化为字符串再加上一个空串,即转换为了string。

2.将其他数据类型转换为Number

方式一:使用Number函数

1)将字符串转换为数字

a.如果是纯数字字符串,则直接转换为数字

b.如果字符串有非数字内容,则转换为NaN

c.如果字符串为空或全是空格,则转换为0

 注:特殊值转数字  true:1 false:0   null:0 undefined:NaN

2)专门用来对付字符串

a.-parseInt( )将字符串转换为number,将有效的整数内容去出来

b.-parseFloat( )它可以获得有效的小数

3)转为其他进制数字

16进制-0X开头 8进制-0开头 2进制-0b开头

注:070在string转为number类型时可能十进制,也可能8进制

如若要规定 a=parseInt(070,x),x代表转换为几进制

方式二:任何值做减法、乘法、除法运算时都会自动转换为Number

注:利用此特点,可以做-0、*1、/1来转换为Number

方式三:任何值用一元运算符正(即+)都会自动转换为Number 

3.将其他数据类型转换为Boolean值

1)数字转布尔,除了0和NaN,其余都是true

2)字符串转布尔,除了空串,其余都是true

3)null转布尔值,转为false

4)undefined转布尔值,转为false

二、运算符简介

1.算术运算符:

对双非Number类型的值进行运算时,会将这些值转换为Number计算任何值和NaN进行运算都得到NaN

(1).算术运算符+

    对于Number类型的值进行+运算时,都将其当作普通的数字加减

    任何值和字符串进行与运算,先转换为字符串,然后在进行拼串操作

    a=1+2+3=6;  a=1+2+"3"=33;   a="1"+2+3=123;

(2).算术运算符- * /

    任何值做- * /运算时都会自动转换为Number

(3).一元运算符 +:正号 -:负号

    a=+a;将字符串123转换为数字123

(4).自增++,自减--  

 2.逻辑运算符

逻辑运算符与&&

a=true&&alert("hello");第一个为true,则继续执行后面的

a=false&&alert("hello");第一个为false,返回false,不会看后面的

逻辑运算符或||同上,不同点:

a=true||alert("hello");第一个值为true,则不会检查第二个 a=false||alert("hello");第一个值为false,则会继续检查第二个

  3.赋值运算符

  4.关系运算符

对非数值转换情况,先转换为数值,在进行比较

任何值和NaN进行比较都是false

如果符号两侧都是字符串时,不会将其转换为数值,将其字符的编码分别进行比较

 5.相等及条件运算符

&&的运算符优先级高于||

不同于c语言的只有1或者0,在JS中需要返回的是原值本身

三、对象的简介

(一)、创建对象的几种方式:

1.使用new关键字调用的函数,是构造函数的constructor.

 构造函数是专门用来创建对象的函数

使用typeof检查一个对象时,会返回object

 2.使用对象字面量创建对象

在书写时应该注意如果一个属性后没有其他的属性,就不再用逗号分隔开

3.使用工厂方法创建对象

使用工厂方法创建对象,通过该方法可以大批量的创建对象

4.使用function函数

方式一:创建一个构造函数,专门用来创建对象的

我们将通过一个构造函数创建的对象,称为是该类的实例

构造函数的执行流程:

 1.立刻创建一个新的对象

 2.将新建的对象设置为函数中的this,在构造函数中可以使用this来引用新创建的对象

 3.逐行执行函数中的代码

 4.将新建的对象作为返回值返回

方式二:可以使用有参构造函数来实现 

 5.使用原型对象的方式prototype关键字

我们所创建的每一个函数,解析器都会向函数中添加一个属性prototype

这个属性对应着一个对象,这个对象就是我们所谓的原型对象

原型对象就相当于一个公共的区域,所有同一个类的实例都可以访问这个原型对象

我们可以将对象中共有的内容,统一设置到原型对象中

当我们访问对象的一个属性或方法时,他会先在自身中寻找。如果有则直接使用,如果没有则会去原型对象中寻找,如果找到则直接使用

(二)、基本和引用数据类型

对象是保存到堆内存中,每创建一个新的对象,就会在堆内开辟出一个新的空间,而变量保存的是对象的内存地址(对象的引用),如果两个变量保存的是同一个对象引用当一个通过一个变量修改属性时,另一个也会受到影响。

当比较两个基本数据类型是值时,他就是比较值

当比较两个引用数据类型时,他是比较对象的内存地址

如果两个对象是一模一样的,但是地址不同,他仍然返回false

       var obj=new Object();
       obj.name="xihuan";
       var obj2=obj;
       obj.name="zhuzhu";
       
       console.log(obj.name);
       console.log(obj2.name);

       var a=5;
       var b=5;
       console.log(a==b);

       var obj3=new Object();
       var obj4=new Object();
       obj3.name="xixi";
       obj4.name="xixi";
       console.log(obj3==obj4);
       
 

(三)、对象有关知识

对象的属性值可以是任何的数据类型,可以是string、number、boolean、即也可以是函数

函数也可以称为为对象的属性,如果一个函数作为一个对象的属性保存,那么我们称这个函数为这个对象的方法,调用这个函数就说调用对象的方法,但是它只是名称上的区别

枚举对象中的属性,使用for···in语句

 语法:

 for(var 变量 in 对象){}

 for···in语句,对象中有几个属性,具体就会执行几次,

 每次执行时,会将对象中的一个属性名字赋值给变量

(四)、原型prototype

我们所创建的每一个函数,解析器都会向函数中添加一个属性prototype

一个属性对应着一个对象,这个对象就是我们所谓的原型对象

如果函数作为普通函数调用prototype没有任何作用

当函数以构造函数的形式调用时,它所创建的对象中都会有一个隐含的属性

指向该函数的原型对象,我们可以通过__proto__来访问这个属性

    

原型对象就相当于一个公共的区域,所有同一个类的实例都可以访问这个原型对象

我们可以将对象中共有的内容,统一设置到原型对象中

       

当我们访问对象的一个属性或方法时,他会先在自身中寻找,如果有则直接使用

如果没有则会去原型对象中寻找,如果找到则直接使用

可以使用对象的hasOwnProperty()方法来检查自身中是否含有该属性

四、数组的方法

push()   该方法可以向数组的末尾添加一个或对各元素,并返回数组的新的长度

              可以将要添加的元素作为方法的参数传递,这些元素将会自动添加到数组的末尾

pop()     该方法可以删除数组的最后一个元素,并将被删除的元素作为返回值返回

unshift() 向数组开头添加一个或多个元素,并返回新的数组的长度

              向前边插入元素后,元素的索引会依次进行调整

shift()     删除数组中的第一个元素,并将被删除的元素作为返回值返回

concat()

              可以连接两个或多个数组,并将新的数组返回,

              该方法不会对原数组产生影响

join()      该方法可以将数组转换为一个字符串

              该方法不会对原数组产生影响,而是将转换后的字符串作为结果返回

              在join()中可以指定一个字符串作为参数而这个字符串将会成为数组中元素的连接符

              如果不指定,则默认使用逗号链接

              如果传递空格,即没有任何连接

reverse()

               该方法可以用来反转数组(前边的去后边,后边的去前边)

               该方法会直接修改原数组

sort()

               可以用来对数组进行排序

               也会影响原数组,默认会按照Unicode编码进行排序

slice()

               可以用来从数组中提取元素

               该方法不会改变元素数组,而是将截取到的元素封装到一个新的一维数组中返回

               参数

               1.截取开始的位置的索引,包含开始索引

               2.截取结束位置的索引,不包含结束索引

               -第二个参数可以省略不写,此时会截取从开始索引往后的所有元素

               -索引可以传递一个负值,-1表示为倒数第一个元素

splice()

               使用splice()会影响到原数组,会将指定元素从原数组中删除、

               并将被删除的元素作为返回值返回

               参数

               第一个:表示开始位置的索引

               第二个:表示删除的数量

               第三个及以后

               可以传递一些新的元素,这些元素将会自动插入到开始位置索引前边

五、字符串的方法

charAt():可以返回字符串中指定的位置,不改变原数组,根据索引获取指定的字符

charCodeAt():可以返回字符串中指定的位置的unicode编码,不改变原数组

fromCharCode():可以根据字符编码去获取字符

concat():可以连接两个或多个字符串,并将新的数字符串返回

indexOf():可以检索一个字符串中是否含有指定内容

slice():可以从字符串中截取指定的内容,不会影响原字符串,而是将截取到的内容返回

substring():可以用来截取一个字符串,可以slice类似

substr():用来截取字符串 参数:1.截取开始位置的索引、2.截取的长度

split():可以将一个字符串拆分成为一个数组

toUpperCase():将一个字符串转换为大写并返回

toLowerCase():将一个字符串转换为小写并返回     

六、操作内联样式:

语法:元素.style.样式名=样式值

我们通过style属性设置的样式都是内联样式

而内联样式有较高的优先级,所以通过JS修改的样式往往会立即显示

但是如果在内联样式中写了!important,则此时样式会具有最高优先级

即使通过Js也不能覆盖样式,此时会导致JS修改样式失效

所以尽量不要为样式添加!important

  语法:元素.currentStyle.样式

  获取元素的当前显示的样式

  它可以用来获取当前正在显示的样式

 getComputedStyle()这个方法来获取元素的当前样式

  这个方法是window的方法,可以直接使用

  需要两个参数:

  第一个:要获取样式的元素

  第二个:可以传递一个伪元素,一般都传null

clientWidth、clientHeight:这两个属性可以获取元素的可见宽度和高度 这些属性都是不带    px 的 ,返 回都是一个数字,可以直接进行计算,会获取元素宽度和高度,包括内容区             和边距,这些属性都是只读的,但不能去改

offsetWidth、offsetHeight:获取元素的整个高度和宽度,包括内容区和内边距和边框

offsetParent: 可以用来获取当前元素的定位父元素,会获取到当前元素最近的开启定位的元素

                  如果所有的祖先元素没有开启定位,那么它会返回body

offsetLeft:当前元素相当于其定位元素的水平偏移量

offsetTop:当前元素相当于其定位元素的垂直偏移量

scrollWidth、 scrollHeight:可以获取整个滚动区域的宽度和高度

scrollLeft:可以获取水平滚动条的距离

scrollTop:可以获取垂直滚动条的距离

七、Date对象有关方法:

(1).getDate():获取当前对象是几日

(2).getDay():获取当前对象是周几,会返回一个0-6的值,0表示周日,1表示周一

(3).getMonth():获取当前对象是几月,会返回一个0-11的值,0表示一月,1表示二月

(4).getFullyear():获取当前对象是多少年

(5).getTime():获取当前日期对象的时间戳

八、Math有关方法:

(1).Math.PI表示圆周率

(2).Math.abs()可以用来计算一个数的绝对值

(3).Math.ceil()可以用来对一个数进行向上取整,小数位只要有值就自动进1

(4).Math.floor()可以用来对一个数进行向下取整,小数位会被舍掉

(5).Math.round()可以对一个数进行四舍五入取整

(6).Math.random()可以生成一个0-1之间的随机数

(7).Math.max()可以获取多个数中的最大值

(8).Math.min()可以获取多个数中的最大值

(9).Math.pow(x,y),返回x的y次幂

 九、重要事件总结:

1)onmousemove():该事件将会在鼠标在元素中移动时被触发

2)onmousedown() :当鼠标在被拖拽元素上按下时开始拖拽

3)onmouseup(): 当鼠标松开时,被拖拽元素被固定在当前位置

4)onkeydown():按键被按下,对于onkeydown来说如果一直按着某个按键不松手,则事件会一直触发当onkeydown连续  触发时,第一次和第二次之间会间隔稍微长一点,其它的会非常 快,这种设计是为了防止误操作的发生

5)onkeyup():按键被松开,键盘事件一般都会绑定给可以获取到焦点的对象或者是document

6)addEventListener():可以同时为一个元素的相同事件绑定多个响应函数

    参数:1.事件的字符串,不要on

               2.回调函数,当事件触发时,该函数会被调用

               3.是否在捕获阶段触发事件,需要一个布尔值,一般都用false

7)attachevent():在IE8中可以可以使用attachevent()来绑定事件

   参数: 1.事件的字符串,要on   2.回调函数

   注意:addEventListener()中的this,是绑定事件的对象,attachEvent()中的this,是window

8)onfocus():获取焦点

9)nblur():失去焦点

十、history有关

(1) length:可以获取到当前访问的链接数量、

(2) back:用来返回到浏览器的上一个页面,作用和浏览器的回退按钮一样

(3) forward:用来跳转到浏览器的下一个页面,作用和浏览器的前进按钮一样

(4) go:用来跳转到指定页面,他需要一个整数作为参数

 十一、Location有关

(1) assign():用来跳转到其他的页面,作用和直接修改location一样

(2) reload():用于重新加载当前页面,作用和刷新按钮相同

(3) replace():可以使用一个新的页面替换当前页面,调用完毕也会跳转页面不会生成历史记 录,不能使用回退按钮回退

十二、知识点总结

1. JS有哪几种数据类型?

Number、String、Boolean、Object、Undefined、Null
PS:还有ES6新增的 Symbol和BigInt类型

    基本数据类型的特点:直接存储在栈(stack)中的数据
    引用数据类型的特点:存储的是该对象在栈中引用,真实的数据存放在堆内存里
    引用数据类型在栈中存储了指针,该指针指向堆中该实体的起始地址。当解释器寻找引用值时,会首先检索其在栈中的地址,取得地址后从堆中获得实体。

2.深浅拷贝的区别:

首先,深拷贝和浅拷贝是只针对Object和Array这样的引用数据类型的。

浅拷贝只复制指向某个对象的指针,而不复制对象本身,新旧对象还是共享同一块内存。但深拷贝会另外创造一个一模一样的对象,新对象跟原对象不共享内存,修改新对象不会改到原对象。

3.js中then()是什么意思?

then()方法是异步执行。
意思是:就是当.then()前的方法执行完后再执行then()内部的程序,这样就避免了,数据没获取到等的问题。

4. .new操作符具体干了什么? 

在JavaScript中,new操作符用于创建一个给定构造函数的实例对象
new操作符主要做了下面工作:

     创建一个新的对象obj
     将对象与构建函数通过原型链连接起来
     将构建函数中的this绑定到新建的对象obj上
     根据构建函数返回类型作判断,如果是原始值则被忽略,如果是返回对象,需要正常处理

5. map和forEach的区别?

共同点:

    1.都是循环遍历数组中的每一项。
    2.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数:数组中的当前项item,当前项的索引index,原始数组input。
    3.匿名函数中的this都是指Window。
    4.只能遍历数组.

区别:

    forEach()没有返回值,而map有返回值,map的回调函数中支持return返回值;return的是啥,相当于把数组中的这一项变为啥(并不影响原来的数组,只是相当于把原数组克隆一份,把克隆的这一份的数组中的对应项改变了)

6.for…in和for…of的区别? 

       for…in是ES5的标准,该方法遍历的是对象的属性名称(key:键名)。一个Array对象也是一个对象,数组中的每个元素的索引被视为属性名称,所以在使用for…in遍历Array时,拿到的是每个元素索引
        for…of是ES6的标准,该方法遍历的是对象的属性所对应的值(value:键值)。所以它用来遍历数组时得到每个元素的值

综上所述,使用for…of来遍历数组,使用for…in来遍历对象

7.定时调用

setInterval()

可以将一个函数,每隔一段时间执行一次

参数:

1.回调函数,该函数会每隔一段时间被调用一次、

 2.每次调用间隔的时间,单位是毫秒

 返回值:

  返回一个number类型的数据

   这个数字用来作为定时器的唯一标识

clearInterval()

可以用来关闭一个定时器

方法中需要一个定时器的标识作为参数,这样将关闭标识对应的定时器

缺点:

存在的问题就是:频繁开启定时器的话,定时器会启动多个,并不会自动覆盖,导致出现预期结果之外的错误,所以在开启新的定时器前,应该清除上一个定时器。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值