python-前端JS

JavaScript

JS（JavaScript）和 JAVA是没有任何关系的，使前端语言动作的基础

特点：现在对前端所有的动作操作都是基于JS操作的。是一门逻辑语言

1. 简单易用：可以使用任何文本编辑工具编写，只需要浏览器就可以执行程序。
2. 解释执行（解释语言）：事先不编译、逐行执行、无需进行严格的变量声明。
3. 基于对象：内置大量现成对象，编写少量程序可以完成目标

JS的开发周期为10天。

Node.js就是基于Chrome V8 引擎的 JavaScript 运行环境。

作用：

• 对于前端页面的展示开发
• 语法逻辑不够严谨

Javascript主要组成：

• ECMAscript js的标准语法
• BOM (Browser Object Mode) 浏览器对象模型 JS提供的一种操作浏览器的一种语法
• DOM (Document Object Mode) 文档对象模型

JS的引入

JS的引入有两种方法：

• 文件引入（在另外一个单独的文件中写JS代码，然后在需要的HTML代码中 推荐在head标签中引入JS，或者最后再引入）：

<script src="./demo1.js"></script>

• 直接写在script标签中

<script>console.log('cc')</script>

控制台输出

console.log在控制台输出内容：

console.log('ccc')

alert（弹框函数）直接在页面上弹出：

alert('是否满18岁')

JS的注释

JS注释采用//

//console.log('ccc')

/*
    多行注释1
    多行注释2
*/

CSS注释采用/* */

/* p {
    display: block;
    margin-inline-end: 0px;
} */

HTML注释采用<!-- -->

<!-- <h3 class="title">米兔婴儿理发器 白色</h3> -->

JS基础语法

未返回的值会为undefined

定义变量

变量使用（数字 字母 下划线 \(）组成，不推荐使用\)

数字不能开头

var variableName = variableValue;

// 可以定义一个变量，但是暂时先不给予赋值
var variableName;

基础数据类型

数字类型（number）

在js中 小数 和 整数都是属于number类型

查看类型（typeof 变量名/typeof(变量名)）

a = 1
b = 1.333

typeof(a)
"number"
typeof(b)
"number"
typeof a
"number"

// 小数保留位数
b.toFixed(2);
"1.33"
// 使用了四舍五入的方法

字符串类型（string）

'' 和 "" 表示为字符串的使用方法

字符串的方法：

方法	说明
.length 属性	返回长度
.trim() 得到一个新值	移除两端的空白
.trimLeft()	移除左边的空白
.trimRight()	移除右边的空白
.concat(value,....)	字符串的拼接
.charAt(n) # n类似索引，从0开始，超过最大值返回空字符串	根据索引值返回字符
.indexOf(Substring,start) # 这个start是从索引几开始找，没有返回-1	根据字符串返回该串所在的索引值
.substring(from, to) #不支持负数，所以一般都不用它，了解一下就行了	根据索引获取子序列
.slice(start,end) #var s1='helloworld';s1.slice(0,-5)看结果，就用它	字符串的切片
.toLowerCase() # 全部变小写	小写
.toUpperCase() # 全部变大写	大写
.split(delimiter, limit) # 分隔,,s1.splite(' '),后面还可以加参数s1.split(' '，2),返回切割后的元素个数	切割

var variable = 'wsygzfc    ';
//length属性
variable.length;
11
//.trim方法
variable.trim();
"wsygzfc"

//.trimLeft方法
variable.trimLeft();
"wsygzfc    "

//.trimRight方法
variable.trimRight();
"wsygzfc"

//.concat方法
variable.concat('woaini')
"wsygzfc    woaini"

//.charAt方法
variable.charAt(3);
"g"
variable.charAt(4);
"z"

//.indexOf方法
variable.indexOf('s');
1

//.slice方法  顾头不顾尾
variable.slice(1,4);
"syg"

//.toLowerCase()
variable.toLowerCase();
"wsygzfc    "

//.toUpperCase()
variable.toUpperCase();
"WSYGZFC    "

//.split()
variable.split('g',2)
(2) ["wsy", "zfc    "]

布尔值 Boolean

布尔值只有两个值true和false

var boo = true
typeof(boo)
"boolean"

// 数值强转布尔值
var a = 1
Boolean(a)
true
Boolean(0)
false
Boolean(1)
true
Boolean(undefined)
false

false的值：

• 0
• uniefined
• ''
• null
• NaN

true的值：

• []

数组对象 Array

数组的创建

var array = [1,3,'a','4']

数组的赋值

