04-ES6（ES2015）[严格模式、模板字符串、展开运算符、参数默认值、解构赋值、set 、map]

ES6【ES2015】

ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association）通过ECMA-262标准化的脚本程序设计语言。

JavaScript是对这个标准的实现和扩展

一、严格模式

注意事项：

• "use strict" 指令只允许出现在脚本或函数的开头

• 严格模式下不能使用未声明的变量，不论是全局还是局部

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

• 在函数内，禁止使用this关键字指向全局对象（window）

• 在函数内，不能使用arguments.callee

优点：

• 消除代码运行的一些不安全之处，保证代码运行的安全

• 提高编译器效率，增加运行速度

• 为未来新版本的JavaScript做好铺垫

二、模板字符串

解决两个问题

• 变量和字符串连接的问题，不需要再用加号拼接

• 多行字符串不需要再用多组+拼接(反引号)

案例

 var str = `${name}是NBA最好的得分手之一，突破、投篮、罚球、三分球他都驾轻就熟
     几乎没有进攻盲区，单场比赛81分的个人纪录 
     就有力地证明了这一点。除了疯狂的得分外， 
     ${name}的组织能力也很出众，经常担任球队进攻的第一发起人。
     另外${name}还是联盟中最好的防守人之一，贴身防守非常具有压迫性。`
 document.write(str);

拼接字符串（反引号）

var a='你好'；
var b='它好'；
var c=`ab`
//原来
c='a'+'b'

拼接字符串和变量

var a='苹果'；
//原来
var b='我爱吃'+a+'给我'+a;
//现在
var b='我爱吃$(a)给我$(a)'

三、扩展运算符[...]

展开符在函数中应用

var arr = [1, 2, 3, 4]
console.log(arr);//[1,2,3,4]
//展开
console.log(...arr);//1 2 3 4
console.log([...arr]);//[1,2,3,4]
//简单数据类型深拷贝
var set = [...arr]
set[0] = 7;
console.log(set);//[7,2,3,4]

//...展开符可以将函数形参全部转换为一个真数组
function sum(...arr) {
       console.log(arr);//[1]
      console.log(arguments);//伪数组，argments[1,callee;……]
  }
sum(1)

 

(1)、形参arr的前面写三个点，就代表这个数组的长度是不一定的，你传递的实参组个数多少都无所谓

function changeParam(…arr){
        console.log(arr);
    }
    changeParam(“a”,”b”,”c”);
    changeParam(123,456);
    changeParam([“a”]);

(2)、如果还想传别的参数，需要把可变参数放到最后

function changeParam(num,...arr) {
        console.log(arr+"<br>");
    }
    changeParam(2,["a", "b", "c"]);
    changeParam(3,[123, 456]);
    changeParam(4,["a"]);

(3)、对象中应用：

• 展开对象的最外层结构，

• 简单数据类型是深拷贝

• 里面的复杂数据类型是浅拷贝

  let z = { a: 3, b: 4 }; 
    let n = { ...z };

(4)、数组中应用：

  //数组转序列
    console.log(...[1, 2, 3]); //1 2 3
    console.log(1, ...[2, 3, 4], 5); //1 2 3 4 5
    //伪数组转化为数组
    var oDiv = document.getElementsByTagName("div");
    console.log([...oDiv]); //[div, div, div]
    //数组复制
    var arr2=[…arr1]
    //求最大值
    Math.max(...array)

四、参数默认值

//如果传递了参数，则使用传过来的参数；如果没传参数就用默认值
    function show(name = "some people", sex = "man", age = "18") {
        //你的骚操作
    }
    show();
    show("jackie","woman",33)

(1)、原来的默认值方法

<script>
        //参数默认值
        //旧的参数默认值
        function sum(x, y) {
            //如果不给传参的话，x和y默认是0
            x = x || 0;
            y = y || 0;
            return x * y;
        }
        console.log(sum()) //0
        console.log(sum(2, 3)) //6
 </script>

(2)、ES6新增

//ES6的默认参数写法
 //如果传递了参数，则使用传递过来的参数，如果没传参数就使用默认的值
        function sum1(x = 1, y = 2) {
            return x + y;
        }
        console.log(sum1()); //3
        console.log(sum1(8, 2)); //10

五、解构赋值

(1)、解构赋值

字符串：将字符串中的每个单词放在一个单独的变量中

<script>
        //字符串：“how are you doing”,将每个单词放在一个独立的单独的变量里

        var str = "how are you doing";
        //(1)、利用空格将字符串转换为数组
        var str1 = str.split(' ');
        console.log(str1[0]); //how
        console.log(str1[1]); //are
        console.log(str1[2]); //you
        console.log(str1[3]); //doing

        //(2)、新的方法
        [one, two, three, four] = str.split(' ');
        console.log(one); //how
        console.log(two); //are
        console.log(three); //you
        console.log(four); //doing

        //(3)、可以在对应的地方留空来跳过解构数组中的某些元素
        [, , , u, ] = str.split(' ');
        console.log(u); //doing

        //(4)、如果不留空的话,会默认输出第一个
        [a] = str.split(' ');
        console.log(a); //how

        //(5)、结合“扩展运算符”来捕获数组中的所有尾随元素。即最后一个元素
        [x, ...y] = str.split(' ');
        console.log(x); //how
        //y这个变量是Array的实例
        console.log(y); //Array[are,you,doing]

        //(6)、 只能检测出来：string,number,boolean,function,underfinwd,object等
        //instanceof能判断数据类型，返回布尔值
        console.log(y instanceof Object); //true
        console.log(y instanceof string); //false
         console.log(y instanceof Date);//false
        console.log(new Date() instanceof Date); //true
    </script>

