2.前端-项目运行+ES6

最新推荐文章于 2023-05-09 06:30:00 发布

兴趣使然的CV工程师

最新推荐文章于 2023-05-09 06:30:00 发布

阅读量156

点赞数

分类专栏： Vue 文章标签： js java nodejs object javascript

本文链接：https://blog.csdn.net/weixin_51211461/article/details/119694547

版权

Vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

运行项目

vscode下载以及插件安装

vscode官网

安装nodejs安装链接

测试安装完毕

设置npm的镜像

下载依赖(在vscode里)--路径不能有中文

npm install后

会生成这样一个文件夹

编译运行

前端的技术

ES6

shift+！生成html的文档头

let和var的区别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
 <h1>
    <script>
        //ES6的新特性有let 和 const两个关键字 相比于var，let更为严谨更像java的关键字，const为常量，定义后不可修改
        const a=1;
        //a=2 客户端报错
        console.info(a);

        //这里的大括号限定了作用域范围，而var关键字修饰的变量是不受此影响的
        {
            var x=1;
            let y=2;
        }
        console.info(x);//正常输出
        //console.info(y);//报错

        //var可以声明多次，但是let不可声明多次
        var c=1;
        var c=2;
        let d=2;
        //let d=3;报错
        console.log(c);
        console.log(d);

        //var会变量提升 但是let不会 变量提升就是可以使用再声明
        //从以上角度来说let比var更符合java语言
    </script>
 </h1>
</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 arr=[1,2,3];
        let a=arr[0];
        let b=arr[1];
        let c=arr[2];
        console.log(a,b,c);
        //ES6解构表达式,数组使用的是中括号
       let [aa,bb,cc]=arr;
       console.info(aa,bb,cc)


       let person={
           name: "xiaowu",
           age: 23,
           hobby: ["唱歌","跳舞"]
       }
       console.info(person.age);
       //ES6解构对象，使用大括号 ,可以不用完全解构但是字段得一一对应
       let{name,age}=person;
       console.info(name,age)
    </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 html="<div>"+
            "<a>你好</a>"+
            "</div>";

        //es6方式
        let es6=`<div>
                 <a>你好</a>
                </div>`;
        console.info(es6)


        //可以对字符串的内容进行判断 皆是true
        let str="study.vue"
        console.info(str.startsWith("stu"));
        console.info(str.endsWith("ue"));
        console.info(str.includes("y.v"))


        //可以在字符串中插入表达式
        let person={
           name: "xiaowu",
           age: 23,
           hobby: ["唱歌","跳舞"]
       }
      
       console.info(`名字是${person.name}+年龄是${person.age}`);
    </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=, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //ES6之前赋函数默认值的方法
        function add(a){
            if(!a){
                a=1
            }
            console.log(a)
        }
        add()

        //ES6
        function addES6(a=1){
            console.log(a)
        }
        addES6()

        //对于可变长度的参数
        function addMult(...a){
            console.log(a);
        }
        addMult(1,2,3)

         //可以传入解构表达式
        let nums={
            a:2,
            b:3
        }
        function expression({a,b}){
            console.log(a+b)
        }
        expression(nums)


        //lamda 表达式 如果只有一行不需要写return 多行的话需要书写return返回参数还要加{}
        let lam=(a,b)=>a+b;
        console.log(lam(2,6))
    </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 person={
          name:"jack",
          age:18,
          hobby:["java","c++"]
      }
      //获取对象的所有key，value，entry
      console.log(Object.keys(person));
      console.log(Object.values(person));
      console.log(Object.entries(person));
      //合并对象，有重复的属性会以后面的进行覆盖
      const a={a:2};
      const b={b:3};
      const c={c:3};
      //把b和c合并到a
      console.log(Object.assign(a,b,c))
      //赋值
      let name="小吴"
      let age=28
      let person2={
          name,//以前的写法name:name
          age
      }
      console.info(person2)
      //拷贝对象(这是一种深拷贝)
      console.info({...person})
      //拷贝+合并对象 小吴 28 java c++
      let obj={...person,...person2}
      console.info(obj)

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

异步编排：

ES6之前必须嵌套