版权声明:转发博客 请注明出处 否则必究 https://blog.csdn.net/lucky541788/article/details/82708415
1.内置对象扩展
显示一行 不方便观看
{
let html='<body>' +
'<p>good luck</p>' +
'</body>';
console.log(html);//<body><p>good luck</p></body>
}
模板字符串 (好处:1.方便观看 2.内容方便改写)
{
let str='hello world';
let className='text';
let html=`<body>
<p>good luck</p>
<p class="${className}">${str}</p>
<p class="cc">${str}</p>
</body>`;//可以外置修改class;
console.log(html);
/*
<body>
<p>good luck</p>
<p class="text">hello world</p>
<p class="cc">hello world</p>
</body>
*/
}
2.数组扩展
Array.from(伪数组转换真数组)
{
let allLis=document.querySelectorAll('li');
console.log(allLis);//NodeList(6) [li, li, li, li, li, li]
console.log(Array.isArray(allLis));//false 伪数组
let newLis=Array.from(allLis);
console.log(newLis);//(6) [li, li, li, li, li, li]
console.log(Array.isArray(newLis));//true 数组
}
Array.of
{
console.log(Array.of(1, 2, 3, 4));//(4) [1, 2, 3, 4]
console.log(Array.of('bob', 'lucy', 'tom'));//(3) ["bob", "lucy", "tom"]
}
3.对象的扩展
key 和 value是一样的,写一个就够了
{
let name='bob';
let age=20;
let obj={
name,
age
};
console.log(obj);//{name: "bob", age: 20}
}
Object.assign() (合并对象)
{
let obj1={'name':'lucy'};
let obj2={'age':20};
let obj3={'sex':'man'};
let obj4={'friends':'bob'};
let obj={};
Object.assign(obj,obj1,obj2,obj3,obj4);
console.log(obj);//{name: "lucy", age: 20, sex: "man", friends: "bob"}
}
延展操作符(拆解作用)
{
//拆解字符串
let str='hello world';
let strAll=[...str];
console.log(strAll);//(11) ["h", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d"]
}
{
let student={
name:'lucy',
age:20,
sex:'women'
};
//1.高效传递数据
console.log({...student});//{name: "lucy", age: 20, sex: "women"}
//2.去除重复元素
let myArr=[1,2,3,2,3,'234',56,2];
console.log(new Set(myArr));//伪数组:Set(5) {1, 2, 3, "234", 56}
//伪数组转真数组
console.log([...new Set(myArr)]);//数组:(5) [1, 2, 3, "234", 56]
}