前端技术栈简介和 ES6新特性

系统管理员 2023-03-14 13:18 7阅读 0赞

## 前后端技术栈类比 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Z5ajEzOTI1NDc1OTU3_size_16_color_FFFFFF_t_70]

## ES6 ##

### 简介 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Z5ajEzOTI1NDc1OTU3_size_16_color_FFFFFF_t_70 1]

![在这里插入图片描述][20200518090302534.png]

### ES6新特性 ###

#### let 新特性 ####

作用域

// var 声明的变量往往会越域
            // let 声明的变量有严格的局部作用域
            { 
                var a = 1;
                let b = 2;
            } 
            console.log(a); // 1 
            console.log(b);  // b is not defined

let 变量名只能声明一次

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

let 不存在变量提升, var 变量提示

// var 变量提示
          // let 不存在变量提升
          console.log(x);  // undefined
          var x = 10;
          console.log(y);  // Cannot access 'y' before initialization
          let y = 20;

#### const 声明常量（只读变量） ####

// const 声明之后不许改变
       // const 一旦声明必须初始化，否则报错
       const a = 1;
       a = 2; // 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: 24,
                language: ['java','js','html']
            }
            // 以前
            // const name = person.name;
            // const age = person.age;
            // const language = person.language;
            // 现在，解构person对象，把里面的每一个值拿出来
            // name:abc 表示从perons解出name的值 赋值给abc
            const{ name:abc,age,language} = person;
            console.log(abc,age,language);

#### 字符串拓展 ####

![在这里插入图片描述][20200518101721134.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Z5ajEzOTI1NDc1OTU3_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][20200518101910709.png]

let str = `<div> <span>hello<span> </div>`;
      console.log(str)

字符串插入变量函数，表达式

// 字符串插入变量和表达式，变量名写在${} 中， ${} 中可以放入 JS 表达式
            let name = "张三";
            let age = "20";
            let info = `我是${ name} , 今年${ age}了`;
            console.log(info)
    
            function fun() { 
                return "这是一个函数";
            }
    
            let n = `我是${ name} , 今年${ fun()}了`;
            console.log(info)
            console.log(n)

#### 函数优化 ####

**函数参数默认值**

// ES6 以前
            function add(a, b) { 
                // 判断b是否为空，为空就给默认值1
                b = b || 1;
                return a + b;
            }
            // 传入一个参数
            console.log(add(10)); // 11
    
            // 现在写法，直接给参数写上默认值，没传就会自动使用默认值
            function add2(a, b = 1) { 
                // 判断b是否为空，为空就给默认值1
                return a + b;
            }
            console.log(add2(10)); // 11

**不定参数**

function fun(...value) { 
      // 打印出参数的个数
           console.log(value.length)   // 2,4
       }
       fun(1,2)
       fun(1,2,3,4)

**箭头函数** =>

// 以前
            var p = function (obj) { 
                console.log(obj);
            }
            // 现在
            var p1 = obj => console.log(obj);  // hello
            p1("hello")
    
    		// 多个参数
    	    var sum = (a, b) => a + b;
            console.log(sum(1,3))

多个参数，多个方法体  
![在这里插入图片描述][20200518105442158.png]

#### 对象优化 ####

**新值API**  
![在这里插入图片描述][20200518105850965.png]

const person = { 
       name: "jack",
           age: 22,
           language: ['java','php','js']
       }
       // 获取对象的所有key(即属性名),返回数组
       console.log(Object.keys(person)) // ["name", "age", "language"]
       // 获取对象的所有value(即属性值),返回数组
       console.log(Object.values(person)) // ["jack", 22, Array(3)]
       // 获取的所有key 和 value，返回二维数组 ,二维数组的每一个元素是[key，value]
       console.log(Object.entries(person)) // [Array(2), Array(2), Array(2)]

**声明对象简写**

// ES6以前
      const age = 23;
      const name = "zhangshan";
      const person = { 
          age: age,
          name: name
      }
    
      // 如果对象里面的属性名 和 声明的属性名一样，可以简写
      const person1 = { age, name}

**对象函数属性简写**

**对象的拓展运算符**  
拓展运算符 (…) 用于取出参数对象所有可遍历属性，然后拷贝到当前对象

对象拷贝和合并对象

// 1.对象拷贝
    let person = { name: "jack", age: 15}
     let person1 = { ...person}
     console.log(person1) // {name: "jack", age: 15}
    
     // 2.合并对象
     let age = { age: 15}
     let name = { name: "jack"}
     // 如果两个对象的字段名重复，后面对象字段值会覆盖前面对象的字段值
     let person2 = { ...age, ...name}
     console.log(person2)  // {age: 15, name: "jack"}

