构造函数
创建对象
1 字面量对象
const obj = { uname: 'John', age: 20 }2 new Object
const obj = new Object({ uname: 'John', age: 20 })
console.log(obj)
const obj = new Object()
obj.uname = 'John'
obj.age = 20
console.log(obj)3 通过构造函数(自定义)创建
构造函数-> 1 构造出对象的函数 2 将来通过new调用 3 构造函数名首字母建议大写
内置内构函数(Array、Date、Object)
自定义构造函数
例如：
// 定义学生构造函数
function Student() {
// 添加属性
this.school = '大前端学院'
this.age = 18
}ƒ
// 基于Student构造函数创建对象
const s1 = new Student()
const s2 = new Student()
console.log(s1)
console.log(s2)new执行过程
new关键字来调用构造函数->得到一个对象
1 实参数传递给形式参数
2 内部先创建一个空对象 {} ,并且让this指向该空对象
3 执行函数体
4 返回这个对象
例如：
<script>
// 定义学生构造函数
function Student() {
// 添加属性 this===创建出来的对象
this.school = '大前端学院'
this.age = 18
this.sayHi = function () {
console.log('sayHi')
}
// 不需要写return，默认会返回this，假如显示指定return
// return基本类型会被忽略,return引用类型将来new得到的也是该引用类型
// return []
}
// 基于Student构造函数创建对象
/*
new关键字来调用构造函数->得到一个对象
1 实参数传递给形式参数
2 内部先创建一个空对象 {} ,并且让this指向该空对象
3 执行函数体
4 返回这个对象
*/
const s1 = new Student()
console.log(s1)
s1.sayHi()
const s2 = new Student // 无参数 小括号可省略
console.log(s2)
</script>带参数构造函数
<script>
// 定义学生构造函数
function Student(age) {
// 添加属性 this===创建出来的对象
this.school = '大前端学院'
this.age = age
this.sayHi = function () {
console.log('sayHi')
}
}
// 基于Student构造函数创建对象
/*
new关键字来调用构造函数->得到一个对象
1 实参数传递给形式参数
2 内部先创建一个空对象 {} ,并且让this指向该空对象
3 执行函数体
4 返回这个对象
*/
const s1 = new Student(18)
const s2 = new Student(20)
console.log(s1.age)
console.log(s2.age)
</script>实例成员与静态成员
实例(对象) new出来的对象叫实例对象 new过程即实例化对象过程
实例成员指的是new出来的对象中的属性或方法
静态成员 通过构造函数.属性 = 值
通过构造函数.属性去访问
<script>
// 实例(对象) new出来的对象叫实例对象 new过程即实例化对象过程
// 实例成员指的是new出来的对象中的属性或方法
function Student(age) {
// 添加属性 this===创建出来的对象
this.school = '大前端学院'
this.age = age
this.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>Object静态方法
<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>数组对象方法
map对原数组循环，每次函数返回值会放入新数组中
map不影响原数组
<script>
const arr = [10, 20, 30, 40]
// 高阶函数-函数的参数接受一个函数或返回值是函数的函数
/* 变异方法
map对原数组循环，每次函数返回值会放入新数组中
map不影响原数组
*/
// const newArr = arr.map(function (item, index, arr) {
// // item - 数组每一个元素
// // index - 数组元素的索引
// // arr- 原数组
// console.log(111)
// console.log(item, index, arr)
// return item * 2
// })
// arr.forEach(function (item, index, arr) {
// arr[index] = item * 2
// })
// console.log(arr)
console.log(newArr)
console.log(arr)
</script>find() 查找满足条件的第一个元素 找到就返回该元素，找不到是undefined
findIndex() 查找满足条件的第一个元素的索引 找到就返回该元素的索引，找不到是-1
<script>
// find() 查找满足条件的第一个元素 找到就返回该元素，找不到是undefined
// indexOf includes()
// const arr = [1, 3, 5, 7, 9, 7]
// const item = arr.find(function (item, index, arr) {
// console.log(item, index, arr)
// return item === 17
// })
// console.log(item)
// findIndex() 查找满足条件的第一个元素的索引 找到就返回该元素的索引，找不到是-1
// indexOf()
const arr = [1, 3, 5, 7, 9, 7]
const index = arr.findIndex(function (item, index, arr) {
console.log(111)
return item > 5
})
console.log(index) // 3
</script>some 对数组进行循环，发现满足条件的第一个元素则循环结束 返回true,假如所有元素不满足 返回false。
every对数组进行循环，所有元素都满足返回true,假如遇到第一个不满足的元素结束返回false。
<script>
const arr = [1, -3, 20, 9, 11, 12]
// 数组中是否含有偶数的元素
// some 对数组进行循环，发现满足条件的第一个元素则循环结束 返回true,假如所有元素不满足 返回false
/* const flag = arr.some(function (item) {
console.log(item)
return item % 2 === 0
})
console.log(flag) */
//every对数组进行循环，所有元素都满足返回true,假如遇到第一个不满足的元素结束返回false，
const flag = arr.every(function (item) {
console.log(item)
return item > -9
})
console.log(flag)
</script>reverse() 对原数组进行翻转
<script>
//reverse() 对原数组进行翻转
const arr = [1, 3, 5]
const r = arr.reverse()
console.log(arr) // [5,3,1]
console.log(r === arr)
</script>reduce方法
arr.reduce(function(prev,current) {},初始值)
记忆： 指定初始值，prev第一次就指向该初始值，以后的prev是上一次函数返回值,current指向第一个元素
没有指定初始值，prev第一次就指向数组第一个元素，current指向第二个元素,以后的prev是上一次函数返回值
<script>
// reduce
// const arr = [1, 2, 3, 4]
// const r = arr.reduce(function (prev, current, index, arr) {
// console.log(prev, current, index)
// return prev + current
// })
// console.log(r)
/*
第一次 prev指向第一个元素 current 指向第二个 元素 index是current指向的元素的下标
第二次 prev代表上一次函数返回值 current继续指向下一个元素
....
最后一次函数的返回值作为reduce最终的结果
1 2 1
undefined 3 2
undefined 4 3
*/
/*
prev->1 current->2 return 3
prev->3 current->3 return 6
prev->6 current->4 return 10
*/
/*
arr.reduce(function(prev,current) {},初始值)
记忆： 指定初始值，prev第一次就指向该初始值，以后的prev是上一次函数返回值,current指向第一个元素
没有指定初始值，prev第一次就指向数组第一个元素，current指向第二个元素,以后的prev是上一次函数返回值
*/
const arr = [1, 2, 3, 4]
const r = arr.reduce(function (prev, current, index, arr) {
console.log(prev, current, index)
return prev + current
}, 0)
console.log(r)
/*
prev->0 current->1 retrurn 1
prev->1 current->2 retrurn 3
preve->3 current->3 retrurn 6
preve->6 current->4 return 10
*/
arr.reduceRight(function (prev, current) {
console.log(prev, current)
return prev + current
})
</script>forEach()
此方法对数组的每个元素执行一次给定的函数。
<script>
// forEach 代替 for循环
const arr = ['北京', '上海', '广州', '深圳', '杭州', '武汉']
let str = ''
const r = arr.forEach(function (item, index, arr) {
console.log(item)
str += item + ' '
})
console.log(str)
console.log(r) // forEach没有返回值
</script>
filter
filter() 过滤 把符合条件的元素组成一个新数组
<script>
// filter() 过滤 把符合条件的元素组成一个新数组
const arr = [10, 8, 3, -1, 9, 12]
const newArr = arr.filter(function (item, index) {
return item > 9
})
console.log(newArr)
console.log(arr)
</script>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
