前端——JS基础

JS的简介

歪比歪比，歪比叭卟

/*
JS：JavaScript，与Java没有任何关系，是完全独立的两个东西。
JS可以写后端：node.js
现在JS的主流版本：5.1和6.0
JS的特点：
    JS 是脚本语言
    JS 是一种轻量级的编程语言。
    JS 是可插入 HTML 页面的编程代码。
    JS 插入 HTML 页面后，可由所有的现代浏览器执行。
    JS 很容易学习
    
ECMAScript和JavaScript的关系 （现在统一都叫JS）
因此ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现。
*/

// js的注释
    // 单行注释
    /*多行注释*/

// js的引入方式
/*
	<script>js代码</script>  				script标签内部直接书写js代码
	<script src="外部js文件路径"></script>  script标签src属性引入外部js代码
*/

变量

JS中首次定义变量名时必须要用关键字声明

JS中首次定义变量名时必须要用关键字声明

JS中首次定义变量名时必须要用关键字声明

重要的事情说三遍

// var关键字
var name1 = 'Yumi'

// let关键字 es6推出的新语法(5.1版本的JS无法使用let)
let name2 = 'Yumi'

// var与let的区别：let能够保证在局部定义只在局部生效，var在局部定义会影响到全局
var n=10;
for (var n = 0; n < 5; n++) {
    console.log(n); // 0,1,2,3,4
}
console.log(n); // 5

let n=10;
for (let n = 0; n < 5; n++) {
    console.log(n); // 0,1,2,3,4
}
console.log(n); // 10

常量

/*
python中没有真正意义上的常量，只是约定俗成的将全大写字母作为常量
js中有真正意义上的常量，其特定的关键字是const
const pi = 3.14
*/

数字类型(number)

JS中没有整型跟浮点型的区分都叫数字类型(number类型)

var num1 = 10;
typeof num1; //typeof 变量名：查看变量类型，相当于python中的type()
// 返回number

var num2 = 10.11;
typeof num2;
// 返回number

var num3 = NaN; // NaN 表示不是一个数字(Not A Number),它也是一个数字类型
typeof num3;
> number

// 常用方法
// parseInt()、parseFloat()判断字符串是否是数字，体现了JS是不严谨的语言
parseInt('123') //返回123
parseInt('123.11') //返回123
parseInt('123asfkajs123') //返回123
parseInt('asdasd123asda123') //返回NaN

parseFloat("123.11") //返回123.11
parseFloat("123.11afdafa") //返回123.11
parseFloat('asdasd12.3asda12.3') //返回NaN

字符串(String)

var s = 'jason'
typeof s
"string"
var s1 = "jason"
typeof s1;
"string"
var s3 = `
模板字符串
`
typeof s3
"string"
// 模版字符串除了可以定义多行文本之外还可以实现格式化字符串操作
// 书写${} 会自动去前面找大括号里面的变量名对应的值 如果没有定义直接报错
var name = 'Yumi'
var age = 21
var sss = `
   my name is ${name} and my age is ${age}
`
// my name is jason and my age is 18


/*
字符串拼接：
	python中推荐按用join()，不推荐用+ 且不能够直接拼接数字类型
	JS中推荐直接使用+做拼接，且能够直接拼接数字类型（弱类型）
*/

字符串的常用方法

方法	说明	Python中
.length	返回长度	len()
.trim()	移除空白(无法指定移除元素)	strip()
.trimLeft()	移除左边的空白(无法指定移除元素)	lstrip()
.trimRight()	移除右边的空白(无法指定移除元素)	rstrip()
.charAt(n)	返回第n个字符	索引取值
.concat(value, ...)	拼接(JS是弱类型，内部会自动转换成相同类型后操作)	join()
.indexOf(substring, start)	子序列位置	index()
.substring(from, to)	根据索引获取子序列	[]
.slice(start, end)	切片	[]
.toLowerCase()	小写	lower()
.toUpperCase()	大写	upper()
.split(delimiter, limit)	分割(第二个参数不是限制切割的次数而是切割完后的元素个数)	split()

var name = 'egondsb'
name.length // 7

var name1 = '  egonDSB  '
name1 // "  egonDSB  "
name1.trim() // "egonDSB"
name1.trimLeft() // "egonDSB  "
name1.trimRight() // "  egonDSB"

