Skip to content

对象方法拓展

字符串的拓展

.includes()

检查传入的字符串是否在原来的字符串中。返回布尔值

javascript
let str = "qwerdf"
str.includes("er") // true
str.includes("qer") //false

.startWith()

检查是不是以传入字符串开始

javascript
let str = "qwert"
str.starWith("q") //true
str.starWith("s") //false

.endWith()

检查是不是以传入字符串结束

javascript
let str = "qwert"
str.endWith("t") //true
str.endWith("s") //false

.repeat()

返回一个字符串,重复传入数值的次数

javascript
"ha".repeat(5) //"hahahahaha"
"哈".repeat(0) //""

数字的拓展

Number.parseInt()

取整 es6 中被置于Number对象上(静态方法),原全局函数依然存在

javascript
parseInt == Number.parseInt //true

Number.parseFloat()

取浮点数并去掉单位 es6 中被置于Number对象上,原全局函数依然存在

javascript
Number.parseFloat == parseFloat //true

Number.isNaN()

严格判断是不是NaN

javascript
isNaN(undefined) //true
Number.isNaN(undefined) //false

Number.isIntrger()

判断是否是整数

关于取整:

Number 对象方法:.toFixed(n) 保留小数点后 n 位数,五舍六入,低版本 IE 也支持
Math 对象静态方法:round(f) ceil(f) floor(f) rinc(f)
全局/Number 对象静态方法:parseInt(f)
位运算符组合: ~~f f|0 只针对正数

数组的拓展

Array.from()

构造函数的方法,将传入的类数组转换为真正数组

javascript
Array.from(document.querySelectorAll("div")) //NodeList对象转数组
//其实[...document.querySelectorAll("div")]效果一样
Array.from(document.getElementsByTagName("div")) //HTMLCollection对象转数组
function foo() {
    let arg = Array.from(...arguments) //arguments对象
    //其实[...arguments]效果一样
}

参数:

​ 第一个参数:类数组对象
​ 第二个参数:生成数组传入每个参数进行的操作,回调函数,接受一个参数就是传入参数的本身
​ 第三个参数: 指定第二个回调函数内部的 this 的指向

Array.of()

构造函数的方法,将一组数值转数组
主要是统一操作的含义

javascript
//原Array功能
Array() //[]
Array(2) //[empty × 2]   这里歧义
Array(1, 2, 3) //[1, 2, 3]
//Array.of方法统一了操作
Array.of() //[]
Array.of(3) //[3]
Array.of(1, 2, 3) //[1, 2, 3]

.every()/.some()

每一项/至少存在一项,判断是否满足返回 true,接受一个回调函数(以参数形式传入的函数,此函数依次接收数组每一项作为参数,返回 true/false)

javascript
let arr = [1, 2, 4]
arr.every(function(i) {
    return i > 0
}) //true 返回一个结果,对1,2,4判断,都大于0就返回true
//等价写法
arr.every((i) => i > 0) //true 用箭头函数返回

.filter()

将数组中的元素进行筛选,满足条件的元素以数组的形式返回。原数组不变,传入 l 两个参数第一个函数,函数接受三个参数

  • 第一个,传入的每一个元素,
  • 第二个,传入的每一个元素的下标
  • 第三个,数组的本身

函数返回一个布尔值

第二个后面的参数是函数执行时 this 指向的对象

javascript
let arr = [1, 3, 2, 23, 135, 43, 5, 34, 45]
arr.filter(function(item, index, thiarr) {
    return item > 10
}) //[23, 135, 43, 34, 45] 返回值大于10的数形成数组
arr.filter((item, index, thisarr) => index > 5)
//[5, 34, 45] //返回序号大于5的元素形成的数组

.forEach()

对数组每个元素执行对应的操作,参数类型和 filter 一致,返回 undefined

javascript
let arr = [
    function() {
        console.log("1" + this.name)
    },
    function() {
        console.log("2" + this.name)
    },
]
let obj = {
    name: "this obj",
}
arr.forEach(function(item) {
    item.call(this)
}, obj) //打印"1this obj" "2this obj"

.map()

将数组中的每一项进行操作,然后返回,改变原数组,格式和filter一致

