search

博客列表 >JS基础知识

JS基础知识

longlong
longlong原创
2020年08月12日 14:45:05632浏览

1.数据类型及其访问方式

数据类型分为基本类型和引用数据类型

1.1 基本类型访问及其判断

  1. <script>
  2.     // 1. 值类型（基本类型）
  3.     // 1.1 数字类型 Number
  4.     let num = 10;
  5.     // 1.2 字符串类型 String
  6.     let str = 'hello';
  7.     // 1.3 布尔类型 Boolean
  8.     let doIt = true;
  9.     // 1.4 对空类型 Null
  10.     let name = null;
  11.     // 1.5 未定义 undefined
  12.     let age = undefined;
  13.     // 访问
  14.     console.log(num);
  15.     console.log(str);
  16.     console.log(doIt);
  17.     console.log(name);
  18.     console.log(age);
  19.     // 类型判断 typeof
  20.     console.log(typeof num,str,doIt,name,age);
  21. </script>

1.2 引用数据类型及其判断

引用数据类型分为：数组、对象、函数

  • 数组
  1. // 2. 引用数据类型（在JS中它们也都属于对象）
  2.     // 2.1 数组
  3.     let arr = ['老大','老二','老三','老四','老五'];
  4.     // 2.1.1 访问数组
  5.     console.log(arr);
  6.     // 2.1.2 访问数组中的元素
  7.     console.log(arr[2]);
  8.     // 2.1.3 查看数组的长度
  9.     console.log(arr.length);
  10.     // 2.1.4 判断类型 (typeof 不能判断引用数据类型的具体类型，它判断出的都是object对象)
  11.     console.log(typeof arr);
  12.     // 2.1.5 判断数组类型时使用 Array.isArray()
  13.     console.log(Array.isArray(arr));
  14.     // 2.1.6 遍历数组
  15.     // 方式一：for()
  16.     for (let i=0;i<arr.length;i++) { console.log(arr[i]); }
  17.     // 方式二：forEach()
  18.     arr.forEach (function (item,index) { console.log('index: ',index,'item: ',item); });
  19.     // 使用箭头函数
  20.     arr.forEach((item,index) => console.log( 'index: ',index,'item: ',item ));
  21.     // 方式三：for...of...
  22.     for (let item of arr) { console.log(item); }
  23.     // 2.1.7 获取数组部分元素
  24.     console.log(arr.slice(1,3));
  25.     // 2.1.8 splice()：实现对数组的新增，删除，替换
  26.     // 删除（从第一个元素开始删除，删除3个，最终数组只剩2个元素了）
  27.     arr.splice(1,3);
  28.     console.log(arr);
  29.     // 新增（从第二个元素开始，删除0个，新增2个）
  30.     arr.splice(2,0,'老六','老七');
  31.     console.log(arr);
  32.     // 替换（从第二个元素开始删除2个，再新增2个将删除的元素替换掉，相当于更新了数组元素）
  33.     arr.splice(2,2,'老八','老九');
  34.     console.log(arr);

  • 对象
  1. // 2.2 对象
  2.     let obj = {
  3.         name : 'Alice',
  4.         age : 20,
  5.         email : 'alice@php.cn',
  6.         isMarried : false,
  7.         hobby : ['fish','book','film'],
  8.         // 不规则的命名必须加上引号
  9.         'her time' : {
  10.             morning : 'sport',
  11.             afternoon : 'eating',
  12.             evening : 'study',
  13.         },
  14.     };
  15.     // 访问对象
  16.     console.log(obj);
  17.     // 访问对象，以表格的形式控制台输出
  18.     console.table(obj);
  19.     // 访问对象中的元素,以对象的方式访问，加上.号连接
  20.     console.log(obj.email);
  21.     // 访问对象中的元素,以数组的方式访问
  22.     console.log(obj["isMarried"]);
  23.     // 访问对象中的数组元素
  24.     console.log(obj.hobby[1]);
  25.     console.log(obj["hobby"][1]);
  26.     // 访问对象中的对象元素
  27.     console.log(obj["her time"].evening);
  28.     console.log(obj["her time"]["evening"]);
  29.     // 遍历对象，方式一：for...in...
  30.     for ( let key in obj) {
  31.         console.log('索引:',key,'--->',obj[key]);
  32.     }
  33.     // 遍历对象，方式二：先取到对象中的属性名组成数组，再用forEach遍历属性，传入第二参数即对象
  34.     let keys = Object.keys(obj);
  35.     console.log(keys);
  36.     keys.forEach(function (item) {
  37.         // 访问对象中的属性时以数组的方式，因为有的属性命名可能不规则
  38.         console.log(item,'--->',this[item]);
  39.     },obj)

  • 对象转为数组
  1.   // 2.3 对象转换为数组
  2.     let obj2 = {
  3.         0 : 'name',
  4.         1: 'age',
  5.         2 : 'email',
  6.         "3" : 'tel',
  7.         4.1 : 'haha',
  8.         "-5" : 'xixi',
  9.         hello : 'world',
  10.         length : 7,
  11.     };
  12.     // 将对象转换为数组Array.from()
  13.     // 使用此函数，想成功转为真正的数组，对象需要满足两个条件：
  14.     // 1. 对象中的属性名必须是正整数数字类型或字符串型的正整数数字
  15.     // 2. 对象中必须有length属性，指定转换后的数组长度
  16.     let arr1= Array.from(obj2);
  17.     console.log(arr1);
  18.     // 属性名不符合规则的，在转换为数组后，都是undefined

  • 函数
  1.  // 2.4 函数
  2.     // 2.4.1 命名函数
  3.     function test1 (x,y) {
  4.         console.log(x+y);
  5.     }
  6.     test1(10,10);
  8.     // 2.4.2 匿名函数
  9.     let test2 = function (x,y) {
  10.         console.log(x*y);
  11.     }
  12.     test2(5,5);
  14.     // 2.4.3 立即调用函数 IIFE ：将函数的声明与调用合二为一了
  15.     // 写法一：
  16.     (function (x,y) {
  17.         console.log('写法一：',x+y);
  18.     })(20,20);
  19.     // 写法二：
  20.     (function (x,y) {
  21.         console.log('写法二：',x+y);
  22.     }(30,30));
  23.     // 写法三：在函数前面加上合法运算符
  24.     +function (x,y) {
  25.         console.log('写法三：',x+y);
  26.     }(40,40);
  27.     ~function (x,y) {
  28.         console.log('写法三：',x+y);
  29.     }(40,40);
  30.     // 用立即调用函数的好处是：不会污染全局对象

