美文网首页
js中的展开语法/剩余语法

js中的展开语法/剩余语法

作者: 乔一丁_2020强化班 | 来源:发表于2020-12-27 16:04 被阅读0次

展开语法(Spread syntax)

  • 可以在函数调用/数组构造时, 将数组表达式或者string在语法层面展开

  • 可以在构造字面量对象时, 将对象表达式按值键对的方式展开(字面量一般指 [1, 2, 3] 或者 {name: "mdn"} 这种简洁的构造方式)

  • 展开语法使用次数不限,但函数传值的限制为25个参数

语法

//函数调用
myFunction(...iterableObj);
//字面量数组构造或 字符串 :
[...iterableObj, '4', ...'hello', 6];
//构造字面量对象时,进行克隆或者属性拷贝(ECMAScript 2018规范新增特性)
let objClone = { ...obj };

用法

1.等价于Function.apply(),传入数组,会被迭代为函数的参数

function func(a,b,c){}
var arr = [1,2,3];
func.apply(null,arr);
//等价于
function func(a,b,c){}
var arr = [1,2,3];
func(...arr);

2.在构造时(此时传值不同于apply,因为它调用的是Call而不是Construct)

function applyAndNew(constructor, args) {
  function partial () {
    return constructor.apply(this, args);
  };
  if (typeof constructor.prototype === "object") {
    partial.prototype = Object.create(constructor.prototype);
  }
  return partial;
}

3.构造字面量数组/对象

//拷贝数组
var arr = [1, 2, 3];
var arr2 = [...arr]; // 像是arr.slice()
/*实际上, 展开语法和 Object.assign() 行为一致, 
执行的都是浅拷贝(只遍历一层)。
如果想对多维数组进行深拷贝还需要自己写历遍*/
var a = [[1], [2], [3]];
var b = [...a];
b.shift().shift(); // 1
// Now array a is affected as well: [[], [2], [3]]
object.assign(target,src);
//将src(可枚举属性)的值复制到target,并返回target

相关文章

  • js中的展开语法/剩余语法

    展开语法(Spread syntax) 可以在函数调用/数组构造时, 将数组表达式或者string在语法层面展开 ...

  • js展开语法和剩余参数

    展开语法: 函数调用:myFunction(...iterableObj); 字面量数组构造或字符串:[...it...

  • JSX语法

    在react中,在js文件里写html标签,我们把这种语法称为 jsx语法。 jsx语法与普通js语法的区别 普通...

  • 函数的剩余参数和展开语法

    1. 函数的剩余参数(函数定义的时候) 功能:将参数序列转换为数组 2.展开语法 功能: 将数组展开为序列 使用场...

  • 【ES6基础】展开语法(Spread syntax)

    展开语法用"..."进行表示,展开语法将可迭代的对象拆分成单个的值(语法层面展开)。 展开语法通常用于将可迭代的对...

  • jsx语法

    什么是jsx语法 html写在js中而且不用加任何引号. 遇见<>按html语法解析,遇见{ }按js语法解析。 ...

  • 展开语法

    关于vuex ...mapActions的问题 展开语法

  • ...展开语法

    展开语法 可以在函数调用/数组构造时, 将数组表达式或者string在语法层面展开;还可以在构造字面量对象时, 将...

  • 展开语法

  • react-jsx

    jsx 是类似 js 模板语法 声明 jsx 使用 jsx jsx 语法 jsx 是 js 的语法扩展,在 jsx...

网友评论

      本文标题:js中的展开语法/剩余语法

      本文链接:https://www.haomeiwen.com/subject/bzmonktx.html