#### 数组的 map 和 reduce 方法 ####

1)、map()  
接收一个函数，将原数组中的所有元素用这个函数 处理后放入新的数组返回

// map():接收一个函数，将原数组中的所有元素用这个函数 处理后放入新的数组返回
      let arr = [1,20,-5,3];
      // 将数组中每一个元素乘以2,返回一个新的数组
      let arr2 = arr.map((item) =>{ 
          return item*2
      })
      console.log(arr2) // [2, 40, -10, 6]

![map():接收一个函数，将原数组中的所有元素用这个函数 处理后放入新的数组返回][map_]

// reduce(): 为数组中每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素
    // reduce(callback, initValue): callback 函数，可以有4个参数:
      // 参数1:上次回调的返回的值，参数2:当前值， 参数3：当前元素的索引， 参数3: 当前数组
    let sum =  arr.reduce((a,b)=>{ 
         console.log("上一次处理后返回的值：" + a)
         console.log("当前的值："+b)
         return a+b;
     })
     console.log("求和：" + sum)

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Z5ajEzOTI1NDc1OTU3_size_16_color_FFFFFF_t_70 3]

#### Promise ####

解释：

// promise可以封装异步操作
            // promise() 内可以传一个函数，该函数有2个参数，resolve,reject
            // resolve:操作成功了，解析数据 
            // reject:操作失败 拒绝
            let p = new Promise((resolve, reject) =>{ 
               
                if(true) { 
                     // 异常操作成功了，
                     resolve(data);    
                } else { 
                    // 异步操作失败
                    reject(error);
                }
            })
    
            p.then(obj => { 
                // 可以得到上一步 resolve 传进来的数据
                // 成功了干某些事件
    
            }).catch(err => { 
                // 可以得到上一步 reject 传进来的数据
                // 失败了干某些事情
            })

步骤：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Z5ajEzOTI1NDc1OTU3_size_16_color_FFFFFF_t_70 4]  
简化后：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Z5ajEzOTI1NDc1OTU3_size_16_color_FFFFFF_t_70 5]

#### 模块化 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Z5ajEzOTI1NDc1OTU3_size_16_color_FFFFFF_t_70 6]

export：导出，不仅可以导出对象，一切JS变量都可以导出。比如:基本类型变量，函数，数组，对象

代码示例：

hello.js 文件

export { util,name}
    
    const util = { 
        sum(a, b) { 
            return a + b;
        }
    }
    
    var name = "zhangshan";

导入：

import { util,name} from "./hello.js"
    
    var sum = util.sum(3,1)
    console.log(sum)
    
    console.log(name)

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Z5ajEzOTI1NDc1OTU3_size_16_color_FFFFFF_t_70]: /images/20230312/b0755b4a8dff4be5bfbea3cb6a994d46.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Z5ajEzOTI1NDc1OTU3_size_16_color_FFFFFF_t_70 1]: /images/20230312/696edd05dca64c09a510ef5505f2b4d9.png
[20200518090302534.png]: /images/20230312/79cef1000817498a8d499d24c6560c25.png
[20200518101721134.png]: /images/20230312/17c2a025737f4b9abff44eeade02b953.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Z5ajEzOTI1NDc1OTU3_size_16_color_FFFFFF_t_70 2]: /images/20230312/7dfd842caaaa4891ae6ee7de3bfc0e7b.png
[20200518101910709.png]: /images/20230312/c82f77a719c6474f8808854309835e4f.png
[20200518105442158.png]: /images/20230312/3cb767b8981d4a75aa3a0001012380c9.png
[20200518105850965.png]: /images/20230312/22c4140a173e4e53914198eb277c3903.png
[map_]: /images/20230312/aae7a4c8810f4b7fa5fe1af16bffd9e4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Z5ajEzOTI1NDc1OTU3_size_16_color_FFFFFF_t_70 3]: /images/20230312/325c390ffa61479683e88b25149e8afb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Z5ajEzOTI1NDc1OTU3_size_16_color_FFFFFF_t_70 4]: /images/20230312/e624f92f031045ab96e69872bfbeb1a8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Z5ajEzOTI1NDc1OTU3_size_16_color_FFFFFF_t_70 5]: /images/20230312/158d009630d34968be454bca4c9de24d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Z5ajEzOTI1NDc1OTU3_size_16_color_FFFFFF_t_70 6]: /images/20230312/670df6a2a3bd4babae8227e39ad025ef.png