ES6与JavaScript学习总结

最强菜鸟

已于 2022-02-11 20:28:14 修改

阅读量6.5k

点赞数 6

分类专栏：前端文章标签： javascript js java ES6

于 2020-07-14 14:08:05 首次发布

本文链接：https://blog.csdn.net/qq_40298902/article/details/107335464

版权

前端专栏收录该内容

13 篇文章 1 订阅

订阅专栏

菜鸟的ES6与JavaScript学习总结

说明
一、概述
二、语法

说明

更新时间：2020/7/14 17:32，更新了整体内容

记录JavaScript与ES6的关系以及ES6的语法，本文会持续更新，不断地扩充

本文仅为记录学习轨迹，如有侵权,联系删除

一、概述

首先需要搞清楚如下几个问题

（1）什么是javascript?

重新认识一下javascript，定义是javascript是一种弱类型的脚步语言，用于动态渲染html。仅此而已？更深入了解的话，发现其实javascript由核心（ESMAScript）、文档对象模型（DOM）和浏览器对象模型（BOM）三部分组成。其中ESMAScript就是本文的重点。

（2）什么是ES6

ES全称ECMAScript，ES6是它的第六个版本（以下简称ES6），它是JavaScript语言的下一代标准，已经在2015年6月正式发布了，所以ES6也称为ES2015。Mozilla公司将在这个标准的基础上，推出JavaScript 2.0。除此之外还有ES还有其他版本，像ES5等，目前ES6还不被大多数浏览器兼容。

（3）ES6和JavaScript的关系

简单一句话总结就是，ECMAScript是JavaScript语言的国际标准，JavaScript是ECMAScript的实现。所以ES6是JavaScript的一个实现标准。更准确来说JavaScript由核心（ESMAScript）、文档对象模型（DOM）和浏览器对象模型（BOM）三部分组成。

（4）ES6的浏览器兼容情况

在这里插入图片描述

二、语法

（1）变量

跟ES5相比较，ES6主要增加了两个关键字，用于定义变量，之前定义变量都是var关键字，用var关键字定义变量有什么缺点吗？

缺点	说明
1、变量可以重复定义	var a = 1;var a = 2;重复定义，使用的时候会覆盖前面的值
2、无法限制修改	没有常量和变量的概率，基本所有var定义的变量可以随意修改
3、没有块级作用域	定义的变量基本全局都可以访问

上面这些缺点如果在小型的开发倒是没什么问题，但是如果是大型开发的话，则会出现各种问题，像是变量名冲突，作用域出错问题等，所以为了解决这些问题，ES6新增了两个关键字let和const

关键字	说明
let	用于定义变量，不能重复定义，可以修改，块级作用域
const	用于定义常量，不能重复定义，不可以修改，块级作用域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script>
        let a = 10;
        const PI = 3.14;
        alert(a)
        alert(PI)

    </script>
</head>

<body>
    
</body>

</html>

（2）箭头函数

ES6新定义了一个函数的写法，叫箭头函数，具体如下代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script>
        window.onload = function(){
            alert("ES6之前的写法")
        }

        window.onload = ()=>{
            alert("ES6的箭头函数写法")

            // 语法：(变量名1，变量名2，...)=>{
            //     ...
            // }
        }


        // 举例说明
        let result1 = (a,b)=>{
            let c = a+b;
            return c;
        }

        let result2 = (a,b = 10)=>{
            let c = a+b;
            return c;
        }

        alert(result1(1,2))
        alert(result2(20))

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

简洁明了

（3）解构赋值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script>

        // 语法：
        // 1、赋值号两边结构必须一样
        // 2、声明和赋值同时完成

        let [a,b,c] = [1,2,3]//数组的定义
        alert(a)
        alert(b)
        alert(c)


        let {d,e,f} = {d:4,e:5,f:6}//json的定义
        alert(d)
        alert(e)
        alert(f)


        let [{g,h},[i,j],k] = [{g:7,h:8},[9,10],"hello"]//混合用法
        alert(g)
        alert(i)
        alert(k)

        let [json,array,str] = [{g:7,h:8},[9,10],"hello"]//混合用法
        alert(json)
        alert(array)
        alert(str)

        



    </script>
</head>

<body>
    
</body>

</html>

（4）数组操作

数组的操作主要学习几个函数，这里只列举两个map和filter

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script>

        //(1) map:一对一映射
        // 举例1
        let array = [1,2,3]
        let result = array.map((item)=>{
            return item*2;
        });
        alert(result)


        // 举例2
        let score = [78,13,56,89,90,100]
        let result2 = score.map(item=> item>=60? '及格':'不及格')
        alert(result2)



        //(2)filter:过滤器
        let num = [1,2,3,4,5,6,7,8,9,10]
        let result3 = num.filter(item=>{
            // 或者简写为
            //return item%2;

            if(item%2 == 0){
                return true;
            }else{
                return false;
            }
        })
        alert(result3)
        



    </script>
</head>

<body>
    
</body>

</html>

在这里插入图片描述

（5）字符串操作

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script>

        //1、两个方法,
        let str = "abc";
        alert(str.startsWith('a'))//true
        alert(str.endsWith('c'))//true
        alert(str.startsWith('b'))//false

        //2、字符串模板：反单引号用法
        let a = `abc`
        let b = `this is ${a} apple`

        alert(b)//this is abc apple



    </script>
</head>

<body>

</body>

</html>

（6）面向对象

最强菜鸟

关注

6
点赞
踩
26

收藏

觉得还不错? 一键收藏
0
评论
ES6与JavaScript学习总结

菜鸟的ES6与JavaScript学习总结说明一、概述（1）什么是ES6（2）ES6和JavaScript的关系二、语法（1）变量（2）箭头函数（3）解构赋值（4）数组操作（5）字符串操作（6）面向对象说明更新时间：2020/7/14 17:32，更新了整体内容记录JavaScript与ES6的关系以及ES6的语法，本文会持续更新，不断地扩充本文仅为记录学习轨迹，如有侵权,联系删除一、概述首先需要搞清楚如下几个问题（1）什么是ES6ES全称ECMAScript，ES6是它的第六个版本（以下简
复制链接

扫一扫