JS知识点学习

构造函数

构造函数语法:

大写字母开头的函数创建构造函数。

// 1.创建构造函数
function Pig(name) {
this.name = name    
}   
// 2. new关键字调用函数    
// new Pig('佩奇')    
// 接受创建的对象
const peppa = new Pig('佩奇') 
console.log(peppa) // {name:'佩奇'}   

说明:

1. 使用 new 关键字调用函数的行为被称为实例化。

2. 实例化构造函数时没有参数时可以省略()。

3. 构造函数内部无需写return，返回值即为新创建的对象。

4. 构造函数内部的return返回的值无效，所以不要写return。

5. new Object ( )new Date()也是实例化构造函数。

实例成员

通过构造函数创建的对象称为实例对象，实例对象中的属性和方法称为实例成员(实例属性和实例方法)

//构造函数
function Person(){
// 构造函数内部的this就是实例对象    
// 实例对象中动态添加属性
this.name ='小明' 
// 实例对象动态添加方法   
this.sayhi = function() {   
console.log('大家好~')}}
// 实例化，p1是实例对象
// p1 实际就是构造函数内部的 this 
const p1 = new Person() 
console.log(p1.name) 

说明:

1.为构造函数传入参数，创建结构相同但值不同的对象。

2.构造函数创建的实例对象彼此独立互不影响。

new实例化执行的过程：

1. 创建新对象

2. 构造函数this指向新对象

3. 执行构造函数代码，修改this，添加新的属性

4. 返回新对象

静态成员

构造函数的属性和方法被称为静态成员(静态属性和静态方法)

//构造函数
function Person(name, age) {
// 省略实例成员   
}   
// 静态属性 
Person.eyes =2  
Person.arms =2
// 静态方法
Person.walk = function () { 
console.log('^_^人都会走路...')
// this 指向 Person 
console.log(this.eyes)
}

说明:

1.静态成员只能构造函数来访问。

2.静态方法中的this指向构造函数。

比如 Date.now() Math.PI Math.random()

内置构造函数

在JavaScript 中最主要的数据类型有6种:

字符串、数值、布尔、undefined、null

引用类型：对象

但是，我们会发现有些特殊情况:

// 普通字符串
const str = 'andy'
console.log(str.length) // 4

其实字符串、数值、布尔、等基本类型也都有专门的构造函数，这些我们称为包装类型。

JS中几乎所有的数据都可以基于构成函数创建。

0bject

静态方法就是只有构造函数Object可以调用的。

Object.values 静态方法获取对象中所有属性值。

Object.keys 静态方法获取对象中所有属性名。

const o = { uname: 'pink', age: 18}// 
1.获得所有的属性名
console.log(0bject.keys(o)) //返回数组['uname'， 'age']
// 2.获得所有的属性值
console.log(0bject.values(o)) // ['pink', 18]

注意：返回的是一个数组。

Object.assign静态方法常用于对象拷贝使用。

经常使用的场景给对象添加属性。

// 给o新增属性
const o = { name:'佩奇'，age: 6 } 
Object.assign(o,{ gender:'女'})
console.log(o) //{name:'佩奇'，age: 6,gender:'女'}

Array

Array 是内置的构造函数，用于创建数组。

const arr = new Array(3，5) 
console.log(arr) // [3,5]

创建数组建议使用字面量创建，不用Array构造函数创建。

数组常见实例方法：

方法	作用	说明
forEach	遍历数组	不返回数组，经常用于查找遍历数组元素
filter	过滤数组	返回新数组，返回的是筛选满足条件的数组元素
map	迭代数组	返回新数组，返回的是处理之后的数组元素，想要使用返回的新数组
reduce	累计器	返回累计处理的结果，经常用于求和等

reduce

作用:

reduce 返回累计处理的结果，经常用于求和等。

基本语法:

arr.reduce(function(){}，起始值)
arr.reduce(function(上一次值，当前值){}，初始值)

参数：如果有起始值，则把初始值累加到里面。

const arr = [1，2，3] 
// 1.没有初始值，就是数组之和。
const total = arr.reduce(function (prev, current) {
return prev + current
})
console.Log(total)//6
上一次值    当前值     返回值
1           2           3   //第一次循环
3           3           6   //第二次循环
// 2.有初始值，初始值为上一次值
const total = arr.reduce(function (prev, current) {
return prev + current
}，10)
console.log(total)//16
上一次值    当前值     返回值
10          1           11  //第一次循环
11          2           13  //第二次循环
13          3           16  //第三次循环
// 3.箭头函数的写法
const total = arr.reduce((prev,current) => prev + current,10) 

对于对象数组：

const arr = [
{name:'张三'， salary: 10000},
{name:'李四'， salary: 10000}，
{name:'王五'， salary: 10000}
]
// 计算薪资案例
const total = arr.reduce((prev,current) => {
return prev + current.salary},0)
console.log(total)

数组常见方法-其他方法

1. join 数组元素拼接为字符串，返回字符串(重点)。

2. find查找元素，返回符合测试条件的第一个数组元素值，如果没有符合条件的则返回undefined(重点)。

3. every检测数组所有元素是否都符合指定条件，如果所有元素都通过检测返回true，否则返回false(重点)。

4. some检测数组中的元素是否满足指定条件如果数组中有元素满足条件返回true，否则返回 false。

5. concat合并两个数组，返回生成新数组。

6. sort 对原数组单元值排序。

7. splice f删除或替换原数组单元。

