ES6常用新特性

最新推荐文章于 2021-12-24 11:23:20 发布

bleso

最新推荐文章于 2021-12-24 11:23:20 发布

阅读量83

点赞数

文章标签： js javascript html react css

本文链接：https://blog.csdn.net/weixin_49094787/article/details/114776256

版权

概述
Let 和const 定义
- const常量
- 变量穿透
ES6语法：模板字符串
函数默认参数
箭头函数
对象初始化简写
对象解构
对象传播操作符
数组map和reduce方法使用
- map
- reduce

概述

ES6，全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准，2015.06 发版。

ES6 主要是为了解决 ES5 的先天不足，比如 JavaScript 里并没有类的概念，但是目前浏览器的 JavaScript 是 ES5 版本，大多数高版本的浏览器也支持 ES6，不过只实现了 ES6 的部分特性和功能。

Let 和const 定义

变量常量的严格区分，let用来申明变量，const用来申明常量

const常量

const定义常量后无法修改，否则运行会报错

const PI =Math.PI;
// const 定义常量后无法修改
PI =100;
// 浏览器运行报错
console.log(PI);

变量穿透

javascript 没有java 那么严格，一些情况局部变量超出范围也能使用，比方说这里的i

for(var i =0; i<=5;i++){
    console.log(i);
}
console.log(i);
// 浏览器控制台输出 1，2，3，4，5

为避免变量穿透应使用let

for(let i =0;i<=5:i++){
    console.log(i);
}
console.log(i);
// 浏览器控制台运行到输出外部的i时，会提示报错

ES6语法：模板字符串

传统：使用 ‘’ 或者 “ ” 进行字符串拼接

es6 使用 ``反引号

定义的对象用${}来区分，

在``中，换行操作同样有效，其不需要传统的换行符\n，直接回车就行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        // 字符串涉及到动态部分
        var person ={
                name : "我",
                address : "这里",
                link: "www.kuangstudy.com"
        }
        let address = "2021.2.18"+person.name +"在"+person.address+"看"+person.link;
        console.log(address)
        // ES6 模板字符串 ，浏览器中也会换行
        let address2 = `2021.2.18${person.name}
        在${person.address}
        看${person.link}`;
        console.log(address2)
    </script>
</body>
</html>

函数默认参数

调用方法时参数可省略，也可以方法中参数后面加上默认值

// 函数默认参数
// a,b 默认undefined .下面设置默认值 a=100， b=100
function sum(a=100,b =100){
        return a+b;
}
var result = sum(11);
console.log(result);   // 函数默认参数
        // a,b 默认undefined .下面设置默认值 a=100， b=100
        function sum(a=100,b =100){
                return a+b;
        }
        var result = sum(11);
        // 浏览器输出111
        console.log(result);

箭头函数

特点

不需要function关键字来创建函数
没有多余逻辑体的情况下，返回可省略return关键字
继承当前上下文的 this 关键字

<script>
    // 箭头函数 ，在(uniapp，脚手架，小程序大量使用)
    // 传统使用 声明式的定义
    function sum (a=100,b=100){
             return a+b;
    }; 
    // 传统使用 表达式的定义
    var sum =function(a=100,b=100){
            return a+b;
    }
    // 箭头改造1
    var sum =(a=100,b=100)=>{
        return a+b;
    }
    // 箭头改造2
    // 没有逻辑体 可以直接省略
    var sum = (a=100,b=100) => a+b;
    var result = sum(11);
    console.log(result)
    var arr = [1,2,3,4,5];
    var newArr = arr.map(function (obj) {
            return obj*2;
    });
    console.log(newArr);
    // 改造
    var newArr2 = arr.map((obj)=> obj *2);
    console.log(newArr2);
    // 改造
    // 如果参数只有一个可以省去 ()
    var newArr3 =arr.map(obj=>obj*2);
    console.log(newArr3)
</script>

对象初始化简写

一个对象中key 和value的名字相同的情况下可以省略

