ES6的几个新特性-JavaScript

超、凢脫俗 2022-09-11 07:19 182阅读 0赞

# ES6新特性 #

### ECMAScript 6 ###

##### 严格模式 #####

如果写在全局，则全局都是严格模式，如果写在函数内，则函数内是严格模式

`"use strict"`一定要写在第一行，全局第一行或函数中的第一行

1.  必须使用变量修饰符，否则报错
2.  this不再指向window
3.  不能使用arguments.callee

"use strict"
    //1.必须使用变量修饰符，否则报错
    x='123';//报错
    
    //2.this不再指向window
    function play(){
        
        console.log(this);//this不再指向window
    }
    play();//结果为undefined
    
    //3.不能使用arguments.callee
    var obj = {
        
            sub() {
        
             //不能使用arguments.callee
               console.log(arguments.callee);
             }
          }
       obj.sub();
    //'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them

##### 模板字符串（\`\`） #####

解决2个问题：

1.  变量和字符串连接问题，不需要再使用加号拼接
2.  多组字符串拼接，不需要再使用引号和+号拼接

var name = 111;
            var str = `${
          name}12345678912345678913456789
            987654321987654321987654321
            147${
          name}
            258258258258258258258
            369369369369369`
            document.write(str);

![在这里插入图片描述][1a607a6d3dd04e2cb03e22248a1d6882.png_pic_center]

可以将变量直接加进去拼接

##### 扩展运算符（…） #####

扩展运算符在函数中作为可变参数使用

//不论传多少个参数，都会被添加到这个数组中
    function sum (name,...arr){
        
        console.log(name);
        console.log(arr);
    }
    sum(1,2,3,4,5);
    sum("jack",1,2,3);
    //第一条输出结果为：1  [2,3,4,5]
    //第二条输出结果为：Jack [1,2,3]

注意：扩展运算符要写在形参的最后

##### 默认参数 #####

如果传参，则使用传进来的参数，如果不传参，则使用默认参数

//默认参数
    function play(x=1,y=2){
        
        return x*y;
    }
    console.log(play());//2
    console.log(play(2,3))//6

##### 解构赋值 #####

//1.字符串"how are you doing?"将每个单词放在一个单独变量里
    var str = "how are you doing?";
    [one,two,three,four]=str.split(" ");
    console.log(one);//how
    console.log(two);//are
    console.log(three);//you
    console.log(four);//doing
    
    //2.可以在对应位置留空来跳过被解构数组中的某些元素
    [,world,,] = str.split(" ");
    console.log(world);//are
    
    //3.结合“扩展运算符”来捕获数组中的所有尾随元素
    [x,...y] = str.split(" ");
    console.log(x); //how
    console.log(y); //["are","you","doing?"]
    
    //4.不用第三变量交换a和b的值
    var a = "123aaa";
    var b = "456bbb";
    [a,b] = [b,a]
    console.log(a);//456bbb
    console.log(b);//123aaa
    
    //5.对象的解构
    var animal = {
        
        name:'xh',
        age:3,
        owner:'hh',
        sex:'m'
    }
    let {
        name,sex} = animal;
    console.log(name);//xh
    console.log(sex);//m
    
    //6.对象当参数的解构
    function play({
         owner}){
        
        console.log(owner);
    }
    play();//hh

typeof只能检测出来：string,number,boolean,function,undefined,object（null属于object）  
instanceof可以用来检测类型,返回true或者false  
`console.log(y instanceof Date);//false`  
`console.log(new Date() instanceof Date);//true`

### set集合 ###

一种无序的、值必须唯一的数据集合

1.  创建set

const myset = new Set();

1.  给set添加值

myset.add("jack");

1.  判断某个值是否存在，存在返回true，不存在返回false。

console.log(myset.has("jack"));

1.  删除某个值

myset.delete("jack");

1.  myset.keys()和myset.values()会返回所有的数据集合
2.  清空set

myset.clear();