ES6——01——基础语法附代码

已于 2022-03-01 11:09:13 修改
阅读量161 收藏 1
点赞数
分类专栏： ES6 文章标签： javascript html5
于 2020-05-10 23:05:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/x1037490413/article/details/106042795
版权

文章目录

一：块级作用域

    块级作用域
    ES5的var的作用域是函数级
    ES6的let的作用域是块级的  块级通俗点说就是{}里面的东西
    let和const不能重复声明会报错.且不存在变量提升

1.首先看个例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        
       {
             /*var 不具备块级作用域的属性，所以在外面依然能访问到*/
             var a=12;
       }
       //alert(a);

       {
             /*let具备块级作用域的属性，会报错  只在代码块中起作用 */
             let b=12;
       }
       alert(b);
    </script>
</head>
<body>
</body>
</html>

2.闭包问题可以用let解决

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        
        window.onload=function(){
            let aBtn=document.getElementsByTagName('input');
            /*这样会产生闭包，可以用立即函数来解决，但是这样增加了额外的代码
          for(var i=0;i<3;i++){
                aBtn[i].οnclick=function(){
                      alert(i);
                };
                
          }*/
          //可以将var换成let  这个for每执行一次就会有个独立的i诞生，循环三次产生3个i，每个i有自己独立的值
          for(let i=0;i<3;i++){
                aBtn[i].onclick=function(){
                      alert(i);
                };
                
          }
        }
       
    </script>
</head>
<body>
   <input type="button" value="a">
   <input type="button" value="b">
   <input type="button" value="c">
</body>
</html>

3.不影响作用域链

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      {
        //在函数里作用域里没有name，会往上一级找，所以能输出
        let name = "跑步";
        function fn(){
          console.log(name);
        }
        fn()
      }
    </script>
  </body>
</html>

4.const使用
和let一样是块级作用域，不同的是声明常量，不能修改，且要赋初始值。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      //1.一定要赋初始值
      //const A;//报错
      //2.一般常量使用大写（潜规则）
      //3.常量的值不能修改
      const A = 100;
      //A=200;报错
      //4.块级作用域
      {
        const PLAYER = "UZI";
      }
      //console.log(PLAYER); 报错
      //5.对于数组和对象的元素修改，不算做对常量的修改，不会报错
      const TEAM = ["UZI", "KING", "LETME"];
      TEAM.push("dd");
      //但是这样会报错    TEAM='A'
    </script>
  </body>
</html>

二：解构赋值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /*
        1.两边的结构必须一样
        2.右边必须得是个东西
        3.赋值和解构同时完成

        数组的元素是按次序排列的,变量的取值由它的位置决定，而对象的属性没有次序，变量必须与属性同名，才能取到正确的值
        */
        let {a,b}={a:12,b:13,c:5};//可以多不可以少  都是对象  
        console.log(a,b);
        let {a,b}={12,5};//对象没有相对的属性名字是不能相匹配显示的
        let [c,d]=[5,8];//数组
        console.log(c,d);
        
        
     
    </script>
</head>
<body>
</body>
</html>

例子:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      //ES6允许按照一定模式从数组和对象中提取值，对变量进行赋值被称为解构赋值
      //1.数组的解构
      const arr=['一','二','三','四']
      let [a,b,c,d]=arr;
      console.log(a);
      console.log(b);
      //2.对象的解构
      const wu={
        name:'吴签',
        age:30,
        jianyu:function(){
          console.log('吴签什么时候进监狱');
        }
      }
      //相当于我们声明了三个变量并且赋值
      let{name,age,jianyu}=wu;
      console.log(name);
      jianyu()//这样解构赋值方便很多，本来需要wu.jianyu()调用
    </script>
  </body>
</html>

连续解构赋值：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    let obj={a:{b:{c:1}}}
    const {a:{b:{c}}}=obj
    console.log(c);
    //连续解构赋值并重命名
    let obj2={a:{b:2}}
    const {a:{b:data}}=obj2
    console.log(data);
  </script>
</body>
</html>

三：箭头函数

箭头函数就是把 function(){}写成()=>{}

3.1不使用箭头函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //排序
        let arr=[12,8,37,26,9];
        //arr.sort();//这种方法是把数字按照字符串排序的，12,26,37,8,9，只看第一个数字；
        //可以这样理解，不要理解成a减b的意思，理解成在26个字母中a到b的意思，在26个字母中b比a大，所以写成a-b就是升序，写成b-a就是降序。
        arr.sort(function(n1,n2){
          return n1-n2;
        });
        alert(arr);
    </script>
</head>
<body>
</body>
</html>

