• 01快速入门-01-基本语法和数据类型


    0、写在前面的话

    之前的前端就没怎么学,工作又要用,你说尴尬不尴尬嘛,JS从头学系列就是这样来的。

    该系列其实不算正儿八经的博文,因为大部分内容是直接引用自《廖雪峰的JavaScript教程》,然后根据自身情况部分精简和批注后记录在此,更多的目的还是做备忘和查阅使用,并且作为在后期不断丰富JS的知识点时的基本骨架,不断添新和丰满。

    之前通过廖雪峰老师的网站学过Git,简洁有力的干货,很nice,现在准备跟着开始学习JS,感谢互联网上有这么多无私奉献的人,感谢感谢。

    1、JS的引入

    JS可以嵌入在网页的任何地方,包裹在 <script></script> 中,一般我们放在 <head> 中。

    或者,将JS代码单独保存为一个 .js 文件,然后在HTML中通过 <script src="..."></script>进行引入。

    <script> 有时候会看到 type 属性,如<script type="text/javascript"> 其实没必要,因为默认type就是javascript

    JavaScript严格区分大小写,所以需要注意。

    2、基本语法 和 数据类型、变量

    2.1 语法概述

    语法和Java类似,语句块用 {...} 包裹,以 ; 结束,但是不强制要求 ; ,但是良好的习惯,还是建议使用时每个语句都以 ; 结束。

    注意和Java也类似,单行注释以 // 开头,多行注释用 /* ... */ 包裹,这两种注释在网页查看源码时都可以被用户查看到

    2.2 数据类型

    • Number
      • JS中不区分整数或浮点数,统一用Number表示,四则运算也可以直接使用
      • NaN是Number中特殊的值,与所有Number都不相等,包括它自己,通过 isNaN() 判断它的身份

    • 字符串
      • 单引号 或 双引号括起来的文本
      • ES6新增模板字符串,要用 ` ` (不是单引号),可以自动替换变量 //e.g. var name = '小明';  alert(` 你好,${name} ! `);
      • 要字符串中表示 ‘ 或 " 使用转义字符
      • str.length; --> 获取字符串长度(Java中则是 str.length(),数组才是 arr.length)
      • str[0]; --> 类似数组通过下标获取指定字符(字符串不变,通过索引赋值无效,如 str[0] = 's',str原值不变)
      • str.toUpperCase(); --> 字符串变大写
      • str.toLowerCase(); --> 字符串变小写
      • indexOf() --> 搜索字符串出现位置(区分大小写)
      • substring(start,stop) --> 返回指定索引间的子串(start包括,stop不包括)
      • replace(regexp/substr,replacement) --> repalcement替换匹配的首个子串,(代替所有匹配子串需要带有全局标志g的正则表达式) 

    • 布尔值
      • true、false。也可以用布尔运算计算出来,如 2 > 1 --> true

    • 数组
      • 和Java不同的是,某个数组可以包含任意数据类型
      • 也可以用索引访问元素,起始索引同样为 0
      • 可以用 new Array(1, 2, 3) 方式来新建
      • 常用 [1, 2, 3.14, 'Hello', null, true] 的方式表示数组 

    • 对象
      • JS中的对象类似于Java中的Map,以键值对组成的无序集合,key都是字符串类型,value可以是任意类型
      • 获取对象属性用 对象变量.属性名 方式 e.g. person.name / person.sex

    • 其他
    • null 和 undefined
      • null 表示空值,和 0 以及 "" 是不同的概念
      • undefined 表示值未定义,而null表示空值,大多数情况用null,undefined在判断函数参数是否传递情况下比较常用

    2.3 运算符

    基本和Java类似,这里做个简单的列举吧。
    • 算数运算符
      • +
      • -
      • *
      • /
      • %
      • ++
      • --
    • 比较运算符
      • >
      • >=
      • <
      • <=
      • == 自动转换类型再比较(很多时候会得到很诡异的结果)
      • === 不自动转换数据类型,如果数据类型不一致,则返回false(推荐始终使用 === 进行比较
      • !=
    • 逻辑运算符
      • && 与
      • ||  或    注:A||B会判断A布尔值,如果为真直接返回A否则返回B(A、B保持原类型)
      • ! 非
    • 条件运算符
      •  ? :
    • 赋值运算符
      • +=
      • -=
      • /=
      • %=
    • 字符串运算符
      • =
      • +=

    2.4 变量

    变量的命名和Java类似,大小写英文、数字、$、_、组合,数字不能开头。

    变量本身不固定类型,所以不同类型对同个变量赋值是允许的,这在Java中则不可以:
    JavaScript --> var a = 123; a = 'abc'; //可行
    Java --> int a = 123; a = 'abc'; //不可行,编译不通过

    如果变量不使用 var 声明,则该变量自动成为全局变量,所以请在所有变量前都加上 var,避免不必要的错误。

    ECMA规范中推出了strict模式,该模式下运行JS,如果未使用var将报错,使用方法在JS第一行加上 'use strict'; 支持该模式的浏览器会开启strict模式运行JS。

    附件列表

    • 相关阅读:
      1.20 测试嵌套对象使用Object.defineProperty是否有效?
      1.6 对象解构赋值机制
      12.26 sessionStorage与locaStorage的区别(作用域、生命周期)
      break,continue,return 区别
      过滤关键词
      ES6 笔记
      Cesium 学习笔记
      Cesium 学习笔记
      【vue】清理代码
      《CSS世界》读书笔记(十六)
    • 原文地址:https://www.cnblogs.com/deng-cc/p/6591903.html
    Copyright © 2020-2023  润新知