【前端开发】ES6知识点系统化梳理笔记

>ES6扩展：
#Map和Set是es6标准新增的数据类型

##Map是key-value（关键字-值），Map允许修改value，不允许修改key，Map支持下标操作
var m = new Map([['zhangsan',20],['lisi',25],['wangwu',19]]);
m.get('lisi') //

##Set是key（关键字），Set的迭代器是const，不允许修改元素值，Set不支持下标操作
var m = new Set([1,2,3,4,3,2]);
m // Set{1,2,3,4}

#Symbol
typeof Symbol  代表独一无二的值；
避免键名重复被覆盖；
无法进行字符串拼接和数字的计算；
可以转布尔型；

#find
发现数组中满足条件的第一个
var m = [10,20,30,60,26,50];
var n = m.find(function(item){
    return item > 50
})
console.log(n) // 60  取数组中第一个满足条件的

#findIndex
发现数组中满足条件的第一个数的下标序号
var m = [10,20,30,60,26,50];
var n = m.findIndex(function(item){
    return item > 50
})
console.log(n) // 3  取数组中第一个满足条件的位置下标

!! 转换为布尔值

#判断是否数组：
Array.isArray([])

#1、数组新增：
var arr = new Array（10,20,30） 可以多项也不可以一项，一项数据时返回代表的是长度10；
var arr = Array.of(20,10,30)  可以多项也可以一项；
#2、字符串新增；
2.1字符串中是否存在
ES5:
var str=“abcdefg”;
console.log( str.indexOf('c') !== -1)    //true   若该indexOf检索的下标值不等于-1则证明存在；
ES6:
str.includes('c')  //true 若存在为true否则false
str.startsWith('ab')  //true  若是ab开头则true  否则false
str.endsWith('fg')  //true  若是fg结尾则true  否则false
2.2字符串重复拷贝
console.log(str.repeat(3))  //abcdefgabcdefgabcdefg  重复拷贝
2.3超级字符串：
反引号包起来（换行生效和空格会生效）
反引号中间拼接变量${name}
var n = 2;
var m  = 3;
console.log('n+m=${n+m}') 这里是反引号包裹
var isRaining = true
console.log('今天天气是${isRaining ? "雨天" : "晴天"}')   这里是反引号包裹

function fn (){
  return "miaov"
}
console.log('fn执行结果是：${ fn() }')  //函数也可以放反引号里执行
#3、对象新增：
3.1对象键名和键值相同可缩写：
var a=1;
var obj = {a};
console.log(obj) //a:1
3.2函数调用：
var obj = {
    a,
    fn(){
        console.log("执行了")
    },
    b:100
};
obj.fn();
3.3键名动态改变：
var attrname = "width";
var obj={
    [attrname]:100
}
 console.log(obj)  //键名随着attrname变化而变化
3.4函数名动态改变：
var attrFn = "fn";
var obj = {
    [attrFn](){
        console.log("attrFn执行了")
    }
}
obj.fn();
3.5判断值是否完全相等
console.log(1 == "1") //true 隐式类型转换
console.log(NaN === NaN) //false  es5的不足
console.log(Object.is(1,1)) //true   es6 相当于 ===
console.log(Object.is(1,"1")) //false   即判断类型又判断值是否相等
console.log(Object.is(NaN,NaN)) //true   解决es5的不足之处
console.log(Object.is({},{})) //false  {}为两个值
var obj={}；
console.log(Object.is(obj,obj)) //true  obj为一个对象
3.6 Object.assign()对象参数合并
function move(obj){
    var defaultObj = {
        ease : "linear",
        duration:1000
    }
<!--     var para = {
        ease:obj.ease || defaultObj.ease,
        duration:obj.duration || defaultObj.duratio
    } -->
    var para = {};
    Object.assign(para,defaultObj,obj)  //es6新属性  合并对象参数，后面依次合并到第一个参数，重复参数后面会覆盖前面的
    console.log(para)
}
move({
    ease:"easeIn",
    duration:2000
})
3.7for of 对象遍历（Object.keys(obj)）
var obj={
    a:1,
    b:2
}
console.log(Object.keys(obj)) // [a,b]
console.log(Object.values(obj)) //[1,2]
for(var attr of Object.values(obj)){
    console.log(attr) //1 2
}

console.log(Object.entries(obj)) //解构成二维数组
for(var [key,val] of Object.entries(obj)){
     console.log(key,val) //分别取值 a 1 b 2
}
3.8 ES6扩展运算符
var a = {
  a:1,
  b:2
}

