这篇笔记呢，咱记录下变量和数据类型的基础知识，因为两者有联系 所以放在一起记录

1 如何声明变量

变量声明使用var关键字，下面举一些变量声明的例子：

<!DOCTYPE html>

<html>

<head>

    <title>learn javascript</title>

</head>

<body>

</body>

{{--js--}}

<script>

    var name = "larger";

    var age = 24, desire = "become web developers";

    document.write(name + "<br />" + "age" + ":" + age + "<br />" + "desire" + ":" + desire);

</script>

</html>

2 数据类型

js中的数据类型有：

  1. Nunber：数字类型。
  2. String：字符串类型。
  3. Boolean：布尔类型。
  4. Array：数组。
  5. Object：对象。
  6. Null：空值。
  7. Undefined：未定义值。

下面咱一个一个的声明这些类型的变量。

2.1 数字类型

2.1.1 声明方式

<script>

    var number1 = 5;

    var number2 = (5 - 9) * 3;

    var numberSum = number1 + number2;

    document.write(number1 + "<br />" + number2 + "<br />" + numberSum  + "<br />");

</script>
<script>

    var Num = 3.88;

    document.write(Num);

</script>
<script>

    var num = new Number(3000);     // 这样声明的话 它会是一个对象

    document.write(typeof(num));    // Object

</script>

2.1.2 常用方法

NaN是一个非数字类型，用 isNaN 判断是否是非数字类型：

<script>

    var num1 = new Number(3000);

    var num2 = 123;

    var noNum = NaN;

    document.write(isNaN(num1) + "<br />" + isNaN(num2) + "<br />" + isNaN(noNum))

</script>

当数字长度达到边界时 就会变成一个特殊的类型：无穷大（Infinity）/负无穷大（-Infinity）：

<script>

    var num1 = 2/0;

    if (num1 == Infinity){

        document.write("数字已溢出"+num1);

    }

</script>

用tostring方法来转换成字符串类型：

<script>

    var num1 = 122;

    var str1 = num1.toString();     // 没有传递参数默认是10进制。

    var str2 = num1.toString(8);    // 8进制

    document.write(num1 + "<br />" + str1 + "<br />" + str2 + "<br />" + typeof(str1));

</script>

2.2 字符串类型

2.2.1 声明方法

<script>

    var str1 = "something";     // 用双引号

    var str2 = 'something';     // 用单引号

    var str3 = "my name is 'K'";// 双引号中展示单引号

    var str4 = 'my name is "K"';// 单引号中展示双引号

    var str5 = 'my name is \'K\'';  // 转义单引号中的单引号

</script>

2.2.2 常用方法

通过索引获取字符：

<script>

    var str1 = "something";      // 用双引号

    var char = str1[11];         // char也是string类型，如果越界的话char的类型为undefined

    document.write(char);

</script>

通过length方法获取字符串长度：

<script>

    var str = "something";     // 用双引号

    var strlen = str.length;   // 返回的strlen是数字类型。

    document.write(strlen);

</script>

通过indexof来查找字符串：

<script>

    var str = "something";     // 用双引号

    var index1 = str.indexOf("thing");   // 返回4 从零计算

    var index2 = str.indexOf("same");    // 返回-1 代表没找到

    var str2 = "my name is k my age is 24";

    var index3 = str2.indexOf("is");    // 返回8

    var index4 = str2.lastIndexOf('is');// lastindexof是从后面开始找的 所以返回20

</script>

通过macth来匹配字符串：

<script>

    var str = "something";     // 用双引号

    var substr = str.match("sa");   // 如果能找到 返回查找的字符串 如果没有找到 返回null

    document.write(substr);

</script>

替换一段字符串：

<script>

    var str = "this is laravel";

    str = str.replace("laravel", "javascript");     // 如果没有替换成功 返回原来的字符串。

    document.write(str);

</script>

大小写的转换：

