首页 > 博客列表 > JS数据类型和流程控制

博主信息

博文 55

粉丝 3

访问量 70588

专题推荐

更多>

JS数据类型和流程控制

一、js数据类型

1.Number类型

浮点数值：必须包含一个小数点，且小数点后必须有一位数字
整数：没有小数点的数值
NaN即非数值（Not a Number），是一个特殊的数值;
isNaN() 接收一个参数，该函数会帮我们确定这个参数是否‘非数值’，是返回true,不是返回false

数值转换:

number()：用于任何数据类型

  var num1 = Number("hello world");
  console.log(num1);//NaN
  var num2 = Number("");
  console.log(num2);//0
  var num3 = Number("000011");
  console.log(num3);// 11
  var num4 = Number(true);
  console.log(num4);//1

parseInt()和parseFloat() 专门把字符串转成数值

  var num5 = parseInt('1234blue');
  console.log(num5);//1234
  var num6 = parseInt('');
  console.log(num6);//NaN
  var num7 = parseInt('0xA');
  console.log(num7);//10

  var num9 = parseFloat('1234blue');
  console.log(num9);//1234
  var num10 = parseFloat('0xA');
  console.log(num10);//0

parseFloat(): 只解析十进制值

2.String类型

stringl类型：由0或多个16位Unicode字符串组成的字符序列，即字符串，可由单引号和双引号表示；
toString（）：将数值转成字符串。
在不知道要转换的值是不是null和underfined的情况下，可以使用String()方法。该函数可以将任何类型的值转成字符串。

var str = "zifuchuan";
console.log(typeof str);//返回string
var num = 10;
alert(num.toString()); //"10"
var value1 = 10;
alert(String(value1));//"10"

3.Boolean类型

布尔值：返回true,false
将一个值转换成Boolean值，可以调用转换函数Boolean()；
返回的是true还是false ，其规则如下：

数据类型	true	false
Boolean	true	false
String	非空字符串	“ “(空字符串)
Number	非零数字	0 和NaN
Object	非空对象	null
Underfined	N/A（不适用）	underfined

var bu = false;
console.log(typeof false);//false
var fl = Boolean("hello");
console.log(f1);//true

4.Null

null值为空，null值表示一个空对象指针；
如果定义一个变量用于保存一个对象，那么最好将这个变量的值初始化为null,这样只要检查null值就可以知道变量是否保存了一个对象的引用

var nu = null;
//返回一个空对象
console.log(typeof null);

5.Underfined

Underfined类型只有一个值，即underfined;使用var声明变量但未初始化时，这个变量的值就是underfined;

//undefined 未定义
var un = undefined;
//返回undefined
console.log(typeof un);
//undefined的值等于null,但类型不同
//返回true
console.log(null == undefined);
//返回false
console.log(null === undefined);

6.Object

js中的对象其实就是一组数据和功能的集合；在js中，Object是所有对象的基础，因此所有对象都有基本的属性和方法

      //数组
      var fruits = ["watermelon", "apple", "orange", "peach", "pear"];
      //拿到所有元素
      console.log(fruits);
      //访问索引
      console.log(fruits[1]);
      //数组元素个数
      console.log(fruits.length);
      //typeof只能判断数组是不是对象类型，不能确定它是一个数组
      console.log(typeof fruits);
      //判断数组的正确方式,返回布尔值
      console.log(Array.isArray(fruits));
      //遍历数组
      for (var i = 0; i < fruits.length; i++) {
        console.log(fruits[i]);
      }
      //forEach遍历
      fruits.forEach(function (item, key) {
        console.log("i:", key, "item", item);
      });
      //forEach第二种遍历方式
      fruits.forEach((item, key) => console.log("i:", key, "item:", item));
      //获取部分数组元素
      //slice()
      //语法：arrayObject.slice(start,end)
      /*start    必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。
      也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。*/
      /*end    可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。
      如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。
      如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。*/
      console.log(fruits.slice(0, 3));
      //如果 end 未被规定，那么 slice() 方法会选取从 start 到数组结尾的所有元素。
      console.log(fruits.slice(0));
      //splice() 方法用于添加或删除数组中的元素。
      //语法：array.splice(index,howmany,item1,.....,itemX)
      /*
      index    必需。规定从何处添加/删除元素。
      该参数是开始插入和（或）删除的数组元素的下标，必须是数字。
      howmany    可选。规定应该删除多少元素。必须是数字，但可以是 "0"。
      如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。
      item1, ..., itemX    可选。要添加到数组的新元素
      */
      //返回值：被删除的元素组成的数组
      //删除操作
      console.log(fruits.splice(1, 2));
      //新增操作
      console.log(fruits.splice(1, 0, "果汁", "黄瓜"));
      console.log(fruits);
      //更新操作
      console.log(fruits.splice(1, 2, "猕猴桃", "甜瓜"));
      console.log(fruits);
      //对象：object
      //js中的数组 类似php索引数组
      //js中的对象 类似php关联数组
      var student = {
        id: 1,
        name: "admin",
        email: "admin@php.cn",
        course: [34, 88, 93],
        "my scroe": {
          php: 90,
          js: 80,
          css: 80,
        },
      };
      //访问对象用点连接 ,非法字符用[]来访问
      console.log(student.email);
      console.log(student.course[1]);
      console.log(student["my scroe"]);
      //遍历对象
      //for.......in.....
      for (key in student) {
        console.log(student[key]);
      }
      //Array.from(obj):将对象转为真正的数组
      //Object.keys()把对象所有属性放到一个数组中
      var keys = Object.keys(student);
      console.log(keys);
      keys.forEach(function (item) {
        console.log(this[item]);
      }, student);

