变量解构赋值,扩展运算符,rest参数比较

365 阅读2分钟

rest参数:就是用'...变量名'的形式替代了函数参数中的arguments对象,大概用法如下:

function testFn (fist, ...rest) {
    console.log(fist);  //1
    console.log(rest);  //[2,3,4,5]
}
testFn(1,2,3,4,5);

两种写法

// arguments写法
function add1(){
    var sum = 0;
    Array.prototype.slice.apply(arguments).forEach( function(item){
        sum += item;
    })
    console.log(sum)
}
add1(1,2,3); //6

// rest参数写法
function add2(...valus) {
    let sum = 0;
    valus.forEach( value => {
        sum += value
    })
    console.log(sum)
}
add2(1,2,3);  //6

扩展运算符:扩展运算符就可以把它理解为rest参数的逆运算,将一个数组转为用逗号分隔的参数序列:

console.log(...[1,2]);  //1,2
console.log(8, ...[1,2], 9);  //8,1,2,9

再将rest参数和扩展运算符结合起来

function test3 (...rest) {
    console.log(rest)  // [1,2,7]
}
var nums = [1,2,7];
test3(...nums); 

替代数组中的apply

var arr4 = [1,2,3];
function test4 (a, b, c) {
    console.log(a)
}
// ES5写法
test4.apply(null, arr4);
// ES6写法
test4(...arr4);

合并数组

var arr1_ = [1];
var arr2_ = [2,3];
var arr3_ = [4,5];
// ES5
var arr4_ = arr1_.concat(arr2_, arr3_);
console.log(arr4_);  //[1, 2, 3, 4, 5]
// ES6
var arr5_ = [...arr1_, ...arr2_, ...arr3_]
console.log(arr5_);  //[1, 2, 3, 4, 5]

rest运算符和spread运算符的区别

对于三个点号,三点放在形参或者等号左边为rest运算符; 放在实参或者等号右边为spread运算符,

或者说,放在被赋值一方为rest运算符,放在赋值一方为扩展运算符

结构赋值:解构的作用是可以快速取得数组或对象当中的元素或属性,而无需使用arr[x]或者obj[key]等传统方式进行赋值

数组的解构赋值

let [a, b, c] = [1, 2, 3];
console.log(a);  //1

对象的解构赋值

let { foo, bar } = { foo: "aaa", bar: "bbb" };
console.log(foo);  //"aaa"

字符串的解构赋值

const [a, b, c, d, e] = 'hello';
a // "h"
  • 数值和布尔值的解构赋值
  • 函数参数的机构赋值

改变this指向方法call,apply,bind

apply() 方法接收两个参数:一个是在其中运行函数的作用域,另一个是参数数组。其中,第二个参数可以是 Array 的实例,也可以是arguments 对象。call() 方法与 apply() 方法的作用相同,它们的区别仅在于接收参数的方式不同。对于 call()
方法而言,第一个参数是 this 值没有变化,变化的是其余参数都直接传递给函数。换句话说,在使用call() 方法时,传递给函数的参数必须逐个列举出来。
bind(),它会创建一个函数的实例,其this值会被绑定到传给bind()函数的值。
this是javascript的一个关键字,随着函数使用场合不同,this的值会发生变化。但是总有一个原则,那就是this指的是调用函数的那个对象。

call 方法第一个参数是要绑定给this的值,后面传入的是一个参数列表。当第一个参数为null、undefined的时候,默认指向window。
var arr = [1, 2, 3, 89, 46]
var max = Math.max.call(null, arr[0], arr[1], arr[2], arr[3], arr[4])//89