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
    点赞
  • 25
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值