3.2使用箭头函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /*
        简写要求
        1:如果有且仅有一个参数，()也可以不写
        */
        let arr=[12,8,37,26,9];
        // arr.sort((n1,n2)=>{return n1-n2;});
        //2:如果有且仅有一个语句return ,{}也可以不写   arr.sort(())
        arr.sort((n1,n2)=> n1-n2);
        alert(arr);
    </script>
</head>
<body>
</body>
</html>

3.3有且仅有一个参数的情况

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
     //省略小括号，当形参有且只有一个的时候
     let add=n=>{
       return n*n
     }
     console.log(add(9));
     //省略花括号，当代码体只有一条语句的时候，且return必须省略
     //而且语句的执行结果就是函数的返回值
     let add2=n=>n*n
     console.log(add2(8));
    </script>
  </body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
      /*
       function add(n){
         return n+5;
       }
       function show(n,fn){
         alert(fn(n));
       }
       show(12,add);
      */
      //可以把以上简写成
    function show(n,fn){
      alert(fn(n));
    }
    show(12,n=>n+5)

    </script>
</head>
<body>
</body>
</html>

3.4作用：修正this

普通函数this指向调用者，箭头函数的this是静态的，this始终指向函数声明时所在作用域下的this的值，用apply等也改变不了

对this起到固定的作用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
      console.log(this);
      /*箭头函数不会改变this,函数里的this指向window,如果不用箭头函数的话就会指向json*/
      let json={
        a:12,
        //this=>当前的环境
        fn:()=>{
          console.log(this);
          
          alert(this.a);
        }
      }
      json.fn();
   
    </script>
</head>
<body>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
      /*普通的function函数的this是变的，跟着执行人走，用箭头函数this是固定的，取决于在哪声明了这个函数，除非用apply等改变this指向*/
      /*上一个例子this的环境是全局,只是赋值语句*/
      class Json{
        constructor(){
          console.log(this);
          this.a=12;
          this.fn=()=>{
            console.log(this); 
            alert(this.a);
          }
        }
      }
      let json=new Json();
      // json.fn();
      let oDate=new Date();
      oDate.fn=json.fn;
      oDate.fn();
    </script>
</head>
<body>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
     //普通函数直接调用this是指向window的   箭头函数是在全局作用域下声明的
     function getName(){
       console.log(this.name);
     }
     let getName2=()=>{
       console.log(this.name);
     }
     window.name='全局'
     const s={
       name:'new'
     }
     //直接调用
     getName()
     getName2()
     //call改变this指向
     getName.call(s)
     getName2.call(s)
     //2.不能作为构造实例化对象
    //  let Person=(name,age)=>{
    //    this.name=name;
    //    this.age=age;
    //  }
    //  let me=new Person('xiao',30)
    //  console.log(me);
     //3.不能使用arguments变量
    // let fn=()=>{
    //   console.log(arguments);
    // }
    // fn(1,2)
    </script>
  </body>
</html>


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .ad{
        width: 200px;
        height: 200px;
        background:red ;
      }
    </style>
  </head>
  <body>
    <div class="ad"></div>
    <script>
     let ad=document.getElementsByClassName('ad')[0]
     ad.addEventListener('click',function(){
       setTimeout(()=>{//箭头函数是在ad.addEventListener里function这个函数作用域下声明的，所以this指向事件源ad
         console.log(this);
         this.style.background='green'
       },1000)
     })
    </script>
  </body>
</html>


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
     const arr=[1,6,8,100,23]
    //  const result=arr.filter(function(item){
    //    if(item%2===0){
    //      return true
    //    }else{
    //      return false
    //    }
    //  })
    //箭头函数简写
     const result=arr.filter(item=>item%2===0)
     console.log(result);
    </script>
  </body>
</html>

3.5在react项目中使用箭头函数需要注意

在这里插入图片描述

四:rest参数和扩展运算符的使用

1.rest参数

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
     //ES5获取实参的方式 
     function date(){
       console.log(arguments);//结果为对象
     }
     date('hi','ur','zara')
    //ES6引入rest参数，用于获取函数的实参，用来代替arguments
     function date2(...args){
       console.log(args);//结果为数组 可以使用数组的filter some every map方法
     }
     date2('hi','ur','zara')

     //rest参数必须要放到参数后
     function fn(a,b,...args){
       console.log(a);
       console.log(b);
       console.log(args);
     }
     fn(1,2,3,4,5,6)
    </script>
  </body>
</html>

2.扩展运算符

