JS-ES6-严格模式、letconstES6字符串扩展方法

野性酷女 2023-06-29 02:29 3阅读 0赞

# Ⅰ- 壹 - 严格模式 #

*  ECMAScript 6.0于2015 年 6 月正式发布
 *  ES6是一个泛指，含义是 5.1 版以后的 JavaScript 的下一代标准，涵盖了 ES2015、ES2016、ES2017 等等。
 *  ES6针对2015年之前的浏览器都不支持。

**use strict" -变量必须声明后再使用**

1.  在使用模块化的时候自动转化为严格模式

1.  函数的参数不能有同名属性，否则报错
2.  不能使用with语句
3.  不能对只读属性赋值，否则报错。offsetlef t、字符串
4.  不能使用前缀 0 表示八进制数，否则报错
5.  不能删除不可删除的属性，否则报错
6.  不能删除变量delete prop，会报错，只能删除属性delete global\[prop\]
7.  eval不会在它的外层作用域引入变量 （反射 将字符串反射未该字符串变量名的对象）
8.  eval和arguments不能被重新赋值
9.  arguments不会自动反映函数参数的变化
10. 不能使用arguments.callee
11. 不能使用arguments.callee.caller
12. 禁止this指向全局对象；顶层的this指向undefined，即不应该在顶层代码使用this。在顶层函数中不能指向window，而是undefined
13. 不能使用fn.caller和fn.arguments获取函数调用的堆栈
14. 增加了保留字（比如protected、static和interface）

# Ⅱ - 贰 - let，const和箭头函数 #

## 一 let ##

*  let：有范围的变量，不是window属性
 *  let变量仅作用于当前语句块，不存在变量提升，想用必须传参
 *  定义一个有范围的变量，不是window的属性，不允许重复声明

**（1）let 定义的变量仅限于循环及花括号语句块内**

for(let i=0;i<10;i++){ 
                sum+=i;
            }
            console.log(sum,i);//报错

**（2）let定义的变量仅作用于语句块内**

let a=3;
    function fn(){ 
        let b=5;
        console.log(a);//3
        if(b<10){ 
            let a=20;
            // let定义的变量仅作用于语句块内
            console.log(a);//20
        }
        console.log(a);//3
    }
    
    fn();//3 20 3

## 二 const ##

*  用来定义常量，常量的值不可以修改
 *  const声明之后必须赋值，否则会报错
 *  const定义不可变的量，改变了就会报错
 *  当用 const 定义对象时，不能修改引用地址，但是可以修改对象属性。将对象定义为常量不能清除。
 *  const和let一样不会与window相映射、支持块级作用域、在声明的上面访问变量会报错
 *  命名规范一般用大写字母加下划线命名 例：const EVENT\_ID=“event\_id”;

**（1）将对象类型设置为const类型**

**不能修改引用地址，但是可以修改对象属性，将对象定义为常量不能清除**

const EVENT ID= "event id"
    
    
    const obj={ 
                 a:1,b:2
             }
             obj.a=10;

## 三 箭头函数 ##

**箭头函数中，如果函数内容只有一句话，并且返回该一句话的内容。就可以不用\{\}，并且不需要写return**  
\*\*如果箭头函数中有多句代码，或者不返回任何内容，需要加\{ \}

箭头函数中参数只有一个可以不加括号 如果没有参数不能省略小括号

//箭头函数写法
     var fn=()=>{ 
         
     };
    //相当于
    var fn=function (){ 
            
         }

//箭头函数带参数写法
       var fn=(a,b)=>a+b;
    //相当于
       var fn=function (a,b){ 
            return a+b;
            }

**在回调函数中使用**

1.  map:把返回的值添加到新数组中

var arr=[1,2,3,4];
    var arr1=arr.map(item=>item+10);
    console.log(arr1)//Array(4) [ 11, 12, 13, 14 ]

1.  **sort排序**

var arr=[1,2,3,4];
    arr.sort((a,b)=>b-a);//b-a降序 a-b升序
        console.log(arr1);//Array(4) [ 4, 3, 2, 1 ]

