JS扩展操作符

能笑绝不哭
177 阅读4分钟

1.字符串转数组

普通写法

let str='hello';
let arr=str.split('');
console.log(arr) //['h','e','l','l','o']

扩展

  let str='hello';
  let arr=[...arr];
  console.log(arr);//['h','e','l','l','o']

2.将类数组转换为数组

类数组有哪些呢？以下这些可以看成是类数组：

NodeList：document.querySelectorAll() 返回的对象； HTMLCollection：document.getElementsByTagName() 返回的对象； Arguments：函数里的参数对象；

类属猪没有数组的一些方法比如 push ,map等 ，所以经常需要将它们转成数组。

普通转法


<script>

    //第一种
    let nodeList=document.querySelectorAll('div');
    console.log(nodeList instanceof NodeList);//true

    let arr=Array.apply(null,nodeList);
    console.log(arr instanceof Array); //true

    // 第二种
    let arr2=[].slice.call(nodeList);
    console.log(arr2 instanceof Array); //true

    //第三种
    let arr3=Array.from(nodeList);
    console.log(arr3 instanceof Array);//true
</script>

扩展

<script>
    let nodeList=document.querySelector('div');
    let arr=[...nodeList];
    console.log(arr instanceof Array);//true
</script>

3.向数组中添加项

普通写法

<script>
  let arr=[5];
//   从头部添加
arr.unshift(1,2);
console.log(arr);//[1,2,5]

// 从尾部添加
  arr.push(6,7);
  console.log(arr);//[1,2,5,6,7]

//   从任意位置添加
arr.splice(2,0,3,4);
console.log(arr);// [1, 2, 3, 4, 5, 6, 7]
    
</script>

扩展


let arr=[3,4];
arr=[1,2,...arr,5,6];
console.log(arr);//[1, 2, 3, 4, 5, 6]

4.拷贝数组和对象

普通写法


// 第一种
let arr=[1,2,3,4];
let arr2=arr.concat();


// 第二种
let arr3=arr.slice();
arr[0]=2;
console.log(arr);//[2, 2, 3, 4]
console.log(arr2);// [1, 2, 3, 4]
console.log(arr3);//[1, 2, 3, 4]
</script>

扩展

let arr=[1,3,4,7,8];
let arr2=[...arr];

console.log(arr2);//[1, 3, 4, 7, 8]

拷贝对象

普通写法

let person={
    name:'张三',
    age:12,

};
let p2=Object.assign({},person);
person.age=20;
console.log(person);//{name: '张三', age: 20}
console.log(p2);//{name: '张三', age: 12}

扩展

let person={
    name:'张三',
    age:12,
};
let p2={...person};
person.age=20;
console.log(person);//{name: '张三', age: 20}
console.log(p2);//{name: '张三', age: 12}


</script>

5.合并数组或者对象

普通写法

let arr1=[1,4,6];
let arr2=[3,7,9];
let arr3=arr1.concat(arr2);
console.log(arr3);// [1, 4, 6, 3, 7, 9]

扩展

let arr1=[1,4,6];
let arr2=[3,7,9];
let arr3=[...arr1,...arr2];
console.log(arr3);//[1, 4, 6, 3, 7, 9]

合并对象

普通写法

let p1={
    name:'张三'
};
let p2={
    age:12
};
let p3=Object.assign({},p1,p2);
console.log(p3);//{name: '张三', age: 12}

扩展

let p1={
    name:'张三'
};
let p2={
    age:12
};
let p3={...p1,...p2};
console.log(p3);//{name: '张三', age: 12}

6.解构对象

普通写法

let person={
    name:'张三',
    age:12,
    sex:'男'
};
let name=person.name;
let age=person.age;
let sex=person.sex;

扩展

let person={
    name:'张三',
    age:12,
    sex:'男'
};

let {...arr}=person;
console.log(arr);//{name: '张三', age: 12, sex: '男'}
// let {name,...reset}=person;
// console.log(name);//张三
// console.log(reset);//{age: 12, sex: '男'}