扩展运算符能够将数组转换为逗号分隔的参数序列

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
    const arr=['杨幂','江疏影','古力娜扎']
    function actress(){
      console.log(arguments);
    }
    actress(...arr)//与rest参数不一样的地方是rest的...在形参括号里
    </script>
  </body>
</html>


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        //收集参数
        //...必须在形参的最后一个
      function show(a,b,...c){//三个点是收集剩余参数
      console.log(a,b,c);
      }
      show(1,2,3,4,5,6,7,8);//1 2 Array(6)
    </script>
</head>

<body>
   
</body>

</html>

数组展开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
      let arr1=[23,6,3];
      function show(a,b,c){
          alert(a+b+c);
      }
      //show(arr1);//23,6,3undefinedundefined  这样是把23，6，3全部放进a里面了
      show(...arr1);//32   数组展开   相当于是show(23,6,3);

    </script>
</head>

<body>
   
</body>

</html>

数组的合并：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        //字符串连接
     let arr1=[12,5,8];
     let arr2=[1,2,3];
     let arr=[...arr1,...arr2];
     alert(arr);
    </script>
</head>

<body>
   
</body>

</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div></div>
    <div></div>
    <div></div>
    <script>
      //1.数组的合并
      const arr = ["杨幂", "江疏影", "古力娜扎"];
      const arr2 = ["梁朝伟", "古天乐"];
      const actress = [...arr, ...arr2];
      console.log(actress);
      //2.数组的克隆
      const arr3 = ["a", "b", "c"];
      const arr4 = [...arr3];
      console.log(arr4);
      //3.将伪数组转为真正的数组
      const divs = document.querySelectorAll("div");
      console.log(divs);
      const divArr = [...divs];
      console.log(divArr);
    </script>
  </body>
</html>

json展开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
   let json={a:12,b:5,c:99};
   /*
   错误展示
   alert(...json);//这样写相当于alert(a:12,b:5,c:99);这不是json,少了括号{}
   */
   let json2={
       ...json,
       d:999
   };
   console.log(json2);
   
    </script>
</head>

<body>
   
</body>

</html>

五：原生对象扩展 （箭头函数用在这四个方法很方便）

5.1 map 映射一一对应，进去多少出来多少

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
  let arr=[60,59,88,100,90];
  /*let arr2=arr.map(function(item){
    // if(item>=60){
    //   return '及格';
    // }else{
    //   return '不及格';
    // }
    //简化  用三目运算符
    // return item>=60?'及格':'不及格';  
  });*/
  //使用箭头函数
  let arr2=arr.map(item=>item>=60?'及格':'不及格');
  console.log(arr);
  console.log(arr2);
  
  
   
    </script>
</head>
<body>
</body>
</html>

5.2 reduce 缩减 n---->1 进去n个，出来一个

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
  let arr=[60,59,88,100,90];
  let result=arr.reduce(function(tmp,item,index){//一开始temp是第一个数60，item是第二个数59
//  alert(index+":"+tmp+":"+item);
if(index==arr.length-1){//最后一次
return (tmp+item)/arr.length;
}else{
  return tmp+item;//需要计算一个结果并且返回出来作为下一步的输入
}
  });
 alert(result);
    </script>
</head>
<body>
</body>
</html>

5.3 filter 过滤 不一定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
      //一个例子，只要偶数，过滤掉奇数
  let arr=[60,59,88,100,90];
 let arr2=arr.filter(item=>item%2==0);
 console.log(arr);
 console.log(arr2);
 
 
    </script>
</head>
<body>
</body>
</html>

5.4 forEach 遍历循环 没有返回值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
    let arr=[60,59,88,100,90];
   arr.forEach((item,index)=>{
   //  alert('第'+index+':'+item);
   
   alert(`第${index}个：${item}`);//另一种简便写法  模板字符串  反引号(`)标识
   }) 
    </script>
</head>
<body>
</body>
</html>

5.5 json写法，json对象

JSON.stringify({a:12,b:5});//JSON转变成字符串 ，方便发送
JSON.parse(’{“a”:12,“b”:5}’);//字符串还原成JSON

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
  /*let json={a:12,b:5,name:"blue"};//字符串要用双引号
  alert(JSON.stringify(json));*/
   
   let str='{"a":12,"b":5}';
   let json=JSON.parse(str);
   console.log(json);
   
    </script>
</head>
<body>
</body>
</html>

5.6 find方法

ES6中数组方法（ find )
有一个对象数组，找到符合条件的对象 （find方法找到符合条件的对象之后不在往后执行）无符合条件返回undefined
复制代码

   var arr = [
        {name:'jerry',sex:'man'},
        {name:'jack',sex:'woman'},
        {name:'jack',sex:'man'}
    ]
    var jack = arr.find(function(obj){
        return obj.name == 'jack';
    })
    console.log(jack);  // 返回符合条件的第一个对象{name: "jack", sex: "woman"}

    var bill = arr.find(function(obj){
        return obj.name == 'bill';
    })
    console.log(bill);  // undefined