var name2 = '$$jason$$'
name2.trim('$')  // "$$jason$$" 不能加括号指定去除的内容
name2.charAt(0) // "$"
name2.indexOf('as') // 3
name2.substring(0,5) // "$$jas"
name2.slice(0,5) // "$$jas"
name2.substring(0,-1) // "" 不识别负数
name2.slice(0,-1) // "$$jason$" 后面推荐就使用slice就可以

var name3 = 'eGoNDsb123666HahA'
name3.toLowerCase() // "egondsb123666haha"
name3.toUpperCase() // "EGONDSB123666HAHA"

var name = 'tank|hecha|liaomei|mengsao|...'
name.split('|') // (5) ["tank", "hecha", "liaomei", "mengsao", "..."]
name.split('|',2) // (2) ["tank", "hecha"]
name.split('|',10) // 第二个参数不是限制切割字符的个数还是获取切割之后元素的个数
// (5) ["tank", "hecha", "liaomei", "mengsao", "..."]
name.concat(name1,name2) // "tank|hecha|liaomei|mengsao|...  egonDSB  $$jason$$"
var p = 1111
name.concat(p)// js是弱类型(内部会自动转换成相同的数据类型做操作)
// "tank|hecha|liaomei|mengsao|...1111"


/*
python中使用join拼接字符串
l = [1,2,3,4,5,6,7]
res = '|'.join(l)  # 直接报错
print(res)
*/

布尔值(boolean)

/*
python中：True/False
JS中：true/false

JS中隐式布尔值为False的有：空字符串、0、null、undefined、NaN
*/

null与undefined

/*
null：表示值为空，一般用来指定或者清空一个变量
undefined：表示声明了一个没有给值的变量，那么JS内部就会默认给一个undefined作为该变量的初始值
	函数不指定返回值时，默认也是返回undefined
*/

对象

同python一样，JS也是一门面向对象的编程语言，在JS中一切皆对象

数组（对比python中的列表）

var arr=[11,22,33,44,55]
typeof arr // 返回'object'
arr[1] // 22
arr[-1] // '' JS中不支持负数索引

数组的常用方法：

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

var l = [11,22,33,44,55]
typeof l // "object"
var l1 = [11,'sdasd',11.11,true]
l1[1] // "sdasd"
l1[-1]  // '' 不支持负数索引

var l2 = [111,222,333]
l.length // 6
l.push(777) // (7) [111, 222, 333, 777]
l.pop() // 777 (6) [111, 222, 333] 获取尾部的元素并移除
l.unshift(123) // (7) [123, 111, 222, 333]
l.shift() // 123 (6) [111, 222, 333]
l.slice(0,2) // (3) [111, 222]
l.reverse() // (6) [333, 222, 111]
l.join('$') // "333$222$111" 跟python刚好相反
//print('$'.join(['333', '222', '111'])) 333$222$111
l.concat([444, 555, 666])  // extend (9) [333, 222, 111, 444, 555, 666]
l.sort() // (6) [111, 222, 333]

// 三个比较重要的方法
//forEach()
var ll = [111,222,333]
ll.forEach(function(value,index,arr,xxx){console.log(value,index,arr,xxx)},ll)  
// 元素 元素索引 元素的来源 最多三个参数，超过的部分打印结果为undefined
111 0 (6) [111, 222, 333, 444, 555, 666] undefined
222 1 (6) [111, 222, 333, 444, 555, 666] undefined
333 2 (6) [111, 222, 333, 444, 555, 666] undefined

//splice()
ll // (3) [111, 222, 333]
// 两个参数 第一个是起始位置 第二个是删除的个数
ll.splice(0,1) // [111] (2) [222, 333]
// 三个参数 先删除后添加，第三个参数为添加的值，添加到数组第一个位置
ll.splice(0,1,777) // [222] (2) [777, 333]
ll.splice(0,1,[111,222]) // [777] (2) [Array(2), 333]

//map()
var l1 = [11,22,33]
l1.map(function(value,index,arr){console.log(value,index,arr)},l1)
// 元素 元素索引 元素的来源 最多三个参数，超过的部分打印结果为undefined
11 0 (3) [11, 22, 33]
22 1 (3) [11, 22, 33]
33 2 (3) [11, 22, 33]

