前端基础——JavaScript部分（一）语法和数据类型（字符串，数组，对象，Map和Set，流程控制，iterator）

技术2022-07-12 76

JavaScript的引入方式

外部引入：添加script标签，在标签内添加属性src指向js文件内部引入：在html内添加script标签，在script标签内直接写 <head> <meta charset="UTF-8"> <title>Title</title>  <script> alert('hello,world'); </script>   <script src="js/qj.js"></script>  <script type="text/javascript"></script> </head> <body>  </body>

基本语法入门

基本语法

变量定义和条件控制

逻辑运算 && || ！

var a= true&&false;//与运算，只有两边均为ture时，才为ture //否则为false故a=false var b= true||false;//或运算，只要两边有一ture，就为ture //否则为false故b=true var c= !a;//取反运算，a为false 故c为true

比较运算符 === == > < >= <= !=

注意!== ==两个符号，建议使用而不应该使用java中的双=和！= 判断是否是NaN只能使用isNaN()函数来判断

数据类型

数值，文本，图形，音频，视频。。。

变量名规范

和java规范类似，不能使用数字开头可以使用下划线、$，可以用中文但是不建议

数字number：JavaScript不区分小数和整数，都是number类 var a= NaN;//Not a Number 不是数也是数 alert(a===a);//即使是自己也不等于自己 a=1; a=99.99; a=1.22e23; a=-Infinity;//Infiniti 无穷 alert(typeof a);//以上输出都是number 1/3===1-2/3//为false 因为存在精度问题故应该避免浮点数计算 //Math.abs(1/3-(1-2/3))<0.000001可以相减小于一个极小量来代替字符串string：不论是单个字符还是一串字符，在JavaScript中都是string（转义字符等规则和java一样） var s='a';//单个字符 s="abc"//字符串 alert(typeof s);//输出都是string 布尔值boolean：有且只有两个值 true false var b=true; b=false; alert(typeof b); null 和 undefined null：空undefined：未定义 //和NaN不同 null和undefined和自身相等 alert(null===null) alert(undefined===undefined) 数组 java中数组中必须是相同的类型对象，JavaScript中不需要 JavaScript中，访问越界下标时，不会报错而是返回一个undefined //两句都可，尽量使用上面的句式， var arr=[1,2,3,4,"hello",null,NaN] new Array(1,2,3,4,"hello",null,NaN) alert(arr[7]);//越界，返回undefined arr[8]=0;//会把数组长度扩充为9 alert(arr) 对象对象为大括号定义 var person= { name:"hyx", age:18, tags:[1,2,3,4], } alert(person.name);//取得对象的值

严格检查模式strict

//严格检查模式，预防JavaScript的随意性导致的一些问题 'use strict' //局部变量都建议使用let来定义 a=1;//使用严格检查模式后，会标红

数据类型

字符串

1.正常字符串用’ ’ 或者“ ”包裹 2.注意转义字符 \

\' // 一个字符串 \n // 换行 \t // tab \u4e2d //unicode编码 \u#### \x41 //AscII编码

3.多行字符串编写

//tab 上面的引号 var msg=` hello e we `

4.模板字符串

//tab 上面的引号 let name="qinjiang"; let age=3; let msg=`你好呀, ${name}`

5.字符串的长度

console.log(str.length)

6.字符串的常用特性

方法名说明s.length字符串长度s.toUpperCase()全部字母转换为大写s.toLowerCase()全部字母转换为小写s.indexOf()返回所在下标s.substring()截取字符串，包括第一个下标，不包括第二个下标；可以只传一个参数，截取从所传下标开始直到结束的字符串s.replace()两个参数，第一个参数为要被替换的字串，第二个为替换的内容，返回值为替换结果，注意：不会改变原字符串

数组

Array可以包含任意的数据类型（甚至同一个数组中可以包含多个类型）

