vscode前端软件安装及ES6新特性使用

Remex1024

已于 2022-02-25 10:34:06 修改

阅读量1.3k

点赞数

文章标签： vscode 编辑器 ide

于 2022-02-23 10:50:13 首次发布

本文链接：https://blog.csdn.net/qq_61104892/article/details/123084075

版权

1.VSCode下载安装

vscode下载地址

官网下载：https://code.visualstudio.com/

安装教程

鼠标左键双击，即可运行安装程序

一：同意协议

二：选择安装路径

VSCode默认安装在C盘，可点击浏览选择安装的位置
三：选择创建VSCode的快捷方式并进行下一步安装

四、安装完成

安装完成后桌面上将出现该VSCode的快捷方式

2.VSCode使用

一、VSCode常用插件配置

在插件商店下载配置插件，安装中文插件包后需点击重启运行VSCode

二、软件授权

第一次安装VSCode 需要右键软件设置启动为管理员权限，否则终端输入命令可能无法运行

三、项目创建

1）创建项目所在文件夹

2）创建一个html文件，shift+！+回车快速生成html文档

四、let与const

4.1 let与var

let：ES6新增，用于声明变量，有块级作用域

var：ES5中用于声明变量的关键字，存在各种问题（例如：红杏出墙~）

<!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.Es6中let新特性
// ① var声明的变量往往会越域 ；let 声明的变量有严格局部作用域
    // 列1：
    //      {
    //             var a = 1;
    //             let b = 2;
    //      }
    //     console.log(a); //控制台打印1
    //     console.log(b);// ReferenceError: b is not defined
    //列2：
//          function fn2(){
//          for(var i = 0; i < 5; i++){
//           // do something
//       }
//       // 此处会正常打印出 i 的值，这是错误的
//       // i是定义在循环体之内的，只能在循环体内打印，当前现象叫做红杏出墙！！！
//       console.log(i);
//   }
//   function fn2(){
//       for(let i = 0; i < 5; i++){
//           // do something
//       }
//       // 此处会报错，无法打印，防止红杏出墙！！！
//       // i是定义在循环体之内的，循环体外当然无法打印 
//       console.log(i);
//   }
//   fn2();


//②var可以声明多次  ；let只能声明一次
        //     var m = 1
        //     var m = 2
        //     let n = 3
        //    let n = 4
        //     console.log(m);//2
        //     console.log(n);// Identifier 'n' has already been declared

//③var会变量提升    ；let不会变量提升
            //  console.log(x) ;// undefinedvar
            //   x = 10;
            //  console.log(y);// ReferenceError: y is not definedlet
            //  y = 20;

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

4.2 const变量声明

const声明变量后不允许改变，一但声明必须初始化，否则会报错

const a=1;
a=2;//报错Uncaught TypeError: Assignment to constant variable.

五、解构表达式

①数组解构
 let arr =[1,2,3]; 
 //旧方法数组取值赋值	：let a = arr[0]; let b = arr[1];  let c = arr[2];
 //新办法取值赋值
 let [a,b,c] = arr;
 console.log(a,b,c)//控制台打印值
②  对象解构
const person ={name: "jack",age: 21,language: [ 'java','js', 'css']} //声明一个常量
//解构表达式获取值，将person里面每一个属性和左边对应赋值
 const { name:abc,age,language } = person; //：abc表示从person里面解构name的值赋给abc
//等价于下面
//const name = person. name;//constage = person. age; const、language = person.language;
console.log(abc);   console. log(age);	console. log (language);
//控制台分别打印出jack,21,['java','js', 'css']

六、map和reduce

//数组中新增了map和reduce方法。
//①map():接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回。
let arr = [ '1'，'20', '-5','3'];
arr = arr.map(item=> item*2);//等价 arr = arr.map((item)=>{return item*2});
console.log(arr);
//②reduce()为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，
//[2，40，-10，6]  arr.reduce(callback, [initialvalue])
/**
1、previousValue（上一次调用回调返回的值，或者是提供的初始值（initialvalue))
2、currentvalue（数组中当前被处理的元素)
3、index(当前元素在数组中的索引》
4、array（调用reduce的数组）*/
let result = arr.reduce((a,b)=>{
console.log("上一次处理后: "+a);console.log("当前正有处理:"+b);return a + b;});
console.log(result) 
//上一次处理后:2当前正在处理:40上一次处理后:42当前正在处理:-10上一次处理后:32当前正在处理:6	38