l1.map(function(value,index){return value*2},l1)
(3) [22, 44, 66]
l1.map(function(value,index,arr){return value*2},l1)
(6) [22, 44, 66]

// forEach与map的区别：
/*
forEach：不会有返回值，返回结果为undefined
map：会得到一个新数组并返回
*/

运算符

算数运算符

var x=10;
var res1=x++; // 10——>res1=x=10,x=10+1=11（先赋值后自增）
var res2=++x; // 12——>res2=x+1=11+1=12（先自增后赋值）

比较运算符

//进一步实锤了JS的不严谨
1=='1' // true 弱等于  内部自动转换成相同的数据类型比较了
1!='1' // false
1==='1' // false 强等于 内部不做类型转换
1!=='1' // true

逻辑运算符

/*
python中：and or not
JS中：&& || !
*/
5 && '5' // '5'
0 || 1 // 1
!5 && '5' // false
// 一定要注意到底什么时候返回的是布尔值 什么是返回的是数据

//赋值运算(与python相同)

三元运算符

/*
python中：res = 条件成立的返回值 if 条件 else 条件不成立的返回值(res = 1 if 1>0 else 0)
JS中：res = 条件?成立的返回值:不成立的返回值（res = 1>0?1:0）
*/
var res = 2>5?8:10 // 10
// 三元运算符不要写的过于复杂
var res = 2>5?8:(8>5?666:444)  // 666 (不推荐)

流程控制

if判断

//if判断语法
/*
if (条件1) {
	代码1
}else if(条件2) {
	代码2
}else {
	代码3
}
*/
var age = 16;
if (age<12) {
    console.log('JS')
}else if(age<16) {
    console.log('Loli')
}else if(age<18) {
    console.log('JK')
}else {
    console.log('大姐姐')
}

switch语法

var likeType=2;
switch(likeType) {
    case 0:
        console.log('JS');
        break; // 不加break 匹配一个之后会一直往下执行(穿透现象)
    case 1:
        console.log('Loli');
        break;
    case 2:
        console.log('JK');
        break;
    default: //上述条件都不匹配时执行default中的代码
        console.log('大姐姐')
}

循环

// for循环语法
var girlFriends = ['Rem','Megumi','Rushia'];
for(let i=0; i<girlFriends.length; i++) {
    console.log('girlfriend'+i+':'+girlFriends[i])
}

//while循环语法
var i=0
while(i<girlFriends.length) {
    console.log('girlfriend'+i+':'+girlFriends[i])
    i++;
}

函数

/*
python中：用关键字def定义函数
JS中：用关键字function定义函数
*/
// 格式：function 函数名(形参1,形参2...) {函数体代码}

//无参函数
function func1() {
    console.log('这是无参函数')
}
func1()

//有参函数
function func2(a, b) {
    console.log(a,b)
}
func2('这是','有参函数') // 传多了不会报错，只会取对应的数据 '这是 有参函数'
func2('有参函数') // 传少了，JS会自动的把剩下的值用undefined补全 '有参函数 undefined'

//关键字arguments 用来获取函数接收到的所有参数
function func3(a, b) {
    console.log(arguments)
    if (arguments.length<2) {
        console.log('传少了')
    }else if(arguments.length>2) {
        console.log('传多了')
    }else {
        console.log(a,b)
    }
}
func3(11,22,33) // Arguments(3)[11,22,33]

// 函数的返回值
function index() {
    return 200
}
function index2() {
    return [200,302] //返回多个返回值时可以将返回值处理成数组的形式返回
}
res=index() // 200
res2=index2() // [200,302] js中没有解压赋值一说

// 匿名函数(就是没有名字的函数)
function() {
    console.log('匿名函数')
}
// 使用匿名函数
var res = function() {
    console.log('匿名函数')
}

// 箭头函数：主要处理简单的业务逻辑(类似于python中的lambda匿名函数)
/*
语法：var func1 = 形参 => 返回值;
等价于     ||
		  V
var func1 = function(形参) {
	return 返回值
}
*/

//多个形参
语法：var func1 = (arg1,arg2...) => [arg1,arg2];
等价于     ||
		  V