1.  **filter找出符合条件的数**

var arr=[1,2,3,4];
    var arr1=arr.filter(item=>item>2);
    console.log(arr1);//Array [ 3, 4 ]

1.  **定时器写法**

setInterval(()=>{ 
     
             },1000);

1.  reduce 归并写法

var sum=arr. reduce( (value , item)=>value+=item);
    console.log(sum) ;

## 四 箭头函数改变this指向 ##

**箭头函数改变了this指向，将指向箭头函数外层this**

**回调函数都是指向Window，箭头函数会改变指向到外层this**

/箭头函数改变了this指向， 将指向箭头函数外层的this
    var obj = { 
    	a: 1,
    	b: function() { 
    		//1
    		setTimeout(function() { 
    			console.log(this) //指向Window
    			console.log(this.a);
    		}, 500)
    	
    		var arr = [1, 2, 3, 4];
    		//2
    		arr.forEach(function(item) { 
    
    			console.log(item + this.a); //指向Window，回调函数指向Window
    		})
    		//3
    		arr.forEach(item => { 
    			console.log(item + this.a); //指向obj 2 3 4 5
    		})
    		//4
    		setTimeout(() => { 
    			console.log(this.a); //this指`向obj 1
    		}, 500)
    		/
    	}
    }
    obj.b();

**在事件中**

**绑定事件后：事件函数如果想调用绑定事件的父类，可以使用箭头函数更改指向**
     var Utils={ 
                 ce:function(){ 
                     var div=document.createElement("div");
                     Object.assign(div.style,{ 
                         width:"50px",
                         height:"50px",
                         backgroundColor:"red"
                     });
                     // div.self=this;
                     // div.addEventListener("click",this.clickHandler);//原始的
                     
                     // div.addEventListener("click",e=>this.clickHandler(e));//普通的箭头匿名函数
     
                     // this.handler=e=>{this.clickHandler(e)};//定义的箭头函数，可以removeEventListener
                     // div.addEventListener("click",this.handler);
     
                     // div.addEventListener("click",function(e){ 
                     // // console.log(this);//div
                     // this.clickHandler(e);
                     // })
                     this.c(10);
                     document.body.appendChild(div);
                 },
                 clickHandler:function(e){ 
                     // console.log(this)//这里的this被指向div
                     // this.self->Utils
                     // 当使用箭头函数后，这里的this被指向为原有的Utils对象
                     // console.log(this);
                 },
                 c:function(a){ 
                     console.log(this);
                 }
             }
     
             Utils.ce();
    div.addEventListener("click",this.clickHandler);//原始的 
    div.addEventListener("click",e=>this.clickHandler(e));//普通的箭头匿名函数
    this.handler=e=>{ this.clickHandler(e)};//定义的箭头函数，可以removeEventListener
    
    
      clickHandler:function(e){ 
                     // console.log(this)//这里的this被指向div
                     // this.self->Utils
                     // 当使用箭头函数后，这里的this被指向为原有的Utils对象
                     // console.log(this);
                 },

**方法中使用的this**

