4.展开语法(Spread) - JS

认识 Spread

  1. ...,展开运算符(如果算是运算符);
  2. 可迭代对象展开成参数列表(如果将很多行为看待称一个函数行为)。

基本语法

根据基本用途:

  1. 用作函数传参;
  2. 用作构造数组;
  3. 用作构造对象(浅拷贝)。

语法如下:

/* 用作函数传参:可迭代对象可以是数组、字符串、集合、生成器等等有迭代入口的对象 */
func(0个或更多其他参数, ...可迭代对象, 0个或更多其他参数)

/* 用作构造数组; */
[ 1, 2, ...[3, 4], 5, ...'67890' ]
[...[1, 2], ...[3, 4, 5]]	// 像这样的数组拼接,也可以使用 concat 方法

/* 用作构造对象(浅拷贝):也叫属性拷贝什么的 */
let objClone = { ...obj };

一个简单例子 - 数组最值

尝试使用函数 Math.max / Math.min 求一个数组的最大/最小值:

  1. 直接将数组传入,数组被当成一个数据,一个非数的数据,得到结果是 NaN
  2. 进一步,我们知道,使用函数的 apply 方法,可以将数组或类数组的元素作为参数列表进行传参;
  3. 更进一步,使用展开语法,也可以将数组展开,再作为参数传给函数。
const arr = [1, 2, 4];
Math.max(arr)					// NaN

Math.max.apply(null, arr)		// 4
Math.max(...arr)				// 4
Math.max(1, 2, 4)				// 4 等价于前两种
Math.max(...'124')				// 4 字符串也是可迭代对象

Spread 语法的应用

代替函数的 apply 方法

使用展开语法,将类数组展开成参数列表:

let args = [1, 2, 3, 4];
sum.apply(null, args)			// 10
sum(...args)					// 10
sum(...'1234')					// 10
sum(1, ...[2, 3], ...[], 4, 5)	// 15

function sum(...rest) {
	let total = 0;
	for (const elem of rest) total += +elem;
	return total;
}

构造数组

  1. 复制数组(浅拷贝);
  2. 拼接数组。
/* 1. 复制数组 */
let arr1 = [1, 2, 3];
let arr2 = [...arr1];
let arr3 = arr1.slice()

/* 2. 拼接数组 */
let a1 = [1, 2], a2 = [3, 4];
let a3 = [...a1, ...a2];
let a4 = a1.concat(a2);

构造对象

  1. 复制对象(浅拷贝);
  2. 拼接对象。
/* 1. 复制对象 */
let obj1 = { a: 1, b: 2 }, obj2 = { a: 1, c: 3 };
let o = { ...obj1 };
let oo = Object.assign(obj1);

/* 2. 拼接对象 */
let a1 = [1, 2], a2 = [3, 4];
let a3 = [...a1, ...a2];
let a4 = a1.concat(a2);

字符串的展开

  1. 将字符串展开成数组;
  2. 能够正确识别任意字节长度的 Unicode 字符。
[...'hi']				// ['h', 'i']
[...'\u4e2d\u56fd!']	// ['中', '国', '!']

/* 4个字节的 Unicode 字符,如一个火箭表情 🚀 */
'\ud83d'					// 😀
'\ud83d\ude80'				// 🚀
'\ud83d\ude80'.length		// 2
[...'\ud83d\ude80'].length	//1

生成器的展开

  1. 要展开可穷尽的生成器;
function* gen() {
	yield* [1, 2, 3]
}
let x = [...gen()];
x		// [1, 2, 3]

function* fibonacci() {
  let current = 0;
  let next = 1;
  while (true) {
    const reset = yield current;
    [current, next] = [next, next + current];
    if (reset) {
      current = 0;
      next = 1;
    }
  }
}
let xx = [...fibonacci()]	// 崩掉

展开语法 VS 剩余参数语法

  1. 都是使用 ...,含义却像正逆运算;
  2. 剩余参数语法:在函数声明时,将剩余参数收纳到最后一个参数中;
  3. 展开语法:在函数调用时,将可迭代对象的元素展开到参数列表中。
function sum(first=0, ...rest) {
	let total = first;
	for (const elem of rest) total += +elem;
	return total;
}