六：模板字符串

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      //1.声明
      let str = `我是模板字符串`;
      console.log(str);
      //2.内容中可以直接出现换行符
      let str2 = (
        `<ul>
          <li>hi</li>
          <li>你好</li>
          <li></li>
          <li></li>
        </ul>`
      );
      console.log(str2);
      //3.变量拼接
      let str3='Hangz'
      let str4=`${str3}hou`
      console.log(str4);
    </script>
  </body>
</html>

七：对象的简化写法

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
     //ES6允许在大括号里面，直接写入变量和函数，作为对象的属性和方法
     //这样的书写更加简洁
     let name='阿里'
     let change=function(){
       console.log('我想升职加薪');
     }
     const container={
       name,//该对象的属性和之前name变量值一样，所以可省写
       change,
       improve(){
         console.log('我想转行当厨师');
       }
     }
     console.log(container)
     container.change()
     container.improve()
    </script>
  </body>
</html>

八：函数参数的默认值设置

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
     // ES6允许给函数参数赋值初始值
     //1.形参初始值，具有默认值的参数，一般位置要靠后
     function add(a,c,b=20){
       return a+b+c
     }
     let result=add(1,2)
     console.log(result);
     //2.与解构赋值结合
     function connect({host="127.0.0.1",username,password,port}){
       console.log(host);
       console.log(username);
       console.log(password);
       console.log(port);
     }
     connect({
       host:'8800',
       username:'root',
       password:'root',
       port:3306
     })
    </script>
  </body>