var func1 = function(arg1,arg2) {
	return [arg1,arg2]
}

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

//与python查找变量的顺序是一毛一样的
//即从当前层逐层往外查找
var city = "BeiJing";
function f() {
  var city = "ShangHai";
  function inner(){
    var city = "ShenZhen";
    console.log(city);
  }
  inner();
}
f();  //ShenZhen


var city = "BeiJing";
function Bar() {
  console.log(city);
}
function f() {
  var city = "ShangHai";
  return Bar;
}
var ret = f();
ret();  // BeiJing

// 闭包
var city = "BeiJing";
function f(){
    var city = "ShangHai";
    function inner(){
        console.log(city);
    }
    return inner;
}
var ret = f();
ret(); // ShangHai

自定义对象

// 类似于python中的字典，JD中的自定义对象操作起来更加方便

//创建自定义对象的两种方式
//方式一
var d = {'name':'jason','age':18}
typeof d // object
//取值
d['name'] // "jason"
d.name // "jason"

for(let i in d) {
    console.log(i,d[i])
}

//方式二
var d2 = new Object()
d2.name = 'jason' //{name:'jason'}
d2.age = 18 //{name:'jason',age:18}

Date对象

let d = new Date()
// Fri May 15 2020 14:41:06 GMT+0800 (中国标准时间)

//格式化时间
d.toLocaleString()// "2020/5/15 下午2:41:06"

//手动输入时间
let d = new Date('2020/11/11 11:11:11') //"2200/11/11 11:11:11"
let d = new Date(1111,11,11,11,11,11) //使用此种方式产生的时间其月份是从0开始的即0-11月
d.toLocaleString()
//"1111/12/11 上午11:11:11"

// 时间对象具体方法
let d2 = new Date();
d2.getDate() //获取日期
d2.getDay() //获取星期
d2.getMonth() //获取月份(0-11)
d2.getFullYear() //获取完整的年份
d2.getHours() //获取小时
d2.getMinutes() //获取分秒
d2.getSeconds() //获取秒
d2.getMilliseconds() //获取毫秒
d2.getTime() //获取时间戳

JSON对象

/*
python中：使用序列化与反序列化实现对json数据的处理 dumps序列化、loads反序列化
JS中：使用JSON.stringify()实现序列化、JSON.parse()实现反序列化
*/
let d = {'name':'Yumi','age':21}
let json_d = JSON.stringify(d) // "{"name":"Yumi","age":21}"

JSON.parse(json_d) // {name: "Yumi", age: 21}

RegExp对象

/*
python中：使用正则需要引入re模块
JS中：使用正则需要创建正则对象
*/
//方式一：(比较麻烦)
let reg1 = new RegExp('^[a-zA-Z][a-zA-Z0-9]{5,11}')

//方式二：（推荐）
let reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,11}/

//匹配内容
reg1.text('yumiuimimi')
reg2.text('yumiuimimi')

// 题目 获取字符串里面所有的字母s
let sss = 'egondsb dsb dsb'
//match():使用正则对对应字符串进行查找并将符合条件的结果组成数组返回
sss.match(/s/)  // 拿到一个就停止了
sss.match(/s/g)	// 全局匹配  g就表示全局模式

//JS中写正则时要注意的两个bug
//1、全局模式的bug
let reg3=/^[a-zA-Z][a-zA-Z0-9]{5,11}/g
reg3.test('egondsb')  // 全局模式有一个lastIndex属性
true
reg3.test('egondsb')
false
reg3.test('egondsb')
true
reg3.test('egondsb')
false
/*
lastIndex属性：只有全局模式下才能使用，用来规定下次匹配的起始位置。
当第一次test执行完时匹配位置位于字符串末尾，
所以下次test会从末尾开始匹配，因此上述第二次test的结果为false
此时test会自动的将lastIndex重置为0，然后下一次的test又会从初始位置执行
*/

//2、针对undefined的bug
//前提：由于JS中假如我们不传值那么JS内部就会自动的用undefined来进行填充
let reg4 = /^[a-zA-Z][a-zA-Z0-9]{5,11}/
reg4.test() // 返回true 原因：啥都不传，JS会默认的给你传一个undefined，恰好符合正则条件

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)      返回角的正切。
*/