<script>

    var str = "this is laravel";

    str = str.toLocaleUpperCase();  // 转换为大写。

    str = str.toLocaleLowerCase();  // 转换为小写。

</script>

转为数组：

<script>

    var str = "this is laravel";

    var array = str.split(" ");     // 通过空格分隔。

</script>

2.3 数组

2.3.1 声明方法

<script>

    var array1 = new Array();

    array1[0] = "string type";

    array1[1] = 55;

    array1[2] = true;

    var array2 = new Array("alex", "k", 24);

    var array3 = ["alex", "K", 24];

</script>

2.3.2 访问数组中的元素

<script>

    var array3 = ["alex", "K", 24];

    // 可以通过索引获取

    for (i = 0; i < array3.length; i++){

        document.write(array3[i] + "<br />");

    }

    // 也可以通过索引来修改值

    for (i = 0; i < array3.length; i++){

        array3[i] = "value" + i;

    }

    document.write(array3);

</script>

2.4 对象

对象中可以包含属性和方法，其实在js中 所有事物都是对象这其中包括上面的数字、字符串、数组。

2.4.1 创建方法

<script>

    var object1 = new Object();

    object1.name = "alex";

    object1.skinColor = "white";

    object1.sayHello = function() {

        return "yo bro what's up";

    };

    document.write(object1.name  + "<br >" + object1.skinColor + "<br >");

    document.write(object1.sayHello());

</script>

↑ 这是第一种声明方法 在其中 我们使用objectName.valueName访问了对象中的元素，还有objectName.methodName访问了对象中的方法。

<script>

    var object1 = {

        name : "alex",

        skinColor : "white",

        sayHello : function() {

            return "yo bro what's up";

        }

    };

    document.write(object1.name  + "<br >" + object1.skinColor + "<br >");

    document.write(object1.sayHello());

</script>

↑ 这是第二种写法，比较常用 比第一种方法简单。

<script>

    // 对象构造器

    function Person(firstName, lastName, age){

        this.firstName = firstName;

        this.lastName = lastName;

        this.age = age;

        this.changeName = changeName;

        function changeName(name){

            this.firstName = name;

        }

        this.fullName = fullName;

        function fullName(){

            return this.firstName + this.lastName;

        }

    }

    // 使用对象构造器创建对象

    var myWife = new Person("*","haoyan",18);

    myWife.changeName("Yang");

    document.write(myWife.fullName());

</script>

↑ 这是第三种写法，对象构造器。

2.4.2 遍历对象

使用for in来遍历对象：

<script>

    // 对象构造器

    function Person(firstName, lastName, age){

        this.firstName = firstName;

        this.lastName = lastName;

        this.age = age;

        this.changeName = changeName;

        function changeName(name){

            this.firstName = name;

        }

        this.fullName = fullName;

        function fullName(){

            return this.firstName + this.lastName;

        }

    }

    // 使用对象构造器创建对象

    var myWife = new Person("*","haoyan",18);

    for(variable in myWife){

        document.write(variable + "<br />");

    }

</script>

