当前位置： 代码迷 >> 综合 >> 04-ES6（ES2015）[严格模式、模板字符串、展开运算符、参数默认值、解构赋值、set 、map]
  详细解决方案

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

热度：56   发布时间：2024-01-04 02:36:29.0

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 3console.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默认是0x = x || 0;y = y || 0;return x * y;}console.log(sum()) //0console.log(sum(2, 3)) //6</script>
 
 
(2)、ES6新增
 
 
//ES6的默认参数写法//如果传递了参数，则使用传递过来的参数，如果没传参数就使用默认的值function sum1(x = 1, y = 2) {return x + y;}console.log(sum1()); //3console.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]); //howconsole.log(str1[1]); //areconsole.log(str1[2]); //youconsole.log(str1[3]); //doing//(2)、新的方法[one, two, three, four] = str.split(' ');console.log(one); //howconsole.log(two); //areconsole.log(three); //youconsole.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); //trueconsole.log(y instanceof string); //falseconsole.log(y instanceof Date);//falseconsole.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); //2console.log(b); //1//(2)、利用运算符来进行交换a = a + b; //3=1+2b = a - b; //1=3-2a = a - b; //2=3-1console.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')); //falseconsole.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来获取valueconsole.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里面的所有keyconsole.log(m.keys());//7、返回map里面的所有的valueconsole.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
    无序集合
    键值对存储键唯一,值可重复
   

  
 



                  

                  
                  
                  

                

                

              


			  
			

				
				
			


        
             

                
  相关解决方案

                
                

                  
                

              

               
            

            
            

              

                

                 	

				    
				    
                

              

            

            
            
            

          

          

        

        

      

      
      
      

     

         

         
         	代码迷 - 您身边的软件异常，代码异常，编程异常助手（发现，解决，分享）

         Copyright © 2009-2013 DAIMAMI.COM. All rights reserved.