方法/属性名说明a.length数值的属性，返回数组长度a.indexOf(123)返回数组中对应元素的下标，若不存在则返回-1 逻辑为===a.slice()类似字符串中的substring，截取包左不包右，只一个参数则从对应下标开始截取a.push()向数组中压入元素，可以多个参数，按照顺序压在数组最后a.pop()弹出元素，返回并删除最后一个元素a.shift();向数组中加入元素，可以多个参数，按照顺序加在最前a.unshift()删除并返回数组第一个元素a.sort()数组排序a.reverse()翻转数组中元素a.concat(1,2,3)拼接数组，新数组返回值，不改变原数组join("-")更改打印数组时对应的分隔符a.fill(1)把数组中所有元素都用填充为参数 var a= [1,2,3,4,5,"hyx","tzt","123"]; a.length;//数值的属性，返回数组长度 a[7];//用下标取数组元素，可以越界，返回undefined a[8]=999;//下标赋值，会把数组扩展，length改变，若赋值后扩展了不只 //一个元素，则中间的空元素全部为undefined a.indexOf(123);//返回数组中对应元素的下标，若不存在则返回-1 逻辑为=== a.slice();//类似字符串中的substring，截取包左不包右，只一个参数则从对应下标开始截取 a.push();//向数组中压如元素，可以多个参数，按照顺序压如最后 a.pop();//弹出元素，返回并删除最后一个元素 //类似push和pop方法，区别只在对数组头部做操作 a.shift(); a.unshift(); a.sort();//数组排序 a.reverse();//翻转数组中元素 a.concat(1,2,3);//拼接数组，新数组返回值，不改变原数组 a.join("-");//更改打印数组时对应的分隔符 a.fill(1);//把数组中所有元素都用填充为参数

对象

若干个键值对

var 对象名={ 属性名：属性值；属性名：属性值；属性名：属性值； } //定义了一个person对象，它有4个属性 var person={ name:"kuang", age:3, email:"2565687561@qq.com", score:0 }

js中对象，{……}表示一个对象，键值对描述属性xxxx:xxxx,多个属性之间使用逗号隔开，最后一个属性不加逗号！！！

对象赋值 person.age=99; person['name'] 访问一个不存在的属性，不会报错，会返回undefined，若给它复制，会创建一个属性 person.class;//undefined person.class=5;//添加新属性class 动态删减属性 delete delete person.class;//删除person的class属性判断属性是否存在于这个对象中 in（父类中继承的也会包含） 'class' in person;//返回false 判断一个属性是否为这个对象自身拥有 hasOwnProperty() person.hasOwnProperty('class');

Map和Set

Map: //ES6 //学生的成绩，学生的名字 //var names=["tom","sam","ting","wang"]; //var scores=[100,99.88,66]; var map=new Map([["tom",100],["sam",99],["ting",88],["wang",66]]); var name = map.get("tom");//通过key获得value map.set('admin',123456);//新增或修改 map.delete("tom")//删除 Set:无序不重复的集合 var set=new Set([1,2,3,1,1,3,2,4,1]);//set可以去重 set.add(5);//添加 set.delete(1);//删除 console.log(set.has(3)); //是否包含指定值 console.log(6 in set)

流程控制

if：()中判断为true则运行{}中代码块，可以else if和else同一段if只有一个{}中的代码会被执行 let a=3; if(a>10){ }else if(a<0){ }else{ } while：判断()中boolean值，重复执行{}中代码段直到()中为false 避免死循环 while (age<100){ age++; } for // for(a;b;c){d} //先执行初始化语句a 然后重复以下逻辑： //判断b 为false则结束for循环，为true则执行d //执行c 重新判断b for (let i=0;i<10;i++){ alert(i); } forEach 循环 var age=[1,2,34,656,678,2323,23]; //函数 for(var num in age){ age.forEach(function (value) { console.log(value) }) } for…in 循环 //for(var index in object){} for(var num in age){ if(age.hasOwnProperty(num)){ console.log("存在") console.log(age[num]) }}

iterator

通过for of 和for in 实现遍历

遍历数组 for(var x in arr){ //打印下标 console.log(x) } for(var x of arr){ //打印元素 console.log(x) } 遍历Map（只能用这个方法遍历） var map=new Map([['tom',100],['jack',99],['wang',77]]); for (let x of map){ console.log(x); } 遍历Set var set=new Set([5,6,7]); for (let x of set){ console.log(x) }

Processed: 0.010, SQL: 10