严格模式——let和const——箭头函数——解构赋值——字符串模板symbol——Set和Map——生成器函数

Posted 勇敢*牛牛

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了严格模式——let和const——箭头函数——解构赋值——字符串模板symbol——Set和Map——生成器函数相关的知识，希望对你有一定的参考价值。

严格模式——let和const——箭头函数——解构赋值——字符串模板和symbol——Set和Map——生成器函数

🧡💛严格模式

严格模式下变量不能未通过定义直接调用赋值
不允许参数同名
禁止使用with
不要使用eval
不允许使用arguments.callee
不要给eval和arguments赋值
严格模式下函数及回调函数中this指向undefined
只读属性不能赋值
不能删除不可删除的属性
8进制 严格模式下不再使用

<script type="module">
   "use strict";
   //…………………………………………
</script>

<script type="module">
    // 自动严格模式
</script>

var div=document.querySelector("div");
//div.style.width="30px";
//div.style.height="30px";
//div.style.backgroundColor="red";
//禁止使用with
with(div.style)
    width="30px";
    height="30px";
    backgroundColor="red";


 var obj=
     option:
         a:1,
         b:2
     
 

 with(obj.option)
     a=10;
     b=20;
     c=30;//如果对象中原属性存在，则修改属性的值，否则就会重新定义一个全局变量
 
 console.log(obj,c)

不允许使用
arguments.callee
arguments.callee.caller

 console.log(this)//Window 
 function fn()
     // 严格模式下函数及回调函数中this指向undefined
     console.log(this);//undefined
 
 fn();

var a=3;
function fn(a)
    console.log(a+window.a);//8


fn(5);

