前端开发:4、JavaScript简介、变量与常量、数据类型及内置方法、运算符、流程控制、循环结构、内置方法

  • 前端开发:4、JavaScript简介、变量与常量、数据类型及内置方法、运算符、流程控制、循环结构、内置方法已关闭评论
  • 21 次浏览
  • A+
所属分类:Web前端
摘要

​ Javascript(简称‘JS’),是一门解释型编程语言,主要用于Web、和浏览器中网页中的动态渲染


前端开发之JavaScript

一、JavaScript简介

​ Javascript(简称‘JS’),是一门解释型编程语言,主要用于Web、和浏览器中网页中的动态渲染

​ 是一门前端工程师的编程语言,相比于python它的逻辑并不是那么严谨

二、JS基础

语法注释

单行注释 	//注释内容  多行注释(与css注释相同) 	/*注释内容*/ 

引入JS的多种方式

1、<head>标签内<script>标签内编写  2、<haed>标签内<script>标签src属性引入外部JS资源  3、<body>标签内最底部通过<script>标签src属性引入外部JS资源(最常用) 	网页的加载顺序是由上至下,所以操作标签的JS代码一定要等待标签加载结束后运行 

结束符

分号  ; 	JavaScript中的语句要以分号(;)为结束符。 

编写JS代码的方式

1、浏览器 (零时使用) 	打开浏览器,右键检查,在console内部编写      2、pycharm创建JS文件或者HTML文件 	适合编写较为复杂的JS代码(便于长久保存) 

三、变量与常量

变量

  • 变量的声明:

    • 在JS中声明变量需要用到关键字varlet(let 是ECMA6新语法)
    • JavaScript的变量名可以使用_,数字,字母,$组成,不能以数字开头。
  • 变量名的命名规范:

    • 推荐使用小驼峰
  • var 与 let 区别:

    • var:定义在全局,可在局部名称空间种被修改
    • let: 定义在局部名称空间种不会影响到全局名称空间的变量名
var 	var 变量名 = '值'; 	 let  	let 变量名 = '值'; 

常量

​ JS中支持定义常量(定义后无法被修改)

关键字:const 	const 常量名 = '值'; 

四、基本数据类型

查看数据类型的方法:

  • 关键字:typeof
typeof(绑定数据的变量名); 

1、数值类型

​ Number(数值类型)

​ 区别于Python,JS中整型和浮点型都叫做:Number

​ NaN也属于数值类型:不是一个数字(Not A Number)

前端开发:4、JavaScript简介、变量与常量、数据类型及内置方法、运算符、流程控制、循环结构、内置方法

2、字符类型

​ String(字符类型)

​ 定义字符类型可使用单、双引号

​ 模板字符串使用:``

var 变量名 = '值';  var 变量名 = "值";  var 变量名 = `我是第一列 	我是第二列 	我是第三列` 

内置方法

序号 关键字 说明
1 .length 返回长度
2 .trim() 移除空白
3 .trimLeft() 移除左边的空白
4 .trimRight() 移除右边的空白
5 .charAt(n) 返回第n个字符
6 .concat(value, ...) 拼接
7 .indexOf(substring, start) 子序列位置
8 .substring(from, to) 根据索引获取子序列
9 .slice(start, end) 切片
10 .toLowerCase() 小写
11 .toUpperCase() 大写
12 .split(delimiter, limit) 分割
var name = '  kang kang  ' var gender = 'male'   1.name.length  // 13 返回字符长度  2.name.trim()	// 'kang kang' 去除字符串左右两边空格(区别于Python,JS只能去除空格)  3、name.trimLeft()  // 'kang kang  ' 去除字符串左边空格  4、name.trimRight()  // '  kang kang' 去除字符串右边空格  5、name.charAt(5)  // 'g' 类似于Python的索引取值  6、name.concat(gender)  // '  kang kang  male' 拼接,针对字符的拼接还可以用‘+’号  7、name.indexOf('ng')  // 4 根据输入的字符获取字符对应索引的位置  8、name.substring(1,5)  //' kan' 类似于Pyhon的切片操作  9、name.slice(1,5)   // ' kan' 类似于Pyhon的切片操作  10、name.toUpperCase()  // '  KANG KANG  ' 将字符串所有英文字母转大写  11、name.toUpperCase()  // '  kang kang  ' 将字符串所有英文字母转小写  13、name.split(' ')  //(6) ['', '', 'kang', 'kang', '', ''] 按指定字符·分割字符串, 第二个参数可控制获取分割后的字符串的个数  /*  string.slice(start, stop)和string.substring(start, stop):  两者的相同点: 如果start等于end,返回空字符串 如果stop参数省略,则取到字符串末 如果某个参数超过string的长度,这个参数会被替换为string的长度  substirng()的特点: 如果 start > stop ,start和stop将被交换 如果参数是负数或者不是数字,将会被0替换  silce()的特点: 如果 start > stop 不会交换两者 如果start小于0,则切割从字符串末尾往前数的第abs(start)个的字符开始(包括该位置的字符) 如果stop小于0,则切割在从字符串末尾往前数的第abs(stop)个字符结束(不包含该位置字符) */ 

