第七章---ES6严格模式箭头函数（重点）解构赋值（重点）字符串扩展方法Set 集合类似于数组Map 类似于Object

65 阅读 0 评论 43 点赞

我是靠谱客的博主从容煎饼，最近开发中收集的这篇文章主要介绍第七章---ES6严格模式箭头函数（重点）解构赋值（重点）字符串扩展方法Set 集合类似于数组Map 类似于Object，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

严格模式

1.必须定义变量

"use strict"
	
         x=3;
         console.log(x);

2.不能使用同名参数

Duplicate parameter name not allowed in this context
        function fn(a,a){
            console.log(a);
        }
        fn(3,5);

3.不能使用with语句

     严格模式下不能使用with

Cannot assign to read only property 'length' of string 'abcde' Cannot set property offsetLeft of #<HTMLElement> which has only a getter（获取） setter(可以设置)

 Strict mode code may not include a with statement
    严格模式下不能使用with
    var div=document.createElement("div");
    with(div.style){
        width="50px";
        height="50px";
        backgroundColor="red";
    }
    document.body.appendChild(div);

4.不能对只读属性赋值，否则报错

Cannot assign to read only property ‘length’ of string ‘abcde’
Cannot set property offsetLeft of # which has only a getter（获取） setter(可以设置)


        var str="abcde";
        str.length=3;

5.不能使用前缀0表示八进制

Octal literals are not allowed in strict mode.
        var a=056;

6.不能删除不可删除属性
Cannot delete property 'length' of [object Array]

    var arr=[1,2,3];
        delete arr.length
delete arr.length

7.尽量不要使用eval，不要给eval和arguments赋值
8.不使用arguments.callee，arguments.callee.caller
'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them
arguments.callee 就是这个参数所在的当前函数
arguments.callee.caller 回调当前函数的函数
9.严格模式中、函数中的this被指向undefined

function fn(){
  console.log(this);//严格模式中this被指向undefined
}
fn();

10、函数中多个参数使用
function max(…arg){
console.log(arg);
}

max(1,2,3,4,5);

11、当对象的属性名与变量名相同时，对象的属性值也等于变量值，直接把属性放在对象中就可以了
var a=5;
var b=6;
// var obj={a:a,b:b}
var obj={a,b};

const常量的定义后不可被改变

let和const
let的作用域在语句块内
const定义常量，常量定以后不可修改，名称使用全大写字母+_定义

箭头函数（重点）

如果函数中只有一句话，并且是使用return 返回的，可以省略{}
var sum=(a,b)=>a+b;

如果函数中有且仅有一个参数时，可以省略()
var getSum=a=>a+10;

如果函数中没有参数，或者有1个以上的参数时，必须使用()
var getSum=()=>10;

箭头函数中 this指向
this指向当前箭头函数外上下文环境的this指向

解构赋值（重点）

数组解构

var arr=[1,2,3,4];
var [a,b]=arr;
数组解构，将会将数组的元素按位传入到前面的变量上一一赋值，原数组不改变，没有对应的值时就是undefined。
如果e没有解构获得值时，默认值为10

案例----数据交换

var a = 1;b=2;
var [a,b] = [b,a]

对象解构

对象解构赋值是按照对象的属性解构,不区分先后顺序

    var obj={a:1,b:2};
    var {c,d,a,b}=obj;

	var obj={
       a:1,
       b:{
           a:3
       }
   }

a:a1 这种是起别名有相同的属性名时必须起别名
b=5 这种是附默认值，就是解构后没有赋值的默认为5

 var {a,b:{a:a1,b=5,c:c1=10}}=obj;
    console.log(a,a1)

 function fn({a,b}){

    }
    fn({b:10,a:1});

这样写可以不用考虑参数先后顺序

function fn({a,b,c=10}={a:1,b:2,c:5}){
    console.log(a,b,c);
}
fn({b:5,a:6});//6,5,10

如果没有给参数时，才会启用后面的对象对前面的参数做解构赋值
fn();

字符串扩展方法

字符串

判断某个字符是不是在字符串的最前面
str.startsWith(“a”)
判断某个字符是不是在字符串的最后
str.endsWith("f)
判断num是否长度达到两位，如果不足就在前面补0
num.padStart(2,“0”);

判断num是否长度达到两位，如果不足就在后面补0
num.padEnd(2,“0”);

将某个字符串重复n次
str.repeat(3)

字符串模板

 var str=`
        <div>
            <span></span>
    `

插值
var str=`小明今年${age}岁了`

ul.innerHTML=arr.reduce((v,t)=>v+`<li><a href='http://${t.url}'>${t.site}</a></li>`,"")

Symbol 类型永不重复
去除魔术字符串，让判断的内容是唯一的
对象的key可以是string和symbol，如果不是这两种会隐式转换为string类型
这里可以将对象中的key作为唯一key使用，不会产生冲突。

var a=Symbol(),b=Symbol(),c=Symbol();
        var obj={
            [a]:1,
            [b]:2,
            [c]:3
        }
        console.log(obj[a])  //===输出1
        console.log(obj.a);  //===输出undefined

Set 集合类似于数组

数组是一种紧密结构，插入删除速度慢，数组会有重复元素，优点就是可以排序，根据某个元素找到前一位和后一位元素内容
Set 插入删除速度快，无序，可以只存储数据不需要有key，不会重复，并且有存储数据总数
// 这四个都是迭代器类型
// arguments
// HTMLCollection
// NodeList
// Array

var s=new Set(iterable);
s.add(4); 添加一个元素放在set中
s.add(3);
s.clear(); 清空set集合
s.delete(2);删除元素
遍历元素
s.forEach(t=>{
console.log(t)
})

判断集合中是否有这个元素
console.log(s.has(2))

s.size 集合的长度等同于数组的length

for of遍历
所有迭代器都可以使用for of遍历。
for（let value of s）{
}

Map 类似于Object

Object 松散结构，键值对结构，添加删除速度快，无法排序，只能使用string和symbol作为键，对象没有长度

Map有长度，key可以是任意类型

var m=new Map()
m.set(“a”,1); 添加键和值

console.log(m.get(“a”)) 根据键获取值

m.clear() 清除所有的内容

m.delete(“a”); 删除键所对应的值

遍历键和值
m.forEach((value,key)=>{
console.log(value,key)
})

console.log( m.has(“a”)) 判断是否有a这个键

console.log(m.size) 判断map中的存储数量

通过for of遍历
for(var [key,value] of m){
console.log(key,value)
}
只遍历值不遍历键
for(var value of m.values()){
console.log(value)
}
只遍历键不遍历值
for(var key of m.keys()){
console.log(key)
}

WeakMap 弱引用Map 只能使用引用类型作为键和值

案例---------图片懒加载

 var arr=[]
        function *loadImage(){
            for(var i=1;i<7;i++){
                var img=new Image();
                img.src=`./img/${i}.jpg`;
                yield img.onload=function(){
                    arr.push(this);
                    g.next();//强制同步
                }
            }
            arr.forEach(t=>{
                console.log(t.src);
            })
        }


        var g=loadImage();
        g.next();