二、函数

1.函数

      //函数
      function f1(a, b) {
        console.log(a + b);
      }
      f1(100, 200);

2.匿名函数

      //匿名函数
      var f2 = function (a, b) {
        console.log(a + b);
      };
      f2(20, 20);

3.立即调用函数

      //立即调用函数
      (function (a, b) {
        console.log(a + b);
      })(100, 100);//返回200
      -(function (a, b) {
        console.log(a + b);
      })(50, 100);//返回150
      ~(function (a, b) {
        console.log(a + b);
      })(50, 100);//返回150
      (function () {
        if (true) {
          var a = 10;
        }
      })();
      console.log(a);//返回underfined
      if (true) {
        var a = 10;
      }
      console.log(a);//返回10

三、流程控制

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>流程控制</title>
  </head>
  <body>
    <ul>
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
    </ul>
    <ul>
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
    </ul>
      </body>
</html>

1.单分支

      //单分支
      var age = 49;
      if (age >= 50) console.log("不想奋斗了，累了");

2.双分支

      //双分支
      if (age >= 50) console.log("不想奋斗了，累了");
      else console.log("再努力一把");

3.多分支

      //多分支
      age = 38;
      if (age > 18 && age < 30) console.log("哥没车没房，约不约");
      else if (age >= 30 && age < 50) console.log("哥想有个家");
      else if (age >= 50) console.log("这是真爱");
      else console.log("姐才", age, ",认你当二叔吧");

4.switch 参数为true时表示范围，否则就代表具体的某个值

      //switch
      switch (true) {
        case age > 18 && age < 30:
          console.log("不想奋斗了，累了");
          break;
        case age >= 30 && age < 50:
          console.log("哥想有个家");
          break;
        case age >= 50:
          console.log("这是真爱");
          break;
        default:
          console.log("姐才", age, ",认你当二叔吧");
      }

5.for循环

      //for循环
      var lis = document.querySelectorAll("ul:first-of-type li");
      //for
      for (var i = 0; i < lis.length; i++) {
        lis[i].style.backgroundColor = "blue";
      }

6.while循环

      //while循环
      var lis2 = document.querySelectorAll("ul:last-of-type li");
      var k = 0;
      while (k < lis2.length) {
        lis2[k].style.backgroundColor = "red";
        k++;
      }

四、JSON

1.JSON是什么

全称：（JavaScript Object Notation）js对象表示法
json是一种有条理，易于访问的存储信息的方法。它为我们提供了一个可读的数据集合，我们可以通过合理的方式来访问这些数据。
json支持三种数据类型：简单值、对象、数组
不支持undefined

 var person = {
        name: "Peter Zhu",
        age: 26,
        isMarried: true,
        course: {
          name: "javascript",
          grade: 99,
        },
        getName: function () {
          return this.name;
        },
        hobby: undefined,
        toString: function () {
          return "继承属性";
        },
      };
      //将js对象转换为json格式的字符串
      var jsonStr = JSON.stringify(person);
      //传入第二个参数数组，对输出的结果进行限制
      jsonStr = JSON.stringify(person, ["name", "age"]);
      //如果第二个参数是一个回调，可以进行动态过滤
      jsonStr = JSON.stringify(person, function (key, value) {
        switch (key) {
          case "age":
            return "年龄不能随便问的";
          case "isMarried":
            return undefined;
          //必须要有default,才可以输出其它未处理的属性
          default:
            return value;
        }
      });
      console.log(jsonStr);

五、学习总结

js常见的6种数据类型：数值、字符串、布尔值、null、undefined、对象
流程控制：
if…单分支
if…else…双分支
if…else if…else if…else…多分支
switch(true){//参数为true时代表范围，否则代表具体某个值
case:
…
break;
case:
…
break;
case:
…
break;
default:
…
}
for循环：for(var i = 0;i < 5;i++){…}
while循环：var i = 0; while(i < 5){… i++;}
JSON是一种有条理，易于访问的存储信息的方法
JSON.stringify(js对象):可以将对象转换成json格式的字符串，当第二个参数为数组时，表示静态过滤；第二个参数为回调函数时，表示动态过滤

批改老师：

天蓬老师

批改状态：合格

老师批语：完成了

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

初学jQuery

2020-08-29 07:53:59