3、布尔类型

​ boolean(布尔值)

​ 区别于Python,JS的布尔值首字母不用大写

​ JS布尔值纯小写

var a = true; var b = false; 

(空字符串)、0、null、undefined、NaN都是False

五、特殊数据类型

null和undefined

1、null

  • 表示值是空,一般在需要指定或清空一个变量时才会使用

  • 表示曾经有过,但是现在没有了

  • eg:name= null

2、undefined

  • 表示当声明一个变量但未初始化时,该变量的默认值是undefined
  • 表示一直就没有拥有过
  • 函数无明确的返回值时,返回的值也是undefined

​ null表示变量的值是空(null可以手动清空一个变量的值,使得该变量变为object类型,值为null),undefined则表示只声明了变量,但还没有赋值。

前端开发:4、JavaScript简介、变量与常量、数据类型及内置方法、运算符、流程控制、循环结构、内置方法

前端开发:4、JavaScript简介、变量与常量、数据类型及内置方法、运算符、流程控制、循环结构、内置方法

六、引用数据类型

1、对象(Object)

​ JaveScript中所有的事务都是对象:字符串、数值、数组、函数...此外JavaScript允许用户自定义对象

​ JaveScript提供多个内建对象,比如String、Date、Array等

​ 对象是带有属性和方法的特殊数据类型

2、数组(Array)

​ 数组类似于Python中的列表

​ 使用单独的变量名来存储一系列的值

创建数组的方法

let a = [1,2,3,4,5]; 

常用方法

序号 方法 说明
1 .length 数组的大小
2 .push(ele) 尾部追加元素
3 .pop() 获取尾部的元素
4 .unshift(ele) 头部插入元素
5 .shift() 头部移除元素
6 .slice(start, end) 切片
7 .reverse() 反转
8 .join(seq) 将数组元素连接成字符串
9 .concat(val, ...) 连接数组
10 .sort() 排序
11 .forEach() 将数组的每个元素传递给回调函数
12 .splice() 删除元素,并向数组添加新元素。
13 .map() 返回一个数组元素调用函数处理后的值的新数组
let a = [1,2,3] let b = ['ABC','DEF']  1、a.length  // 3 返回数组内部数据的数量  2、a.push(4)   // 在数组尾部添加值  3、a.pop()  // 弹出数值尾部的值  4、a.unshift(1)  // 在数值头部插入数值,可一次插入多个  5、a.shift  // 移出数组头部数据,一次只能移除一个  6、a.slice(1,3)  // 数组切片取值,设置起始和结束位置的索引  7、a.reverse()  // 反转元组内数据  8、a.join()  //  '3,2,1,1,5' 将数组内数据转成字符类型  9、a.concat(b)  //(7) [3, 2, 1, 1, 5, 'ABC', 'DEF'] 拼接数组  10、a.sort()  // 将数组内数值由小到大排序  11、 var obj = {             '1' : 'abc',             '3' : 100,             '5' : 'hello'         }         var arr = [1, 3, 5];         arr.forEach(function(item){             // console.log(item);           },obj);//返回值: 1 3 5  12、a.splice('a','b','c')  //删除数组内现有数据,添加新的数据  13、et array = [1, 2, 3, 4, 5];      let newArray = array.map((item) => {         return item * item;     })      console.log(newArray)  // [1, 4, 9, 16, 25] 