对象中的value如果是个函数，也可以省略function

var title ="你好";
var link ="www.kuangstudy.com";
let info ={
        title:title,
        link:link,
        go:function () {
                console.log("我开车来公司上班");
        }
}
// es6 简写
// 如果key和变量名字一样，可以只定义一次
// 如果value是一个函数，可以把function 去掉
var title1 ="你好";
var link2 ="www.kuangstudy.com";
let info2 ={
    title1,
    link2,
    go() {
            console.log("我开车来公司上班");
    }
}

对象解构

传统es5通过. [] 方式获取到对象的属性值

es6中通过解构{} 获得对象的属性值

注：解构中的属性名称要和被解构的对象的属性名相同，否则会输出undefined，需要不相同的话，可以用冒好跟上别名

<script>
    var title1 ="你好";
    var link2 ="www.kuangstudy.com";
        let info2 ={
        title1,
        link2,
        go(){
        console.log("我开车来公司上班");
                }
        }
        //通过. 的方式
    console.log(info2.title1);
    console.log(info2.link2);
    info2.go();
    //通过[]的方式
    console.log(info2["title1"]);
    console.log(info2["link2"]);
    info2["go"]();
    //es6对象解构，属性名称要与对象中一致
    //需要不一致，则可以用冒好加小名
    var {title1, link2:nihao,go} = info2;
    // 还原代码
    // var title =info2.title1
    // var link =info2.link2
    console.log(title1,nihao);
    go();
    // 为什么要两种方式 [] 和 .
    // .后面的会被认为是字符串，[] 内可以为数字和变量
</script>

对象传播操作符

<script>
    var person ={
            name :"you",
            address:"here",
            phone:1234567,
            link: "xxx",
            go(){
                	console.log("go to work");
            }
    }
    // name,address 已经被解构出来了，剩余的给person2
    var {name,address,...person2} =person;
    console.log(name)
    console.log(address)
    console.log(person2)
    // 对象属性融合
    var person3 ={
            ...person,
            age: 123
    }
    console.log(person3);
</script>

数组map和reduce方法使用

数组中新增了map和reduce方法。

map

<script>
    var arr =[1,2,3,4,5,6];
    //对数组每个元素*2
    //传统方式
    var newArr =[];
    for (let i = 0; i < arr.length; i++) {
            newArr.push(arr[i]*2);
    }
    console.log(newArr);
    //es6语法 map ie浏览器不支持
    var arr3 =arr.map(function (obj) {
            return  obj*2
    })
    console.log(arr3)
    // 箭头函数
    var arr4 =arr.map(obj => obj*2);
    console.log(arr4)
    var users=[{name:"小学",age: 10 },{name:"小学",age: 10 },{name:"小学",age: 10 }];
    var newUsers =users.map(obj=>{
            obj.age =obj.age+1;
            // 增加属性
            obj.check =true;
            return obj;
    })
    console.log(newUsers);
</script>

reduce

reduce(function(),初始值(可选)) ：

接收一个函数(必须)和一个初始值(可选)，该函数接收两个参数：

第一个参数是上一次reduce处理的结果
第二个参数是数组中要处理的下一个元素
reduce() 会从左到右依次把数组中的元素用reduce处理，并把处理的结果作为下次reduce的第一个参数。如果是第一次，会把前两个元素作为计算参数，或者把用户指定的初始值作为起始参数

<script>
    //  es6累加 ，ie浏览器不支持
        var arr =[1,2,3,4,5,6];
        var newArr = arr.reduce(function(a,b){
                return a+b;
        })
        console.log(newArr);
</script>

bleso

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ES6常用新特性

目录概述Let 和const 定义const常量变量穿透ES6语法：模板字符串函数默认参数箭头函数对象初始化简写对象解构对象传播操作符数组map和reduce方法使用mapreduce概述ES6，全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准，2015.06 发版。ES6 主要是为了解决 ES5 的先天不足，比如 JavaScript 里并没有类的概念，但...
复制链接

扫一扫