最新公告
  • 欢迎您光临起源地模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • 【JavaScript学习(一) 语法、常用数据类型】

    正文概述 掘金(Moluuu)   2020-11-23   434

    什么是JavaScript

    JS初体验

    我们可以像之前在 html文件中写 css代码一样,使用<script></script>标签 以内部样式的方式在 html文件中编写JS代码。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script>
            alert("Hello JavaScript!")
        </script>
    </head>
    <body>
    </body>
    </html>
    

    alert 属性可以让我们在打开 html网页时,弹出一个提示框。

    【JavaScript学习(一) 语法、常用数据类型】

    同样的,我们也可以使用外部样式的方式将 JS代码引入到我们的 html文件中

    alert("Hello JavaScript!")
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="js/hello.js">
        </script>
    </head>
    <body>
    </body>
    </html>
    

    效果是一样的

    语法

    定义变量和常量

    JavaScript定义变量显得十分随意,定义变量时甚至不需要指定变量的类型。

     i = 10;
    alert(i);
    

    【JavaScript学习(一) 语法、常用数据类型】

    当然了,这么写是不规范的。

    在ES5之前,定义变量一般都会使用 var关键字。 在ES6规范到来后,JavaScript定义变量的关键字新增了 let和 const。

    • var: 使用 var声明变量有两个问题, 第一是没有块级作用域; 第二是循环内变量过度共享。
    • let: 解决上述 var声明的两个问题, 可以说let是更完美的var。
    • const:定义常量

    规范的写法

    let i = 10;
    

    定义数组

    由于 JavaScript中不存在类型这一概念,所以在定义数组时 我们并不需要关心数组中的对象 类型是否一致。

    let array = [1,2,"a","b",true,false,null];
    let array1 = new Array(1,2,"a","b",true,false,null);
    // 两种方式都能定义数组,但考虑到可读性 一般都会使用中括号的方式定义。
    

    JavaScript中,如果出现数组下标越界 不会同 Java一样出现异常。而是会输出一个 undefined,这也是JavaScript的不严谨性

    【JavaScript学习(一) 语法、常用数据类型】

    定义对象

    JavaScript中定义对象使用 {},每个属性之间使用 "," 分隔最后一个属性不需要添加 "," 。

    属性以 key value的形式书写,总的来说定义起来还是很简单,很随意的。

    var person = {
        name:"陌路",
        age: 18,
        sex:"男",
        book:["算法导论","Python机器学习","克苏鲁神话","人生的枷锁"]
     };
    

    严格检查模式

    因为 JavaScript的语法的随意性,有时候排错会十分痛苦。

    为了更规范出错的可能性更小,我们可以打开严格检查模式。打开该模式后 我们书写不规范的地方都会有所提示。

    【JavaScript学习(一) 语法、常用数据类型】

    可以看到,我们打开严格检查模式后 不规范的变量定义,会直接报红。

    之前没打开严格检查模式,我们可以直接使用 alter将不规范定义的变量,作为提示框内容输出到html网页中。

    【JavaScript学习(一) 语法、常用数据类型】

    而打开严格检查模式后,我们再进行该操作会直接报错。

    【JavaScript学习(一) 语法、常用数据类型】

    常用数据类型

    字符串

    JavaScript 中的正常字符串可以使用单引号或双引号包裹

    "use strict"
    console.log("a");
    console.log('a');
    

    【JavaScript学习(一) 语法、常用数据类型】

    二者并没有什么区别

    JavaScript中也存在转义字符

    "use strict"
    console.log("a");
    console.log(' \' a');     // 将特殊字符转义
    console.log('a \n b');    // 换行
    console.log(' \t a');     // tab
    console.log('\u4e2d');  // unicode字符
    console.log('\x41');    // Ascll字符
    

    【JavaScript学习(一) 语法、常用数据类型】

    长字符串

    "use strict"
    console.log(
        `
        "我们可以使用"
        "  \` \` 来"
        "包裹多行字符串"
        "定义长字符串"
        `
    )
    

    【JavaScript学习(一) 语法、常用数据类型】

    模板字符串

    模板字符串是ES6中非常重要的一个新特性,这个特性使得我们处理相关业务变得更加容易。比如在处理嵌入表达式、多行字符串、字符串中插入变量、字符串格式化等方面的应用。模板字符串使用反钩号(backticks,`),而不是单引号或双引号。以下是个简单的示例:

    let name = "陌路";
    console.log(name: ${name})
    

    【JavaScript学习(一) 语法、常用数据类型】

    模板字符串的出现,给ES6添加了“表达式”的概念。在ES6之前,我们只能用加号连接变量表达式。

    自从模板字符串表达式的出现后,我们嵌入表达式的方式更加简单,即${变量表达式},变量表达式就相当函数一样,变量传值进行替换。

    字符串截取

    字符串的截取在之前写 sql的时候用得比较频繁,在 JavaScript中我们可以通过调用 substring(); 函数来做到该操作

    "use strict"
    let name = "moluu"
    // 从字符串下标 2开始截取字符串
    console.log(name.substring(2))
    

    【JavaScript学习(一) 语法、常用数据类型】

    // 从字符串下标 2(l)截取字符串到下标 4(最后一个u)
    console.log(name.substring(2,4))
    

    我们如果这样写,按照正常的思维应该仍会截取luu,但该方法有一个特性:

    【JavaScript学习(一) 语法、常用数据类型】

    它的截取只会包含第一个下标的字符串,第二个下标只是指定一个范围 并不会被包含进去 也就是包头不包尾

    数组

    JavaScript中,不仅定义数组很方便 遍历打印数组也很方便。

    "use strict"
     let arr = [1,2,3,"字符串",null,true];
    console.log(arr)
    

    【JavaScript学习(一) 语法、常用数据类型】

    而且在 JavaScript中数组长度是可变的,我们只需要给 数组的长度赋值就能改变数组的长度。

    【JavaScript学习(一) 语法、常用数据类型】

    我们尝试打印这些 empty

    【JavaScript学习(一) 语法、常用数据类型】

    会输出 undefined

    既然有将长度变长的操作,相对的也应该能将长度变短才是。

    【JavaScript学习(一) 语法、常用数据类型】

    数组长度变短后,数组中的元素就会丢失

    截取数组

    JavaScript中截取数组使用 slice();函数,该函数和上面讲到的substring();类似。

    "use strict"
    // 定义数组
    let arr = [1,2,3,"字符串",null,true];
    // 从数组下标 2的位置开始截取数组
    arr.slice(2);
    // 打印截取后的数组
    console.log(arr);
    

    【JavaScript学习(一) 语法、常用数据类型】

    该函数也具有包头不包尾的特性

    【JavaScript学习(一) 语法、常用数据类型】

    往数组中添加元素

    我们可以使用 push();函数往数组的尾部插入一个元素

    "use strict"
    // 定义数组
    let arr = [1,2,3,"字符串",null,true];
    // 往数组的尾部添加字符串 a
    arr.push('a');
    // 打印添加元素后的数组
    console.log(arr);
    

    【JavaScript学习(一) 语法、常用数据类型】

    同样的,既然存在添加,就会存在删除元素的函数。

    我们可以使用 pop();函数删除数组尾部的一个元素。

    "use strict"
    // 定义数组
    let arr = [1,2,3,"字符串",null,true];
    // 删除数组中的最后一个元素
    arr.pop();
    // 打印删除元素后的数组
    console.log(arr);
    

    【JavaScript学习(一) 语法、常用数据类型】

    往数组的头部添加元素

    上面的两个函数都是对数组的尾部元素进行操作,如果只能对尾部进行操作 未免太局限了。

    我们可以使用unshift();函数往数组的头部添加元素

    "use strict"
    // 定义数组
    let arr = [1,2,3,"字符串",null,true];
    // 添加一个元素到数组的头部
    arr.unshift("a");
    // 打印添加元素后的数组
    console.log(arr);
    

    【JavaScript学习(一) 语法、常用数据类型】

    同样的,有添加就有删除。

    我们可以使用 shift();函数删除数组头部的一个元素

    "use strict"
    // 定义数组
    let arr = [1,2,3,"字符串",null,true];
    // 删除数组中的第一个元素
    arr.shift();
    // 打印删除元素后的数组
    console.log(arr);
    

    【JavaScript学习(一) 语法、常用数据类型】

    元素排序

    我们可以使用 sort();函数来对我们数组中定义的元素进行一个排序操作

    【JavaScript学习(一) 语法、常用数据类型】

    元素反转

    我们可以使用reverse();函数, 使数组中的元素顺序反转。

    【JavaScript学习(一) 语法、常用数据类型】

    拼接数组

    我们可以使用concat();函数,往我们定义的数组中拼接元素,拼接后的新数组并不会替换到我们定义的数组。

    【JavaScript学习(一) 语法、常用数据类型】

    添加连接符号

    我们可以使用 join();函数,使数组中的元素以特定的符号进行连接

    "use strict"
    // 定义数组
    let arr = ["A","B","C"];
    // 使用 - 符号连接数组中的各个元素
    arr.join("-");
    // 打印使用符号连接后的数组
    console.log(arr);
    

    【JavaScript学习(一) 语法、常用数据类型】

    对象

    JavaScript中对象使用 let 对象名 = {属性名 : 属性值}; 的形式定义。

    属性以 k v的形式定义,每个属性之间使用 " , "分隔,最后一个属性不需要添加 " , "。

    JavaScript中所有的 key都是字符串,而value为任意对象。

    JavaScript 有一个比较有意思的地方,我们如果尝试 输出对象中不存在的属性,它也仅仅会显示 undefined而已,并不会报错。

    "use strict"
    // 定义对象
    let person = {
        name:"moluu",
        age:18,
    };
    // 打印对象中不存在的属性
    console.log(person.不存在);
    

    【JavaScript学习(一) 语法、常用数据类型】

    JavaScript 还可以动态的增删对象中的属性

    删除对象中的属性 使用 delete();函数

    "use strict"
    // 定义对象
    let person = {
        name:"moluu",
        age:18,
    };
    // 删除 person对象的 name属性
    delete(person.name);
    
    // 打印对象
    console.log(person);
    

    【JavaScript学习(一) 语法、常用数据类型】

    往对象中添加属性这一操作有点扯淡,我们直接以 **对象名.新属性 = 属性值;**的方式就能够使对象新增一个属性.......

    【JavaScript学习(一) 语法、常用数据类型】

    在 JavaScript中我们还可以使用 xxx in xxxx;的方式判断 某属性或者某函数是否存在于某对象中。

    比如说判断 age属性是否存在于person对象中

    JavaScript中 属性的 key都是字符串的形式,所以我们单独写的时候需要使用单引号将其包裹。

    【JavaScript学习(一) 语法、常用数据类型】

    我们的对象定义后,一般都会继承到一些函数,比如toString();函数

    【JavaScript学习(一) 语法、常用数据类型】

    【JavaScript学习(一) 语法、常用数据类型】

    这种函数就不是我们定义在 person对象中的了,它是继承得到的。

    而我们可以使用hasOwnProperty();,来判断 函数或者属性是否是对象自有的。

    【JavaScript学习(一) 语法、常用数据类型】

    Map

    JavaScript 普通对象 {key: 'value'} 可用于保存结构化数据。

    但对象属性的key必须是字符串,或者是很少用到的符号。

    我们尝试使用数字 1和 2作为 person对象属性的键,再打印 person对象属性的键。

    "use strict"
    let person = {
        1:"moluu",
        2:18
    };
    console.log(Object.keys(person));
    

    【JavaScript学习(一) 语法、常用数据类型】

    可以看到,我们定义 key的数字 1和 2变成了字符串。

    这种默认转换的机制会造成一些不必要的麻烦,但ES6新增的Map很好的解决了该问题。

    我们定义一个map,并将其 key打印出来

    "use strict"
    let map = new Map([[1,"molu"],[2,"lin"],[3,"zhang"]]);
    console.log([map.keys()]); 
    

    【JavaScript学习(一) 语法、常用数据类型】

    没有问题,key的类型没有任何改变

    map 中可以使用任何key类型:数字,布尔以及经典的字符串和符号都没有问题。甚至我们可以使用对象来作为 map的key


    遍历Map

    一般情况下我们可以直接使用 value();函数来取得 map中的所有 value

    "use strict"
    let map = new Map([[1,"molu"],[2,"lin"],[3,"zhang"]]);
    console.log(map.values());
    

    【JavaScript学习(一) 语法、常用数据类型】

    也可以使用forEach();拿到它的 key和对应的 value

    "use strict"
    let map = new Map([[1,"molu"],[2,"lin"],[3,"zhang"]]);
    map.forEach(function(value,key){
        console.log(value,key);
    });
    

    【JavaScript学习(一) 语法、常用数据类型】

    也可以使用 for-of遍历

    "use strict"
    let map = new Map([[1,"molu"],[2,"lin"],[3,"zhang"]]);
    for(let item of map){
        console.log(item)
    }
    

    【JavaScript学习(一) 语法、常用数据类型】

    除了上述两种,遍历的方法还有很多 大家感兴趣可以移步其他博客。


    放松一下眼睛

    夹带私货(不是

    【JavaScript学习(一) 语法、常用数据类型】

    原图P站地址

    画师主页



    起源地 » 【JavaScript学习(一) 语法、常用数据类型】

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    还没有评论,快来抢沙发吧!

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元