开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 游戏开发 -> 学习ES6 -> 正文阅读

[游戏开发]学习ES6

ES6简介

ES6(ECScript)是JavaScript语言的下一代标准，已经在2015年6月正式发布。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

let和const命令

let用来声明变量

let特性

变量不能重复声明
块级作用域
不存在变量提升
不影响作用域链

const是用来声明常量，常量就是固定不变的量，在我们开发过程中当一个变量希望它的值，不被(自己或者他人)改变。

const特性

常量的值一旦定义不能被修改
常量的名称一般使用大写
常量在定义的时候，必须赋值
不允许重复定义
块级作用域

语法：const 常量的名称 = 值

1.const声明常量时，定义时必须赋值，因为常量值是不允许修改的

<script>
    const PI = 3.14;
    PI = 3;
    console.log(PI);   //报错
</script>

2.const定义的对象或数组时，可以修改对象或数组中的元素值，不能直接修改当前常量对象

案例

1.for循环案例

<script>
    var arr = []; //定义一个空数组
        for(vari = 1 ; i < 10 ; i++){
            // 循环体
            arr[i] = function () {
                // 将i的值返回到函数中
                return i;
            }
        }
    console.log(arr[4]());   // 结果：10
</script>

<script>
    var arr = [];
        for(let i = 1 ; i < 10 ; i++){
            arr[i] = function () {
                return i;
            }
        }
    console.log(arr[4]());   // 结果：4
</script>

2.点击换色案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单击换色</title>
    <style>
        body,head{margin: 0px;padding: 0px;}
        .allList{
            width: 450px;
            height: 300px;
            border: 1px solid #4013af;
            padding: 10px;
            margin: 0 auto;
        }
        .allList h2{text-align: center;}
        .allList .item{
            border: 1px dashed red;
            margin-top: 12px;
            padding: 12px 0px;
        }
    </style>
</head>
<body>
    <div class="allList">
        <h2>单击换色</h2>
        <div class="item">one</div>
        <div class="item">two</div>
        <div class="item">three</div>
        <div class="item">four</div>
    </div>
    <script>
        // 1.获取到需要绑定的单击事件的标签
        var divObj = document.getElementsByClassName('item')
        // 2.给标签绑定单击事件
        for(let i = 0;i < divObj.length; i++){
            console.log(i);
            // 3.改变背景颜色
            divObj[i].onclick = function(){
                this.style.backgroundColor = 'green'
            }
        }
    </script>
</body>
</html>

不完全结构

1. 变量名比等号右侧的值少,且没有其他特殊处理的话，多出的值会被忽略

<script>
    let [a,b,c] = [10,15,17,23,31]
    console.log(a,b,c);   //结果:a 10   b 15  c 17
</script>

2. 变量名比等号右侧的值多,多出的变量名值为undefined

<script>
    let [a1,b1,c1] = [10,15] 
    console.log(a1,b1,c1);   // 结果：a1 10   b1 15  c1 undefined
</script>

3. 剩余运算符(...) ,会将剩下的值以数组的方式存储到c2变量中

<script>
    let [a2,b2,...c2] = [10,15,17,23,31]   //结果:a2 10   b2 15   c2
    console.log(c2);
</script>

4. 默认值,当等号左侧的变量设置了默认值，在等号右侧又可以找到匹配的值，那么变量的值使用等号右侧匹配的值

<script>
    let [a3,b3,c3='default'] = [10,15,'zhangsan']   
    console.log(c3);  // 结果:zhangsan
    let [test = 12] = [undefined];
    console.log(test);  // 结果为  12
    let [test1 = 12] = [null];
    console.log(test1);  // 结果为 null 
</script>

对象的解构赋值

<script>
    // js中如何定义对象,对象中有属性和值()    属性名:值
    let  obj = {
       name:"张三",
       age:18,
       sex:1,
       study:function(){}
    }
    // 使用对象中的某个值    对象名称.属性名
    // obj.age   // 访问对象中的属性
    // obj.study()   // 调用方法
    /*
       对象的解构赋值
        a. 等号左侧要使用花括号({})包裹变量名
        b. 变量名要和对象中要要解构的属性名保持一致
        c. 等号右侧就是要解构的对象
    */
     let  obj1 = {
        name:"张三",
        age:18,
        sex:1,
        study:function(){}
     }
     let {name,age} = obj1
     console.log(name);
</script>

js运算符复习

? ? 运算符的分类：

? ? ? ? 算术运算符

? ? ? ? ? ? + ? - ? * ?/ % ? ++ ? --

? ? ? ? 比较运算符

? ? ? ? ? ? > < ?>= ?<= != ? ? == ? !== ? ===

? ? ? ? 问题: = ? == ? === 的作用(区别)

? ? ? ? ? ????= ?表示赋值 ,就是把等号右边赋值给等号左边的变量

? ? ? ? ? ? ? == 表示比较,如果两边的值相等,返回true,否则返回false,忽略数据类型

? ? ? ? ? ? ? === 表示比较两边的值和数据类型都相同时,返回true,否则返回false

? ? ? ? 赋值运算符

? ? ? ??????= ?+= ? -= ? *= ?/= ?%=

? ? ? ? ? ? a+=b ? 等价于 ? a = a+b

? ? ? ? 逻辑运算符

? ? ? ? ??????&& ? ? 只有当两边的条件都为真时,整体返回true,其他情况全返回false

? ? ? ? ? ? ? ?|| ? ? 只有当两边的条件都为假时,整体返回false,其他情况全返回true

? ? ? ? ? ? ? ?! ? ? ?非真即假 ? 非假即真

? ? ? ? 字符串拼接运算 ? 变量和字符串拼接

? ? ? ? ? + ?

? ? ? ? ? 5+5? 得10

? ? ? ? ? 10+'5'? ?得 105

? ? ? ? 三元运算符

? ? ? ? 条件?条件为真的执行:条件为假的执行

? ? ? ?取余运算 ?%

<script>
    var num = 10
    // ++num  和  num++  对于num这个变量来讲没有任何区别
    // var res = ++num    // num = 11   res = 11
    var res = num++    // num = 11   res = 10
</script>

运算符扩展

1.指数运算符：**

<script>
    // 计算2的3次方
    2 ** 3    // 结果：8
    2 ** 3 ** 2    // 结果：512
</script>

2.指数赋值运算符：**=

<script>
    var a = 2;
    a**=4  // 等价于 a = a**4
    console.log(a);  // 结果：16
</script>

游戏开发最新文章

6、英飞凌-AURIX-TC3XX： PWM实验之使用 GT

泛型自动装箱

CubeMax添加Rtthread操作系统组件STM32F10

python多线程编程：如何优雅地关闭线程

数据类型隐式转换导致的阻塞

WebAPi实现多文件上传，并附带参数

from origin ‘null‘ has been blocked by

UE4 蓝图调用C++函数（附带项目工程）

Unity学习笔记（一）结构体的简单理解与应用

【Memory As a Programming Concept in C a

加:2022-03-12 17:53:59 更:2022-03-12 17:57:29

360图书馆购物三丰科技阅读网日历万年历 2024年12日历

-2024/12/28 10:07:05-

图片自动播放器
↓图片自动播放器↓

TxT小说阅读器
↓语音阅读,小说下载,古典文学↓

一键清除垃圾
↓轻轻一点,清除系统垃圾↓

图片批量下载器
↓批量下载图片,美女图库↓

网站联系: qq:121756557 email:121756557@qq.com IT数码

数据统计