javascript
const arr = [1, 2, 3, 4, 5]
arr.map((i) => 6 - i) //[5, 4, 3, 2, 1]

.reduce()

将数组的每一个值迭代起来,然后返回迭代结果。

javascript
let arr = [1, 2, 3, 4]
arr.reduce((a, b) => a + b) //10 此时将每一个加起来
arr.reduce((a, b) => a + b, 3) //13 3作为叠加的第一项
arr.reduce((a, b) => a + b, "") //"1234" ""作为叠加的第一项

将数组每一个元素叠加处理,转换合并再输出,不改变原数组

reduce接受两个参数,第一个是回调函数,回调函数接受四个参数

  • 第一个: 累加的载体
  • 第二个: 当前值
  • 第三个: 当前索引
  • 第四个: 数组本身

第二个参数时回调函数的主体对象

一行代码统计字符串中的相同字母的个数

javascript
"asdasdzxczxcaasdasd"
.split("")
    .reduce((x, y) => (x[y] ? x[y]++ : (x[y] = 1), x), {})

逗号运算符再表达式中的意义: 表达式会返回逗号后面的值。

.flat()

扁平化数组 参数 depth 默认 1

对象的拓展

属性名值合并

javascript
function createObj(x, y) {
    return {
        x,
        y,
    } //等价于return {x: x, y: y}
}
let o = createObj(1, 3) //{x: 1, y: 3}

getter setter

对象中的getset方法,获取元素的值和设置值的不同操作。

javascript
let o = {
    _value: 10, //加_表示不必建议访问
    get value() {
        //获取值或进行的操作。
        return this._value++
    },
    set value(val) {
        //设置值会进行的操作
        this._value -= val
    },
}
o.value //10
o.value //11
o.value = 3 //此时o._value已经从12减3了
o.value //9

Object.is()

ES5 比较相等有=====两种,前者会隐式类型转换,后者对于特殊情况比较结果反直觉

比如:

javascript
; + 0 === -0 //true
NaN === NaN //false
//而
Object.is(+0, -0) //false
Object.is(NaN, NaN) //true

Object.keys()

返回对象的所有可枚举属性名的数组

javascript
let obj = {
    a: 1,
    b: 2,
    c: 3,
}
Object.keys(obj) //["a", "b", "c"]

Object.values()Object.entries()

返回可枚举的值或者键值对的数组

javascript
const {
    keys,
    values,
    entries
} = Object
let obj = {
    a: 1,
    b: 2,
    c: 3,
}
values(obj) //[1, 2, 3]
for (let [key, value] of entries(obj)) {
    console.log([key, value])
}

Object.assign()

复制可枚举属性到目标对象上。返回目标对象

第一个参数是目标对象
第二个以及以后的参数是要复制属性的对象

javascript
let target = {
        a: 1,
    },
    o1 = {
        a: 2,
        b: 2,
    },
    o2 = {
        b: 3,
        c: 4,
    }
Object.assign(target, o1, o2)
//{a: 2, b: 3, c: 4},后面的相同的属性会把前面的属性覆盖掉
Object.assign(target) === target //true
Object.assign({}, "asd") //{0: "a", 1: "s", 2: "d"} "asd"会以string对象的形式传进去

使用:简化代码书写,添加属性

javascript
function Foo(name, value, x, y, vx, vy) {
    构造函数
    this.name = name
    //...很长
}
//使用assign
function Foo(name, value, x, y, vx, vy) {
    Object.assign(this, {
        name,
        value,
        x,
        y,
        vx,
        vy,
    })
}
new Foo("name", "yinshi", 100, 200, 2, 3) //...

Object.freeze()

对对象进行浅冻结,使其再也不能被修改。

javascript
const obj = {
    prop: 42,
}

Object.freeze(obj)

obj.prop = 33
// Throws an error in strict mode

但是其内部的引用类型数据依然可以被修改


Object.defineProperty() 设置属性描述符

Object.getOwnPropertyDescriptors() 获取属性描述符

Object.getPrototypeOf() 获取原型属性

Object.creat() 以原型创建对象

放在面向对象以及描述符的章节