array[2] = 6
array
(4) [1, 3, 6, "4"]

// 不存在的索引值进行数据插入
array[5] = 7
array
(6) [1, 3, 6, "4", empty, 7]

数组的常用方法

方法	说明
.length	数组的元素数量
.push()	尾部追加元素
.pop()	删除尾部元素，并且可以赋值给另外一个变量
.unshift()	头部插入元素
.shift()	头部删除元素
.slice()	切片
.reverse()	反转
.join()	数组元素拼接成字符串
.concat()	连接数组
.sort()	排序
.forEach()	将数组的每个元素传递给回调函数
.splice()	删除元素，并向数组添加新元素
.map()	返回一个数组元素调用函数处理后的值的新数组

var lit  = [2,3,4,5,6,7,'jjk'];
// .length
lit.length;
7

// .push()
lit.push('dd');
lit
(8) [2, 3, 4, 5, 6, 7, "jjk", "dd"]

// .pop()
lit.pop();
"dd"
lit
(7) [2, 3, 4, 5, 6, 7, "jjk"]

// .unshift()
lit.unshift('999');
lit
(8) ["999", 2, 3, 4, 5, 6, 7, "jjk"]

// .shift()
lit.shift();
"999"
lit
(7) [2, 3, 4, 5, 6, 7, "jjk"]

// .slice()
lit.slice(2,4);
(2) [4, 5]

// .reverse()
lit.reverse();
(7) ["jjk", 7, 6, 5, 4, 3, 2]

// .join()
lit.join('+');
"jjk+7+6+5+4+3+2"

// .concat()
// 可以组合  一个列表，多个列表，多个元素或一个元素
var d = ['d',3,4,5,6,7]
(6) ["d", 3, 4, 5, 6, 7]
lit.concat(d);
(13) ["jjk", 7, 6, 5, 4, 3, 2, "d", 3, 4, 5, 6, 7]

// .sort()
// 排序方式是使用了ASCII码表的顺序进行排序
lit.sort();
(8) [2, 22, 3, 4, 5, 6, 7, "jjk"]

// .forEach()
var arr = ['alex','wusir']
arr.forEach(fn)
function fn(item,index){
    console.log(index,item)
}

// .splice()
// 意思：从第二个元素开始，删除一个元素，并在删除的位置添加一个新的字符串'ddee'
lit.splice(2,1,'ddee');
lit
(8) [2, 22, "ddee", 4, 5, 6, 7, "jjk"]

// .map()
var arr = ['alex','wusir']
var ret = arr.map(fn)
function fn(name,index) {
    console.log(index,name)
    return name+'sb'
}
console.log(ret)

对象

对象和PYTHON的字典一样

使用方法：

// var obj.属性名 = 属性值
var obj = {}
var obj.name = 'mhy'
obj.name

JSON对象

// 对象转换为JSON字符串
var obj = {name: "mhy"}
var j = JSON.stringify(obj);
"{"name":"mhy"}"

// JSON字符串转换为对象
var o = JSON.parse(j)
o.name
"mhy"

日期对象 Date

**定义：**创建日期对象只有构造函数一种方法，使用new关键字创建一个日期对象

// 构建一个时间date对象
var dat = new Date();

// 查看dat对象
dat;
Mon Oct 21 2019 18:06:25 GMT+0800 (中国标准时间)

// 创建一个自定义时间的对象
var dat = new Date(2019,10,17,15,33);
dat
Sun Nov 17 2019 15:33:00 GMT+0800 (中国标准时间)

// 看着比较舒服的格式
dat.toLocaleString();
"2019/11/17 下午3:33:00"

语法	方法
getDate()	根据本地时间返回指定的日期对象的月份中的第几天（1-31）
Date()	根据本地时间返回当天的日期与时间
getMonth()	根据本地时间返回指定日期对象的月份(1-12)
getFullYear()	根据本地时间返回指定日期对象的年份
getDay()	根据本地时间返回指定日期对象的星期中的第几天(0-6) 周日是第0天
getHours()	根据本地时间返回指定日期对象的小时（0-23）
getMinutes()	根据本地时间返回指定日期对象的分钟（0-59）
getSeconds()	根据本地时间返回指定日期对象的秒数（0-59）

// getDate()
dat.getDate()
21

// Date()
Date();
"Mon Oct 21 2019 18:15:48 GMT+0800 (中国标准时间)"

// getMonth()
dat.getMonth();
9

// getFullYear()
dat.getFullYear();
2019

// getDay()
dat.getDay();
1

// getHours()
dat.getHours();
18