2. 流程控制

  1. <script>
  2.     // 流程控制
  3.     // 1. 单分支
  4.     let score = 65;
  5.     if (score>=60) {
  6.         console.log('恭喜你，及格了！');
  7.     }
  8.     // 2. 双分支
  9.     score = 50;
  10.     if (score>=60){
  11.         console.log('恭喜你，及格了！');
  12.     }else {
  13.         console.log('准备回去复读把！');
  14.     }
  15.     // 3. 多分支
  16.     score = 88;
  17.     if (score>=90){
  18.         console.log('成绩非常优秀！');
  19.     }else if (score<90 && score>=80){
  20.         console.log('成绩良好！');
  21.     }else if (score<80 && score>=70){
  22.         console.log('成绩中等！');
  23.     }else if (score<70 && score>=60){
  24.         console.log('刚好及格！');
  25.     }else {
  26.         console.log('准备复读把！');
  27.     }
  28.     // 4. 用switch简化多分支
  29.     score = 77;
  30.     // 当 case 判断的不是单值类型，而是范围的时候，switch 中最好传true
  31.     switch (true) {
  32.         case score>=90 : console.log('成绩非常优秀！');
  33.         break;
  34.         case score<90 && score>=80 : console.log('成绩良好！');
  35.         break;
  36.         case score<80 && score>=70 : console.log('成绩中等！');
  37.         break;
  38.         case score<70 && score>=60 : console.log('刚好及格！');
  39.         break;
  40.         default : console.log('准备复读把！');
  41.     }
  42. </script>

