前端知识之JS(javascirpt)

目录

• JS简介
• JS基础
  • 1.注释语法
  • 2.引入JS的多种方式
  • 3.结束符号
• 变量与常量
• 基本数据类型
  • 1.数字类型(Number)
  • 2.字符类型(string)
  • 3.布尔类型(Boolean)
  • 4.null和underfined
  • 5.对象(object)
    • 数组(Array)
    • 对象之自定义对象(Object)
• 运算符
  • 1. 算术运算符
  • 2. 比较运算符
  • 3. 逻辑运算符
• 流程控制
  • if判断
  • for循环
  • while循环
  • 三元运算
• 函数
  • 匿名函数
  • 箭头函数
  • javascript函数特性
• 内置对象
  • Date日期对象
  • JSON对象
  • RegExp正则表达式对象
    • 定义正则表达式两种方式

JS简介

全称JavaScript 是一种具有函数优先的轻量级、解释型或即时编译的编程语言 它是一门前端工程师的编程语言

JS基础

1.注释语法

1. 注释语法
	//	单行注释
	/*多行注释*/

2.引入JS的多种方式

1. head内script标签内编写
2. head内script标签src属性引入外部js资源
3. body内最底部通过script标签src标签属性引入外部就是资源(最常用)

PS：注意页面的加载是从上往下的 所以操作标签js代码一定要等待标签加载完毕在执行才可以正产运行

3.结束符号

​ 分号(很多时候不写也没问题)

变量与常量

1. pycharm创建文件或者html文件(适合编写较为复杂的js代码)
2. 浏览器提供编写js代码的环境

JavaScript的变量可以使用_、数字、字母、$组成 不能以数字开头

在js中声明变量需要使用关键字

var
	var name = 'jason';
let
	let name = 'tony';
	ps:let是ECMA6新语法 可以在局部定义变量不影响全局
在js中声明常量也需要使用关键字
const
	const pi = 3.14;

基本数据类型

在js中查看数据类型的方式 typeof

typeof "abc"  // "string"
typeof null  // "object"
typeof true  // "boolean"
typeof 123 // "number"

1.数字类型(Number)

在js中整型与浮点型不分家 都叫Number

NaN也属于数值类型 意思是：不是一个数字(Not A Number)

2.字符类型(string)

单引号		'jason'
双引号		"jason"
模板字符串	`jason`
let name1 = 'jason'
let age1 = 18
underfined
let desc = `my name is ${name1} my age is ${age1}`
console.log(desc);	// 得到my name is jason my age is 18

1.字符串拼接推荐使用加号

var a = 'hello';
var b = 'world';
var c = a + b;
consle.log(c); // 得到hellworld

2.常见内置方法

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

3.布尔类型(Boolean)

js里面的布尔值与Python不同js是纯小写 (空字符串)、0、null、undefined、NaN都是false

而python中是首字母大写

4.null和underfined

null表示值是空的(曾经拥有过) 一般在需要指定或清空一个变量是才会使用 如 name = null;

underfined表示没有定义(从来没有过)当声明一个变量但未初始化 该变量的默认值是underfined 且函数无明确的返回值时 返回的也是undefined

5.对象(object)

数组(Array)

对象之数组(Array)>>>: 类似于python中的列表

let l1 = []

对象之自定义对象(Object)

对象之自定义对象(object)>>>: 类似于python的字典

如下实创建自定义对象的两种方式：
    let d1 = {'name':'jason',}
    let d2 = new Object();

JavaScript中的自定义对象，既支持中括号取值，又支持用点取值。python中的字典则不支持用点取值！

javascript把内置函数 自定义对象放一起了都用new：

运算符

1. 算术运算符

+ - * / ++(自增1) --(自减1)
var x=10;
var res1=x++;	加号在后面	先赋值后自增
var res2=++x;	加号在前面	先自增后赋值

2. 比较运算符

!=(值不等 弱) ==(值相等 弱) ===(值相等 强) !==(值不等 强)
如：
A	1 == "1"	// true 弱相等
B	1 === "1"	// false 强等于
A 上面这张情况出现的原因在于JS是一门弱类型语言(会自动转换数据类型)，所以当你用两个等号进行比较时，JS内部会自动先将
B 数值类型的1转换成字符串类型的1再进行比较，所以我们以后写JS涉及到比较时尽量用三等号来强制限制类型，防止判断错误