*eval 反射 将字符串反射为表达式(因为是过于强大）ヾ(≧▽≦)o

// 不要使用eval
//eval 反射  将字符串反射为表达式
console.log(eval("3+4"));//7
var a=3;
console.log(eval("a+5"));//8


var o1=,o2=,o3=;

for(var i=1;i<4;i++)
    eval("o"+i).a=10;

console.log(o1,o2,o3)//a: 10 a: 10 a: 10

💚🧡let和const

💦定义变量
let a=1;
💦定义常量
const b=3;
个人解释；
var就像一个全局变量

let 以 限制作用域范围，并且再同一个作用域中不能重复使用let定义相同的变量名
const 常量 就是定义后不能改变的值
一般来说常量必须大写，而且以_区分单词

var a=3;

    a=4;

console.log(a);//4

let a=3;

    a=5;

console.log(a)//8

💖块语句中用let定义的变量都是块作用域内的变量，块外不可调用💖

let a=3;

   let a=5;//块语句中用let定义的变量都是块作用域内的变量，块外不可调用

console.log(a);//3

for(var i=0;i<10;i++)

console.log(i)//10
而
for(let i=0;i<10;i++)
 

console.log(i)//报错

const obj=a:1,b:2;
obj=a:3,b:3;//为了防止引用类型更改其引用地址
obj.a=10;//可以修改其值，但是不能修改其引用地址
obj=null;
💞建议不要这样写

箭头函数

🟢箭头函数实际上就是定义一个匿名函数
🟡如果箭头函数中参数仅有一个，可以省略()
🟠如果箭头函数中没有参数，或者一个以上的参数时，必须使用()
🔴如果函数内只有一条语句，可以省略
🟣同时相当于在最后一条语句中增加return 返回这个表达式结果
⚫箭头语句作用是处理this指向的问题
💖this的指向具体点击这里this指向大全

var fn=(a,b)=>
	return a+b;

等价于
var fn=function(a,b)
	return a+b;



// 如果箭头函数中参数仅有一个，可以省略()
// 如果箭头函数中没有参数，或者一个以上的参数时，必须使用()
var fn=(a)=>
     console.log(a);//3
 
var fn=a=>
     console.log(a);//3
 

fn(3);

var fn=(a,b)=>
    return a+b;

💦如果函数内只有一条语句，可以省略
💦同时相当于在最后一条语句中增加return 返回这个表达式结果
var fn=(a,b)=>a+b;

var obj=
    c:this.d,当前对象外的this指向
    a()
        console.log(this);obj
    ,
    b:()=>
        console.log(this);//指向当前箭头函数外this指向，和c属性赋值的this.d指向this相同
    

obj.a();
obj.b();

"use strict";
var obj=
    a()
        console.log(this);//obj
        // function fn()
        //     console.log(this);//所有的函数直接调用，this都指向window,严格模式时指向undefined
        // 
        // fn();

        var fn=()=>
            console.log(this);//this指向箭头函数外的上下文环境的this，obj
        
        fn();a: ƒ
    

obj.a();

var obj=
    ab:10,
    a()
        console.log(this);//obj
        //这里的this就是obj
        //将obj赋值给document.o属性
        document.o=this;
        document.addEventListener("click",this.clickHandler);
    ,
    clickHandler(e)
    	//谁侦听this就是谁
        console.log(this)//document
        //因为赋值给了引用地址，所以下面两条语句一样
        console.log(this.o.ab);//10
        console.log(obj.ab);//10
    
;
obj.a()

💥传统的这个事件函数this指向侦听元素

document.addEventListener('click',function()
	console.log(this);//#doucument
)

💘箭头函数this往外一翻，和函数外面调用this等价

document.addEventListener("click",e=>
    console.log(this);//obj
)

var obj=
    ab:10,
    a()
        this.handler=e=>this.b(e);
        document.addEventListener("click",this.handler);
    ,
    b(e)
        e.currentTarget.removeEventListener("click",this.handler);
        console.log(this.ab);  
    

var o=obj;
obj=;
o.a();

解构赋值

💥数组解构
按位解构
ES5中参数时不允许有默认值的
ES6 可以设置参数的默认值

var arr=[1,2,3];
var [a,b,c]=arr;
console.log(a,b,c);//1 2 3

var obj=a:1,b:3,c:4;
var a,b,c=obj;
console.log(a,b,c);//1 3 4

变量的交换

var a=3;
var b=4;
[a,b]=[b,a];
console.log(a,b)//4 3

3 不进行赋值
var [a,b]=[1,2,3];
console.log(a,b);//1 2

c 是undefined
var [a,b,c]=[1,2];
console.log(a,b,c);//1 2 undefined

如果数组解构没有赋值给c，c默认值为3
var [a,b,c=3]=[1,2];
console.log(a,b,c);//1 2 3

💢对象的解构
变量与key对应解构，变量名必须与key值相同
对象解构与顺序无关
当对象做深度解构时，属性名相同的，在解构时需要起别名

var a,b,c=b:10,a:3,c:6;
console.log(a,b,c)//3 10 6

function fn(a,b=2,c)
	console.log(a,b,c);//3 2 5


fn(3,undefined,5);

function fn(a,b,c)
    console.log(a,c,b);//10 20 undefined


fn(a:10,c:20);

var a,b,c=3=a:1,b:2;
console.log(a,b,c);//1 2 3

var a,b:a:a1=a:1,b:a:2;
console.log(a,a1);//1 2

💔 凡是有实例的对象方法都不要做解构
💔有的对象中使用了this，这种对象不能进行解构，如果解构后，this的指向就会发生改变

var str="abvcde";
var length:len=str;
console.log(len);//6

这两就属于可以解构

var random,max=Math;
console.log(random()*10)
console.log(max(10,20))

解构练习

var a,b:a:a1=3=a:10=a:1,b:a:2
a=1  a1=2
var a,b:a:a1=3=a:10=a:1
a=1  a1=10
var a,b:a:a1=3=a:10=a:1,b:;
a=1 a1=3

function fn(a,b:a:a1=a:10=a:20,b:a:30)
    console.log(a,a1);

fn();//20,30
fn();//undefined 10
fn(a:1);//1 10
fn(a:1,b:);//1 undefined
fn(a:1,b:a:50);//1 50


var obj= a:10,b:b:a:20;
a=10  a1=20;
var obj=a:10,b:b:;
a=10 a1=100
var obj=b:
a=20 a1=0;

var obj=;
a=20  a1=-1

var a=20,b:b:a:a1=100=a:0=b:a:-1=obj;
console.log(a,a1)

字符串模板和symbol

💚“``”插值
symbol 不重复,唯一类型
Symbol不做运算
对象中key可以使用字符型和Symbol型
使用Symbol作为key可以防止key因为重名而覆盖

var div=document.querySelector("div");

var list=[
    site:"腾讯",href:"http://www.tencent.com",
    site:"百度",href:"http://www.baidu.com",
    ECMAScript6相关实用特性


 es6


 ECMAScript学习笔记


 未捕获的语法错误：在严格模式之外尚不支持块范围的声明（let、const、函数、类）[重复]


 流星不会启动。 ejson.js 中的“在严格模式之外尚不支持块范围声明（let、const、函数、类）”


 高级JavaScript第篇