深入对象:

创建对象的三种方式:

利用对象字面量创建对象

const obj={ uname:'张三', age:18 }

利用 new Object 创建对象

  const obj= new Object({uname:'张三',age:18})

利用构造函数创建对象

/ 构造函数就是函数 // 1.为了区分普通函数,构造函数首字母需要大写 // 2.使用new关键字,调用函数 // 3.构造函数的作用:为了创建对象 function Person(n, a, g) { this.uname = n, this.age = a, this.gender = g } const p1 = new Person('小李', 18, '男') console.log(p1) const p2 = new Person('小王', 20, '男') console.log(p2) const p3 = new Person('小李', 40, '女') console.log(p3)

构造函数:

构造函数就是用来创建多个类似的对象,大写字母开头的函数
new关键字调用的函数的行为称为实例化
构造函数内部不需要写return返回值,自动返回创建的新的对象

实例成员&静态成员:

实例成员:给实例化对象(使用new关键字调用的对象)添加的属性和方法,只能被实例化对象访问

静态成员:在构造函数本身添加的属性和方法只能被构造函数本身访问

 // 成员:指属性与方法
        // 实例成员:给实例对象添加的属性与方法
        function Person() {
            this.uname = 'zs'
            this.sayHello = function () {
                console.log(1)
            }
        }
        const p1 = new Person()
        console.log(p1.uname)
        p1.sayHello()

        // 静态成员
        // 静态成员值：在 构造函数 本身上添加的属性和方法
        // 静态成员只能被 构造函数访问
        Person.aname = '王五'
        Person.hello = function () {
            console.log(this === Person)
        }

构造函数this指向:

构造函数this代表了实例化对象

  // 构造函数里面的this 代表了实例化对象
        let a
        function Person(n, a, g) {
            this.uname = n
            this.age = a
            this.gender = g
        }
        const p1 = new Person('小王', 18, '男')
        console.log(p1.uname);
        const p2 = new Person('小李', 30, '男')
        console.log(p2.uname);
        // console.log(p1 === a)

new的执行对象过程:

在内存中创建一个空的对象
构造函数里面的this指向这个对象
给对象添加属性和方法
返回新的数组

二.内置构造函数

基本包装类型:JS底层完成把简单数据类型包装,为了引用数据类型

Object静态方法:

Object.keys()静态方法获取对象中所有的属性名,返回的是一个数组

 const perder = {
            uname: '张三',
            age: 18
        }
        // 获取对象里面所有的属性 Object.keys(对象)返回值是一个数组
        const arr = Object.keys(perder)
        console.log(arr)

Object.values()获取对象中所有的属性值,返回的是一个数组

   const perder = {
            uname: '张三',
            age: 18
        }
        // 获取对象里面所有的属性 Object.values(对象)返回值是一个数组
        // 手写vue源码 Object.values()
        const arr = Object.values(perder)
        console.log(arr)

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

  const perder = {
            uname: '张三',
            age: 18
        }
        // Object.assign(目标对象,源对象)将源对象里面的属性和方法拷贝
        const obj = {

        }
        Object.assign(obj, perder)
        obj.uname = '李四'
        console.log(obj)
        console.log(perder)

Array用于创建数组:

reduce:累计器,返回函数累计处理结果经常用于求和

累计值参数：

如果有起始值，则以起始值为准开始累计，累计值 = 起始值
如果没有起始值，则累计值以数组的第一个数组元素作为起始值开始累计
后面每次遍历就会用后面的数组元素累计到累计值里面（类似求和里面的 sum ）

const arr = [1, 2, 3, 4, 5] // 🔔arr.reduce(function(),起始值) // 🔔arr.reduce(function (累加, 数组元素, 下标) { }, 起始值) // 第一次的temp 0 item 1 如果我们有写起始值第一次的时候就会将起始值赋值给temp变量 // 如果有起始值数组会从第一个元素开始遍历 const sum = arr.reduce(function (temp, item) { return temp + item }, 0) // 返回值会作为第二次..后面的temp的值 console.log(sum)

  const arr = [1, 2, 3, 4, 5]
        // 没有起始值
        // 第一次循环的时候 会将数组里面的第一个元素 给 temp变量 item 变量就是数组的第二个元素
        // 如果没有起始值 reduce则从数组的第二个元素 开始循环 将数组的第一个元素 给temp变量 将数组的第二个元素 给item
        // 如果有起始值 reduce 侧从数组的第一个元素 开始循环 将起始值给temp 变量 将数组的第一个元素  给item变量
        // 如果 回调函数里面 没有return 则第二次以后temp 为undefin
        // 如果回调函数里面 有return 则返回值作为下一次 的temp变量的值
        sum = arr.reduce(function (temp, item) {
            return temp + item
        })
        console.log(sum);

