js基础篇3

数组扩展

拆分多维数组flat

let arr = [1,2,[3,4,[5,6]]]
console.log(arr.flat(2))
// [1, 2, 3, 4, 5, 6]

数组元素修改fill

 /*
 fill(value)
 fill(value, start)
 fill(value, start, end)
 */
let arr = [1, 2, 3, 4, 5]
console.log(arr.fill(10, 2))
// [1, 2, 10, 10, 10]

只改变数组其中一个元素with

let arr = [1, 2, 3, 4, 5]
console.log(arr.with(1, 100))
// [1, 100, 3, 4, 5]

对象扩展

1. 判断一个对象是否存在特定属性

let obj = {
    name: 'xiaoming',
    age: 18
}

// hasOwnProperty
console.log(obj.hasOwnProperty('name'))

// in
console.log('name' in obj)

// Reflect.has()
console.log(Reflect.has(obj, 'name'))

2. Object.assign() 拼接

let obj1 = {
    name: 'John',
    age: 30,
    city: 'New York'
}
let obj2 = {
    age: 25,
    country: 'USA'
}
let obj3 = Object.assign(obj1, obj2)
console.log(obj3)
// {name: 'John', age: 25, city: 'New York', country: 'USA'}

很多人可能会想到这种方式可不可以用来复制一个对象，我告诉你结果：不完全可以，为什么这样说，大家看如下代码：

let obj4 = {
    nameValue: 'xiaoming',
    age: 18,
    get name() {
        console.log('get name')
    },
    set name(value) {
        console.log('set name')
    }
}
let obj5 = {}
let obj6 = Object.assign(obj5, obj4)
console.log(obj6)
// {nameValue: 'xiaoming', age: 18, name: undefined}

当这个对象中有get 或者 set 时就不行了

3. getOwnPropertyDescriptors()返回给定对象的所有自有属性描述符

let obj4 = {
    nameValue: 'xiaoming',
    age: 18,
    get name() {
        console.log('get name')
    },
    set name(value) {
        console.log('set name')
    }
}
let obj7 = Object.getOwnPropertyDescriptors(obj4)
obj7.name.get()
// get name

4. Object.keys()

返回一个由给定对象自身的可枚举的字符串键属性名组成的数组。

let obj1 = {
     name: 'John',
     age: 30,
     city: 'New York'
}
console.log(Object.keys(obj1))
// ['name', 'age', 'city']

5. Object.values()

返回一个由所有自身属性值的数组，包括不可枚举属性值。

console.log(Object.values(obj1))
// ['John', 30, 'New York']

6. Object.entries()

返回一个数组，包含给定对象自有的可枚举字符串键属性的键值对。

console.log(Object.entries(obj1))
/*
[
    ['name', 'John']
    ['age', 30]
    ['city', 'New York']    
]
*/

7. Object.create

以一个现有对象作为原型，创建一个新对象。

 let obj1 = {
     nameValue: 'John',
     age: 30,
     city: {
         name: 'New York',
         population: 800000
     },
     get name() {
         console.log('get name')
         return this.nameValue
     },
     set name(value) {
         console.log('set name')
     }
 }
 
  let obj3 = Object.create(
      Object.getPrototypeOf(obj1),
      Object.getOwnPropertyDescriptors(obj1),
  );

console.log(obj3)
// {nameValue: 'John', age: 30, city: {…}}
console.log(obj3.name)
// get name
// John

获取css中的变量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单的背景选择</title>
    <style>
        :root{
            --color: #000;
        }
        body{
            height: 96vh;
            background-color: var(--color);
        }
    </style>
</head>
<body>
    <input type="color" id="color">
    <script>
        // 获取css中变量的值
        const rootColor = getComputedStyle(document.documentElement).getPropertyValue('--color');
        
        let colorSelector = document.querySelector('#color');
        colorSelector.addEventListener('change', (e) => {
            // 通过改变css变量，改变页面背景色
            document.documentElement.style.setProperty('--color', e.target.value);
        });
    </script>
</body>
</html>

class新增

在属性面前在一个#，就是私有属性

class Person {
    static a = 1;
    // 定义私有属性
    #privateName = 'tiechui'
    constructor(name, age) {
        this.name = name;
        this.age = age;
        this.privateName = this.#privateName
    }
    // 定义一个方法
    sayHello() {
        console.log(`Hello, my name is ${this.name}`);
    }
}

静态代码块，当这个类被定义后，代码块会自动执行

class test{
    static n = 1
    static {
        console.log('静态代码块', this.n)
    }
}
// 静态代码块 1

异步迭代

function ajax(str, time) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(str);
        }, time);
    });
}
// 迭代器
async function* foo() {
    yield ajax('a',1000);
    yield ajax('b',1000);
    yield ajax('c',1000);
}

let str = '';
let Foo = foo();
Foo.next().then(res=>{
    console.log(res);
})
// {value: 'a', done: false}
async function generate() {
    for await (var val of foo()) {
        str = str + val;
        console.log(val);
    }
    console.log(str);
}

generate();
// a
// b
// c
// abc

正则扩展

let str = '今天是2023-12-23'
let reg = /(?<year>\d{4})-(?<mounth>\d{1,2})-(?<day>\d{2})/
let reg1 = /(?<year>\d{4})-(?<mounth>\d{1,2})-(?<day>\d{2})/d
console.log(reg.exec(str))
// ['2023-12-23', '2023', '12', '23', index: 3, input: '今天是2023-12-23', groups: {…}]


console.log(reg1.exec(str))
// ['2023-12-23', '2023', '12', '23', index: 3, input: '今天是2023-12-23', groups: {…}, indices: Array(4)]

字符串扩展

includes函数可以判断字符串中是否含有指定字符串

let str = "helloworld"
console.log(str.includes("h"))
// true

startsWith和endsWith方法可以判断字符串是否以指定字符串开头或结尾

let str = "hello"
console.log(str.startsWith("h"))
// true
console.log(str.startsWith("h", 1))
// false
console.log(str.endsWith("o"))
// true

字符串的repeat方法可以重复字符串

let str = "hello"
console.log(str.repeat(3))
// hellohellohello

console.log(str.repeat(0)==='')
// true

字符串的padStart和padEnd方法可以对字符串进行填充

let str = "hello"
console.log(str.padStart(10, "world"))
// worldhello

console.log(str.padEnd(10, "world"))
// helloworld

at方法（寻找数组内的元素）

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

console.log(arr.at(1))
// 2

console.log(arr.at(-1))
// 10

本文采用署名-非商业性使用-相同方式共享 4.0 国际许可协议，转载请注明出处。