资讯专栏INFORMATION COLUMN

JavaScript的个人分享

JasonZhang / 1673人阅读

摘要:的基础语法的语法是区分大小写的注意在中是区分大小写的变量名称不能是中文代码示例一花一世界控制台调用效果图语法中的空格与换行注意并不是的语法内容可有可无的建议使用因为这样会使代码看的更清晰利于阅读代码示例代码一花一世界中的分号可选项语法并

JavaScript的基础语法: JavaScript的语法是区分大小写的

注意: 在JavaScript中是区分大小写的

变量名称不能是中文

代码示例:

var v1 = "一花一世界";
console.log(v1);
var Va1 = "Yihuayishijie";
console.log(Va1);
var VA1 = "YIHUAYISHIJIE";
console.log(VA1);

控制台调用效果图:

JavaScript语法中的空格与换行

注意: 并不是JavaScript的语法内容 - 可有可无的 (建议使用)

因为这样会使代码看的更清晰利于阅读代码

示例代码:

var v1 = "一花一世界";
console.log(v1);
JavaScript中的分号

可选项 - JavaScript语法并不强制要求必须写分号 ( ; )

但是在多个语句编写在同一行时,必须要写分号 ( ; )

作用是 - 表示一句话的结束

注意: 如果最后不写分号控制台也不会报错但是编辑器会提示

建议: 不忽略结束符 ( ; )

示例代码:

//带分号的
var v1 = "一花一世界";
console.log(v1);

//不带分号的
var v1 = "一花一世界"
console.log(v1)

区别图:

JavaScript中的关键字和保留字

关键字就是JavaScript中有特殊作用的

注意关键字不能用于变量名(自己起的名)

保留字就是以后可能变成关键字同样也不能用

常量与变量: JavaScript中的变量

变量的概念:

变量就是存储信息的容器 - (就是放东西的)放数据的

变量又叫临时存储

变量具体说就是有名字的容器 - 称为变量名

变量名称的作用 - 就是通过名来找到值的数据信息

调用时会找最近的变量名 - 就近原则

变量的问题与需要注意的事情:

注意: 每个变量只能存储一个值

问题:局限性太大

变量的定义

变量的定义语法结构:

语法结构 - var 变量名称 = 变量的值;

注意: JavaScript的变量是弱类型(也叫松散类型)

定义变量时,但不初始化值时 - 控制台并不清除该变量值的类型

只有在变量初始化值时 - 控制台才知道该变量的类型

注意:

变量允许, 只变量不赋值

变量允许, 先变量在赋值

代码示例:

/* 1.定义变量,并初始化值 */
var v1 = "一花一世界";// 定义变量 - 变量的定义,并且初始化值
console.log(v1);// 调用变量

/* 2.定义变量,但没有初始化值 */
var v2;// 指定义,没有初始化值
console.log(v2);// 调用结果为 undefined - 表示未定义

v2 = "一叶一孤城";
console.log(v2);

/* 3.多个变量同时定义 - 变量定义之间使用逗号分隔 */
var v3 = 100,v4 = 200;// 两个变量声明
console.log(v3);// 调用结果 - 100
console.log(v4);// 调用结果 - 200

控制台调用效果图:

变量的重复定义

JavaScript中重复定义变量 - 语法允许

重复定义时 - 先将之前的变量在内存的空间进行销毁,然后在创建 - 不建议使用

代码示例:

var v1 = "一花一世界";
console.log(v1);// 调用结果为 一花一世界

var v1 = 100;
console.log(v1);// 调用结果为 100
变量的重复赋值

JavaScript中变量是允许重复赋值的 - 建议使用

代码示例:

var v1 = "一花一世界";
console.log(v1);// 调用结果为 一花一世界

v1 = "一叶一孤城";// 赋值
console.log(v1);// 调用结果为 一叶一孤城
遗漏的定义

遗漏的定义 - 就是变量没有定义,而直接调用

如果没有定义直接进行调用 - 在内存中没有存储的位置所以会报错 -> 不允许使用

而定义但不初始化值进行调用 - 在内存中有位置所以可以调用 -> 允许使用

注意:

JavaScript中允许只定义不赋值,但是不允许没定义而直接调用

代码示例:

