前端学习--JS进阶(2) 深入对象/内置构造函数

一、深入对象

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()

静态方法 伪数组转化为真数组 

参数：

1. arrayLike：要转换为数组的类数组对象或可迭代对象。
2. 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