数组的实例方法:

every:所有元素都必须相同,只要有一个不同就返回false,反之true

// 数组里面的每一组都必须是满足条件的不满足就是false 满足就是true const arr = [2, 4, 6, 9, 10] const flag = arr.every(item => item % 2 === 0) console.log(flag)

some:只要包含一个元素就为true,反之false

// some方法:在元素中只要满足一个条件就返回true 否则返回flase const arr = ['嘻哈', '嘻哈', '嘻哈', '嘻嘻'] const flag = arr.some(item => item === '嘻嘻') console.log(flag)

find:查找元素,返回复合测试条件的第一个数组的元素
conat:合并数组,一般用于扁平化数组

const arr = [1, 2, [3, 4], [5, 6], 7] // 扁平化数组就是把一个多层嵌套的数组array(嵌套可以是任何层数)转化为一层数组 // 如果数组里面有元素, 又是一个数组多维数组 // 使用reduce 遍历数组 const newArr = arr.reduce((temp, item) => { return temp.concat(item) }, []) console.log(newArr)

findIndex:查找元素的下标,如果有返回该元素的下标,没有返回-1

const arr = [ { id: 1, name: 'zs', age: 20 }, { id: 2, name: 'zs', age: 20 }, { id: 3, name: 'zs', age: 20 }, { id: 4, name: 'zs', age: 20 } ] // findIndex方法查找指定元素的下标如果有则返回其下标,如果没有返回-1 const index = arr.findIndex(item => item.id === 4) console.log(index);

Array.from()将伪数组转换成为真数组

const lis = document.querySelectorAll('ul li') // lis.pop() // 伪数组不能使用数组的一些方法 // console.log(lis); // Array.from()方法是把假数组转换为真数组 const newli = Array.from(lis) newli.pop() console.log(newli)

String实例方法:

split('分隔符')用来将字符串分成数组
substring(截取的第一个字符的索引,[,结束的索引号]),如果省略结束的索引号,默认取到最后结束的索引号不包括想要的截取部分

const str = '你好呀,今天星期天吧' // 字符串.substring(开始下标,结束下标)如果第二个参数不写就表示截止到字符串的末尾 const res = str.substring(4, 4 + 5) console.log(res)

startsWith(检测字符串[,检测位置索引号]检测是否以某字符开头)
indexOf('查找的字符串') 查找字符串里面指定的字符找到了返回其下标找不到返回-1

// 字符串.indexOf('查找的字符串') 查找字符串里面指定的字符找到了返回其下标找不到返回-1 const str = 'javascript' // const res = str.indexOf('a') const res = str.indexOf('a',2) // 从str这个字符串的下标是2的位置开始查找a的索引 // const res = str.indexOf('b') console.log(res)

padStart 作用在字符串的前面添加字符

const str = '9' const res = str.padStart(2, 0) console.log(res) padStart 作用在字符串的前面添加字符 str.padstart(targetLength [,padstart]) targetLength 目标字符串长度 padstring 需要填充的字符串如果str的长度不足2位则在其的前面添加一个0

小驼峰转换为大驼峰

  // 将getUserName 首字母变成大写字母 GetUserName
    const str = 'getUserName'
    // 可以获取str的第一个字符  调用 toUpperCase()字符串也有下标
    // 使用substring()方法 从字符串的第二个字符开始截取字符串 截取到字符串的末尾
    const res = str[0].toUpperCase() + str.substring(1)
    console.log(res);

Number创建数值:

toFixed()设置保留小数的长度

数值类型
const price =12.345
保留两位小数,四舍五入
console.log(price.toFixed(2))

JS(构造函数&数据常用函数)