console.log(v1);
/*
    只定义变量,但不初始化值
    * 结果 - (不报错)输出结果为 undefined
 */
var v1;
console.log(v1);/* undefined */
JavaScript的常量

常量就是一个只读的变量(定以后就不能改)

注意:

不能重复赋值

不能重复定义

常量定以后也不能用变量重新定义

定义常量的语法:
const 常量名称 = 值;

代码示例:

/*
    ECMA5之前的版本 - (了解就好)
        * 语法并没有提供常量的定义 - 只能定义变量
        * 认为规定定义的是常量,但是使用的语法依旧是变量的语法
 */
var C = 100;//语法上依旧是变量, 人为规定是常量
C = 200;// 语法上是变量

/*
    ECMA5以后的版本
      * 提供了定义常量的语法定义 - 一旦定义,值就不能被改变
        * 语法 - const 常量名 = 值;
        * 注意: 重复赋值 - 会报错 - TypeError: Assignment to constant variable.
        * 重复定义也会报错 - SyntaxError: Identifier "C1" has already been declared
 */
const C1 = 100;


/*
    注意 - 常量不允许重新赋值 - 否则会报错
*/
C1 = 200;


/*
    重复定义常量 - 同样也不允许
*/
const C1 = 200;


/*
    重复定位为变量 - 也同样不允许
 */
var C1 = 200;


/*
    总的来说就是利用常量定义过之后就不允许使用了
      * 不管是变量,还是常量的重新定义或重新赋值

    通常定义变量与常量的名称的写法:
      * 定义变量名称 - 全小写或者大小写混合
      * 定义常量名称 - 全大写
 */
定义变量或常量时

JavaScript是脚本语言 - 语法规则相对灵活(不建议)

定义变量或常量时,允许不写修饰符(var或const)

没有var或const关键字时,定义的默认为变量

代码示例:

s = 300;
console.log(s);
s = 400;
console.log(s);
常量定义的问题

常量的定义 - 必须定义时同时初始化值

如果只定义而不初始化值 - 则会报错

报错结果为 - SyntaxError: Missing initializer in const declaration

代码示例:

const C;
console.log(C);

控制台调用示例图:

常量与变量的区别

变量:

定义变量使用var关键字

定义变量使用小写

变量允许重复定义或赋值

变量允许只定义但不初始化值

变量的值允许改变

常量

定义常量使用const关键字

定义常量使用大写

常量不允许重复定义或重复赋值

常量必须定义并初始化值

常量的值不能改变

数据类型:

数据类型就是对数据进行分类,

数据类型官方分为两大类:

原始类型 - 又称原始值

引用类型 - 又称内置对象

number类型:

number类型:整数(Intger)和浮点数(就是小数|float或double) - 在JavaScript中不区分整数与浮点数

代码示例:

var num =100;/* 步骤: 1.变量名的定义并初始化; 2.字面量或直接量定义数字值 */

浮点类型:

如果写的是".1"表示"0.1"的含义 -> 不推荐

如果写的是".0"表示为整数 -> 不建议

如果写的是"10."表示为整数 -> 不建议

示例代码:

var num1 = 0.1;
console.log(num1);
/* 浮点类型 - ".1"表示"0.1"的含义 -> 不推荐 */
var num2 = .1;
console.log(num2);

var num3 = 10.1;
console.log(num3);
/* 浮点类型 - ".0"表示为整数 */
var num4 = 10.0;
console.log(num4);
/* 浮点类型 - "."表示为整数 */
var num5 = 10.;
console.log(num5);

控制台调用图:

注意: number类型中的小数可能出现误差问题: - 并不是所有的小数计算都会出现误差

小数计算时一定要注意是否出误差

解决方法:通过数字值的换算来解决(把小数换成整数然后在换回来)

示例代码:

/*
    number类型中的小数,在计算时可能出现误差
    * 并不是所有小数计算都会出现误差
    * 小数的计算时,要注意结果是否出现误差
      * 如果出现误差 - 利用数字换算的方法计算,然后得到结果在换算回来
       *比如: 0.3 - 0.2 给换算成整数 就是3 - 2  
*/

var x = 0.3;
var y = 0.2;
console.log(x - y);

控制台调用示例图:

number类型中存在一个特殊的值 - NaN

含义 - 表示当前的值不是以个数字值

