JavaScript ES6新语法入门

超、凢脫俗 2023-02-24 11:06 40阅读 0赞

[精选30+云产品，助力企业轻松上云！>>> ![hot3.png][]][30_ _hot3.png]

# 1.let&const #

let：声明的变量是局部变量

const：声明的变量是常量，不能被修改

var a = 10;
    
    function run1(){
    
        var a = 20;
    
        console.info(a);
    
    }
    
    run1();
    
    console.info(a);
    
    //结果为 : 
    
    //20
    
    //20
    
    
    
    var a1 = 10;
    
    function run2(){
    
        console.info(a1);
    
    }
    
    run2();
    
    console.info(a1);
    
    //结果为 : 
    
    //20
    
    //20

使用let

let a = 10;
    
    function run2(){
    
        let a = 20;
    
        console.info(a);
    
    }
    
    run2();
    
    console.info(a);
    
    //结果为 : 
    
    //10
    
    //20
    
    
    
    let a1 = 10;
    
    function run3(){
    
        console.info(a1);
    
    }
    
    run3();
    
    console.info(a1);
    
    //结果为 : 报错,a未定义
    //因为a是在run3函数外定义的,run3拿不到a的值

# 2.字符串扩展 #

ES6为字符串扩展了几个新API:

1)includes():返回布尔值,表示是否找到了这个字符串。

![up-c82ff9a3048e9e58abbb05fa7e99a0a1977.png][]

2)startsWith():返回布尔值，表示参数字符串是否在原字符串的头部。

3)endsWith():返回布尔值，表示参数字符串是否在原字符串的尾部。

![up-adb4a3e38b4602e01dc6167df4195142f97.png][]

4）模板字符串

let a = "你好";
    
    let b = "大家好";
    
    let str = `holle ${a} 
    
               World ${b}`
    
    //可以直接换行空格
    
    //可以直接使用${变量名},插入变量
    // 注: ` 符号在键盘上的esc的下面,1的左面,tab的上面

5)解构

//1.数组:
    let arr = [1,2,3];
    let [a,b,c] = arr;
    console.info(`${a},${b},${c}`);
    // 结果为1,2,3
    // 会直接将数组里面的值拿出来,[a,b,c]相当于定义了三个变量
    
    //2.对象:
    //2.1
    let obj = {name:'jack',age:18};
    let {name,age} = obj;
    console.info(name+","+age);
    // 直接将对象中的字段拿出来了, 前提是必须对应对象中的字段
    
    //2.2
    let {name:username,age:userage} = obj;
    console.info(username+","+userage);
    // 拿出数据可以给变量起别名
    
    //2.3
    let obj1 = {name:'jack',age:18};
    let {name:username1 = 'rose',age:userage1 = 123,sex = '男'} = obj1;
    console.info(`${username1},${userage1},${sex}`);
    // 拿不到数据,可以定义默认数据
    
    //2.4
    let obj2 = {name:'jack',age:18,sex:'男'};
    let {name:username2,...property} = obj2;
    console.info(`${username2}`);
    console.info(property);//解构出来一个对象
    //就不解释了....
    
    
    
    //js强大啊。。java什么时候也出个，哈哈

# 3.箭头函数 #

//定义函数的简写方式:
    //一个参数时:
    var print = function (obj){
       console.info(obj);
    }
    //简写为:
    var paint = obj => console.info(obj);
    
    //多个参数:
    //两个参数的情况:
    var sum = function(a,b){
       return a+b;
    }
    
    //简写:
    var sum2 = (a,b) =>{
       return a+b;
    }
    console.info(sum2(1,2));
    
    
    // 返回值为一行代码的情况下: 必须省略return
    var sum3 = (a,b) => a+b;
    console.info(sum3(1,2));
    
    //是不是特别简单,告诉你,java中也有类似箭头函数的语法,交lambda表达式,
    //在我前几天的博客中有写,感兴趣可以去看,地址放在下面。

[lambda表达式博客连接][lambda]

## 举例箭头函数结合解构 ##

let student = {
    
       name: "jack",
       age: 18
    };
    
    let run = ({name,age}) =>{
       console.info(name,age)
    }
    
    run(student);
    
    //一个对象参数,一解构的方式传入方法,使代码更加简化。。

# 4.map&reduce #

//map: 
    //接收一个函数,将原数组中的所有元素用这个函数处理后放入新数组返回
    
    //举例: 有个字符串数组,转为int数组
    let arr = ['1','10','-1','5'];
    console.info(arr);
    
    arr = arr.map(a => parseInt(a));
    console.info(arr);
    //结果: [1,10,-1,5]
    
    //reduce:
    // 接收一个函数(必须)和一个初始化值(可选),该函数接收两个参数:
    // 参数一: 是上次reduce处理的结果
    // 参数二: 是数组中要处理的下一个元素
    // reduce() 会从左到右依次把数组中的元素用reduce处理, 并把处理的结果作为下次
    //   reduce的结果作为下次reduce的第一个参数。如果是第一次，会把前两个元素作为计算参
    //   数，或者把欧诺用户指定的初始化值作为起始参数。
    //举例:
    const arr = [1,10,-1,5];
    console.info(arr.reduce((a,b) => a+b));
    //结果:19
    console.info(arr.reduce((a,b) => a*b));
    //结果:-300
    console.info(arr.reduce((a,b) => a*b,-1));
    //结果:300

有帮助点个赞啊o(\*￣︶￣\*)o

[hot3.png]: /images/20230209/3d29b769bc0943e9868d87621d80dde5.png
[30_ _hot3.png]: https://www.oschina.net/action/visit/ad?id=1221
[up-c82ff9a3048e9e58abbb05fa7e99a0a1977.png]: /images/20230209/fd3d64c560014b00a51e232ae29e4c31.png
[up-adb4a3e38b4602e01dc6167df4195142f97.png]: https://oscimg.oschina.net/oscnet/up-adb4a3e38b4602e01dc6167df4195142f97.png
[lambda]: https://my.oschina.net/u/4284277/blog/3132787