web前端开发中遇到的问题整理记录——2020-06

目录

1.padStart()方法,padEnd()方法
2.Object.assign()
3.解构
4.Spread Operator 展开运算符

内容

1.padStart()方法,padEnd()方法

ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度，会在头部或尾部补全。 padStart() 用于头部补全， padEnd() 用于尾部补全

x'.padStart(5, 'ab') // 'ababx'
'x'.padStart(4, 'ab') // 'abax'
'x'.padEnd(5, 'ab') // 'xabab'
'x'.padEnd(4, 'ab') // 'xaba'

padStart()和padStart()一共两个参数，第一个用来指定字符串的最小长度，第二个是用来补全的字符串。
如果原字符串的长度，等于或大于指定的最小长度，则返回原字符串：

'xxx'.padStart(2, 'ab') // 'xxx'
'xxx'.padEnd(2, 'ab') // 'xxx'

如果用来补全的字符串与原字符串，两者的长度之和超过了指定的最小长度，则会截去超出位数的补全字符串：

'abc'.padStart(10, '0123456789') // '0123456abc'

2.Object.assign()

Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

语法： Object.assign(target, ...sources)

参数： target

目标对象。

sources

源对象。

返回值：目标对象

const objA = { name: 'cc', age: 18 }

const objB = { address: 'beijing' }

const objC = {} // 这个为目标对象

const obj = Object.assign(objC, objA, objB)

我们将 objA objB objC obj 分别输出看看

console.log(objA) // { name: 'cc', age: 18 }

console.log(objB) // { address: 'beijing' }

console.log(objC) // { name: 'cc', age: 18, address: 'beijing' }

console.log(obj) // { name: 'cc', age: 18, address: 'beijing' }

是的，目标对象ObjC的值被改变了。

因此，如果objC也是你的一个源对象的话。请在objC前面填在一个目标对象{}，如：

Object.assign({}, objC, objA, objB)

如果目标对象中的属性具有相同的键，则属性将被源对象中的属性覆盖。后面的源对象的属性将类似地覆盖前面的源对象的属性。

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };
const returnedTarget = Object.assign(target, source);
console.log(target);
// expected output: Object { a: 1, b: 4, c: 5 }
console.log(returnedTarget);
// expected output: Object { a: 1, b: 4, c: 5 }

Object.assign 方法只会拷贝源对象自身的并且可枚举的属性到目标对象。
该方法使用源对象的[[Get]]和目标对象的[[Set]]，所以它会调用相关 getter 和 setter。
因此，它分配属性，而不仅仅是复制或定义新的属性。如果合并源包含getter，这可能使其不适合将新属性合并到原型中。为了将属性定义（包括其可枚举性）复制到原型，应使用Object.getOwnPropertyDescriptor()和Object.defineProperty() 。

3.解构

 const people = {
        name: 'lux',
        age: 20
    }
    const { name, age } = people
    console.log(`${name} --- ${age}`)
    //数组
    const color = ['red', 'blue']
    const [first, second] = color
    console.log(first) //'red'
    console.log(second) //'blue'

// 请使用 ES6 重构一下代码

// 第一题
var jsonParse = require('body-parser').jsonParse

// 第二题
var body = request.body
var username = body.username
var password = body.password

// 1.
import { jsonParse } from 'body-parser'
// 2. 
const { body, body: { username, password } } = request

4.Spread Operator 展开运算符

数组:

 const color = ['red', 'yellow']
 const colorful = [...color, 'green', 'pink']
 console.log(colorful)  //[red, yellow, green, pink]

对象

    const alp = { fist: 'a', second: 'b'}
    const alphabets = { ...alp, third: 'c' }
    console.log(alphabets) //{ "fist": "a", "second": "b", "third": "c"

有时候我们想获取数组或者对象除了前几项或者除了某几项的其他项
数组

    const number = [1,2,3,4,5]
    const [first, ...rest] = number
    console.log(rest) //2,3,4,5

对象

    const user = {
        username: 'lux',
        gender: 'female',
        age: 19,
        address: 'peking'
    }
    const { username, ...rest } = user
    console.log(rest) //{"address": "peking", "age": 19, "gender": "female"}

对于 Object 而言，还可以用于组合成新的 Object 。(ES2017 stage-2 proposal) 当然如果有重复的属性名，右边覆盖左边

 const first = {
        a: 1,
        b: 2,
        c: 6,
    }
    const second = {
        c: 3,
        d: 4
    }
    const total = { ...first, ...second }
    console.log(total) // { a: 1, b: 2, c: 3, d: 4 }