tian~

Appearance

Return to top
on this page

扫码联系

编程学习&& IT

tian

课程简介

学什么

剩余参数

数组的展开运算符

对象的展开运算符

剩余参数

剩余参数是什么

剩余参数的注意事项

剩余参数的应用

数组的展开运算符

数组展开运算符的基本用法

区分剩余参数和展开运算符

数组展开运算符的应用

对象的展开运算符

基本用法

注意事项

应用

剩余参数

1.剩余参数初识

  • 认识剩余参数
  • 剩余参数的本质

1.剩余参数是什么

js
const add = (x, y, z, ...args) => {};

2.剩余参数的本质

剩余参数永远是个数组，即使没有值，也是空数组

js
const add = (x, y, ...args) => {
    console.log(x, y, args);  //打印剩余参数的时候不要加...
};
add();
add(1);
add(1, 2);
add(1, 2, 3, 4, 5);

// 3, 4, 5->[3, 4, 5]

2.剩余参数注意事项

  • 箭头函数的剩余参数

  • 使用剩余参数替代arguments 获取实际参数

  • 剩余参数的位置

1.箭头函数的剩余参数

箭头函数的参数部分即使只有一个剩余参数，也不能省略圆括号

js
 const add = (...args) => {};

2.使用剩余参数替代 arguments 获取实际参数

js
const add = function () {
    console.log(arguments);
};

//使用剩余参数替代
const add = (...args) => {
    console.log(args);
};

add(1, 2);

3.剩余参数的位置

剩余参数只能是最后一个参数，之后不能再有其他参数，否则会报错

js
const add = (x, y, ...args) => {
    console.log(args);
};

3.剩余参数的应用

1.完成 add 函数

js
const add = (...args) => {
    console.log(args);

    //let sum = 0;
    //for (let i = 0; i < args.length; i++) {
        //sum += args[i];
    //}
    
    let sum = args.reduce((a, b) => a + b);

    return sum;
};

console.log(add(1, 2, 3));

2.与解构赋值结合使用

剩余参数不一定非要作为函数参数使用

js
const [num, ...args] = [1, 2, 3, 4];
console.log(num, args);

//数组解构和函数参数加剩余参数 结合使用
//const func = ([num, ...args]) => {};
//func([1, 2, 3]);

//必须是最后一个
const [...args,num] = [1, 2, 3, 4];//报错
console.log(num, args);

对象也可以使用剩余参数(元素)

js
const { x, y, ...z } = { a: 3, x: 1, y: 2, b: 4 };
console.log(x, y, z);

//对象解构和函数参数加剩余参数 结合使用
//const func = ({ x, y, ...z }) => {};
//func({ a: 3, x: 1, y: 2, b: 4 });

//必须是最后一个
const { x, ...z, y } = { a: 3, x: 1, y: 2, b: 4 };
console.log(x, y, z); //报错

展开运算符

1.数组的展开运算符初识

  • 认识展开运算符

  • 数组展开运算符的基本用法

1.认识展开运算符

js
[3, 1, 2];//求出这个数组的最小值
Math.min



console.log(Math.min([3, 1, 2])); //报错  所以我们要把[3, 1, 2]->3, 1, 2
console.log(Math.min(3, 1, 2)); 

let arr = [1,2,3];
console.log(...arr);

2.数组展开运算符的基本用法

js
console.log(Math.min(...[3, 1, 2]));
// 相当于
console.log(Math.min(3, 1, 2));

3.区分剩余参数和展开运算符

  • 根本区别
  • 区分剩余参数和展开运算符

1.根本区别

展开运算符

js
[3,1,2]->3,1,2

剩余参数

js
3,1,2->[3,1,2]

2.区分剩余参数和展开运算符

js
// 剩余参数
const add = (...args) => {
    console.log(args);

    //加点变成展开运算符
    console.log(...args);
    //console.log(...[1, 2, 3]);
    //console.log(1, 2, 3);
};
add(1, 2, 3);

二维数组展开变成一维数组

js
//展开运算符
console.log([...[1, 2, 3], 4]);
//[1, 2, 3]->1,2,3

4.数组展开运算符的应用

1.复制数组

js
const a = [1, 2];
const b = a;
a[0] = 3;
console.log(b); 

//使用展开运算符  浅克隆
const c = [...a];
a[0] = 3;
console.log(a);
console.log(c);

2.合并数组

js
const a = [1, 2];
const b = [3];
const c = [4, 5];

//可以指定数组的顺序
console.log([...a, ...b, ...c]);
console.log([...b, ...a, ...c]);
console.log([1, ...b, 2, ...a, ...c, 3]);

3.字符串转为数组

字符串可以按照数组的形式展开

