前端...用法

Posted 2021-08-30 唐微港

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端...用法相关的知识，希望对你有一定的参考价值。

数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>...运算符</title>
</head>
<body>
    <script>
        let arr1 = [1,3,5,7,9]
        let arr2 = [2,4,6,8]

        
        
        
        //功能一：展开数组
        console.log(arr1) // 结果：[1, 3, 5, 7, 9]
        console.log(...arr1) // 结果：1 3 5 7 9
        
        let a = [1, 2, 3];
        console.log(a) //结果[1, 2, 3]：
        let b = [0, ...a, 4]; 
        console.log(b) //结果[0, 1, 2, 3, 4]
        let obj = { a: 1, b: 2 }; 
        console.log(obj) //结果 {a: 1, b: 2}
        let obj2 = { ...obj, c: 3 };
        console.log(obj2) //结果 {a: 1, b: 2, c: 3}
        let obj3 = { ...obj, a: 3 }; //展开时同时赋值
        console.log(obj3) //结果  {a: 3, b: 2}
        
        console.log('----------------------------')
        
        //功能二：连接数组
        let arr3 = [...arr1, ...arr2] 
        console.log(arr3) //结果：[1, 3, 5, 7, 9, 2, 4, 6, 8]
        console.log(...arr3) //结果：1, 3, 5, 7, 9, 2, 4, 6, 8
        console.log('----------------------------')
        
		//功能三：非固定个数的函数传惨,传入的参数可以
        function sum(...params) {
            console.log(params) //结果：[1, 4, 7]
            //展开数组
            console.log(...params) //结果：1 4 7
            //求和固定写法
            return params.reduce((preValue, currentValue) => {
                console.log(preValue + "++++") //结果：1  5
                console.log(currentValue + "---") //结果：4  7
                console.log(preValue + currentValue) //结果：5  12
                return preValue + currentValue; 
            })
        }
        const count = sum(1, 4, 7)
        console.log(count) //结果：12
        console.log('----------------------------')
        
        //或者
        
        function sum(a, ...args){
          console.log(a); // 1
          console.log(args); // [4,7]
        }
        sum(1, 4, 7)

        //功能六：复制的同时改变一些属性的值或者添加新的值
        let copyPerson = {...person,name:'更改的值',age:23,address:'归途'}
        console.log(copyPerson)

    </script>
    
</body>
</html>

对象

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>...运算符</title>
</head>

<body>
    <script>
        //功能四，在运用到对象json上的时候就表示不是展开而是赋值
        let person = { name: '潇潇', age: 18, gender: '女' }
        console.log(person) //结果：{name: "潇潇", age: 18, gender: "女"}
        let newPerson = { ...person } //这里表示复制成一个新的newPerson
        newPerson.age = 20 //修改值
        console.log(newPerson) //结果：{name: "潇潇", age: 18, gender: "女"}
        console.log('----------------------------')
        
        // 功能五，在react和babel组合里面{...person}就可以表示展开对象，
        // 但是仅仅只限于在标签里面使用，而不是在任意的地方进行更改，而
        // 而在原生的里面只能表示复制
        console.log('----------------------------')
        
        //功能六：复制的同时改变一些属性的值或者添加新的值
        let copyPerson = { ...person, name: '更改的值', age: 23, address: '地点' }
        console.log(copyPerson)
        
        //功能七：合并对象
        const people = {
            name: 'Julya',
            age: 18,
            sex: '女',
        };
        const info = {
            age: 22,
            job: 'student',
            height: '164cm'
        }
        const student = { ...people, ...info }; //合并时，如果有相同的熟悉，就会采取覆盖的方式
        console.log(student); //结果：{name: "Julya", age: 22, sex: "女", job: "student", height: "164cm"}
    </script>

</body>

</html>

以上是关于前端...用法的主要内容，如果未能解决你的问题，请参考以下文章