运算介绍
(一)解构赋值
// let [arry1,arry2]=arry;
let obj={
name:"猪八戒",
age:"18",
jiao:function(){
alert("dd");
}
};
let {jiao}=obj;//同名函数可以直接用类赋值来用
jiao();
(二) 拓展运算符（…）
//覆盖，后面的源对象的属性将类似地覆盖前面的源对象的属性。
const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };
// const returnedTarget = Object.assign(target, source);
let copy={...target};
// let copy2=Object.assign({},target);
// let copy3=target;
// console.log(target);
console.log(copy);
console.log(copy2);
console.log(copy3);
// expected output: Object { a: 1, b: 4, c: 5 }
// console.log(returnedTarget === target);
// expected output: true
（三）模板字符串
let love=`${lovely}和乃万是我最喜欢的歌手和网红`;
console.log(love);
（四）箭头函数
1、概念
let obj={
name:"唐僧"
};
function la(){
console.log(this.name);
}
let le=()=>{
console.log(this.name);
}
//箭头函数的this不会改变，即使使用函数
la.apply(obj);//改变this并执行，
le.call(obj);
//箭头函数不能作为构造函数
function factor(name,age){
this.name=name;
this.age=age;
}
let man=new factor("悟空",17);
console.log(man.name);
// let fac=(name,age)=>{
// this.name=name;
// this.age=age;
// }
// let men=new fac("嫦娥",19);
// console.log(men.name);
// 箭头函数不能用arguments数组(存形参的)
function xc(a,b,c){
console.log(arguments);
}
//xc(1,3,10);
// let xc2=()=>{
// console.log(arguments);
// }
// xc2(1,1,2); a
//箭头函数的简写
//只有一个形参时可省略括号
let one=a=>{
return a*a;
}
console.log(one(11));
//语句只有一句可以省略括号,省略括号后必须省略return
let two=(a,b)=> a+b;
console.log(two(3,7));
let three=a=>a+1;
console.log(three(1));
练习
width: 100px;
height: 100px;
background-color: cadetblue;
}
</style>
<script>
window.οnlοad=function(){
let box1=document.getElementById("box");
box1.addEventListener("click",function(){
setTimeout(()=>{//延时器是window对象的方法，若用普通的回调this指向window,用箭头函数静态指向创建对象
this.style.backgroundColor="pink";
},2000);
});
let arry=[1,4,-2,3,10];
let end=arry.filter(arry=>arry%2===0);//filter是数组的过滤器，里面写回调函数，参数一般为数组的名字，结果为真则返回
console.log(end);
arry.sort(function(a,b){
return a-b;
})
console.log(arry);
}
（五）set方法
s1.add(11).delete(2);//向set中添加和删除
const arr=[...s1];//运用拓展运算符转化为数组
// console.log(arr);
//s1.forEach(value=>console.log(value));
for(let item of s1.values()){
console.log(item);//这三种方法效果一样
}
//运用set给数组去重
let arr1=[1,1,23,1,23,12];
let set1=new Set(arr1);
let arr2=[...set1];//...拓展运算符有点类似于解构赋值,arr实际存的是该内容的地址
let arr3=Array.from(set1);//Array.from可以将set的转化数组,这是申请了与上一个变量不同的内存，故地址与上一个变量不同；
console.log(arr2===arr3);//false,引用型类型存的是指向连续的存储单位的地址，两者虽然内容一致，但指向的地址不同，导致===false
console.log(arr2);//{"0":1,"1":23,"2":12,"length":3}
console.log(arr3);//{"0":1,"1":23,"2":12,"length":3}
//set中包含keys,values,entries(键值对),直接从set取值默认keys；
(六) map方法
var newarr=arr.map((value,index,arr)=>{//map默认参数为键值，键名，整个数组对象；里面放回调函数
console.log(value);
console.log(index);
console.log(arr);
});
//可支持数组数据类型转化
let newarr1=arr.map(String);
console.log(newarr1);
//改变值
let list=[
{name:"猪八戒",age:"10"},
{name:"孙悟空",age:"11"},
{name:"唐僧",age:"21"}
];
let newarry=list.map(obj=>{
return {
name:obj.name,
birthYear:new Date().getFullYear()-obj.age,
}
});
console.log(newarry);
//
console.log(arr.constructor===Array);
（七）生成器和迭代器
// function* scq(){
// console.log("第一步");
// yield "a";//使用字母时一定记得用引号，没有引号会当作变量；
// console.log("第二步");
// yield "b";
// console.log("第三步");
// yield "c";
// }
// let sc=scq();
// console.log(sc.next());
// console.log(sc.next());
// console.log(sc.next());
// console.log(sc.next());
//迭代器iterater
// function grammar() {
// let arr = [4, 2, 1];
// let iterator = arr[Symbol.iterator]();
// let res = iterator.next();
// while(!res.done) {
// let value = res.value;
// console.log(value);
// res = iterator.next();
// }
// console.log('结束')
// }
\\迭代器
function g(){
let arr1 =[1,2,3];
let iterato=arr1[Symbol.iterator]();
let res1=iterato.next();
while(!res1.done){
let va=res1.value;
console.log(va);
res1=iterato.next();
}
console.log("迭代结束");
}
// grammar(); //4,2,1
g();
二、异步函数promise和asycn
(一)promise
// setTimeout(function(){
// console.log("读取数据库数据中");
// resolve("余额为零");
// },2000);
// });
// function newpromise1(){
// let p=new Promise(function(resolve,reject){
// setTimeout(function(){
// let sj=Math.ceil(Math.random()*20);
// if(sj>1){
// resolve(sj);
// }
// else{
// reject("数字小于10");
// }
// },1000);
// });
// return p;
// }
// function newpromise2(){
// let p=new Promise(function(resolve,reject){
// setTimeout(function(){
// let sj=Math.ceil(Math.random()*20);
// if(sj>1){
// resolve(sj);
// }
// else{
// reject("数字小于10");
// }
// },1000);
// });
// return p;
// }
// function newpromise3(){
// let p=new Promise(function(resolve,reject){
// setTimeout(function(){
// let sj=Math.ceil(Math.random()*20);
// if(sj>1){
// resolve(sj);
// }
// else{
// reject("数字小于10");
// }
// },1000);
// });
// return p;
// }
// newpromise().then(function(data){
// console.log("resolve成功执行:",data);
// }).catch(function(reason){
// console.log("数据不符合要求",reason);
// });
//数组里的promise都执行成功才能返回数组；
// Promise.all([newpromise1(),newpromise2(),newpromise3()]).then(function(result){
// console.log(result);
// });
//
function requestTableList(){
var p = new Promise((resolve, reject) => {
//去后台请求数据，这里可以是ajax,可以是axios,可以是fetch
resolve("res");
});
return p;
}
//race报错机制
function timeout(){
var p = new Promise((resolve, reject) => {
setTimeout(() => {
reject('请求超时');
}, 10000);
});
return p;
}
Promise.race([requestTableList(),timeout()]).then((data)=>{console.log(data);}).catch((error)=>{console.log(error);});
(二)asncy
console.log("3s已经执行")；
return new Promise(resolve=>{
setTimeout(function(){
resolve('3s');
console.log("3s执行完成");
},3000);
});
}
function active7s(){
console.log("7s已经执行");
return new Promise(resolve=>{
setTimeout(function(){
resolve("7s");
console.log("7s执行完成")；
},7000);
});
}
async function worker(){
console.log("run")
const task= await active3s();//3秒后才执行
console.log(task);
const task2=await active7s();//等上一个任务完全执行完后在等7s,await改变原来同步>微任务>宏任务的顺序，将加关键字的语句先执行，而不是挂起；
console.log(task2);
}
worker();
目前作为新生我也只学到这里，后续会更新。
1160
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