// getMinutes()
dat.getMinutes();
6

// getSeconds()
dat.getSeconds();
25

注意：以上getxxx的方法都是对时间的获取，如果要设置时间，使用setxxx,请参考链接：http://www.runoob.com/jsref/jsref-obj-date.html

正则对象（Regexp对象）

定义：

var re = new RegExp();
var re = /\w/;

测试：

var re = new RegExp('^D');

// 括号里为待匹配的字符串
re.test('Oddddd');
false
re.test('Dddddd');
true

// RegExp很奇怪的现象
var re = new RegExp('\d');
re.test('9999');
false

// 默认在RegExp里出现的\会被转义 所以需要\\
var re = new RegExp('\\d');
re.test('9999');
true

// 另外一种创建正则表达式的方法（推荐）：
// 使用/\d/ 里边写正则，表示//里面的全是属于正则表达式的语法
// 这里的规律都是默认只匹配一次 所以一直是匹配到1
var re = /\d/;
re.test('123');
true

// g 匹配多次
// 现象奇特；每次匹配一次，第一次1，第二次2，第三次3 然后第四次匹配为空后，下次的匹配会重新开始.....  依次类推
var re = /\d/g;

re.test(123);
true
re.test(123);
true
re.test(123);
true
re.test(123);
false

// i 不区分大小写
var re = /a/gi;
re.test('Abc');
true
re.test('abc');
true

// 手机号例子
var re = /^1[3-9]\d{9}$/
re.test('17600435938');
true
re.test('176004359384');
false
re.test('1760043599');
false

search：

var str = 'dbasbdjasdb327897239472dnakjdnskandk317894719';
// search方法只会匹配到从左到右的第一个符合条件的位置的字符串的索引值
str.search(/\d+/);
11

match：

var str = 'dbasbdjasdb327897239472dnakjdnskandk317894719';
// match方法不加g参数时，只将第一个匹配到的条件 生成一个数组
// 如果加g参数 则返回一个符合字符串中条件的所有内容 生成一个数组
str.match(/\d+/);
["327897239472", index: 11, input: "dbasbdjasdb327897239472dnakjdnskandk317894719", groups: undefined]

str.match(/\d+/g);
(2) ["327897239472", "317894719"]

str.match(/\w+/gi);
["dbasbdjasdb327897239472dnakjdnskandk317894719"]

str.match(/[a-z]+/gi);
(2) ["dbasbdjasdb", "dnakjdnskandk"]

replace:

// 将匹配到的字符串替换为c
str.replace(/[a-z]+/gi,'c')
"c327897239472c317894719"

Math（数学计算相关）

方法	含义
Math.floor()	向下取整，称为’地板函数‘
Math.ceil()	向上取整，称为'地板函数'
Math.max(a,b)	求a和b中的最大值
Math.min(a,b)	求a和c中的最小值
Math.random()	随机数，默认0-1之间的随机数
Math.abs(x)	返回数的绝对值。
pow(x,y)	返回 x 的 y 次幂。
round(x)	把数四舍五入为最接近的整数。
sqrt(x)	返回数的平方根。
exp(x)	返回 e 的指数。
log(x)	返回数的自然对数（底为e）。
sin(x)	返回数的正弦。
tan(x)	返回角的正切。

var a = 1.333

// Math.ceil()
Math.ceil(a);
2

// Math.floor()
Math.floor(a);
1

// Math.max()
Math.max(1,2);
2

// Math.min()
Math.min(1,2);
1

// Math.random()
Math.random();
0.6281026603658595

// 100-200之间随机数公式
100+Math.random()*(200-100)

100+Math.random()*(200-100)
140.14705253345093
100+Math.random()*(200-100)
135.69849023240343
100+Math.random()*(200-100)
158.34602992211873

数据类型之间的转换

数字转换：

var s = '1.2345'

// 转换整数（四舍五入）
parseInt(s)
1

// 转换为小数
parseFloat(s)
1.2345

// js数据类型的坑
1.271+'abc'
"1.271abc"

// 字符串相减得出的值2
'4' - '2'
2

// 结果的意思为  (Not a Number)不是一个数字
'4' - '2anc'
NaN
// 但是是一个number数字类型
typeof(NaN)
"number"

// 取整后 字符串居然也能操作 神奇
parseInt('1.12312dnajdkasda')
1

转换为字符串：

var s = 123
123

// 转换为字符串
s.toString();
"123"

// 不能直接用值来转换，他不知道这是一个变量还是什么
123.toString();
VM6571:1 Uncaught SyntaxError: Invalid or unexpected token

