ES6 基础用法实例

最新推荐文章于 2022-08-16 21:38:12 发布

南京小菜

最新推荐文章于 2022-08-16 21:38:12 发布

阅读量243

点赞数

分类专栏： es6 文章标签： javascript

本文链接：https://blog.csdn.net/shi860715/article/details/106234228

版权

es6 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

ES6 语法

文章目录

ES6 语法

1、let 使用

在JavaScript中，var 定义的变量经常会出现作用域超范围的问题。

es6 中使用let的方式定义局部变量，在作用域内起效，超出则报错；

2 、const

在定义常量的过程中，如果修改常量，则报错。这里要注意常量的使用场景

3、解构表达式

操作数据更加便利：取出数组中的前两个数据，并赋值给新的变量

之前：

let arr = [1,2,3,5];
let x =arr[0],y=arr[1];

之后：

let arr = [1,2,3,5];
let [x,y]=arr; // 取第一个 和第二个
let [,,a,b] =arr;// 取后面两个

通过对比我们很方便的看到其中的区别；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body>
    <script>
        for (let i = 0; i < 5; i++) {
           
            console.log(i);
        }
        // console.log(i);
        // index.html:15 Uncaught ReferenceError: i is not defined

       const c =10;
      // console.log(c++);  
      //Uncaught TypeError: Assignment to constant variable.
           
         let  arr = [1,3,2,4,6]  ;
         let [x,y]=arr; // 取第一个和第二个
         let [,,a,b]=arr; // 取后面两个

         let [,...test] =arr;// 除了第一个不要之外，其他的数据都放到新数组test中

          let user = {name:"zhangsan",age:20,cost:"2000"};
          let {name,age,cost} =user;// 解构表达式很好用，
        //   let {cc,bb}= user;// 这种方式是错误的，在对象中，没有索引，所以这样的调用是错误的

         let user1 ={name:"lisi",age:22,gf:{name:"wangwu",age:18}};
          let {gf:{name:cc}}=user1;//操作复杂的对象，很方便，解析起来更顺手。（变量在使用过程中，注意作用域，千万别冲突了。）
          let {...abc} =user1;
          abc==user1; // 这里是做的对象的深拷贝，两个对象不相等。并不是浅拷贝，改变对象的引用

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

4 、open in brow 插件

vs 运行 html 到浏览器插件

注意：最好将google 浏览器，设置成默认浏览器，通过插件使用其他浏览器，并不能打开，估计360 搞的鬼。

5、html 插件

HTML Snippets 可以很方便的编写html 代码提示

6、中文插件

Chinese (Simplified) Language Pack for Visual Studio Code 中文插件，vscode 显示中文；

7 函数优化



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function sum(a,b){
            return a +b ;
        }

       const add =(a,b) => a + b ;


       const user = {
           name:'zhangsna',
           age:20,
           eat:function(){
               console.log("我非常能吃饭！！");
           }
       };
//     es6 函数优化
       const user1 = {
           name:'zhangsna',
           age:20,
           eat(){
               console.log("我非常能吃饭！！es6 新语法");
           }
       };

     user.eat();
     user1.eat();
// 传统方式

     const say =function(u){
         console.log(u.name,u.age);
     }
     say(user);
    //  es6 优化后
    const say1=({name,age}) => console.log(name,age);
    say1(user);

     


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

8 map 和reduce

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
      let arr =["10","20","130","710","-10","-910"];

    //  逐项进行处理
     let arr2 =arr.map(a => parseInt(a) );

    // reduce 结果为-50
    let sum =arr2.reduce((a,b)=>a+ b);
    // sum3 结果为150
    let sum3 =arr2.reduce((a,b)=>a+ b,200);
    //   设置初始a为0 ，结果为0
    let sum2= arr2.reduce((a,b)=>a*b,0);

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

南京小菜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ES6 基础用法实例

ES6 语法1、let 使用在JavaScript中，var 定义的变量经常会出现作用域超范围的问题。es6 中使用let的方式定义局部变量，在作用域内起效，超出则报错；2 、const在定义常量的过程中，如果修改常量，则报错。这里要注意常量的使用场景3、解构表达式操作数据更加便利：取出数组中的前两个数据，并赋值给新的变量之前：let arr = [1,2,3,5];let x =arr[0],y=arr[1];之后：let arr = [1,2,3,5];let [x,y]
复制链接

扫一扫