ES6的字符串模板

83 阅读2分钟

map

map:键值对的容器,映射
     key1=value1,key2=value2...
set(key,value) 向集合中添加一个元素:key以存在,则为改,不存在则为增
    map.set("A","蔡徐坤");
    map.set("B",{
        "name":"老王",
        "age":888
    });
    map.set("C","曹柏林");
    map.set("A","涛哥");   
get(键)  根据键去取值
    console.log(map.get("B"));
delete(键) 删除集合中某个数
    map.delete("C");
has(键) 判断集合中是否含有某个值
    console.log(map.has("AA"));
clear() 清空集合
     map.clear();   
    console.log(map);
    for(let item of map){
        console.log(item[0],item[1]);
    }

ES6的字符串模板

字符串创建的方式
    "heihei"
    'haha'
    let oUl= document.querySelector("ul");
''和""不支持换行
     oUl.innerHTML = "
         <li>111</li>
         <li>222</li>
         <li>333</li> 
     ";
ES6的字符串模板
被``包含的字符序列也是字符串
     console.log(`yingyingying`);
反引号支持换行,常用于页面的拼接
     oUl.innerHTML = `
     <li class='test'>111</li>
     <li>222</li>
     <li>333</li> 
    `;
     let oLis = document.getElementsByTagName("li");
     console.log(oLis);
    for(let i=0; i<10; i++){
        //ES6字符串模板中出现变量必须用${变量}
        oUl.innerHTML += `<li>${i}</li>`
    }

数组迭代函数

遍历分为两步
    1.循环
    2.循环中执行相应功能
        let arr = [5,6,7,4,8,3,9];
​
        for(let i=0; i<arr.length; i++){
            arr[i] += 10;
            console.log(arr[i]);
        }   
数组迭代函数:帮我们把循环实现了,我们只需要写功能
forEach
    功能:遍历数组
    参数:arr.forEach(回调函数)
    回调函数: function 回调函数(元素的数值,[元素的下标],[数组名])
    返回值:无
        let arr = [5,6,7,4,8,3,9];
        function add(x,index,a){
           a[index] += 10;
        }  
        arr.forEach(add);
        console.log(arr);
​
map
    功能:遍历数组
    参数:arr.map(回调函数)
    回调函数: function 回调函数(元素的数值,[元素的下标],[数组名])
    返回值:在回调函数添加return,返回一个新数组
        let arr = [5,6,7,4,8,3,9];       
        function add(x,index,a){
           a[index] += 10;
           return a[index];
        }  
        let arr1 = arr.map(add);
        console.log(arr1);
​
filter
    功能:过滤,根据回调函数返回的布尔值,决定元素是否被存入新的数组
    参数arr.filter(回调函数)
    回调函数: function 回调函数(元素的数值,[元素的下标],[数组名])
    返回值:根据回调函数返回的布尔值,决定元素是否被存入新的数组
        let arr = [6,5,7,4,8,3,9,0];       
        function fun(x){
            if(x%2==0){
                return true;
            }else{
                return false;
            }
        }
        let arr1 = arr.filter(fun);
        console.log(arr1);

运动原理:

通过定时器改变元素的left或者top(width,heigth)
1.先清空定时器,避免运动混乱 
2.计算速度,叠加位移(宽高)
3.达到条件终止定时器