转换为布尔值

// 强转（Boolean()：任何数据类型都可以转成布尔值）

var b1 = '123';  // true
var b3 = -123;  // true
var b4 = Infinity; //表示正无穷大 true

var b2 = 0;       // false
var b5 = NaN;     //false
var b6;              //表示undefined //false
var b7 = null;    //false

运算符

赋值运算符

比较运算符

算术运算符

注意的一个点 ++ --

var a = 1
var b = a++
// a先赋值给b  b=1 然后a再自加1 a=2
// a先赋值给b,然后再自加1
a = 2 b = 1

var a =1
var b = ++a
// a先自加一 1+1=2 a=2 然后再赋值给b  b=2
// a先自加,然后再赋值给b
a = 2  b = 2

// --也是一样的道理

逻辑运算符

&& 与 || 或 !非

1>0 && 2<3
true

1>0 && 4<3
false

1>0 || 4<3
true

1 != 1
false

流程控制语句

if...else...语句

var score = 50

if ( score >= 90 ){
    console.log(
        '成绩nice'
    )
}else if ( score >= 80 ){
    console.log(
        '成绩良好'
    )
}else if ( score >= 60 ){
    console.log(
        '成绩一般'
    )
}else {
    console.log('成绩不合格')
}

swith case语句

var gameScore = 'better'

switch (gameScore){
// case表示一个条件，满足这个条件就会走进来，遇到break跳出。如果某个条件不写break，那么直到该程序遇到下一个break停止
    case 'good':
        console.log('good')
        break;
    case 'better':
        console.log('better')
        break;
    case 'best':
        console.log('best')
        break;

    default:
        console.log('sorry')
}

while 语句

var score = 70

while (score > 0) {
    console.log(score)
    score -= 1
}

do while语句

do {
    console.log(score)
    score -= 1
}while (score > 70)

for循环语句

// 数字循环  i++ i先使用后加1
for (i=1;i<=10;i++){
    console.log(i)
}

// 该方法中n是arry列表索引值
var arry = ['a','b','c','d']
for ( n in arry ){
    console.log(n)
    console.log(arry[n])
}

// 数字循环  遍历数字的方法
var arry = ['a','b','c','d']
for (i=0;i<=arry.length;i++){
    console.log(arry[i])
}

三元运算符

a = 0
b = 1
// ？代表是否
// a 是否大于 b  大于（条件成立）返回a  否则 返回b
var c = a>b ? a:b
console.log(c)

var score = 70;
var res = score > 60 ? '及格':'不及格'
console.log(res)

函数

语法格式：

function 函数名(){
    函数体
}

// 函数调用
函数名()

示例

function f(){
    console.log('wahahha')
}

f()

注意：实际参数和形式参数的个数，要相同。

注意：函数只能返回一个值，如果要返回多个值，只能将其放在数组或对象中返回。

function n(a,b){
    console.log('wa',a,b)
    var c = a + b
    return c
}

// 1. 函数只能有一个返回值
// 2. 函数的参数和接收与否没有直接关系
var ret = n(1,2,3,4,5,6)
console.log(ret)

arguments 伪数组

function f2(){
    console.log(arguments)
    console.log('start')
}

f2(1,2,3,4,5,6,7,8)

// 遍历伪数组取值
function f2(){
    // console.log(arguments)
    for (i=0;i<=arguments.length;i++){
        console.log(arguments[i])
    }
    console.log('start')
}

f2(1,2,3,4,5,6,7,8)

// 求和计算机
function sum(){
    // console.log(arguments)
    var s_value = 0
    for (i=0;i<=arguments.length-1;i++){
        s_value += arguments[i]
    }
    return s_value
}

var ret = sum(1,2,3,4,5,6,7,8)
console.log(ret)

forEach

操作数组里每一个值

// forEach 接函数 会将数组里的每一个值传递给函数 进行打印处理
var arry = ['a','b',1,2,3]
arry.forEach(func)
function func(n){
    console.log(n)
}

map

和forEach方法基本一样 唯一不一样的地方是，可以return值 + 字符串

而且map地方可以接受 返回的是一个数组

// arry每一个元素调用func函数  返回的是一个新的数组

var arry = ['a', 'b', 1, 2, 3]
var ret = arry.map(func)
function func(n) {
    console.log(n)
    return n+'xxx'
}

console.log(ret)

补充

不使用var定义变量 定义出来的变量是一个 全局变量 全局变量尽量少定义

var 定义变量

定义出来的是一个局部变量