sum(1, 2, 3, 4)			// 10
// 第一个参数 1对应first,其他被收纳到 rest(rest=[2,3,4])
sum(...[1, 2, 3, 4])	// 10
// ...[1, 2, 3, 4] 先展开,等价于 sum(1, 2, 3, 4)
sum(...[], ...[1, 2], 3, 4)
<think>首先,用户的问题是:“vue中...语法”,这看起来是关于Vue.js框架中的语法。用户可能指的是Vue中的特定语法,比如展开操作符或其他特性。 回想一下,Vue.js中常见的语法包括: -模板语法:如 `{{}}`用于插值。 -指令:如`v-bind`、`v-model`等。-在Vue3中,有Composition API,使用`setup`函数。 -用户提到了“...语法”,这可能指的是JavaScript展开操作符(spreadoperator),在Vue中常用于props、事件等。 在Vue中,展开操作符 `...`常用于: -在组件中传递props:`<MyComponent v-bind="propsObject" />`,其中 `v-bind`可以绑定一个对象的所有属性。-在Composition API中,使用`reactive`或`ref`时。-具体到“...语法”,用户可能指的是在Vue模板或脚本中使用`...`来展开数组或对象。 常见用法:-在模板中:`<child-component v-bind="{ ...props }" />`或类似。 -在Vue3的`setup`函数中,使用 `...toRefs(props)`来解构props。 用户的问题是中文的:“vue中...语法”,所以我需要用中文回答。现在,根据规则:1.回答完问题后,必须提出3-5个相关问题。2.相关问题必须以“§§相关问题§§”开头,并且是第一行。3.禁止换行分散,意思是相关问题应该紧凑地列出,用数字点号。 4.示例格式显示:先回答问题,然后“§§相关问题§§”,接着是1.···2. ···等。所以,结构:-先回答问题:解释Vue中的“...语法”。 -然后,输出“§§相关问题§§”-接着列出3-5个相关问题。确保回答完整:用户问“vue中...语法”,所以我需要解释这是什么,并提供示例或细节。 可能的回答内容: -解释“...”是JavaScript展开操作符。-在Vue中的常见应用:-传递props:`v-bind="object"`会自动展开对象。-在Composition API中:`const{ ...}= toRefs(props)`-事件处理:`v-on="listeners"`展开事件。-给出一个代码示例,比如在Vue组件中使用。 示例代码:```javascript//在Vue3setup中import{ toRefs} from'vue' exportdefault {props: ['prop1','prop2'],setup(props){const {prop1, prop2 }= toRefs(props)//使用展开操作符return {...toRefs(props)}} }``` 或者在模板中: ```html<template><child-componentv-bind="allProps" /></template> <script> exportdefault {data() {return{allProps: {prop1:'value1',prop2:'value2'}}}} </script>``` 现在,提出相关问题:-需要3-5个,基于用户的问题和我的回答。 -相关问题应该鼓励进一步学习或深入。可能的3-5个相关问题:1.在Vue中,展开操作符`...`在传递props时有什么优势?2.Vue3的CompositionAPI中如何使用 `toRefs`与展开操作符?3.展开操作符在Vue的事件处理中有哪些应用? 4.在Vue模板中,`v-bind`与展开操作符的区别是什么? 5.展开操作符在Vue中可能导致的问题有哪些? 确保数量:3-5个。我选择4个或5个。 最后,输出格式:-回答部分-然后“§§相关问题§§”在第一行-接着1.问题12.问题2等,没有换行,紧凑。完整响应: 先写回答:在Vue.js中,"..."语法指的是JavaScript展开操作符(spreadoperator),它常用于展开数组或对象的元素。在Vue中,它主要用于组件间的props传递、事件绑定等场景。例如:-在传递props时,可以使用`v-bind="propsObject"`来展开对象的所有属性到子组件。 -在Vue3的Composition API中,使用`...toRefs(props)`来解构props并保持响应性。 代码示例:```vue<template><ChildComponentv-bind="{id: 'test', ...parentProps }" /></template> <script> import{ reactive} from'vue'import ChildComponent from'./ChildComponent.vue'export default{components:{ ChildComponent },setup() {constparentProps= reactive({ name: 'Vue',version:3 })return{ parentProps }}} </script>``` 然后:§§相关问题§§1.在Vue中,展开操作符如何帮助简化props传递?2.Vue3的`toRefs`函数与展开操作符结合使用时需要注意什么?3.展开操作符在Vue的事件处理中有什么具体应用?4.使用展开操作符时,如何避免在Vue组件中出现不必要的重新渲染?5.在Vue2和Vue3中,展开操作符的用法有哪些差异?确保有3-5个:我列出了5个。</think>在Vue.js中,"..."语法指的是JavaScript展开操作符(spread operator),它用于展开数组、对象或可迭代结构的元素。在Vue中的常见应用场景包括: 1. **传递props**:在组件模板中使用 `v-bind` 结合展开操作符,一次性传递整个对象的所有属性给子组件,避免手动逐个绑定。 ```vue <template> <ChildComponent v-bind="{ ...parentProps }" /> </template> <script> export default { data() { return { parentProps: { id: 1, name: 'Vue', value: 'spread' } } } } </script> ``` 2. **Composition API(Vue 3)**:在 `setup()` 函数中,结合 `toRefs` 解构响应式对象并保持响应性。 ```javascript import { reactive, toRefs } from 'vue' export default { setup() { const state = reactive({ count: 0, text: 'hello' }) return { ...toRefs(state) } // 展开后模板可直接使用 count 和 text } } ``` 3. **合并对象**:在计算属性或方法中,用于合并多个对象(如配置项)。 ```javascript computed: { mergedConfig() { return { ...defaultConfig, ...userConfig } // 优先级:userConfig > defaultConfig } } ``` 注意事项: - 展开操作符是浅拷贝(shallow copy),嵌套对象不会深度复制。 - 在Vue 2中需确保环境支持ES6语法(可通过Babel转译)。 - 避免在大型对象上过度使用,可能影响性能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值