类型 - 属于number类型

特点 - NaN与任何值都不相等(包括与自身都不相等)

示例代码:

var num = Number("一花一世界");/* 将一个普通文本内容转换成number类型 */
console.log(num);// 调用结果为 NaN - 表示当前这个值不是一个数字值

console.log(10 == 10);// 调用结果为 true
console.log(NaN == NaN);// 调用结果为 false

控制台调用示例图:

string类型:

string类型 - 又叫字符串 -> 建议使用单引号

注意:字符串中如果写的是数字依旧是字符串类型

string类型 - JavaScript的字符串就是由单引号或双引号包裹的

可以是 汉字, 数字 英文字母 等等

注意: 在JavaScript中单引号和双引号没有区别 - 建议使用单引号

示例代码:

var str1 = "一花一世界";
var str2 = "一花一世界";

string类型 - 文本本身需要单引号或双引号时有两种方法:

如果是需要双引号 - 那么字符串只能使用单引号

如果是需要单引号 - 那么字符串只能使用双引号

示例代码:

var str3 = "一花"一"世界";
console.log(str3);

var str4 = "一花"一"世界";
console.log(str4);

控制台调用示例图:

boolean类型

boolean类型 - 只有两个值(都是小写

注意:boolean类型的值只能是小写

true: 表示是

false: 表示不是

示例代码:

var boo1 = true;
console.log(boo1);

/* 大写或大小写混合时 -> JavaScript识别为另一个变量名称(会报错)
    因为控制台在判只能判断小写的true或false所以控制台报错
      * 所以控制台报错的原因是 - True is not defined - 表示该变量值未定义
      * 其实是没有识别大小写混合的true
*/
var boo2 = True;
console.log(boo2);
typeof运算符

typeof运算符是判断以下变量值的类型 - (只判断原始类型)

语法结构 - typeof 变量名称

结果 - 原始类型的名称 (string类型)

示例代码:

var num = 100;
var boo = true;
var str = "一花一世界";

console.log(typeof num);// 调用结果为 number
console.log(typeof boo);// 调用结果为 boolean
console.log(typeof str);// 调用结果为 string

/*
    因为测试之后都打印在控制台中了 - 能打印在控制台中的信息本身就是字符串
     * 然后把typeof的结果赋值给另一个变量了
     * 所以这个变量最后得到的结果还是字符串类型
 */
var v1 = typeof num;
console.log(v1);// 调用结果为 number
console.log(typeof v1);// 调用结果为 string
包装类型 - (官方文档中属于引用类型)

通过包装类型创建一个数字值类型的变量

语法 - var 变量名称 = new Number(数字值)

new Number() - 表示创建了一个Number类型的对象

以下两种方式创建的数字值, 在使用上没有任何区别

建议使用字面量方式 - 原因简洁

示例代码:

/* 构造函数方式 */
var num1 = new Number(100);
console.log(num1);// 调用结果为 [Number: 100]

/* 字面量/直接量方式 */
var num2 = 100;
console.log(num2);// 调用结果为 100

两个方式的唯一区别就是

构造函数方式 用typeof运算符运算结果是对象类型

字面量方式 用typeof运算符运算结果是number类型

示例代码:

console.log(typeof num2);// 调用结果为 number
console.log(typeof num1);// 调用结果为 object(对象)

备注: 包装类型中的String 类型和 Boolean 类型和 Number 相似

包装类型的运算符 - instanceof运算符

注意:typeof运算符只能判断原始类型不能判断包装类型

示例代码:

var str = new String("一花一世界");
var num = new Number(100);
var boo = new Boolean(true);

// typeof运算符只能判断原始类型
console.log(typeof str);// 调用结果为 object
console.log(typeof num);// 调用结果为 object
console.log(typeof boo);// 调用结果为 object

typeof运算符与instanceof运算符的区别

typeof运算符

用于判断原始类型

语法结构不同 -> typeof 变量名称

得到结果不同 -> 原始类型的名称

instanceof运算符

用于判断引用类型(包装类型)

语法结构不同 -> 变量名称 instanceof 引用类型名称

得到结果不同 -> 布尔类型的值(true或false)

特殊类型 - (官方分类属于原始类型)

undefined - 在JavaScript表示为空的含义

如果一个变量的值等于undefined -> 变量是存在的,但没有值

undefined类型中只存在一个值(undefined)

得到undefined值的情况如下:

定义变量时,只声明,而不初始化值 -> undefined

定义变量时,初始化值为 undefined -> undefined

注意 - 得到undefined值的情况不止以上两种

示例代码:

var v;
console.log(v);// 调用结果为 undefined

var c = undefined;
console.log(c);// 调用结果为 undefined

console.log(typeof v);// 调用结果为 undefined - 类型名称

null

作用 - 用于将指定变量从内存中进行释放

实现方法: 就是将一个指定变量的值赋值为null就行

null类型中只存在一个值(null)

注意:typeof给null的类型是错的,但是不会报错
null类型名称就叫null

示例代码:

var v = null;

/* 以下结果是错误的 */
console.log(typeof v);// 调用结果为 object

 console.log(v instanceof Null);// 调用结果为 报错
console.log(v instanceof Object);// 调用结果为 false
undefined与null的区别:

不同点:

变量名为undefined值时 - 内存中依旧占优空间

而变量名为null值时 - 内存中内有空间

相同点:

都是原始类型

都保存在栈中 - 就是在内存中存储在一个位置上,这个位置叫栈

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/96663.html

相关文章

  • 个人分享--web前端学习资源分享

    摘要:前言月份开始出没社区,现在差不多月了,按照工作的说法,就是差不多过了三个月的试用期,准备转正了一般来说,差不多到了转正的时候,会进行总结或者分享会议那么今天我就把看过的一些学习资源主要是博客,博文推荐分享给大家。 1.前言 6月份开始出没社区,现在差不多9月了,按照工作的说法,就是差不多过了三个月的试用期,准备转正了!一般来说,差不多到了转正的时候,会进行总结或者分享会议!那么今天我就...

    sherlock221 评论0 收藏0
  • JavaScript面向对象中错误与异常个人分享

    摘要:错误与异常错误与异常概念所谓错误就是错误就是程序中不正常的运行状态在其他编程语言中称为异常或错误解释器会为每个错误情况创建并且抛出一个对象对象包含错误的描述信息语句语句作用用于捕获和处理代码中的错误语句作用用于处理语句中出现的错误语句 错误与异常 错误与异常概念 所谓错误就是错误就是程序中不正常的运行状态 在其他编程语言中称为异常或错误 解释器会为每个错误情况创建并且抛出一个Erro...

    王陆宽 评论0 收藏0
  • 《CSS 揭秘》作者Lea Verou:我喜欢分享开源行业文化

    摘要:作为女性,你又来自互联网技术不太发达的希腊。希腊目前可能还存在一些针对女性的性别歧视,但并不明显,不然我可能会被影响到。实际上,有时候希腊在性别平等方面比其他西方国家更进步。 本文仅用于学习和交流,不用于商业目的。非商业转载请注明作译者、出处,并保留本文的原始链接:http://www.ituring.com.cn/art... 访谈嘉宾: Lea VerouW3C CSS工作组特邀专...

    tianyu 评论0 收藏0
  • 《CSS 揭秘》作者Lea Verou:我喜欢分享开源行业文化

    摘要:作为女性,你又来自互联网技术不太发达的希腊。希腊目前可能还存在一些针对女性的性别歧视,但并不明显,不然我可能会被影响到。实际上,有时候希腊在性别平等方面比其他西方国家更进步。 本文仅用于学习和交流,不用于商业目的。非商业转载请注明作译者、出处,并保留本文的原始链接:http://www.ituring.com.cn/art... 访谈嘉宾: Lea VerouW3C CSS工作组特邀专...

    yzd 评论0 收藏0
  • 《CSS 揭秘》作者Lea Verou:我喜欢分享开源行业文化

    摘要:作为女性,你又来自互联网技术不太发达的希腊。希腊目前可能还存在一些针对女性的性别歧视,但并不明显,不然我可能会被影响到。实际上,有时候希腊在性别平等方面比其他西方国家更进步。 本文仅用于学习和交流,不用于商业目的。非商业转载请注明作译者、出处,并保留本文的原始链接:http://www.ituring.com.cn/art... 访谈嘉宾: Lea VerouW3C CSS工作组特邀专...

    leanote 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<