JavaScript 变量,数据类型的更多相关文章

  1. JavaScript 变量

    一,JavaScript 变量(存储信息的容器) 与代数一样,JavaScript 变量可用于存放值(比如 x=2)和表达式(比如 z=x+y). 变量可以使用短名称(比如 x 和 y),也可以使用描 ...

  2. JavaScript变量和数据类型

    变量 变量就是一个元素,类似于数学中的概念,用来指定表示一个对象.在JavaScript中,用来指定变量的关键字为var.当声明新变量时,可以使用关键词 "new" 来声明其类型 ...

  3. JavaScript 基础(一) - JavaScript的引入方式，JavaScript 变量命名规则，JS 的五种基本数据类型，ECMAScript 算数运算符，逻辑运算符

    JavaScript的引入方式 直接编写 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  4. JavaScript的数据类型与变量

    JavaScript数据类型 1.原始数据类型: 数值型,如十进制数.十六进制数.八进制数和特殊值(Infinity.NaN),注意:NaN不能和自身比较 字符串型,如定界符.转义符: 布尔类型. 2 ...

  5. JavaScript变量、数据类型、函数

    #转载请留言联系 说在前面: JavaScript 是一种弱类型语言,javascript的变量类型由它的值来决定. JavaScript语句的末尾用 ; 结束.空格没有特殊意义. 1.JavaScr ...

  6. javascript变量的作用域

    javascript变量的作用域 基本类型和引用类型 基本类型值指的是简单的数据段,而引用类型值指的是那个可能由多个值组成的对象  讲一个值赋值给变量时,javascript解析器首先要确定是基本类型 ...

  7. JavaScript 变量作用域

    一. 变量声明 变量用var关键字来声明,如下所示: 变量在未声明的情况下被初始化,会被添加到全局环境. JavaScript执行代码时,会创建一个上下文执行环境,全局环境是最外围的环境.每个函数在被 ...

  8. JS-安全检测JavaScript基本数据类型和内置对象的方法

    前言:在前端开发中经常会需要用到检测变量数据类型的需求,比如:判断一个变量是否为undefined或者null来进行下一步的操作,今天在阅读“编写高质量代码-改善JavaScript程序的188个建议 ...

  9. JavaScript变量声明

    javascript是一种无类型语言,无类型只是意味着用户不必显示地声明变量的数据类型,但是javascript仍然将根据需要自动进行数据类型转换的. javascript的数据类型可以分为简单数据类 ...

随机推荐

  1. Yasm 1.3.0 Release Notes

    Yasm 1.3.0 Release Notes http://yasm.tortall.net/releases/Release1.3.0.html Target Audience Welcome ...

  2. 更改Eclipse下Tomcat的部署目录

    转自:http://kingxss.iteye.com/blog/1741438 前言 今天tomcat启动就报错,后来查原因是因为异常关闭tomcat的原因,需要删除一个sessions.ser的文 ...

  3. Apache 使用gzip、deflate 压缩页面加快网站访问速度

    Apache 使用gzip 压缩页面加快网站访问速度 介绍: 网页压缩来进一步提升网页的浏览速度,它完全不需要任何的成本,只不过是会让您的服务器CPU占用率稍微提升一两个百分点而已或者更少.   原理 ...

  4. linux之getopt 函数（转）

    命令行参数解析函数 —— getopt() getopt()函数声明如下: #include <unistd.h> int getopt(int argc, char * const ar ...

  5. ohasd failed to start: Inappropriate ioctl for device

    今天同事在安装GI的时候出现故障.让我帮忙看一下. 以下记录例如以下: 问题现象: 在安装gi的时候运行root.sh报例如以下错误: Finished running generic part of ...

  6. 一个由正则表达式引发的血案 vs2017使用rdlc实现批量打印 vs2017使用rdlc [asp.net core 源码分析] 01 - Session SignalR sql for xml path用法 MemCahe C# 操作Excel图形——绘制、读取、隐藏、删除图形 IOC,DIP,DI,IoC容器

    1. 血案由来 近期我在为Lazada卖家中心做一个自助注册的项目,其中的shop name校验规则较为复杂,要求:1. 英文字母大小写2. 数字3. 越南文4. 一些特殊字符,如“&”,“- ...

  7. FileNotFoundException: http:\localhos46087125.jpg (文件名、目录名或卷标语法不正确

    java.io.FileNotFoundException: http:\localhost:8080\ipms\upload\1332146087125.jpg (文件名.目录名或卷标语法不正确.) ...

  8. css制作的61种图像

    HTML: <!DOCTYPE html> <html> <head> <title>css各种形状</title> <link re ...

  9. 203. Remove Linked List Elements【easy】

    203. Remove Linked List Elements[easy] Remove all elements from a linked list of integers that have ...

  10. python模块学习之json

    更多信息请参考官网地址: https://docs.python.org/3.6/library/json.html 19.2. json - JSON编码器和解码器 Source code: Lib ...