前端学习3 JS

学习js的流程

变量

数据类型

流程控制

函数

对象

模块

引入js的方式

1 可以单独写js文件,在script标签内用src引入

2 可以在script标签内直接写

 

注释

// 单行注释

/*这是多行注释*/（快捷键Ctrl + shift + ？）

 

变量

命名规范：

1.变量名只能是有一下四种 数字 字母 下划线 $

2.命名规范  js推荐使用驼峰式命名ex：userName，dataOfDb (而python推荐使用下划线user_name,data_of_db)

3.变量名不能用关键字

 

在js中，首次定义变量名的时候，是需要用关键字声明

  var  和 let（新出的）

ex：

　　var name = ‘ly’

　　let name = 'ly'

两者的区别：

var 作用的是全局

let 作用的是局部

 

分隔符

一句话写完之后，用分号（；）结尾

 

常量

js里面有真正意义上的常量

用const PI = 3.14

这个PI就是常量，后面无法更改

 

数据类型

js/python都是 一门 动态 的 数据类型，可以指向任意数据类型

 

js里面不分 整型 和 浮点型，只有 数值型（number）

特例：NaN，表示不是一个数字，也是数值型

查看数据类型 用 typeof a；（查看a的数据类型）

 

类型转换

parseInt 转成整形

parseFloat 转成浮点型

 

 

字符类型（string）

可以用单引号‘ ’，也可以用双引号“ ”，不可以用三引号

