js,es6零散知识备忘

DOM怎样添加、移除、移动、复制、创建和查找节点
// 创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
// 添加、移除、替换、插入
appendChild(),动态的添加或剪切元素到目标位置。
removeChild(),内存还保留着,div.removeChild(p);
p.remove(),自己把自己删掉,彻底删除
replaceChild(),父级.replaceChild(new,old);把父元素上用新代替旧节点
insertBefore() //在已有的子节点前插入一个新的子节点
// 查找
getElementsByTagName() //通过标签名称
getElementById() //通过元素Id,唯一性
//设置属性
setAttribute,设置属性,如:dd.setAttribute("class","box");


DOM节点树

var temp = String(55);//将数字转换成字符串55
var temp = String([55,22,66]);//将数组转换成字符串55,22,66
var temp = (65).toString();//将数字转换成字符串方法65
var temp = Number("22");//将字符串转换成数字
var temp = parseInt("100.32");//转换成整形,只取整数部分100
var temp = parseInt("99").toFixed(2);//保留两位小数99.00
var temp = parseFloat("100.35");//转换成浮点型,100.35
var temp = "5"+6;//字符串拼接,结果是字符串56
var temp = Math.round(4.5);//四舍五入5
var temp = Math.ceil(4.2);//向上取整5
var temp = Math.floor(4.9);//向下取整4
var temp = Math.sqrt(64);//取平方数,8
var temp = Math.abs(-3);//取绝对值3
var temp = Math.max(2,3,59,62,14,72,41);//取最大值72,相应有min
var temp = Math.random();//获取0到10的随机整数
Math.floor(Math.random()*(max-min+1)+min);//生成[min,max]的随机数

let没有预解析,不存在变量提升;同一个作用域里, 不能重复定义变量;
const定义变量是常量,必须有值,不能后赋值,不能修改
解构赋值左右两边,结构格式要保持一致
字符串模板可以随意换行,${变量名字}代替变量
字符串查找,str.indexOf(要找的东西) 返回索引(位置) ,没找到返回-1
str.includes(要找的东西) 返回值 true/false,用来判断时候包含某些东西
字符串是否以谁开头str.startsWith(检测东西)
字符串是否以谁结尾str.endsWith(检测东西)
函数默认参数,function show({x=0,y=0}){ }
函数参数如果默认已经定义了的,不能再使用let,const声明
箭头函数this问题,没有arguments,不能当构造函数

扩展运算符...,可以把数组展开提取出来,也可以把重置成数组
let arr=[1,2,3];
console.log(arr);    //(3) [1, 2, 3]
console.log(...arr); //1 2 3
上面说明扩展运算符可以把数组展开来
function show([a,b,c,d,e]) {
    console.log(a,b,c,d,e)
};
show([1,2,3,4,5])   //打印出1  2   3 4 5,这个叫结构赋值

function show(...a) {
        console.log(a)
    };
    show([1,2,3,4,5])   //打印出(5) [1, 2, 3, 4, 5]
这里说明可以重置成数组,如果当做重置使用,应该放最后。
还有个应用是拷贝数组,当原数组变化时新数组不变
let arr1=[1,2,3,4,5];
let arr2=[...arr1];
arr1.push(6);
console.log(arr1,arr2)   //(6) [1, 2, 3, 4, 5, 6] (5) [1, 2, 3, 4, 5]

Array.of()把一组值,转成数组
let res=Array.of("apple","banner","orange");
console.log(res); //["apple", "banner", "orange"]

Array.from()把类数组(拥有length属性) 对象转换成数组
let res=Array.from('foo');
console.log(res); //["f", "o", "o"]转字符串的用法
function f() {
let res=Array.from(arguments);
return console.log(res);
}
f(1, 2, 3); //[1, 2, 3] 转换一个arguments对象

arr.find()用来在数组中查找目标元素,找到就返回该元素,找不到返回undefined
arr.findIndex()也是查找目标元素,找到就返回元素的位置,找不到就返回-1
他们接受一个回调函数,而回调函数接受三个参数:
value每一次迭代查找的数组元素
index每一次迭代查找的数组元素索引
arr被查找的数组,第二三参数可以省略
arr.find()的用法案例:
let res = [4, 5, 6, 7, 8, 9].find((val,index,arr)=>{
return val>6
});
console.log(res); //7
arr.findIndex()的用法案例:
let res = [4, 5, 6, 7, 8, 9].findIndex((val,index,arr)=>{
return val>6
});
console.log(res); //3

array.indexOf(item,start)
let res = ["Banana", "Orange", "Apple", "Mango"].indexOf("Apple");
console.log(res); //2
如果后面再加一个参数3(从第几个开始找),将返回-1

对象简介语法
let json ={
        a:1,
        b:2,
        showA:function(){
            return this.a;
        }
        showB:function(){
            return this.b;
        }
    }
