深圳专业网站制作技术营销策划与运营团队
目录
一、构造函数
1、 创建对象
2、new执行过程
3、带参数构造函数
4、实例成员与静态成员
二、内置构造函数
1、Object静态方法
2、包装类型
3、Array
1、map方法
2、find方法
3、findIndex( )
4、some与every
5、reverse()
6、reduce方法
7、forEach() 方法
8、filter( )
一、构造函数
构造函数是专门用于创建对象的函数，如果一个函数使用 new 关键字调用，那么这个函数就是构造函数。
<script>// 定义函数function foo() {console.log('通过 new 也能调用函数...');}// 调用函数new foo;
</script>
总结：
使用
new关键字调用函数的行为被称为实例化实例化构造函数时没有参数时可以省略
()构造函数的返回值即为新创建的对象
构造函数内部的
return返回的值无效！
1、 创建对象
1.字面量对象
const obj = { uname: 'John' , age: 20 } 2.new Object
// const obj = new 0bject({ uname: 'John' , age: 20 })const obj = new 0bject( )obj.uname = 'John'obj.age = 20console.log(obj)
3.通过构造函数（自定义）创建
构造函数--->1.构造出对象的函数，
2.将来通过new调用
3.构造函数名首字母建议大写
内置内构函数（Array,Date,Object)
自定义构造函数
定义学生构造函数
function Student( ) {
//添加属性 this===创建出来的对象
this.属性名=属性值
this.方法名=funcion() { }//不需要写return，默认会返回this，假如显示指定return
// return基本类型会被忽略, return引用类型将来new得到的也是该引用类型
//return [ ]
}
// 定义学生构造函数function Student() {// 添加属性this.school = '大前端学院'this.age = 18}ƒ// 基于Student构造函数创建对象const s1 = new Student()const s2 = new Student()console.log(s1)console.log(s2)调用
const s1=new Student( )
无参数时 小括号可以省略
const s1=new Student
2、new执行过程
new 关键字来调用构造函数-->得到一个对象
1.实际参数传递给形式参数
2.内部先创建一个空对象 { }，并且让this指向该空对象
3.执行函数体
4.返回这个对象
// 定义学生构造函数function Student() {this.school = '大前端学院'this.age = 18this.sayHi = function () {console.log('sayHi')}}const s1 = new Student()console.log(s1)s1.sayHi()const s2 = new Student // 无参数 小括号可省略console.log(s2)3、带参数构造函数
function Student(age){this.name='张三'this.age=agethis.speek=function() {console.log('speek')}}const s1=new Student(20)console.log(s1)console.log(s1.age)4、实例成员与静态成员
通过构造函数创建的对象称为实例对象，实例对象中的属性和方法称为实例成员。
实例(对象) new出来的对象叫实例对象 new过程即实例化对象过程
实例成员指的是new出来的对象中的属性或方法
访问：对象 . 属性名
school age sayHi 都叫实例成员
const s1 = new Student( 19)
console.log(s1.school)静态成员 通过构造函数.属性=值
通过构造函数.属性去访问Student.nation = 'china'
console.log ( Student.nation)
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><script>// 实例(对象) new出来的对象叫实例对象 new过程即实例化对象过程// 实例成员指的是new出来的对象中的属性或方法function Student(age) {// 添加属性 this===创建出来的对象this.school = '大前端学院'this.age = agethis.sayHi = function () {console.log('sayHi')}}// school age sayHi 都叫实例成员const s1 = new Student(19)console.log(s1.school)// 静态成员 通过构造函数.属性 = 值// 通过构造函数.属性去访问 Student.nation = 'china'console.log(Student.nation)// Date.now() 静态方法</script></body>
</html>
总结：
构造函数内部
this实际上就是实例对象，为其动态添加的属性和方法即为实例成员为构造函数传入参数，动态创建结构相同但值不同的对象
注：构造函数创建的实例对象彼此独立互不影响。
在 JavaScript 中底层函数本质上也是对象类型，因此允许直接为函数动态添加属性或方法，构造函数的属性和方法被称为静态成员。
<script>// 构造函数function Person(name, age) {// 省略实例成员}// 静态属性Person.eyes = 2Person.arms = 2// 静态方法Person.walk = function () {console.log('^_^人都会走路...')// this 指向 Personconsole.log(this.eyes)}
</script>总结：
静态成员指的是添加到构造函数本身的属性和方法
一般公共特征的属性或方法静态成员设置为静态成员
静态成员方法中的
this指向构造函数本身
二、内置构造函数
内置的构造函数：Array Object Date String Number
Function 创建函数
静态方法：Object.keys()
Object.values()
Object.assign()
Array.isArray()
Date.now()
Array.from()
1、Object静态方法
Object.keys(obj) 获取所有属性组成的数组
0bject.values(obj) 获取所有属性值组成的数组
Object.assign ->ES6新增方法
可以对多个元对象进行复制Object.assign(复制的对象，复制的源对象...)
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><script>const obj = {name: '华为p60 pro',price: 6999,color: 'purple',}// ['name', 'price', 'color']// ['华为p60 pro',6999,'purple']// const keys = []// const values = []// for (let k in obj) {// keys.push(k)· // values.push(obj[k])// }// console.log(keys, values)const keys = Object.keys(obj) // 获取所有属性组成的数组const values = Object.values(obj) // 获取所有属性值组成的数组console.log(keys, values)console.log(values.join('-'))// Object.assign -> ES6新增方法const o = {}const o1 = { name: 'longge' }const o2 = { age: 18 }// o1 o2 源对象// assign实现对象的拷贝const r = Object.assign(o, o1, o2)console.log(o)</script></body>
</html>
总结：
推荐使用字面量方式声明对象，而不是
Object构造函数
Object.assign静态方法创建新的对象
Object.keys静态方法获取对象中所有属性
Object.values表态方法获取对象中所有属性值
2、包装类型
const str = 'hello' //const str = new String( 'hello ')//[]-> new Array ( )const r = str.substring(1)// str.substring(1) str = nullconsole.log(r)3、Array
Array 是内置的构造函数，用于创建数组
数组的方法
1、map方法
高阶函数----函数的参数接受一个函数或返回值是函数的函数
arr.map(function( item,index, arr) {// item -数组每一个元素//index -数组元素的索引/ / arr-----原数组}) const arr=[10,20,30,40]const newArray=arr.map(function(item,index,arr){return item*2})console.log(newArray)//[20, 40, 60, 80]
map 映射
变异方法
map对原数组循环，每次函数返回值会放入新数组中
map不影响原数组
2、find方法
find( ) 查找满足条件的第一个元素， 找到就返回该元素，找不到是undefined
返回的是满足条件的元素
arr.find ( function ( item, index , arr) {}) const arr=[1,3,7,8,4,2,9,3,6,8]const ele=arr.find(function(item,index,arr){return item===3})console.log(ele)//3
3、findIndex( )
findIndex( ) 查找满足条件的第一个元素的索引，找到就返回该元素的索引，找不到是-1
indexOf( ) 只能找具体的值
arr.findIndex ( function ( item, index , arr) {}) const arr=[22,34,66,22,6,7,9,0,6]const index=arr.findIndex(function(item,index,arr){return item===6})console.log(index)//4
4、some与every
some对数组进行循环，发现满足条件的第一个元素则循环结束返回true, 假如所有元素不满足返回false
const arr = [1,-3，20，9,11，12]//数组中是否含有偶数的元素const flag = arr.some(function (item) {return item % 2 === 0})console.log(flag)//true
every对数组进行循环，所有元素都满足返回true,假如遇到第一个不满足的元素结束，返回false,
const arr=[3,6,8,9,-3,-6,9]const flag = arr.every(function (item) {console.log(item)return item > -9})console.log(flag)//true
5、reverse()
翻转数组
对原数组进行翻转
const arr=[1,2,3,4,5,6]console.log(arr.reverse())//[6, 5, 4, 3, 2, 1]6、reduce方法
const arr = [1,2，3，4]arr.reduce( function (prev,current,index, arr) {console.log( prev,current, index)return prev + current}) 第一次 prev指向第一个元素， current指向第二个元素， index是current指向的元素的下标
第二次prev代表上一次函数返回值，current继续指向下一个元素
... .
最后一次函数的返回值作为reduce最终的结果
/*
prev->1 current->2 return 3
prev->3 current->3 return 6
prev->6 current->4return 10
*/
arr.reduce(function(prev , current) { }，初始值）
记忆:指定初始值，prev第一次就指向该初始值，以后的prev是上一次函数返回值, current指向第一个元素
没有指定初始值，prev第一次就指向数组第一个元素,current指向第二个元素,以后的prev是上一次函数返回值
7、forEach() 方法
forEach代替for循环
arr.forEach(function (item,index, arr) {console.log(item)}) const arr=[2,4,6,8,9,44,22]let sum=0arr.forEach(function(item){sum+=item})console.log(sum)//95
forEach没有返回值 影响原数组
8、filter( )
过滤 把符合条件的元素组成一个新数组
const newArr = arr.filter(function (item,index) {return item > 9})console.log( newArr)