Vue2.6老项目升级至2.7并使用组合式Api写法记录

类数组对象

拥有一个length属性和若干索引属性的对象就是类数组对象。
例如：

let array = ['name', 'age', 'sex'];
let arrayLike = {
  0: 'name',
  1: 'age',
  2: 'sex',
  length: 3
}

• 读写

  console.log(array[0]); // name
  consoel.log(arrayLike[0]); // name
  

• 长度

  console.log(array.length); // 3
  console.log(arrayLike.length); // 3
  

• 调用数组方法

  let arrayLike = {0: 'name', 1: 'age', 2: 'sex', length: 3 }
  
  Array.prototype.join.call(arrayLike, '&'); // name&age&sex
  
  Array.prototype.slice.call(arrayLike, 0); // ["name", "age", "sex"] 
  // slice可以做到类数组转数组
  
  Array.prototype.map.call(arrayLike, function(item){
      return item.toUpperCase();
  }); 
  // ["NAME", "AGE", "SEX"]
  

• 类数组转数组

  let arrayLike = {
    0: 'name',
    1: 'age',
    2: 'sex',
    length: 3
  }
  // 1. slice
  Array.prototype.slice.call(arrayLike); // ['name', 'age', 'sex']
  // 2. splice
  Array.prototype.splice.call(arrayLike, 0); // ['name', 'age', 'sex']
  // 3. ES6 Array.from
  Array.from(arrayLike); // ['name', 'age', 'sex']
  // 4. apply
  Array.prototype.concat.apply([], arrayLike)
  

Arguments 对象

Arguments 对象只定义在函数体中，包括了函数的参数和其他属性。在函数体中，arguments 指代该函数的 Arguments 对象。
例如：

function foo(name, age, sex){
  console.log(arrguments);
}
foo('name', 'age', 'sex');

Arguments(3) ['name', 'age', 'sex', callee: ƒ, Symbol(Symbol.iterator): ƒ]
0: "name"
1: "age"
2: "sex"
callee: ƒ foo(name, age, sex)
length: 3
Symbol(Symbol.iterator): ƒ values()
[[Prototype]]: Object

• length属性
  Arrguments对象的length属性，表示实参长度

• callee属性
  Arguments对象的callee属性，通过它可以调用函数自身。

• 注意要点

  function foo(name, age, sex, hobbit) {
    console.log(name, arguments[0]); // name name
    // 改变形参
    name = 'new name';
    console.log(name, arguments[0]); // new name new name
    // 改变arguments
    arguments[1] = 'new age';
    console.log(age, arguments[1]); // new age new age
    // 测试未传入的是否会绑定
    console.log(sex); // undefined
    sex = 'new sex';
    console.log(sex, arguments[2]); // new sex undefined
    arguments[3] = 'new hobbit';
    console.log(hobbit, arguments[3]); // undefined new hobbit
  }
  foo('name', 'age')
  

  传入的参数，实参和 arguments 的值会共享，当没有传入时，实参与 arguments 值不会共享

在严格模式下，实参和 arguments 是不会共享的。

• 应用
  1. 将参数从一个函数传递到另一个函数

  // 使用 apply 将 foo 的参数传递给 bar
   function foo() {
       bar.apply(this, arguments);
   }
   function bar(a, b, c) {
     console.log(a, b, c);
   }
  
   foo(1, 2, 3)
  

  2. 使用ES6的 ... 运算符，我们可以轻松转成数组

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

  3. 参数不定长
  4. 函数柯里化
  5. 递归调用
  6. 函数重载

---

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 chaoyumail@126.com