定义多行字符串的话，js里有模板字符串(反引号，esc键下面的那个）

var  s1 = `  在这里写多行文本`

模板字符串除了可以定义多行文本之外，还可以实现格式化操作（类似%s等 ）

 

 字符串的拼接

在js中推荐用+ 直接做拼接

name + age

 

字符类型常用方法

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

 

布尔值

js中，布尔值用小写来表示 true  false（而Python里用大写）

空字符串，0，NaN，null，undefined 的布尔值都是false

null值表示这个变量是空的 （定义了变量之后，可以用null来清空变量）

undefined 表示这个值已经被定义，但是还没有赋值。当函数的返回值不明确的时候，也是undefined

 

对象（object）

js中，所有的事物都是对象，（字符串，数字，数组，函数等。。），js中也可以自定义对象

js中提供多个内建对象，比如string，date， arrary

对象只是带有属性和方法的特殊类型，类似于python中的字典 { } 

 

数组

使用单独的变量，来存一系列的值（类似于Python中的列表）

方法	说明
.length	数组的大小
.push(ele)	尾部追加元素
.pop()	获取尾部的元素
.unshift(ele)	头部插入元素
.shift()	头部移除元素
.slice(start, end)	切片
.reverse()	反转
.join(seq)	将数组元素连接成字符串
.concat(val, ...)	连接数组
.sort()	排序
.forEach()	将数组的每个元素传递给回调函数
.splice()	删除元素，并向数组添加新元素。
.map()	返回一个数组元素调用函数处理后的值的新数组

 

forEach的使用
var l = [1,2,3,4,5,6]
l.forEach(function (value) {console.log(value)},l)
// 当传一个参数的时候，输出结果是单个元素 1,2,3,4,5,6
l.forEach(function (value,index) {console.log(value,index)},l)
// 当传2个参数的时候，输出的结果，是单个元素和索引值
//1 0 , 2 1 ,.....
l.forEach(function (value,index,arr) {console.log(value,index,arr)},l)
// 当传3个参数的时候，输出的结果最后，是该参数的原数组(数据来源）

splice
var l = [1,2,3,4,5,6]
l.splice(0,3,33)
//从第0个元素开始，删除3个元素，并且把33加进原数组

运算符

 

 

 

 

 

 

 

 

 

 

 

 流程控制

if，if-else，if-else if -else  , switch, for循环，while循环，三元运算

if (条件) {符合条件之后执行的代码块}

var age = 28;
if (age < 18){
    console.log('太小了')
} else {
    console.log('可以尝试')
}

var age = 38;
if (age < 18){
    console.log('太小了')
} else if (age < 30){
    console.log('可以尝试')
} else {
    console.log('你是个好人')
}

//switch 列举出可能出现的情况，出现之后可以用broke来中止
var num = 111
switch (num) {
    case 0:
    console.log('喝酒')
        break;
    case 1:
    console.log('洗脚')
        break;
    case 2:
    console.log('唱歌')
        break;
    case 3:
    console.log('跳舞')
        break;
    case 4:
    console.log('按摩')
        break;
    default:
        console.log('都没有匹配到，走这里')
}

//for循环,打印0到9的数字
for(var i = 0;i < 10; i+=1){
    console.log(i)
}

// while循环  打印0到9的数字 
var i = 0;
while (i < 10){
    console.log(i)
    i++
}

//三元运算
在python中 
res = 1 if 1 > 2 else 3 结果是3
在js中
var res = 1 > 2 ? 3:4 结果是4
条件成立，取问号后面的值，条件不成立，取冒号后面的值

 

函数

在 python 中用def关键字

在 js 中，用function 来作为关键字

 

// 函数 格式function 函数名（参数1，参数2、、、）{ 需要执行的代码 }
function name (){
    console.log('helloword')
}
name()
//有参函数，多传值，或者少传值，都不会报错
function name2(a,b) {
    console.log(a+b)
}
name2(1,2)

//关键字 argument
function func(a,b) {
    if(arguments.length<2){
        console.log('传少了')
    } else if (arguments.length >2) {
        console.log('传多了')
    }else{
        console.lon('现在是正常执行')
    }
}
func(1)

//返回值  关键字return,返回多个值得时候，js只能取到最后一个
function aa() {
    return 1, 2, 3
}
res = aa()
console.log(res) // 结果是3

//箭头函数 要了解
var func1 = a => a;//箭头左边的是形参，右边的是返回值
//与下面的相同
var func1 = function (a) {return a}

函数的全局变量和局部变量

与python查找的顺序一致，直接参考python

 

自定义对象

有点类似python中的字典，但是操作起来更加方便

对象 {}

定义对象

1. var  obj = {}

2. var obj2 = {'username':'ly'}

 

 

 

 内置对象

Date

使用内置对象的时候，先需要实例化

var d = new Date();

//方法1：不指定参数
var d1 = new Date();
console.log(d1.toLocaleString());
//方法2：参数为日期字符串
var d2 = new Date("2004/3/20 11:12");
console.log(d2.toLocaleString());
var d3 = new Date("04/03/20 11:12");
console.log(d3.toLocaleString());
//方法3：参数为毫秒数
var d3 = new Date(5000);
console.log(d3.toLocaleString());
console.log(d3.toUTCString());

//方法4：参数为年月日小时分钟秒毫秒
var d4 = new Date(2004,2,20,11,12,0,300);
console.log(d4.toLocaleString());  //毫秒并不直接显示

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

JSON对象

序列化     　　JSON.stringify

反序列化　　 JSON.parse

eg:

如果后端返回的是json字符串，要用parse反序列化

如果后端返回的是json对象 ，直接拿来用

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 obj1 = new 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}$/;

// 正则校验数据
reg1.test('jason666')
reg2.test('jason666')

/*第一个注意事项，正则表达式中不能有空格*/ 

// 全局匹配
var s1 = 'egondsb dsb dsb';
s1.match(/s/) 只匹配一个 
s1.match(/s/g) 一直匹配完 g就是global
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g
reg2.test('egondsb');
reg2.test('egondsb');
reg2.lastIndex;
/*第二个注意事项，全局匹配时有一个lastIndex属性*/

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

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

Math对象

abs(x)      返回数的绝对值。
exp(x)      返回 e 的指数。
floor(x)    对数进行下舍入。
log(x)      返回数的自然对数（底为e）。
max(x,y)    返回 x 和 y 中的最高值。
min(x,y)    返回 x 和 y 中的最低值。
pow(x,y)    返回 x 的 y 次幂。
random()    返回 0 ~ 1 之间的随机数。
round(x)    把数四舍五入为最接近的整数。
sin(x)      返回数的正弦。
sqrt(x)     返回数的平方根。
tan(x)      返回角的正切。

Math