一、深入对象
1.1 创建对象三种方式
//1 字面量创建对象
const o = {
name:'佩奇'
}
//2 new object创建对象
const o = new Object({name : '佩奇'})
//3 构造函数创建对象
function Obj(name){
this.name = name
}
const obj = new Obj('piggy')
1.2 构造函数
主要用来初始化对象
命名只能以大写字母开头
只能由new操作符来执行
实例化过程:
1.创建新空对象
2.构造函数this指向新对象
3.执行构造函数代码,修改this,添加属性
4.返回新对象
1.3 实例成员 静态成员
实例成员
实例对象的属性和方法
每个对象之间相互独立,互不影响
静态成员
构造函数的属性和方法
function Person(name, age){
}
//静态属性
Person.eyes = 2
Person.arms = 2
//静态方法
Person.walk = function(){
console.log('这是静态方法')
console.log(this.eyes)
}
静态属性和方法只能通过类本身来访问,不可通过对象实例访问。
二、JS内置构造函数
2.1 Object
Object 是内置的构造函数,用于创建普通对象
const o = {uname:'pink', age:18}
console.log(Object.keys(o)) //属性名['uname', 'age']
console.log(Object.values(o)) //属性值['pink', 18]
const oo = {}
Object.assign(oo, o) //把o拷贝给oo
console.log(oo) //{uname: 'pink', age: 18}
//可以用于添加属性
Object.assign(o, {gender:'female'})
console.log(Object.keys(o)) //['uname', 'age', 'gender']
console.log(Object.values(o)) //['pink', 18, 'female']
2.2 Array
数组常见实例方法
forEach | 遍历数组,不返回数组经常用于查找遍历元素 |
filter | 过滤数组,返回满足筛选条件的新数组 |
map | 迭代数组,返回处理过后的新数组 |
reduce | 累计器,返回累计处理的结果 |
arr.reduce()
//arr.reduce(function(上一次值, 当前值){},初始值)
const arr = [1,5,8]
//1 没有初始值的累加和
const total = arr.reduce(function(prev, current){
console.log(prev, current)
return prev + current
})
console.log(total) //14
//2 有初始值的累加和
const total1 = arr.reduce(function(prev, current){
console.log(prev, current)
return prev + current
}, 10)
console.log(total1) //24
其他方法
join | 返回拼接后的字符串 |
find | 返回符合条件的第一个数组元素值 |
every | 检测数组中所有元素是否符合判断条件 |
some | 检测数组中元素是否有元素符合判断条件 |
concat | 合并两个数组,返回生成新数组 |
sort | 对原数组单元值排序 |
splice | 删除或替换数组单元 |
reverse | 反转数组 |
findIndex | 查找元素的索引值 |
arr.find()
用于在数组中查找满足指定条件的第一个数组元素,并返回该元素
如果没有找到匹配的元素,则返回 undefined
回调函数中有三个参数(element,index,array),与map()类似
const numbers = [1, 2, 3, 4, 5];
const found = numbers.find(element => element > 3);
console.log(found); // 4
arr.every()
检查数组中的每个元素是否满足指定的条件。如果数组中的每个元素都满足条件,则 Array.every()
返回 true;
如果有一个或多个元素不满足条件,则返回 false
回调函数中有三个参数(element,index,array),与map()类似
const numbers = [2, 4, 6, 8, 10];
const allEven = numbers.every(element => element % 2 === 0);
console.log(allEven); // true
Array.from()
静态方法 伪数组转化为真数组
参数:
arrayLike
:要转换为数组的类数组对象或可迭代对象。mapFn
(可选):用于对每个元素进行映射的函数。
const set = new Set([1, 2, 3, 4, 5]);
const array = Array.from(set, x => x * 2);
console.log(array); // [2, 4, 6, 8, 10]
2.3 String
//字符串分割 str.split()
const str = 'pink, red'
const arr1 = str.split(',')
console.log(arr1) //['pink', ' red']
//字符串截取 str.substring(indexBegin[,indexEnd])
console.log(str.substring(5)) //red
//字符串搜索判断 是否以目标字符串开头 返回布尔值
//str.startsWith(searchString[,position])
console.log(str.startsWith('pink')) //true
console.log(str.startsWith('pink', 2)) //false
//字符串搜索判断 是否含有目标字符串 返回布尔值
//str.includes(searchString[,position])
console.log(str.includes('red')) //true
console.log(str.includes('red', 7)) //false
2.4 Number
//num.toFixed(n)
//保留几位小数
const num = 10.123
comnsole.log(num.toFixed(2))// 10.12
comnsole.log(num.toFixed(4))// 10.1230