3. 逻辑运算符

	&&(与)	||(或)	!(非)

流程控制

if判断

1. 单if分支

if (条件){
    条件成立的子代码
}

2. if...else分支

if(条件){
    条件成立执行的代码
}else{
    条件不成立执行的代码
}
如：
var a = 10;
if (a > 5){
  console.log("yes");
}else {
  console.log("no");
}

3. if...else if...else分支

if(条件1){
    条件1成立执行的代码
}else if(条件2){
    条件1不成立条件2执行的代码
}
else{
    条件1和条件2都不成立执行的代码
}
如：
var a = 10;
if (a > 5){
  console.log("a > 5");
}else if (a < 5) {
  console.log("a < 5");
}else {
  console.log("a = 5");
}

4. 如果分支结构中else if很多还可以考虑使用switch语法

switch(条件){
    case 条件1:
        条件1成立执行的代码;
        break; //如果没有break会基于某个case一直执行下去
    case 条件2:
        条件2成立执行的代码;
        break;
    case 条件3:
        条件3成立执行的代码;
        break;
    case 条件4:
        条件4成立执行的代码;
        break;
    default:
        条件都不满足执行的代码
}

如:
var day = new Date().getDay();
switch (day) {
  case 0:
  console.log("Sunday");
  break;
  case 1:
  console.log("Monday");
  break;
default:
  console.log("...")
}

for循环

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

while循环

while(循环条件){
    循环体代码
}
var i = 0;
while (i<10) {
    console.log(i)
}

三元运算

var a = 1;
var b = 2;
var c = a > b ? a : b
//这里的三元运算顺序是先写判断条件a>b再写条件成立返回的值为a,条件不成立返回的值为b;三元运算可以嵌套使用；
var a = 10,b = 20;
var x = a > b ?a : (b=="20")?a:b;

函数

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

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

匿名函数

var s1 = function(a,b){
    return a + b;
}

箭头函数

结合python中的匿名函数记忆

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;
}

javascript函数特性

1. JS中函数的形参与实参个数可以不对应
   传少了就是undefined 传多了不用
   

2. 函数体代码中有一个关键字arguments用来接收所有的实参
   
   使用argments:
   

3. 函数的返回值如果有多个需要自己处理成一个整体
   

4. 作用域的例子
   
   例子2
   

5. 闭包函数
   

内置对象

Date日期对象

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

JSON对象

结合跟python中的json模块，也是用于数据的序列化和反序列化

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

var str1 = '{"name": "Alex", "age": 18}';
var obj1 = {"name": "Alex", "age": 18};
// JSON字符串转换成对象
var obj = JSON.parse(str1); 
// 对象转换成JSON字符串
var str = JSON.stringify(obj1);

定义正则的两种方法

RegExp正则表达式对象

定义正则表达式两种方式

var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
Var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;

注意事项
注意事项一：正则表达式中不能有空格
注意事项二:全局匹配时有一个lastIndex属性

// 全局匹配
var s1 = 'egondsb dsb dsb';
s1.match(/s/)
s1.match(/s/g)
//使用match进行匹配的时候，返回的是一个对象，如果有值就会在前面显示出来

var s1 = 'asfdasddfasf aqgwefqwef asdfae'

s1.match(/s/)
结果：['s', index: 1, input: 'asfdasddfasf aqgwefqwef asdfae', groups: undefined]
s1.match(/s/g)
结果：(4) ['s', 's', 's', 's']

var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g
reg2.test('egondsb');
reg2.test('egondsb');
reg2.lastIndex;

当我们在正则表达式的后面写上一个g的时候表示全局匹配，这时候光标的移动跟文件的读取相似，当读取到末尾的时候会出现没有数据可读的情况，这时候就会返回false，并且重置光标到开头，我们可以使用lastIndex方法来查看光标目前所在的位置。

test匹配数据不传 默认传undefined

// 校验时不传参数
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/
reg2.test();
reg2.test(undefined);

var reg3 = /undefined/;
reg3.test();