arguments, rest parameters, es6 extension operator

arguments

  • arguments store the passed actual parameters
  • The display form of arguments is a pseudo-array that can be traversed
  • Pseudo-arrays have a length attribute, store data by index, and do not have methods such as push and pop of arrays
 function getSum(){
    
    
   // console.log(arguments);
   let sum = 0
   for(let i = 0;i<arguments.length;i++){
    
    
      s += arguments[i]
   }
 }
 getSum(2,3,4)

The use of arguments: returns the result of adding all call parameters

  • Problem description
    The function useArguments can receive 1 or more parameters. Please implement the function useArguments to return the result of adding all call parameters. The test parameters in this question are all of the Number type, and there is no need to consider parameter conversion.
  • problem solving

1. for loop

function useArguments() {
    
    
    let sum = 0;
    for(let i = 0; i < arguments.length; i++){
    
    
        sum += arguments[i];
    }
    return sum;
}

2. Since arguments are just array-like and do not have some methods of arrays, arguments can be converted into arrays for accumulation

function useArguments() {
    
    
    let arr = [...arguments];
    return arr.reduce((total, num)=> total += num)
}

rest parameter

  • Store the parameters in the form of an array
  • The remaining parameters can only be written at the end, other parameters cannot be written after the remaining parameters
function sum(a,b,...other){
    
    
   console.log(other);
}
sum(1,3,5,6)
// 剩余参数的写法...args(名称随意)
const sum=(a,b,...args)=>{
    
    
  // 使用的时候只用args
  console.log(a,b,args)
};
sum(1,2,1,4);//1 2 Array(2)

Use of remaining parameters

Arguments can be replaced by remaining parameters (arguments cannot be used in arrow functions)

const fun=function(){
    
    
   console.log(arguments);
}
fun(1,2,3);//Arguments(3),类数组
// 使用剩余参数在箭头函数中使用
const fun1=(...args)=>{
    
    
   console.log(args);
}
fun1(1,2,3,4);//(4) [1, 2, 3, 4]

Used with destructuring assignment of objects and arrays

// 与数组解构赋值
const [a,...args]=  [11,22,33];
console.log(a,args);  // 11 Array(2)
// 与对象解构赋值
const {
    
    age,...args1}={
    
    age:12,name:"xiaoming",sex:"nan"};
// args1是剩余元素
console.log(age,args1);// 12 object

The spread operator...

  • Convert an array to a comma-separated sequence of arguments
  • Array expansion without changing the original array
  • The shallow copy is implemented through the extension operator, and the value pointed to by the reference is modified, which will be reflected in the new array synchronously
  • Objects that define the Iterator interface can be converted into real arrays with the extension operator. If the extension operator is used for an object without the Iterator interface, an error will be reported

Find the most value of the array and merge the array

const arr = [1,2,3]
console.log(...arr);
// 典型运用场景:求数组最值、合并数组
console.log(Math.max(...arr));
const arr1 = [2,3,4]
//数组的合并
const arr2 = [...arr, ...arr1]
console.log(arr2);

array copy

// 复制数组,原数组改变不影响被复制的数组
const a=[11,2,2,3]  
const b=a;
const c= [...a];
a[0]=18;
console.log(b);  // [18,2,2,3] 
console.log(c);// [11,2,2,3] 

Convert class array to array

// 箭头函数是使用不了arguments
// const fun=()=>console.log(arguements);
const fun=function(){
    
    
   a=([...arguments]);
   a.push(22);
   console.log(a);//(4) [11, 22, 33, 22]
}
fun(11,22,33);

expand the string

console.log(..."hello")   // h e l l o

Object Expansion, Object Merging

const people={
    
    
   name:"xiaoming",
   age:12
}
const people1={
    
    ...people}
console.log(people1===people);//fales

const apple={
    
    
   clor:"green",
   shape:"big"
}
const apple1={
    
    
   clor:"red",
   shape:"big",
   height:12
}
console.log({
    
    ...apple,...apple1}); //{clor: "red",height: 12,shape: "big"}

copy object

const people={
    
    
    name:"xiaoming",
    age:12,
}
const people1=people;
const people2={
    
    ...people};
people.age=14;
console.log(people1);  //{age:14,name:"xiaoming"}
console.log(people2);  //{age:12,name:"xiaoming"}

Guess you like

Origin blog.csdn.net/qq_50630857/article/details/132453474