var c = {
...a,
f:9999,
g:8888
}
console.log(c) //{a: 1, b: 2, f: 9999, g: 8888}
...obj 打散成参数的形式
var arr = [1,2,3,4];
console.log(arr) //[1,2,3,4]
console.log(...arr) //1 2 3 4
使用场景----数组取最大值
var arr = [1,23,4,5];
console.log(Math.max(1,23,4,5)) //23  参数形式是可以取到
console.log(Math.max(...arr)) //23 先用...扩展用算符转成参数形式即可
使用场景---数组去重
var aa = [1,2,3,2,4,5,2,3,1];
var bb = [...new Set(aa)] //先Set去重然后...运算符打散最后数组[]
console.log(bb) //[1,2,3,4,5]
#4、函数的扩展
##4.1 函数传递参数默认值设置
ES5写法：
function add(a,b){
var _b = b === undefined ? 100 : b ;
return a+_b
}
console.log(add(10,0))

ES6写法：
function add(a,b=100){
    return a+b
}
console.log(add(10,0))
##4.2函数剩余参数
function fn(a,...r){
console.log(a,r) // 1 [2,3,4,5] ...r扩展运算符合并剩余参数为一个数组
console.log(r) // [2,3,4,5] 

}
fn(1,2,3,4,5)
##4.3箭头函数
var add = (a,b) => {
    return a+b
}
add();
省略写法
var add = (a,b) => a+b //语句只有一句时省略{}和return
var add = (a,b) => ({miaov:3}) //{miaov:3} 想要返回对象需用（）包起来
其他变体写法
var add = ()=>{
    miaov:for(var i = 0; i<10;i++){
        console.log(i)
        if(i == 3){
            break miaov;
        }
    }
}
add()

参数只有一个时，可省略（）
var add = a => a*100
console.log(add(2)) //

筛选需要的数
var arr = [10,21,32,44,77];
var res = arr.filter(item=> item >21)
console.log(res)

箭头函数注意事项：
(1).内部this指向window，对于箭头函数修改this指向是没有用的（普通函数随着点击有可能是document，所以非箭头函数要注意this指向问题）；
(2).箭头函数内部没有arguments，可用(...r)模拟使用；
(3).箭头函数不能通过new调用，无构造器；
#5、模块化开发
模块开发加type="module"，且本地服务访问才生效
<script src="./data.js" type="module"> </script>
import {n} from "./data.js";
##模块化开发语法
第一种 导出变量和函数
var n = 100;
var m = 20;
function(x,y){
    return x+y
}
export { n as newN,m,add}
html中使用
import {newN,m,add} from "./a.js";

第二种 直接导出变量
exprot var n = 200;
import {n} from "./a.js";

第三种 直接导出函数
exprot function fn(){
    console.log(1)
};
import {fn} from "./a.js";

第四种 默认导出
var n = 100;
var m = 20;
function(x,y){
    return x+y
}
export default 1000;

import d from "./a.js";

//全部导出
import * as tool from "./a.js"
用法
consoe.log(tool.m,tool.newN,tool.default)

只导入模块
console.log("a.js被加载")
import "./a.js"

模块化注意：
1、引入计算多次，模块只执行加载一次；
2、导出来的值是模块里的值的引用；

#6、promise
##promise基础
1、异步编程解决方案；
##promise的基本使用
宏任务先执行，后微任务，最后定时器
 var都是宏任务   .then(微任务)
    var p = new Promise((resolve,reject)=>{
                console.log("实例化...")
                return resolve("成功！");
                // reject("失败了")
               console.log("shibai")
            })
            p.then((data)=>{
                console.log("then",data)
            }).catch((data)=>{
                console.log(data)
            })
使用方法：
Promise.all  全部执行完才返回
Promise.race  返回最先执行完的

#7、其他扩展总结：

之前嵌套的代码可用fn(a,b,c).then(()=>fn(a,b,c)).then(()=>fn(a,b,c))的形式比价简洁易维护了

选择器选取元素
document.getElementById  动态获取元素  会随着元素变化而变化
document.querySelector  静态获取元素 不会随着元素变化而变化

数字加undefined  结果为 NaN

字符串+undefined  结果是拼接起来ssundefined

var fn = function(a,b,c){
    console.log(arguments)  //参数集合
}
fn(1,2,3)

document.onclick = fn; //点击html页面即可触发