前端开发(04)

目录

• JS简介
• JS基础
• 变量与常量
• 基本数据类型
  • • 数值(Number)
    • 布尔类型(boolean)
    • 未定义类型(undefined)
    • null(空类型) null和undefined区别:
    • 数字类型
    • 字符串类型
• 检测数据类型
  • • 通过typeof关键字检测数据类型
• 运算符
• 流程控制
• 函数
• 内置对象

JS简介

全称JavaScript但是和java一毛钱关系都没有 之所以这么叫是为了蹭Java的热度
 
它是一门前端工程师的编程语言 但是它本身有很多逻辑错误(不是很严谨)
 
IT行业鄙视链: 后端 > 前端、运维、测试、产品、老板
前端想一统天下:node.js
    
JS发展史>>>:JavaScript很容易学习

JS基础

1.注释语法
	// 单行注释
    /*多行注释*/
 
2.引入js的多种方式
	1.head内script标签内编写
    2.head内script标签src属性引入外部js资源
    3.body内最底部通过script标签src属性引入外部js资源(最常用)
    ps:注意页面的下载是从上往下的 所以表操标签js代码一定要等待表爱你加载完毕再执行才可以正常运行
        
3.结束符号
	分号(很多时候不写也没问题)

变量与常量

"""
1.pycharm创建js文件或者html文件(适合编写较为复杂的js代码)
2.浏览器提供编写js代码的环境
"""
在js中声明变量需要使用关键字
	var
    	var name = 'jason';
    let
    	let name = 'tony';
     ps:let是ECMA6新语法 可以在局部定义变量不影响全局 在js中声明常量也需要使用关键字
      const
    		const pi = 3.14;

基本数据类型

数值(Number)

JavaScript不区分整型和浮点型, 就只有一种数据类型

var a = 12.34;
var b = 20;
var c = 123e5;   // 123000
var d = 123e-5   // 0.00123

还有一种NaN，表示不是一个数字(Not a Number).

常用方法:

parseInt("123")  // 返回123
parseInt("ABC")  // 返回NaN,NaN属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。
parseFloat("123.456")  // 返回123.456

布尔类型(boolean)

表示肯定或否定在计算机中对应的布尔类型数据。
它有两个固定的值 true 和 false 表示肯定的数据用true(真)，表示否定的数据用(假uname)
 
未定义是比较特殊的类型 只有一个值 undefined
 
# 什么情况出现未定义类型？
只声明变量,不赋值的情况下,变量的默认值为undefined, 一般很少【直接】为某个变量赋值为undefined
 
工作中的使用场景：
 
我们开发中经常声明一个变量，等待传送过来的数据。
 
如果我们不知道这个数据是否传递过来，此时我们可以通过检测这个变量是不是undefined，就判断用户是否有数据传递过来

未定义类型(undefined)

未定义是比较特殊的类型, 只有一个值 undefined

情况	说明	结果
let age; console.log(age)	只声明 不赋值	undefined
console.log(age)	不声明 不赋值 直接使用	报错
age = 10; console.log(age)	不声明 只赋值	10(不提倡)

null(空类型) null和undefined区别:

1. undefined 表示没有赋值
2. null   表示赋值了 但是内容为空
 
null开发中的使用场景:
官方解释: 把 null 作为尚未创建的对象
大白话: 将来有个变量里面存放的是一个对象, 但是对象还没创建好, 可以先给个null

数字类型

JavaScript中的正数、负数、小数等 统一称为 数字类型
注:JS是弱数据类型, 变量到底属于哪种类型,只有赋值之后，我们才能确认Java是强数据类型 列入 int a = 3 必须是整数

字符串类型

通过单引号（' '） 、双引号（""）或反引号( ` )包裹的数据都叫字符串，单引号和双引号没有本质上的区别，推荐使用单引号

1.单引号 双引号 模板字符串
    let user_name = '阿呆' // 使用单引号
    let gender = "男"; //使用双引号
    let str = '123'; //看上去是数字类型, 但用了引号包裹就成了字符串
    let str1 = '';//这种情况叫控字符串
 
2.字符串拼接:
 	document.write('我是'+'吴彦祖') //我是吴彦祖
	
	let uname = '刘德华'
    let song = '忘情水'
    document.write(uname + song) //刘德华忘情水
 
3.模板字符串
	`` 在英文模式下按tab键上方那个键(1左边那个键)
	内容拼接变量时, 用${}包住变量
  document.write(`大家好,我叫${uname}, 我给大家唱首{song}！！`)

常用方法

方法	说明
.length	返回长度
.trim()	移除空白
.trimLeft()	移除左边的空白
.trimRight()	移除右边的空白
.charAt(n)	返回第n个字符
.concat(value,...)	拼接
.indexOf(substring, start)	子序列位置
.substring(from,to)	根据索引获取子序列
.slice(start，end)	切片
.toLowerCase()	小写
.toUpperCase()	大写
.split(delimiter,limit)	分割

检测数据类型

控制台语句经常用于测试结果来使用。

可以看出数字型和布尔型颜色为蓝色，字符串和undefined颜色为灰色

通过typeof关键字检测数据类型

let age = 18
let uname = '刘德华'
let flag = false
let buy
 
console.log(typeof age)  	//number
console.log(typeof uname)   //string
console.log(typeof flag)	//booleam
console.log(typeof buy)		//undefind

运算符

1.算术运算符
	+ - * / % ++(自增1) --(自减1)
    	var x=;
        var res1=x++; 加号在后面	    先复制后自增
        var res2=++x;  加号在前面	先自增后赋值
2.比较运算符
	！=(值不等 弱) ==(值相等 弱) ===(值相等 强) !==(值不等 强)
	ps:会不会自动转换类型
 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:
             条件都不满足执行的代码
    }
 
 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)
      }
 
 while 循环
 	  while(循环条件){
          循环体代码
      }
 
三元运算
	python中:    值1 if 条件 else 值2
    JS中: 		条件？值1: 值2   

函数

"""
python中函数的定义
	def 函数名(形参):
		'''函数注释'''
		函数体代码
		return 返回值
"""
function 函数名(形参){
    // 函数注释
    函数体代码
    return 返回值
}
# 匿名函数
var s1 = function(a, b){
    return a + b;
}
# 箭头函数
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. JS中函数的形参与实参个数可以不对应
	   传少了就是undefined 传多了不用
2.函数体代码中有一个关键字arguments用来接收所有的实参
3.函数的返回值如果有多个需要自己处理成一个整体
 

内置对象

var d = new Date();
//getDate()				获取日
//getDay()				获取星期
//getMonth()			获取月(0-11)
//getFullYear()			获取完整年份
//getYear()				获取年
//getHours()			获取小时
//getMinutes()			获取分钟
//getSeconds()			获取秒
//getMilliseconds()    	 获取毫秒
//getTime()				返回累计毫秒数
 
let dd = {name:'jason',age: 18}
JSON.stringify(dd)   序列化
JSON.parse(ss)		反序列化
 
 
定义正则两种方式
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