8. reverse反转数组。

9. findIndex查找元素的索引值。

实例方法 find

const arr = [
{name:'小米'， price: 1999},
{name:'华为', price: 3999}，
]
// 找小米 这个对象，并且返回这个对象 
arr.find(function (item){
return item.name ==='小米'
}

数组常见方法- 伪数组转换为真数组

静态方法 Array.from()

String

在JavaScript 中的字符串、数值、布尔具有对象的使用特征。

如具有属性和方法

//字符串类型
const str = 'hello world!'
// 统计字符的长度(字符数量) console.log(str.length)
//数值类型
const price =12.345//保留两位小数 
price.toFixed(2)

之所以具有对象特征的原因是字符串、数值、布尔类型数据是JavaScript底层使用Object构造函数“包装”来的，被称为包装类型。

实例属性

length 用来获取字符串的度长(重点)

常见实例方法

1. split('分隔符')用来将字符串拆分成数组(重点)。

2. substring(需要截取的第一个字符的索引[,结束的索引号])用于字符串截取(重点)。

3. startsWith(检测字符串[，检测位置索引号])检测是否以某字符开头(重点）。

4. includes(搜索的字符串[，检测位置索引号])判断一个字符串是否包含在另一个字符串中，根据情况返回 true或false(重点)。

5. toUpperCase 用于将字母转换成大写。

6. toLowerCase用于将就转换成小写。

7. index0f检测是否包含某字符。

8. endsWith检测是否以某字符结尾。

9. replace用于替换字符串，支持正则匹配。

10. match 用于查找字符串，支持正则匹配。

//split 把字符串 转换为数组和join()相反 
const str = 'pink,red'
const arr = str.split(',') 
​
const str1 ='2022-4-8'
const arr1 = str1.split('-') 

//字符串的截取    substring(开始的索引号[，结束的索引号])  
// 如果省略结束的索引号，默认取到最后
//结束的索引号不包含想要截取的部分 
const str = '今天又要做核酸了'
console.log(str.substring(5,7))

//检测是否以某字符开头
var str = "To be, or not to be, that is the question.";
alert(str.startsWith("To be")); // true 
alert(str.startsWith("not to be")); // false    
alert(str.startsWith("not to be",10)); // true

构造函数的封装

1.构造函数体现了面向对象的封装特性。

封装是面向对象思想中比较重要的一部分，js面向对象可以通过构造函数实现的封装。

2.构造函数实例创建的对象彼此独立、互不影响。

同样的将变量和函数组合到了一起并能通过this实现数据的共享，所不同的是借助构造函数创建出来的实例对象之间是彼此不影响的。

存在浪费内存的问题

prototype

1. 原型是一个对象，我们也称为prototype 为原型对象。

2. 原型的作用是共享方法，可以把那些不变的方法，直接定义在prototype 对象上。

3. 构造函数和原型里面的this指向实例化的对象。

对象原型proto

在 JavaScript 中，每个对象都有一个指向其原型的内部指针 __proto__，可以通过这个指针访问对象的原型。

对象的原型也可以通过 Object.getPrototypeOf() 方法来访问。

JavaScript 中的对象通过原型链继承了其原型对象的属性和方法。

当你访问一个对象的属性或方法时，如果对象本身没有这个属性或方法，JavaScript 引擎会沿着原型链向上查找直到找到对应的属性或方法，或者直到原型链的末端。原型链的顶端是 Object.prototype，所有的对象都直接或间接地继承自 Object.prototype。

constructor

每个原型对象里面都有个constructor属性(constructor构造函数)

作用:该属性指向该原型对象的构造函数，简单理解，就是指向我的爸爸，我是有爸爸的孩子

如果有多个对象的方法，我们可以给原型对象采取对象形式赋值.

但是这样就会覆盖构造函数原型对象原来的内容，这样修改后的原型对象constructor就不再指向当前构造函数了此时，我们可以在修改后的原型对象中，添加一个constructor指向原来的构造函数。

function Star(name) {   
this.name = name    
this.name = name
}
Star.prototype = {  
// 手动利用constructor 指回 star构造函数  
constructor: Star,  
sing: function (){ console.log('唱歌')},  
dance: function (){ console.log('跳舞')} 
}   
console.log(Star.prototype.constructor) // 指向 Star，不加constructor: Star指向 Object

原型继承、原型链和instanceof运算符

原型继承（prototype inheritance）是 JavaScript 中的一种特性，它允许一个对象继承另一个对象的属性和方法。

在 JavaScript 中，每个对象都有一个指向其原型（prototype）的内部指针 __proto__，通过原型链（prototype chain）来实现继承

当访问一个对象的属性或方法时，如果对象本身没有这个属性或方法，JavaScript 引擎会沿着原型链向上查找，直到找到对应的属性或方法，或者直到原型链的顶端（一般是 Object.prototype）。

给定两个对象，可以使用 instanceof 运算符来检查一个对象是否是另一个对象的实例。instanceof 运算符检查一个对象的原型链中是否出现另一个指定构造函数的原型。如果是，则返回 true，否则返回 false。例如，如果 obj instanceof SomeConstructor 返回 true，表示 obj 是 SomeConstructor 的一个实例。

• 原型继承允许对象继承另一个对象的属性和方法。

• 原型链指的是通过原型对象连接起来的对象链，用于实现原型继承。

• instanceof 运算符用于检查一个对象是否是另一个对象的实例。