3. 循环

  1. <body>
  2. <table border="1" width="500" height="100">
  3.     <tr>
  4.         <td>1</td>
  5.         <td>2</td>
  6.         <td>3</td>
  7.         <td>4</td>
  8.     </tr>
  9.     <tr>
  10.         <td>1</td>
  11.         <td>2</td>
  12.         <td>3</td>
  13.         <td>4</td>
  14.     </tr>
  15.     <tr>
  16.         <td>1</td>
  17.         <td>2</td>
  18.         <td>3</td>
  19.         <td>4</td>
  20.     </tr>
  21. </table>
  22. <script>
  23.     let tds = document.querySelectorAll('table tr td:nth-of-type(2)');
  24.     for (let td of tds) {
  25.         td.style.backgroundColor = 'yellow';
  26.     }
  27.     // 1. for 循环
  28.     let tds1 = document.querySelectorAll('table tr td:nth-of-type(3)');
  29.     for (let i=0;i<tds1.length;i++){
  30.         tds1[i].style.backgroundColor = 'green';
  31.     }
  32.     // 2. while 循环
  33.     let tds2 = document.querySelectorAll('table tr td:first-of-type');
  34.     let i=0;
  35.     while (i<tds2.length){
  36.         tds2[i].style.backgroundColor = 'red';
  37.         i++;
  38.     }
  39.     // 3. do...while 循环
  40.     let tds3 = document.querySelectorAll('table tr td:last-of-type');
  41.     let j=0;
  42.     do{
  43.         tds3[j].style.backgroundColor = 'blue';
  44.         j++
  45.     } while(j<tds3.length);
  46. </script>
  47. </body>

4. JS对象序列化为JSON格式字符串

  1. <script>
  2.     /*
  3.     JSON 重要知识点：
  4.     1. JSON中中能有三种数据类型：简单值类型，对象，数组
  5.     1.1 简单值类型：
  6.         数值：15,99
  7.         字符串：aaa,bbb,name,age
  8.         布尔:true,false
  9.         空值：null
  10.         注意：未定义undefined不支持
  11.     2. JSON 只是长的像JS对象，借用了JS对象字面量的语法规则，但和JS没有关系，它就是字符串，只是样式那样而已
  12.     3. JSON 中不存在方法（函数）
  13.     4. 几乎所有编程语言都提供了访问 JSON 数据的 API 接口
  14.     */
  15.     let obj = {
  16.         name : 'Mike',
  17.         age : 20,
  18.         study : {
  19.             "php" : 90,
  20.             "css" : 88,
  21.             "js" : 92,
  22.         },
  23.         hobby : ['basketball','football','smoke'],
  24.         girl : null,
  25.         isMale : true,
  26.         show : function () {
  27.             return '个人信息';
  28.         },
  29.         isHandsome : undefined,
  30.     };
  31.     let json = JSON.stringify(obj);
  32.     console.log(json);
  33.     // 第二个参数传入数组，对输出的结果进行限制
  34.     json = JSON.stringify(obj,["name","study","hobby"],'\t');
  35.     console.log(json);
  36.     // 第二个参数传入回调函数，可进行动态过滤
  37.     json = JSON.stringify(obj,function (key,value) {
  38.         switch (key) {
  39.             case 'study' : return '你无权限访问学生成绩';
  40.             case 'girl' : return '关你什么事';
  41.             // 这里必须加default才能输出其他未处理的属性
  42.             default : return  value;
  43.         }
  44.     },'\t');
  45.     console.log(json);
  46.     // JSON.stringify(value, replacer , space)语法
  47.     // 第三个参数可传入 \t ，可以将输出结果以制表符形式输出
  48. </script>

这里发现一个问题，当第二个参数是传的数组的时候，原JS对象中的study对象没有输出，但是不传第二个参数或第二个参数是回调时能正常输出：

经过一些资料查看了解到，当第二个参数是数组时，它仅处理具有键值的属性，所以不能处理对象，JSON.stringify()这个函数中三个参数的具体意义如下：

JSON.stringify(value, replacer , space)语法 ：

  • value：必需，要转换的JS对象或数组

  • replacer：可选，若为数组，仅转换该数组中具有键值的成员，如果这个成员在原对象中本身也是一个对象，那么将不能被转换；若为函数，将会传入此JS对象或数组的键和值，然后根据函数的自定义规则进行返回

  • space：可选，文本添加缩进、空格和换行符，如果 space 是一个数字，则返回值文本在每个级别缩进指定数目的空格，如果 space 大于 10，则文本缩进 10 个空格。space 也可以使用非数字，如：\t。

上一条：JS数据类型和流程控制下一条：git 提交数据到码云解决每次都需要提交密码问题
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多