JS基础
文章目录
- JS基础
-
- JS代码的两种方式
- 输出数据的几种方式
- 变量和常量
- 类型转换
- 比较运算符
- 断点调试
- 数组
- forEach()
- filter()
- map()
- join()
- 函数
- 对象
- 内置对象Math
- JS高阶
-
- 闭包
- 函数提升
- 函数参数
- 箭头函数
- 几点注意:
- 数组解构和对象解构
- 构造函数
- 内置构造函数
- Object
- Array
- 包装类
- 封装
- 原型对象
- constructor属性
- 对象原型
- 原型继承
- 原型链
- JSON
- 异常处理
- debugger
- this关键字
- 防抖节流
JS代码的两种方式
输出数据的几种方式
变量和常量
常量关键字:const
变量关键字:let【更严谨、推荐】、var
变量类型:Number、Bollean、String、NaN、Undefined
查看变量类型:typeof(值)
类型转换
类型转换:
隐式类型转换:+ 只要有一个操作元素是字符串,就会进行字符串的拼接,如果是 10 - “4”,那么会把字符串转为数值进行减法运算,结果是6。
显式类型转换: Number(值)返回结果就会把传入的值的类型转为Number,如果转化失败,返回NaN(not a number)。
比较运算符
== :判断左右两边值是否相等。
=== :判断左右两边值和类型是否相等。
!=:左右值不相等
!==:左右值或类型不相等
断点调试
作用:学习时可以帮助更好的理解代码运行,工作时可以更快找到bug
浏览器打开调试界面
- 按F12打开开发者工具
- 点到源代码一栏 ( sources )
- 选择代码文件
数组
forEach()
forEach()用来调用数组中的每个元素,并将元素传递给回调函数。
filter()
把数组中的符合条件的元素返回。
map()
返回原数组元素经过回调函数调用后的返回结果的集合。
join()
把数组中的元素通过指定的分隔符连接起来返回。
函数
对象
内置对象Math
JS高阶
闭包
闭包类似与Java中的内部类,Java中利用内部类能实现对类中私有结构的访问,在JS中利用闭包能够实现对函数中局部变量的访问。
1.怎么理解闭包?
- 闭包 = 内层函数 + 外层函数的变量
2.闭包的作用?
- 封闭数据,实现数据私有,外部也可以访问函数内部的变量
- 闭包很有用,因为它允许将函数与其所操作的某些数据(环境)关联起来
3.闭包可能引起的问题?
- 内存泄漏
函数提升
函数提升说的是,在相同的作用域中,可以在函数声明之前调用函数,但是函数表达式不存在提升现象
函数参数
参数默认值:函数的参数的默认值是undefined,也可指定:
动态参数:arguments是函数内置的一个数组,用来存储所有的参数。
剩余参数:如果有一部分参数没接收完,可以用剩余参数把这些剩余的参数接收到一个数组里面
箭头函数
一种声明函数的简洁语法。
几点注意:
- 箭头函数没有arguments,只能用…动态获取实参。
- 箭头函数不会创建自己的this,而是沿用自己的作用域链的上一层的this。
数组解构和对象解构
这里解构的意思就是把数组或者对象的某一部分内容拆下来赋给指定的变量,是一种批量给变量赋值的简介语法。
对象解构:
应用:
数组解构:
构造函数
构造函数是用来创建对象的函数,有下面的特点:
- 构造函数的首字母大写
- 使用new关键字调用
- 构造函数没有参数时可以省略()
- 构造函数的返回值就是新创建的对象,其内部的return是无效的
在JS中,函数的本质也是对象类型,因此可以动态的为构造函数添加静态成员(添加到构造函数本身的属性和方法),普通成员方法中的this指向实例化的对象,静态成员方法中的this指向构造函数本身。构造函数可以理解为Java中的类。
内置构造函数
JS中的数据类型分为基础数据类型和引用数据类型,基础数据类型有字符串、数值、布尔、undefined、null,引用数据类型有数组和对象。
在JS中内置了一些构造函数,用来创建对应类型的数据,比如Date:
Object
Object也是内置的构造函数,用来创建普通对象。
- 推荐字面量的方式创建对象,而不是Object构造函数
- Object.assign静态方法创建新的对象
- Object.keys静态方法获取对象中的所有属性
- Object.values静态方法获取对象中的所有属性值
Array
Array是内置的创建数组的构造函数。
总结:
- 推荐使用字面量方式声明数组,而不是 构造函数
- 实例方法 用于遍历数组,替代 循环 (重点)
- 实例方法 过滤数js需要java基础吗组单元值,生成新数组(重点)
- 实例方法 迭代原数组,生成新数组(重点)
- 实例方法 数组元素拼接为字符串,返回字符串(重点)
- 实例方法 查找元素, 返回符合测试条件的第一个数组元素值,如果没有符合条件的则返回 undefined(重点)
- 实例方法 检测数组所有元素是否都符合指定条件,如果所有元素都通过检测返回 true,否则返回 false(重点)
- 实例方法 检测数组中的元素是否满足指定条件 如果数组中有元素满足条件返回 true,否则返回 false
- 实例方法 合并两个数组,返回生成新数组
- 实例方法 对原数组单元值排序
- 实例方法 删除或替换原数组单元
- 实例方法 反转数组
- 实例方法 查找元素的索引值
包装类
字符串、数值、布尔都有其对应的包装类,所以这些数据在使用时有对象的特征,比如具有属性和方法:
String
- 实例属性 用来获取字符串的度长(重点)
- 实例方法 用来将字符串拆分成数组(重点)
- 实例方法 用于字符串截取(重点)
- 实例方法 检测是否以某字符开头(重点)
- 实例方法 判断一个字符串是否包含在另一个字符串中,根据情况返回 true 或 false(重点)
- 实例方法 用于将字母转换成大写
- 实例方法 用于将就转换成小写
- 实例方法 检测是否包含某字符
- 实例方法 检测是否以某字符结尾
- 实例方法 用于替换字符串,支持正则匹配
- 实例方法 用于查找字符串,支持正则匹配
注:String 也可以当做普通函数使用,这时它的作用是强制转换成字符串数据类型。
Number
- 推荐使用字面量方式声明数值
- 实例方法 用于设置保留小数位的长度
封装
JS中的封装指的是把数据和函数组合到一个构造函数中。
原型对象
JS中每一个构造函数都有一个prototype属性,指向的是一个原型对象,一个构造函数的不同的对象实例拥有同一个原型对象,所以我们可以把那些不变的方法,直接定义在prototype对象上,这样所有的对象实例就可以共享这些方法,从而节约内存。
构造函数和原型对象上的this都指向实例化的对象。
如果构造函数和原型对象有同名的方法,会优先调用构造函数中的方法。
JavaScript的工作机制:当访问对象的属性或方法时,先在当前实例对象是查找,然后再去原型对象查找,并且原型对象被所有实例共享。
constructor属性
每个原型对象都有一个constructor属性,这个属性指向该原型对象的构造函数。
当我们以对象的形式给原型对象同时添加多个方法时,会覆盖掉原型对象原有的内容,这样修改后的原型对象的construtor就不再指向当前的构造函数了,这种情况下,我们可以在修改后的原型对象中,添加一个constructor指向原来的构造函数。
对象原型
对象都会有一个 属性指向构造函数的prototype原型对象,之所以对象能够使用构造函数中原型对象的方法和属性,就是因为对象有原型的存在。
对象原型里面也有一个constructor属性,指向该实例对象的构造函数。
原型继承
JS通过原型对象来实现的继承,继承的语法是:
- 子类的原型 = new 父类
- 子类的原型.constructor = 子类
原型链
基于原型对象的继承使得不同构造函数的原型对象关联在一起,并且这种关联关系是一种链状结构,我们把原型对象的链状结构关系称为原型链。
理解:
- 一个对象实例的对象原型指向的是其构造函数的原型对象prototype
- 原型对象prototype本身也是一个对象实例,这个对象实例是通过父构造函数创建的,那么这个对象实例的对象原型就是其父类的原型对象
- 也就是说,构造函数的原型对象prototype的对象原型指向其父构造函数的原型对象。
- Object构造函数是最顶级的,Object的原型对象的对象原型是null
① 当访问一个对象的属性(包括方法)时,首先查找这个对象自身有没有该属性。
② 如果没有就查找它的对象原型(也就是指向的 prototype 原型对象)
③ 如果还没有就查找原型对象的对象原型(Object的原型对象)
④ 依此类推一直找到 Object 为止(null)
⑤ 对象原型的意义就在于为对象成员查找机制提供一个方向,或者说一条路线
⑥ 可以使用 instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上
JSON
异常处理
异常的产生:
通过throw关键字抛出异常。有两种方式:
- throw ‘异常提示信息’
- throw new Error(‘异常提示信息’)
第二种方式能设置更详细的错误信息。
异常的处理:
debugger
在js代码中加入debugger语句就相当于断点调试。
this关键字
不同场合this的取值可能不同,这里做一下总结。
普通函数
谁调用this就指向谁,没调用者就指向window,严格模式下没调用者时指向undefined。
箭头函数
箭头函数中不存在this,箭头函数中访问的this是箭头函数所在作用域的this变量。
实际开发时,使用箭头函数前需要考虑this的值,比如事件回调函数使用箭头函数时, 为全局的 ,因此DOM事件回调函数不推荐使用箭头函数,如下代码所示:
同样由于箭头函数 的原因,基于原型的面向对象也不推荐采用箭头函数,如下代码所示:
改变this指向
上面说的是普通函数和箭头函数的默认值,JS中有三种方法可以指定普通函数中this的指向:
- call:
使用 方法调用函数,同时指定函数中 的值。
- apply:
apply的用法和call很相似,就在传参时有一点不同,apply是用数组接收的其余参数。
- bind:
方法并不会调用函数,而是创建一个指定了 值的新函数。
注: 方法创建新的函数,与原函数的唯一的变化是改变了 的值。
防抖节流
防抖(debounce):指的是触发事件n秒内函数函数只会执行一次,如果在n秒内又触发了事件,则会重新计算函数的执行时间。
版权声明:
本文来源网络,所有图片文章版权属于原作者,如有侵权,联系删除。
本文网址:https://www.bianchenghao6.com/h6javajc/24791.html