var a=10;
    			var obj1={ 
    			    a:100,
    			    c:this.a,//window
    			    init:function(){ 
    			     // this
    			             var obj={ 
    			             a:1,
    			             c:this.a,//属性描述this,obj1
    			             b:function(){ 
    			                 // 方法中使用this
    			                 console.log(this.a);
    			             }
    			         }
    			    }

# Ⅲ - 叁 - 解构赋值 #

**数组解构赋值是按照顺序赋值**  
**解构赋值可以有初始值，如果赋值的结果是undefined则值为初始值**

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

**解构赋值可以用来做交换**  
冒泡排序

**函数参数设置初始值**

let [a,b=3]=[10];
       // 可以给函数参数设置初始值
                    function fn([a,b=10]){ 
                        console.log(a,b);
                    }
            
                    fn([3,5]);//3 5 
                    fn(3);//3 10

**对象的解构赋值**

// 对象解构赋值是按照属性名来解构
    var { c,a,b}={ a:1,b:2,c:3};
    var { c,a,b=10}={ a:1,c:3};//设置解构赋值的默认值
    console.log(a,b,c);//1 10 3

**如果多重对象解构时，属性名相同，可以使用:另外设置新变量名**  
传参时，解构赋值可以让参数传递顺序不同

var { a,b:{ a:a1},b}={ a:1,b:{ a:2}};
                console.log(a,a1,b);
            // 因为b属性被解构了，就不存在了,所以需要重新设置b属性

**字符串解构赋值**

1.
    let [a,b,c]="xyz";
     console.log(a,b,c);//x y z
    2.字符串截取
     let [,,,,a,,b]="hello world";
    console.log(a,b);//o w
    3.length可以获取字符串的长度
     let { length:len}="abcde";
     console.log(len);//5

JSON

var str='{"a":1,"b":10}';
        var { a,b}=JSON.parse(str);//转换为对象
        console.log(a,b);// 1 10

# Ⅳ - 肆 - ES6字符串扩展方法 #

## 1 includes() ##

判断字符串中是否有该内容

includes()方法，在字符串中使用时，相当于indexOf()，查询成功返回true，失败返回false

'abc'.includes('ab') // true
     
    'abc'.includes('d') // false

在数组中使用时，可以查询某个元素是否包含在数组中（只能查询Number，String类型的元素）

[1 , 2, 3].includes(0)  // false
     
    ['1' , '2', '3'].includes('1')  // true

## 2 startsWith()和endsWith() ##

*  字符串.padStart(长度,前面补充的字符);
 *  字符串.padEnd(长度,后面补充的字符);

startsWith()字符开始的地方

console.log("abcde".startsWith("a"));//字符串是否是0开始
     console.log("abcde".startsWith("b",1));//字符串在第几位是否从b开始

endsWith()字符结尾的地方

console.log("abcde".endsWith("e"));//以e为结尾
    console.log("abcde".endsWith("d",4));//从第四位开始是否是最尾部

## 3 repeat（） ##

使用repeat之后会将原来的字符串复制n次

console.log("abc".repeat(3));//abcabcabc

## 4 padStart()如果位数不足再前面补位和padEnd() ##

padStart()如果位数不足再前面补位

//如果不足5位在前面补0
    console.log((18).toString(16).padStart(5,"0"));//00012

padEnd()如果位数不足再后面补位

//如果不足5位在后面补0
    console.log((18).toString(16).padEnd(5,"0"));//12000

案例

console.log("#"+Math.floor(Math.random()*0xFFFFFF).toString(16).padStart(6,0))

## 5 字符模板 ##

1.
    var age=20;
    var str="小明今年"+age+"岁了";
    var str=`小明今年${ age}岁了`;
    console.log(str);小明今年20岁了
    2.
    var data={ price:20};
    var str=`<div>${ data.price}<div>`//<div>20<div>

## 6 Symbol 独一无二的 ##

Symbol 唯一，创建的永远没有相同的

用来做标记x消除魔术字符串**这种数据无法取出了**

var obj={ 
                [Symbol()]:1,
                [Symbol()]:2
            }

对象键值对中键可以是字符型也可以是Symbol型

var a="abc";
          const KEY_1=Symbol();
          var obj={
              [a]:10,
              [KEY_1]:100
          }
       // 这个键名就不会被覆盖
        console.log(obj[KEY_1]);
        obj.abc=200;
        console.log(obj); */

## 7 生成器函数。相当于调试器断点 ##

function* fn(a,b){ 
        // 遇到yield会停止不执行
        // 当执行函数返回对象的next()方法时才会继续向下执行
        // 或者可以使用for of 自动执行完成一个yield后继续向下执行
        yield a;
        a++;
        yield a;
        yield b;
        b++;
        yield b;
        yield a+b;
        return a+b;
    } 
    var a=fn(3,4);
    /* console.log(a.next()); console.log(a.next()); console.log(a.next()); console.log(a.next()); console.log(a.next()); console.log(a.next()); */
    for(let value of a){ 
        console.log(value);
    }