<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>解构.箭头函数.剩余参数.Array扩展方法.Set</title>
</head>
<body>
<button>hh</button>
<script>
// 1-数组解构
// 00数组解构允许我们一一解构，数量一致,多余的没有对应的值，就为undefined
console.log("数组解构");
let [a,b,c,d]=[1,2,3];
console.log(a);//1
console.log(b);//2
console.log(c);//3
console.log(d); //undefined
console.log("对象解构");
//01对象解构 没有的属性解构为undefined
let person={
name:'lhm',
age:18
}
//对象解构1
let {name,age,sex}=person;
console.log(name);//lhm
console.log(age);//18
console.log(sex);//undefined
console.log("----------");
//对象解构2
let {name:myName,age:myAge,sex:mySex}=person;
console.log(myName);
console.log(myAge);
console.log(mySex);
console.log("----------");
// 2-箭头函数
const fn=()=>{
console.log(123);
};
fn();
// 箭头函数
let sum=(n1,n2)=>{
return n1+n2; //只有一句代码，可以简化
};
console.log(sum(3,4));
// 00箭头函数的简化1
let sum2=(n1,n2)=>n1+n2;
console.log(sum2(4,4));
// 00箭头函数的简化2
let sum3=n1=>n1+6; //只有一个参数，可以简化括号
console.log(sum3(3));
// 01箭头函数中的this指向，箭头函数指向的是上下文的this
let sum5=n1=>{
console.log(this);//window
}
sum5();
let father={
name:'爸爸',
age:18
}
function fn2(x,y){
console.log("fn2的执行");
console.log(this);
return ()=>{
console.log("箭头函数的执行");
console.log(this);//箭头函数指向的是上下文的this，在这里就是上两行那个this
console.log(x+y);
}
}
let fn3=fn2.call(father,2,4); //call改变this指向便调用函数
fn3(); //执行箭头函数
// 02箭头函数面试题
var obj={
name:'gg',
say:()=>{
console.log(this.name); //对象本身没有this指向
}
}
obj.say();//undefined
// 通过call改变this指向便可以
function fn4(){
console.log(this.name);
}
fn4.call(obj);//gg
// 习题
let btn=document.querySelector("button");
// btn.onclick = () => {console.log(this);} //window 上文this就是window
btn.onclick = function(){console.log(this);}//btn 函数中的this指向调用者
//3-剩余参数...args 在箭头函数中不能用argument
const fn6=(x,...args)=>{
console.log(x);//1
console.log(args);//[2,3,4]
console.log(...args);//2,3,4
console.log("-----------")
}
fn6(1,2,3,4);
// 例子：求和
const s=(...args)=>{
let t=0;
args.forEach(item=>t+=item); //箭头函数简化写法 一个参数不写括号 一个内容省略return
return t;
}
console.log(s(1,2,3,4,5));
// 4-解构和剩余参数结合运用
let family=['lhm','ljt','ljp','ljx'];
let [s1,...s2]=family;
console.log(s1);//lhm
console.log(s2);//['ljt','ljp','ljx'];
//5-扩展运算符 拆分成逗号分割的参数序列
console.log(...family); //lhm ljt ljp ljx
// 扩展运算符的运用 数组合并
let arr1=[1,2,3];
let arr2=[4,5,6];
let arr3=[...arr1,...arr2];//或者arr1.push(...arr2); console.log(arr1);
console.log(arr3);
// 6-Array扩展方法
// 00 Array.from 将类数组！！或可以遍历的对象！！转换为数组 如下形式的数组
var obj6 = {
"0":2,
"1":200,
"length":2
}
var newArr6=Array.from(obj6);
console.log(newArr6);
// 转换为数组且遍历
var newArr7=Array.from(obj6,item=>item*2);
console.log(newArr7);
//01 Array.find()进行查找 找出第一个符合条件的成员 没有返回undefined
let arr7=[{
id:1,
name:'lhm'
},{
id:2,
name:'ljt'
}]
let target=arr7.find(item=>item.id==2);
console.log(target); //{id:2,name:'ljt'}
// 02 findIndex 返回符合条件的索引
let index=arr7.findIndex(item=>item.name=='ljt');
console.log(index);
// 03 includes方法 true包含 false不包含 判断数组中是否有这个值
let arr8=[1,2,3,4];
console.log(arr8.includes(3)); //true
console.log(arr8.includes([2,3])); //false
console.log(arr8.includes(8));//false
console.log("----------")
// 8-Set数据结构 类数组 但是没有重复的值 常在搜索历史中使用
// 创建
let ss2=new Set();
console.log(ss2.size);//0
let ss3=new Set(['name','age']);
console.log(ss3.size);//2
// 常用数组去重
let ss4=new Set(['a','a','b','b']);
console.log(ss4.size);//2
let newArr4=[...ss4];
console.log(newArr4);
// Set方法 add delete has clear 遍历forEach
ss4.add('c').add('c').add('e');
console.log(ss4.size);//4
ss4.delete("b");//返回布尔值 代表是删除成功
console.log(ss4.size);//3
ss4.has("c");//返回布尔值 代表是否拥有
console.log(ss4.has("c"));
console.log("Set遍历");
ss4.forEach((value)=>{
console.log(value);
})
ss4.clear(); //没有返回值
console.log("set清除")
console.log(ss4.size);//0
</script>
</body>
</html>
解构.箭头函数.剩余参数.Array扩展方法.Set
猜你喜欢
转载自blog.csdn.net/enhenglhm/article/details/123917333
今日推荐
周排行