1、var和const,let的区别
2、箭头函数
3、array
4、Object
5、set
6、class
7、Symbol
8、模板字符串
9、Array
10、对象简洁表示法
11、箭头函数
12、promise(坡没思)
1、var和const,let的区别
// let {left: L, top: T, width: W, height: H} = getComputedStyle(document.body);
// console.log(L,T)
// 区别:
// var a;
// let b;
// const c;
// 区别
// const c=1
// c=10;
// const c={a:1}
// c.a=10;
// console.log(c)
// 区别
// var aa={a,b:'ccc'};
// let {a,b} = {b:'aaaa'}
// let [,,p] = [1,2,'aaaa']
// console.log(aa.a)
// console.log(a,b)
// console.log(p)
// null和undefined
// console.log(a)
// var a
// let b
// console.log(a)
// console.log(b)
2、箭头函数
// let fn1 = x =>{
// console.log(x+100);
// }
// fn1(1);
// // console.log(fn1())
// let fn2 = x =>{
// return x+100;
// }
// fn2(1);
// console.log(fn2(1))
// let fn3 = x => x+100
// console.log(fn3(1))
// let fn = (x) =>{
// console.log(this)
// }
// fn(1)
// let a = Symbol(1);
// let b = Symbol(1);
// console.log(b==a)
// console.log(a)
// console.log(b)
3、array
// let arr1 = [1,22,31,5,8,7,15];
// var arr1=[['$6'],['$12'],['$12']]
// forEach方法
// arr1.forEach(function(v,k){
// console.log(v,k)
// let a=[...v]
// console.log(a)
// arr1.reduce( function( prev , current){},0)
// return prev+current;
// },0); //0表示初始值
// console.log(rs);
// },arr1);//this指向谁取决于forEach最后的参数,默认指向Windows
// every方法 有的不满足的就 假
// let rs = arr1.every( v =>{
// return v > 5;
// });
// console.log(rs);
// [...xxxx]类数组转换数组的方法
// some 方法 有一个就满足就为真
// let rs = arr1.some( v =>{
// return v > 5;
// });
// console.log(rs);
// filer 方法 满足条件的过滤出去
// let rs = arr1.filer( v =>{
// return v > 5;
// });
// console.log(rs);
// map 方法 更换arr1数据的大小
// let rs = arr1.map( v =>{
// return v *10;
// });
// console.log(rs);
// reduce 方法 累加
// let rs = arr1.reduce( function( prev , current){
// // return prev;
// let e = prev;
// let ee = ','+current;
// return [e+ee]
// return current;
// return prev+current;
// },); //0表示初始值
// console.log(rs);
4、Object
// obj1=['a','b','c','d','a','p','c'];
// obj2={};
// assign 方法 合并 注意事项:浅拷贝
// var obj = Object.assign({},{x:1,y:2})
// console.log(obj)
// Object.assign(obj2,obj1)
// console.log(obj2)
// create 方法 创建对象原型
// let obj3=Object.create({a:1,b:2})
// console.log(obj3)
5、set
// console.log(a);
// console.log(red);
let arr1=new Set(['a','b','c','d','a','p','c']);
// arr1=[...new Set(arr1)];
arr1.add(1).add(150).add('aaaa')
console.log(arr1)
// console.log(arr1);
// arr1.forEach(function(v,k,s){
// console.log(v,k,s)
// console.log(this)
// },arr1);//this指向谁取决于forEach最后的参数,默认指向Windows
// let a = 1;
// let a = 2;
6、class
// es5写法
// const ma = function(a,b){
// this.a=a;
// this.b=b;
// return this;
// };
// ma.prototype = {
// constructor : ma,
// print:function(){
// console.log(this.a+' '+this.b)
// }
// };
// ma.prototype.getName = function(){
// console.log(this.a+' '+this.b)
// }
// };
// const mai = new ma('hello','world').print()
// se6写法:
// class ma{
// constructor(a,b){
// this.a=a;
// this.b=b;
// return this;
// }
// print(){
// console.log(this.a+' '+this.b);
// }
// }
// const mai = new ma('hello','world').print();
7、Symbol
// Symbol无法被循环
// 区别:
// let ss = Symbol('ss');
// const date ={
// [ss] :'aaaaacs'
// }
// console.log(date)
// console.log(date[ss])
// const date2 ={
// [Symbol()] :'aaaaacs'
// }
// console.log(date2)
// console.log(date2[Symbol()])
8、模板字符串
// 模板字符串:``返引号
// let flag =true;
// let html = `<ul>
// <li>
// <span>${'首页'}</span>
// <span></span>
// <span></span>
// <span></span>
// <span class = "${flag ? 'show' : 'hide'}"></span>
// </li>
// </ul>`;
// console.log(html)
// (入皮次)repeat属性
// (ing哭路次)includes (思达思 喂次)startsWith (n的无喂思)endsWith
// let str1 = `a`;
// let str2 = str1.repeat(3);
// console.log(str2);
// let str = `gaomiao`;
// //是否包含
// console.log(str.includes('ao'));
// console.log(str.includes('asd'));
// //是否开头有
// console.log(str.startsWith('g'));
// console.log(str.startsWith('a'));
// //是否结尾有
// console.log(str.endsWith('ao'));
// console.log(str.endsWith('m'));
9、Array
// from
// var ils =document.querySelectorAll('li')
// var lis2 = Array.from(lis)
// console.log(lis2)
// Array.of()
// console.arr = Array.of(1);
// console.log(arr)
// find(fai嗯的)查找 findIndex()
// const arr = [1,2,3,4];
// let res = arr.find(function(a){
// return a<2
// });
// console.log(res)
// let res = arr.findIndex(function(a){
// return a<2
// });
// console.log(res)
// fill(飞了)
// const arr = [1,2,3,4,7,56,9]
// arr.fill('abc',1,3)
// console.log(arr)
10、对象简洁表示法
// 对象简洁表示法
// let a= 1;
// const obj = {
// a ;a
// }
// const obj = {a}
// console.log(obj)
// const obj = {
// fn:function(){
// console.log(1);
// },
// fn2(){
// console.log(2);
// }
// }
// obj.fn();
// obj.fn2()
// Object.is
// console.log(Object.is(NaN,NaN))
// console.log(Object.is(+0,-0))
// Object.assign
// let obj1 ={a:1}
// let obj2 ={a:2,b:3}
// let obj3 ={c:'abc'}
// Object.assign(obj1,obj2,obj3)
// console.log(obj1)
11、箭头函数
// function fn(a=0,b=10){
// console.log(a+b)
// }
// fn()
// function sum(...arr){
// var res = 0;
// for(var i = 0;i<arr.length;i++){
// res +=arr[i]
// }
// console.log(res)
// }
// sum(10,2,5,2,3,5,50,55)
// const fn = a=>a;
// const fn2=function(a){
// return a;
// }
// console.log(fn(1))
// console.log(fn2(2))
// const fn =( a , b)=>{
// a= a*2;
// b= b*3;
// return a+b
// };
// console.log(fn(5,4))
// var arr = [5,3,6,8,4,3,5,21,64,9];
// arr.sort(function(a,b){
// return a - b;
// })
// console.log(arr)
// arr.sort((a,b)=>a-b);
// console.log(arr)
// function fn(){
// setTimeout(function(){
// console.log(this);
// },1000)
// setTimeout(()=>{
// console.log(this);
// },1000)
// }
// let nb = 1;
// fn.call(nb)
// 箭头函数无法使用call apply bind 去改变内部this的指向
// 箭头函数没有 arguments 对象可以用Rest参数替代
// function fn(){
// setTimeout(function(){
// console.log(arguments)
// },1000)
// setTimeout(()=>{
// console.log(arguments)
// },1000)
// }
// fn(1,2,3)
12、promise
/* let imgs = [
'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2930820613,1775350667&fm=26&gp=05.jpg',
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595940402982&di=c649cef2483c30e767a8b70d7716384d&imgtype=0&src=http%3A%2F%2Fwww.autoimg.cn%2Falbum%2F2010%2F5%2F29%2F4d424a4b-7211-434d-836a-9d27c1c64592.gif',
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595940517707&di=c2a09d64d49f10c92d9d9241ba258248&imgtype=0&src=http%3A%2F%2Fww2.sinaimg.cn%2Fthumb180%2F6e690447gw1f6aro62306j20m80hx78b.jpg'
]
new Promise(cd) 状态:pending(进行中) resolved (成功)rejected (失败) 方法then catch
let p = new Promise((成功执行-resolved,失败执行-rejected)=>{})
let p = new Promise((aaa,bbb)=>{
let img = new Image();
img.src = imgs[0];
img.οnlοad=function(){
aaa(this);
};
img.onerror = function(){
bbb(new Error('失败'))
}
});
console.log(123)
p.then(function(img){
console.log('成功')
document.body.appendChild(img)
}).catch((err)=>{
console.log(err)
})
console.log(456)
xxx(imgs[0]).then((img)=>{
console.log('成功')
document.body.appendChild(img)loadImg
})
*/
/*function xxx(url){
let p = new Promise((aaa,bbb)=>{
let img = new Image();
img.src = url;
img.οnlοad=function(){
aaa(this);
};
img.onerror = function(){
bbb(new Error('失败'))
}
});
return p;
}
let xxxx = Promise.all([xxx(imgs[0]),xxx(imgs[1]),xxx('')]);
xxxx.then((datas)=>{
console.log(datas)
datas.forEach((item,i)=>{
document.body.appendChild(item)
})
}).catch((err)=>{
console.log(err)
})
Promise.resolve(xxx(imgs[0])).then((img)=>{
document.body.appendChild(img)
})
*/
13、map