(2)、面试题：如何不利用第三方变量来交换a和b的值

  <script>
        //面试题：如何不利用第三个变量来交换a和b的值
        var a = 1;
        var b = 2;
        //(1)、利用声明的一个临时变量来进行交换
        var temp = ''
        temp = a;
        a = b;
        b = temp;
        console.log(a); //2
        console.log(b); //1

        //(2)、利用运算符来进行交换
        a = a + b; //3=1+2
        b = a - b; //1=3-2
        a = a - b; //2=3-1
        console.log(a, b); //2,1
        
        //(3)、利用新增方法
        var a = 'cat';
        var b = 'dog';
        [b, a] = [a.b]
        console.log(a); //狗
        console.log(b); //猫
    </script>

(3)、对象的结构

<script>
        //对象的结构
        var anima = {
            type: '猫科动物',
            color: '黄色',
            age: 3,
            name: '小黄'
        }
        
        //直接调用类型和颜色
        let {
            type,
            color
        } = anima;
        console.log(type); //猫科动物
        console.log(color); //黄色

        //把对象当参数的结构
        function hunt({
            name
        }) {
            console.log(name); //小黄
        }
    	//把对象当作实参来调用
        hunt(anima)
    </script>

六、set

• 创建、添加值、删除值、判断是否有值、返回所有的值、清空值

• 含义：一种无序、值必须唯一的数据集合

• 创建Set集合：可接收数组或类似数组的对象、字符串作为参数

• var myset=new Set([可选参数]);

(1)特点

• 是伪数组但是没有下标，是一组数据的集合

• 会自动去重，相同的数据只会保存一个，不会有重复

<script>
        //set：没有下标，值是唯一的，不会重复，会自动去重
        //不是一个伪数组

        //1、创建Set集合
        const myset = new Set();

        //2、给Set添加值,set里面可以存放任意数据类型的值
        myset.add(true);
        myset.add('咯咯');
        myset.add(123);
        myset.add({})
        console.log(myset);
        console.log(myset[0]); //underfined

        //3、判断某个值是否存在
        console.log(myset.has('luoluo')); //false
        console.log(myset.has('咯咯')); //true

        //4、删除
        myset.delete('咯咯')
        console.log(myset.has('咯咯')); //false

        //5、keys()和values()返回所有的数据集合
        console.log(myset.keys());
        console.log(myset.values());

        //6、清空
        myset.clear()
        console.log(myset);
    </script>

新增语法

• 遍历值，和for in做对比

m.forEach(function(value,key){
        console.log(key,value);
    })

//新增语法for  of  遍历语法，这里的i不是下标，而是值
        for (let i of myset) {
            console.log(i);
        }
        for (let i of[1, 3, 2, 4, 5, 6, ]) {
            console.log(i);
        }//1 2 3 4 5 6

面试题，数组去重

Array.from(iterable)

• Array.from()可以将伪数组，Set 转换为普通数组

• iterable 可以被遍历的对象,参数

var list=[["jack", "rose", "Frank", "Peter", "Tim", "rose", "Frank"];
var myset=new Set(list)
//Array.from()可以将伪数组，set转换为普通数组
console.log(Array.from(myset))

var arr = [1, 2, 3, 4, 2]
        var num = new Set(arr)
        var num1 = Array.from(num)
        console.log(num1);

七、map

• 含义：采用key-value的键值对形式存储数据，key不能重复

• 创建Map集合：var maps=new Map();

特点

• key不能有重复，但是value可以有重复

 <script>
        //1、创建map实列
        var m = new Map();

        //2、给map添加数据
        m.set('name', '东东')
        m.set('age', 15)
        m.set(false, true);
		m.set(false,3)//错
		m.set('niha',true)//可以

        //3、根据key来获取value
        console.log(m.get('name')); //东东

        //4、删除
        m.delete(false);
        m.delete('name');

        //5、根据key来判断value是否存在
        console.log(m.has(false)); //false，不存在，刚被删了
        console.log(m.has('age')); //true,存在

        //6、返回map里面的所有key
        console.log(m.keys());
        //7、返回map里面的所有的value
        console.log(m.values);
        //8、返回所有的key-value数据对
        console.log(m.entries());

        //9、遍历
        m.forEach(function(value, key) {
            console.log(key, value); //返回age  15
        })

        //10、遍历
        for (let i of m) {
            console.log(i);
        } //遍历返回的是value

        //清空
        m.clear()
    </script>

 

数组、Set、Map 对比

Array	有序集合	下标唯一，值可重复，下标是有序的
Set	无序集合	没有下标，值是唯一
Map	无序集合	键值对存储键唯一,值可重复