7.给对象添加属性

普通写法

let person={
    name:'张三',
    age:12
};
person.sex='男';
console.log(person);//{name: '张三', age: 12, sex:

扩展

let person={
    name:'张三',
    age:12
};
person.sex='男';
// console.log(person);//{name: '张三', age: 12, sex: '男'}

person={...person,sex:'男'};
console.log(person);//{name: '张三', age: 12, sex:

给对象设置默认值

// 默认person 对象 的age 属性值为12
let person = {age:12,...{name:'张三'}};
console.log(person);//{age: 12, name: '张三'}

重写对象


let person={name:'张三',age:12};

// person对象的age属性被重写为20
person={...person,age:20};
console.log(person);//{name: '张三', age: 20}

8.设置对象Getter

普通写法

let person={
    name:'张三'
};
Object.defineProperty(person,'age',{
    get() {return 12},
    Enumerator:true,
    configurable:true
});
console.log(person.age);//12

扩展

let person={
    name:'张三'
};
person={
    ...person,
    get age(){return 12}
}
console.log(person.age);//12

9.将数组作为函数参数展开

普通写法

let arr=[1,3,6];
function fn(a,b,c){
    fn.apply(nill,arr);
}

扩展


let arr=[1,3,6];
function fn(a,b,c){
}
fn(...arr);

10.无限参数的函数

如果有这么一个累加函数，他会把所有传递进来的参数都加起来，普通做法是把参数都整合到数组里，然后这样做：

function doSum(arr){
    return arr.reduce((acc,cur)=>acc+cur)
};
console.log(doSum([1,3]));//4
console.log(doSum([1,3,5]));//9

如果参数不是数组，而是需要一个个传递，相当于函数必须支持无限参数，那可能会这么做：

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

    // 或者
    // let args=[].slice.call(arguments)
    // return args.reduce((acc,cur)=>acc+cur);
};
console.log(doSum(1,3));//4
console.log(doSum(1,3,5));//9
console.log(doSum(1,3,5,7));//16

扩展

function doSum(...arr){
    return arr.reduce((acc,cur)=>acc+cur);
};
console.log(doSum(1,3));//4
console.log(doSum(1,3,5));//9
console.log(doSum(1,3,5,7));//16

11.扩展函数的剩余参数

有的时候一个函数需要传递很多的参数，比如小程序页面（WePY）的 onLoad 生命周期函数里就可能有很多别的页面传递过来的参数，然后还需要在函数里进行一些数据初始化工作，这样一来就会显得很臃肿不美观，比如：

function init(a,b,x,y){
    // 进行一系列初始化数据工作
}

扩展

function other(x,y){};
function init(a,b,...restConfig){
    // 使用a 和 b参数进行操作
    // 其余参数传给原始函数
    return other(...restConfig)
}

12.结合Math函数使用

当需要对一个数组求最大值的时候，通常会这么做：

let arr=[3,4,5,6]
function max(arr){
    return [].concat(arr).sort((a,b)=>b-a);
};
console.log(max(arr)[0]);//6

// 第二种
arr.reduce((acc,cur)=>Math,max(acc,cur));//6

// 第三种
Math,max.apply(null,arr);//6

扩展

let arr=[1,4,8,9,2];
let max=Math.max(...arr);
console.log(max);//9

13.在new表达式中使用

假设有一个数组格式的日期，想要通过 Date 构造函数创建一个日期实例的话，可能会这么做：

let arr=[2021,1,1];
let date=new Date([].toString.call(arr));
console.log(date);//Fri Jan 01 2021 00:00:00 GMT+0800 (GMT+08:00)


// 第二种
let date2=new (Function. prototype.bind.apply(
    Date, 
    [null].concat(arr)
));
console.log(date2);//Mon Feb 01 2021 00:00:00 GMT+0800 (GMT+08:00)

扩展

let arr=[2021,1,2];
let date=new Date(...arr);
console.log(date);//Tue Feb 02 2021 00:00:00 GMT+0800 (GMT+08:00)
avatar
文章
阅读
粉丝