就相当于如下写法
    let json ={
        a,
        b,
        showA(){  //一定注意,不要用箭头函数
        },
        showB(){
        }
    }
而下面vue里的用法,也是同样的意思
new Vuex.Store({
        state,
        mutation,
        types,
        actions
    });

    new Vue({
        router,
        App,
        vuex
    })

Object.assign(): 用来合并对象
let 新的对象 = Object.assign(目标对象, source1, srouce2....)
let a={a:1};
let b={b:2};
let c={c:3};
let d={};
let res=Object.assign(d,a,b,c);
console.log(res); //{a: 1, b: 2, c: 3}
如果c里面有个a:4,那结果将后面覆盖前面,看source顺序覆盖

Promise承诺许诺的意思,解决异步回调问题
语法格式如下,接收两个参数resolve和reject
let promise(名字随意) = new Promise(function(resolve, reject){
//resolve, 成功调用
//reject,失败调用
});
promise.then( res=>{ }, err=>{ } )
更常用简单的写法是
new Promise().then(res=>{
}).catch(err=>{
})
用法案例:
let p= new Promise(resolve => resolve("aaa"));
p.then(res=>console.log(res)); ///aaa
等架于
new Promise(resolve => resolve("aaa"))
.then(res=>{console.log(res)}) ///aaa
.catch(err=>{console.log(err)})
Promise.all([p1, p2, p3]): 把promise对象p1,p2,p3打包,扔到一个数组里面,打包完还是一个promise对象
必须确保所有的promise对象,都是resolve状态,都是成功状态
Promise.race([p1, p2, p3]): 只要有一个成功,就返回

generator函数,生成器,解决异步深度嵌套的问题
function * gen(){
    yield 'welcome';
    yield 'to';
    return '牧码人';
}
let g1 = gen();
console.log(g1.next());  // {value:'welcome', done:false}
console.log(g1.next());  // {value:'to', done:false}
console.log(g1.next());  // {value:'牧码人', done:true}
console.log(g1.next());  // {value: undefined, done: true}
这样g1.next()获得的是一个对象,通过.value才能获得内容
到最后一个后done变成true,再下面就是undefined了
下面是获取内容的代码
function * gen(){
    yield 'welcome';
    yield 'to';
    return '牧码人';
}
let g1 = gen();
console.log(g1.next().value);  //welcome
console.log(g1.next().value);  //to
console.log(g1.next().value);  //牧码人
console.log(g1.next().value);  //undefined
for .. of  可以自动遍历生成器生成的结果(去最后一个)
还是上面的生成器
let g1 = gen();
for (let item of g1){
    console.log(item);//welcome
                      //to
}
还可以用结构赋值把内容读出来
let g1 = gen();
let [a,b]=g1;
console.log(a,b)  //welcome to
还可以用扩展运算符把扩展出来
let g1 = gen();
console.log(...g1);  //welcome to

异步: 不连续,上一个操作没有执行完,下一个操作照样开始
同步: 连续执行,上一个操作没有执行完,下一个没法开始
关于异步,解决方案:
回调函数
事件监听
发布/订阅
Promise对象
genrator
async await

async function fn(){ //表示异步,这个函数里面有异步任务
let result = await xxx //表示后面结果需要等待
}
async特点:
1. await只能放到async函数中
2. 相比genrator语义化更强
3. await后面可以是promise对象,也可以数字、字符串、布尔
4. async函数返回是一个promise对象
5. 只要await语句后面Promise状态变成 reject, 那么整个async函数会中断执行

任何数据类型和字符串想加,都变成字符串。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,837评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,551评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,417评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,448评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,524评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,554评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,569评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,316评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,766评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,077评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,240评论 1 343
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,912评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,560评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,176评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,425评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,114评论 2 366
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,114评论 2 352

推荐阅读更多精彩内容

  • 1、新的声明方式 以前我们在声明时只有一种方法,就是使用var来进行声明,ES6对声明的进行了扩展,现在可以有三种...
    令武阅读 1,005评论 0 7
  • 一. Callback (回调函数) 1.定义:把函数当作变量传到另一个函数里,传进去之后执行甚至返回等待之后的...
    hutn阅读 1,523评论 0 2
  • *node下用express框架,实现一个简单的mvc *构建工具:gulp / babel / webpack ...
    韩娜爱吃辣_前端程序媛阅读 1,086评论 0 1
  • Promise 对象 Promise 的含义 Promise 是异步编程的一种解决方案,比传统的解决方案——回调函...
    neromous阅读 8,704评论 1 56
  • 33、JS中的本地存储 把一些信息存储在当前浏览器指定域下的某一个地方(存储到物理硬盘中)1、不能跨浏览器传输:在...
    萌妹撒阅读 2,080评论 0 2