js
console.log(...'yun');
//相当于
console.log('y', 'u', 'n');

//字符串转数组  在数组中展开字符串 
console.log([...'yunmu']);

//也可以使用
console.log('yunmu'.split(''))

4.常见的类数组转化为数组

arguments

js
function func() {
    //console.log(arguments.push);
    console.log([...arguments]);
}
func(1, 2);

NodeList

js
<p>1</p>
<p>2</p>
<p>3</p>

console.log(document.querySelectorAll('p'));
console.log([...document.querySelectorAll('p')].push);

5.对象的展开运算符

  • 展开对象

  • 合并对象

1.对象展开运算符的基本用法

1.展开对象

对象不能直接展开，必须在 {} 中展开

js
let yunmu = {
    name: "tian",
    age: 18,
    conpany: "潭州教育",
};

console.log(...yunmu); //错误
console.log([...yunmu]); //错误

//对象的展开：把属性罗列出来，用逗号分隔，放到一个 {} 中，构成新对象
console.log({ ...yunmu });
console.log({ ...yunmu } === yunmu); //展开后的对象和原来不是同一个  浅克隆

2.合并对象

js
let yunmu = {
    name: "tian",
    age: 18,
    conpany: "潭州教育",
};

let xiyan = {
    name: "夕颜",
    age: 16,
    school: "中心小学",
};



console.log({ ...yunmu }); 

console.log({ ...yunmu, ...xiyan }); //展开顺序不同结果会有不同



console.log({ ...xiyan, ...yunmu }); //新对象拥有全部属性，相同属性，后者覆盖前者


//对象的简洁表示法
console.log(  {xiyan,yunmu} );
console.log(  {...xiyan,yunmu} );
//  {
//    name: "夕颜",
//    age: 16,
//    school: "中心小学",
//    name: "tian",
//    age: 18,
//    conpany: "潭州教育",
//      }

2.对象展开运算符的注意事项

  • 空对象的展开

  • 非对象的展开

  • 对象中对象属性的展开

1.空对象的展开

如果展开一个空对象，则没有任何效果

js
console.log({ ...{} });
console.log({ ...{}, a: 1 });

2.非对象的展开

如果展开的不是对象，则会自动将其转为对象，再将其属性罗列出来

js
console.log({ ...1 });
//相当于把1转换为对象
//console.log(new Object(1))


console.log({ ...undefined });
console.log({ ...null });
console.log({ ...true });

如果展开运算符后面是字符串，它会自动转成一个类似数组的对象，因此返回的不是空对象

js
console.log({ ...'alex' });
console.log([...'alex']);
console.log(...'alex');

//如果在对象的{}展开一个数组  也会自动转成一个类似数组的对象
console.log({ ...[1, 2, 3] });

3.对象中对象属性的展开

不会展开对象中的对象属性

js
const apple = {
    feature: {
        taste: '甜'
    }
};

const pen = {
    feature: {
        color: '黑色',
        shape: '圆柱形'
    },
    use: '写字'
};

console.log({ ...apple }); //不会展开她的属性

console.log({ ...apple, ...pen });

// 相当于
console.log({
    feature: {
        color: '黑色',
        shape: '圆柱形'
    },
    use: '写字'
});

3.对象展开运算符的应用

1.复制对象

js
const a = { x: 1, y: 2 };
const b = a; 


const c = { ...a }; //展开后赋值给c
console.log(c, c === a);

2.用户参数和默认参数

js
//前面我们是解构赋值搭配函数默认值进行
const logUser = ({
    username = 'ZhangSan',
    age = 0,
    sex = 'male'
} = {}) => {
    console.log(username, age, sex);
};

我们使用对象的展开

js
const person = (userParam) => {
    const DefaultParam = {
        name: "tian",
        age: 18,
        conpany: "潭州教育",
    };

    const param = { ...DefaultParam, ...userParam };
    
    console.log(param);
    //我们也可以使用解构赋值
    //const { name, age, conpany } = { ...DefaultParam, ...userParam };
    //console.log(name, age, conpany);
};

person();

课程总结

剩余参数

数组的展开运算符

对象的展开运算符

剩余参数

...剩余参数名

剩余参数是数组

1，2 -> [1，2]

箭头函数中使用剩余参数时，不能省略圆括号

可以使用剩余参数替代arguments获取实际参数

剩余参数只能是最后一个参数

数组的展开运算符

..[]

[1，2] ->1,2.

对象的展开运算符

{.….

对象不能直接展开，必须在对象中展开

展开对象时，把属性罗列出来，用逗号分隔，放到一个 {} 中，构成新对象

展开空对象，没有任何效果

展开非对象，先转为对象，再将属性在中罗列出来

不会展开对象中的对象属性