</html>
野生小米椒
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ES6基础语法
qq_49633562的博客
08-31 428
ECMAScript 6语法简介1、块作用域构造let和constlet声明const声明全局块作用域绑定2、模板字面量多行字符串字符串占位符3、默认参数4、rest参数5、展开运算符6、对象字面量语法扩展属性初始值的简写对象方法的简写语法可计算的属性名7、解构赋值对象解构 1、块作用域构造let和const let声明 使用let声明的变量的作用域限制在当前代码块中： //函数内部 function changeState(flag) { if(flag){ let color =
ES6基本语法
weixin_45490507的博客
03-19 163
ES6基本语法1. let声明变量2. 定义常量3. 解构赋值4. 模板字符串5. 声明对象6. 方法简写7. 对象扩展运算符8. 箭头函数 ES6标准中不包含DOM和BOM的定义，只涵盖基本数据类型、关键字、语句、运算符、内建对象、内建函数等通用语法，这个笔记只记录了前端开发中ES6的最少必要知识，方便后面项目开发中对代码的理解。 1. let声明变量 es6使用关键字let定义变量，声明的变量有局部作用域 <script> // es6如何定义变量，定义变量特点 // js
ES6语法
m0_73442777的博客
06-11 1964
本文将介绍 ECMAScript 2015（简称 ES6）的一些核心特性和改进。ES6 是 JavaScript 的一项重要更新，为开发者提供了许多新的语法和功能，以提升开发效率和代码可读性。本文将深入探讨 ES6 中的箭头函数、模板字符串、解构赋值、类和模块化等重要特性。
ES6及以上语法（主代码）
hzf1105的博客
04-26 377
1. 解构赋值 // 数组 let arr = ['apple', 'pear', 'bananar', 'sour']; let [a, b, c, d] = arr; console.log(a, b, c, d); // apple pear bananar sour // 对象 let obj = { uname: 'Tom', age: 18, play: function() { console.log('like ping-pong'); }...
ES6常用语法
程序员蒋老湿的博客
10-14 214
著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。 初识ES6 ES6：最新版的JS，ECMAScript标准 JavaScript语言(实现)，它还有多种称呼： ECMAScript6.0 ECMA6 ES6 变量 var——重复定义不报错；没有块级作用域；不能限制修改let——变量，不能重复定义，有块级作用域const——常量，不能重复定义，有块级作用域 函数+参数 箭头函数的简写方式： 只有一个参数，()可以省 只有一个语句，还是return，{}可以省 数组 方法
ES6新语法概览
lock1995的博客
07-15 1228
ES6是JavaScript语言的新一代标准，加入了一些新的功能和语法，正式发布于2015年6月，亦称ES2015；该标准由ECMA（欧洲计算机制造联合会）的第39号技术专家委员会（TC39）制订，ES7正在制订中，据称会在2017年发布。
ES6的语法
weixin_34038652的博客
09-15 56
2019独角兽企业重金招聘Python工程师标准>>> ...
JS面向对象编程——ES6 中class的继承用法详解
10-15
在JavaScript的ES6标准中，面向对象编程得到了显著的增强，引入了`class`语法糖，使得类的定义更加简洁且符合传统面向对象语言的习惯。本文将深入探讨ES6中的`class`继承及其相关操作技巧。 ### 基本介绍 在ES5中...
JavaScript实战手册——第七版代码
11-23
1. **基础语法**：包括变量、数据类型（如字符串、数字、布尔、null、undefined、对象、数组等）、运算符、流程控制（条件语句、循环）、函数、作用域和闭包等。 2. **面向对象编程**：探讨类、构造函数、原型链、...
JavaScript基础教程——入门必看篇
10-22
2. **数据类型**：JavaScript有六种原始数据类型（Undefined、Null、Number、String、Boolean和Symbol，Symbol是ES6新增的）以及一种复杂数据类型（Object）。 3. **undefined 和 null 的区别**：undefined 表示变量...
ES6基础之默认参数值
10-17
在JavaScript的ES6版本中，引入了一种新的特性——默认参数值，这使得函数在定义时可以直接为参数赋予默认值，极大地提高了代码的可读性和简洁性。在ES6之前，我们通常通过条件语句来处理函数参数缺失的情况，但这种...
ES6/ES2015核心内容
CC_leather的博客
01-05 1062
ECMAScript 6（以下简称ES6）是JavaScript语言的下一代标准。因为当前版本的ES6是在2015年发布的，所以又称ECMAScript 2015。 也就是说，ES6就是ES2015。 虽然目前并不是所有浏览器都能兼容ES6全部特性，但越来越多的程序员在实际项目当中已经开始使用ES6了。所以就算你现在不打算使用ES6，但为了看懂别人的你也该懂点ES6的语法了… 在
vue2前端阿里云oss服务端签名直传
weixin_74285634的博客
08-13 276
generatePresignedUrlApi是由后端提供的接口 来获取密钥。
【vue教程】五. Vue 的路由管理
前端探索者
08-13 1109
Vue Router 是 Vue 官方的路由管理器，用于构建单页面应用。它允许你通过 URL 来映射不同的组件，实现页面的动态加载和导航。路由守卫用于在路由跳转前后执行代码，可以用来检查用户认证状态、获取数据等。通过本篇文章，我们学习了 Vue Router 的基本概念、配置和使用，以及如何实现动态路由和嵌套路由。我们还探讨了路由守卫的概念，并提供了如何在 Vue 组件中使用它们的示例。这些知识点将帮助你构建一个功能完备的单页面应用。
CSS的:defined伪类：选择已定义元素的新选择器
2401_85743969的博客
08-17 345
在CSS中，伪类用于选择元素的不同状态或行为。:defined伪类是CSS4的一个特性，用于选择已经在文档中定义的元素。
【无标题】
weixin_42348009的博客
08-14 170
静态方法返回一个由给定对象自身的可枚举的字符串键属性名组成的数组。
使用 Node.js 和 Express 框架通过网页访问GPIO和嵌入式 Linux 系统中使用 GSM/3G/4G 模块
最新发布
m0_45463480的博客
08-17 635
想要快速开发嵌入式 Linux 网络应用，控制硬件 GPIO，从而使得用户能够远程控制和监控系统。主要目的是向读者展示开发使用文件系统控制 GPIO 的 Node 代码、创建用户有好的界面、以及运行基于 Express 框架使用 AJAX 通客户端进行通信的网络服务器。为了理解客户端应用，建议先了解 HTML+CSS、jQuery 和 AJAX 知识。
基于vue框架的爱看电影网站v4o92（程序+源码+数据库+调试部署+开发环境）系统界面在最后面。
h2345678的博客
08-15 963
项目功能：用户,电影分类,电影信息,电影评分基于Vue框架的爱看电影网站项目功能丰富多样，旨在为用户提供一个集电影浏览、信息查询、观影体验、互动交流于一体的综合性平台。
NVDLA专题4：具体模块介绍——Convolution DMA
fangfanglovezhou的博客
08-14 560
NVDLA专题4：具体模块介绍——Convolution DMA
JavaScript ES5 & ES6：基本语法与数据类型解析
在ES6之后，还添加了第七种数据类型——Symbol，用于创建独一无二的标识，但这在本教程中未涉及。 这些基础知识构成了JavaScript编程的基础，理解和掌握它们对于编写有效的JavaScript代码至关重要。随着对语言的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值