3、字典(Dictionary)

​ 字典同于Python中的字典

​ 字典是一种以键-值对形式存储数据的数据结构,比如:名字-电话号码,通过名字就能找到对应的电话号码,名字就是键(key),电话号就是值(value);

创建字典的方法

1、方式一: 创建字典的同时直接添加键值对 	let 字典名 = {键1:值1,               键2:值2               }      2、方式二:  创建一个空字典,然后再添加键值对 	let 字典名 = new Object(); 

字典的基本用法

let d1 = {name: 'kangkang', age: 18, hobby: 'read'}  1、索引取值 	d1.name   // 'kangkang' 	d1[name]  // 'kangkang'  2、添加键值对 	d1.键名 = 值 	d1[键名] = 值	 

七、运算符

1、算数运算符

符号 描述
+
-
*
/
% 取余
++ 自增1
-- 自减1
var x=10;  var res1 = x ++;   加号在后面	先赋值后自增  var res2 = ++ x;	加号在前面	 先自增后赋值 

2、比较运算符

  • 弱:
    • 不同类型的类型解释器会自动转换为相同类型的数据进行比较
    • ‘1’== 1;// true
  • 强:
    • 不同类型数据不会自动转换类型
    • ‘1’== 1;// false
符号 描述
!= 不等于(弱)
== 等于(弱)
=== 等于(强)
!=== 不等于(强)

3、逻辑运算符

符号 描述
&&
||

八、流程控制

1.单if分支 	if (条件){         条件成立执行的代码     } 2.if...else分支 	if(条件){         条件成立执行的代码     }else{         条件不成立执行的代码     } 3.if...else if...else分支 	if(条件1){         条件1成立执行的代码     }else if(条件2){         条件1不成立条件2执行的代码     }     else{         条件1和2都不成立执行的代码     } 4.如果分支结构中else if很多还可以考虑使用switch语法 	switch(条件){         case 条件1:         	条件1成立执行的代码;         	break;  如果没有break会基于某个case一直执行下去         case 条件2:         	条件2成立执行的代码;         	break;         case 条件3:         	条件3成立执行的代码;         	break;        	case 条件4:         	条件4成立执行的代码;         	break;         default:   			 条件都不满足执行的代码     }  """ 三元运算 	python中:   值1 if 条件 else 值2 	JS中:	   条件?值1:值2 """ 

九、循环结构

1、for循环

for循环 	for(起始条件;循环条件;条件处理){         循环体代码     } 	for(let i=0;i<10;i++){        	 console.log(i)     }  	let dd = {'name':'jason','age':18}    for(let k in dd){         console.log(k)     }  

2、while循环

while循环 	while(循环条件){         循环体代码     } 

十、函数

1.JS中函数的形参与实参个数可以不对应
传少了就是undefined 传多了不用
2.函数体代码中有一个关键字arguments用来接收所有的实参
3.函数的返回值如果有多个需要自己处理成一个整体

1、普通函数

function 函数名(形参){     // 函数注释     函数体代码     return 返回值 } 

2、匿名函数

# 匿名函数 var s1 = function(a, b){   return a + b; } 

3、箭头函数

# 箭头函数 var f = v => v; var f = function(v){   return v; }  var f = () => 5; var f = function(){return 5};  var sum = (num1, num2) => num1 + num2; var sum = function(num1, num2){   return num1 + num2;   } 

十一、内置对象

1、时间相关

var d = new Date();  //getDate()                 获取日 //getDay ()                 获取星期 //getMonth ()               获取月(0-11) //getFullYear ()            获取完整年份 //getYear ()                获取年 //getHours ()               获取小时 //getMinutes ()             获取分钟 //getSeconds ()             获取秒 //getMilliseconds ()        获取毫秒 //getTime ()                返回累计毫秒数(从1970/1/1午夜) 

2、json序列化

let dd = {name: 'jason', age: 18} JSON.stringify(dd)	序列化 JSON.parse(ss)	   反序列化 

3、正则

定义正则两种方式 var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}"); var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;  1.全局模式的规律 	lastIndex 2.test匹配数据不传默认传undefined