JS基础

变量

【1】JS变量的命名规范

• 变量名只能是由 数字 字母 下划线 $ 组成的
• 推荐使用 驼峰式命名 如 userName首字母不推荐大写（python推荐使用下划线连接）
• 不能用关键字作为变量名

【2】var let const的区别

• var时一个全局的变量声名关键字，在函数内可以直接对他修改
• let是一个块级变量声名关键字，在函数内无法进行引用修改
• const用于声名一个常量，不可以对其进行再次赋值，它和let关键字一样，是一个块级变量的声名关键字。

数据类型

• JS是个动态数据类型语言，变量名可以指向任意的数据类型

【1】数值类型（number）

var a = 11

-- 查看数据类型
typeof a

-- 数据类型转换 -- 只要开头由数字就行
parseInt('11.11') -- 11 
parseInt('111asdasdsadsa112') -- 111
parseInt('asdasdsadsa111') -- NaN

【2】字符类型（string）

• 定义字符串使用单引号或者双引号
• 在定义多行字符串使不能使用三引号，但是可以通过``来定义
• 在js中称之为模板字符串
• 通过${变量名}可以实现格式化字符串操作
• 如果大括号里面的变量名没有事先定义好就会直接报错
• 在js中字符串拼接推荐直接使用+相连接

-- 定义
-- 单引号
var a = 'green'

-- 双引号
var a = "green"

-- 模板字符串
var a = `
green
hqq
heihiehei
`
-- 格式化字符串
var name = 'green'
var age = 18
var info = `my name is ${name} and my age is ${age}`

-- 字符串拼接
console.log(name+info)

• 常用方法

-- 获取长度 length()
var name = 'hqq'
name.length

-- 移除空白 trim()
var name = '  hqq  '.trim()

-- 返回字符串对应索引的值 charAt()
var name = 'hello word'
name.charAt(3) -- l

-- 返回指定字符串首字符在指定字符串的索引的位置 indexOf()
-- 不存在则返回-1
var name = 'hello green'
name.indexOf('llo')

-- 切片操作 slice()
var name = 'hello green'
console.log(name.slice(0,2))

-- 转小写 toLowerCase()
var name = 'hello green'
console.log(name.toLowerCase())

-- 转大写 toUpperCase()
var name = 'hello green'
console.log(name.toUpperCase())

-- 分割 split()
var name = 'hello green'
console.log(name.split(' ')) // [ 'hello', 'green' ]

-- 拼接 concat()
var name = 'hello green'
var res = name.concat('hello') // hello greenhello

总结

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

【3】布尔值（boolean）

• 在js中布尔值是全小写的 true false，与python不一样

• 在js中布尔值为false的有 空字符串,0,null,NaN,undefined 等等

• null与 undefined的区别

-- null
表示值为空，一般用于指定或者清空一个变量使用

-- undefined
表示声名了一个变量，但是没有初始化（没有赋值）

【4】对象（object）

• 在js中一切皆对象
• 如 字符串 数值 数组 函数 等
• js还允许自定义对象

-- 数组(类似于python中的列表)
-- js中数组的索引不支持负数
var l = [11,'green',true,3.14]
console.log(typeof l) // object
console.log(l[1]) // green
console.log(l[-1]) // undefined

• 常用方法

-- 获取长度 length()
var l = [11,11.1,'green',true]
l.length

-- 尾部追加元素 push(ele)
var l = [11,11.1,'green',true]
l.push(false)

-- 弹出尾部的元素 pop()
var l = [11,11.1,'green',true]
var res = l.pop()
console.log(res) // true
console.log(l) // [ 11, 11.1, 'green' ]

--  unshift() 向数组的开头添加一个或者多个元素，并且返回数组长度
var l = [11,11.1,'green',true]
l.unshift(false)
console.log(l) // [ false, 11, 11.1, 'green', true ]

-- 头部移除元素 shift()
var l = [11,11.1,'green',true]
l.shift()
console.log(l) // [ 11.1, 'green', true ]

-- 切片操作 slice(start,end) 顾头不顾尾
var l = [11,11.1,'green',true]
var res = l.slice(1,3)
console.log(res) // [ 11.1, 'green' ]

-- 反转操作 reverse()
var l1 = [12, 21, 32, 11, 28, 17]
res = l1.reverse()
console.log(l1) // [ 17, 28, 11, 32, 21, 12 ]

-- 将数组元素和字符串拼接成字符串 join()
-- js的join和python的join有些不同 python列表是作为参数传递给join方法
var l = [11,11.1,'green',true]
var res = l.join('|')
console.log(res) // 11|11.1|green|true

-- 连接数组 concat(val,...)
var l1 = [1, 2, 3, 4]
var l2 = [5, 6, 7, 8]
var res = l1.concat(l2)
console.log(res) // [1, 2, 3, 4,5, 6, 7, 8]

-- 排序 sort()
var l1 = [12, 21, 32, 11, 28, 17]
l1.sort()
console.log(l1) // [ 11, 12, 17, 21, 28, 32 ]

• 重点掌握的方法

-- forEach() 将数组的每个元素传递给回调函数
-- forEach 有两个参数，第一个填函数，第二个填数组，其中函数参数可以有三个 但是只有value是必须的
-- 这个方法会遍历数组中的所有元素然后回传给函数
-- value 是回传函数的结果 index是传来的参数在原数组的索引，array是传来的参数的数据源

var l1 = [111,222,333,444,555,666]
l1.forEach(function (value,index,array){console.log(value,index,array)},l1)
`
111 0 [ 111, 222, 333, 444, 555, 666 ]
222 1 [ 111, 222, 333, 444, 555, 666 ]
333 2 [ 111, 222, 333, 444, 555, 666 ]
444 3 [ 111, 222, 333, 444, 555, 666 ]
555 4 [ 111, 222, 333, 444, 555, 666 ]
666 5 [ 111, 222, 333, 444, 555, 666 ]
`

-- spilce(start,deleteCount,items) 删除元素，并向数组添加新的元素
-- spilce有三个参数，其中items是可填可不填的
-- start 和 deleteCount 组合起来用，意思是从索引为start的位置开始，删除deleteCount个元素，然后在数组的start位置添加items元素。

var l1 = [111,222,333,444,555,666]
l1.splice(0,3,777)
console.log(l1) // [ 777, 444, 555, 666 ]

-- map(function(value,index,array){...},数组)
-- js的map和python的map差不多

var l1 = [111, 222, 333, 444, 555, 666]
var res = l1.map(function (value) {
    return value*2
}, l1)
console.log(res) //  [ 222, 444, 666, 888, 1110, 1332 ]                      

-- reduce

总结

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

运算符

【1】算术运算符

• 加法运算符 +： 用于相加两个数或连接两个字符串。

var sum  = 3 + 5
var t = 'hello' + 'word'
console.log(sum) // 8
console.log(t) // helloword

• 减法运算符 -： 用于相减两个数。

var num = 5 - 3
console.log(num) // 2

• 乘法运算符 *： 用于相乘两个数。

var num = 5 * 3
console.log(num) // 15

• 除法运算符 /： 用于相除两个数。

var num = 6 / 3
console.log(num) // 2

• 取余运算符 %： 返回两个数相除的余数。

var num = 6 % 4
console.log(num) // 2

【2】比较运算符

• 相等运算符 == 和不相等运算符 !=： 比较两个值是否相等或不相等。

var isTrue = (5 == '5')
var isFalse = (5 != '5')
console.log(isTrue) // true
console.log(isFalse) // false

• 严格相等运算符 === 和严格不相等运算符 !==： 比较两个值的值和类型是否完全相等或不相等。

var isTrue = (5 === '5')
var isFalse = (5 !== '5')
console.log(isTrue) // false
console.log(isFalse) // true

• 大于 >、小于 <、大于等于 >=、小于等于 <=： 用于比较两个值的大小。

var greaterThan = (8 > 5);   // true
var lessThan = (3 < 5);      // true
var greaterThanOrEqual = (10 >= 10);  // true
var lessThanOrEqual = (7 <= 6);       // false

【3】逻辑运算符

• 逻辑与 &&： 当且仅当两个操作数都为真时返回真。

var res = true && false
console.log(res) // false

• 逻辑或 ||： 当至少一个操作数为真时返回真。

var res = true || false
console.log(res) // true

• 逻辑非 !： 返回操作数的逻辑反值。

var res = !true
console.log(res) // false

【4】其他运算符

• 赋值运算符 =： 用于将右侧的值赋给左侧的变量。

var x = 10

• 三元条件运算符 condition ? expr1 : expr2： 简单的条件语句，如果条件为真，则返回 expr1，否则返回 expr2。

var res = (1 > 2) ? 'yes' : 'no'
console.log(res) // no

流程控制

【1】if-else

• 由if(条件){操作语句}else{操作语句}组成
• 如果if里面的条件成立，就会执行紧跟后面的操作语句
• 如果不成立就会执行else后面的操作语句

var a = 17
if (a>=18){
    console.log('恭喜你成年了')
}else {
    console.log('小屁孩，好好读书')
}
`小屁孩，好好读书`

【2】if-else if-else

var grade = 40

if (grade >= 90) {
    console.log('你的成绩很优秀')
} else if (60<=grade && grade<90 ){
    console.log('小伙子一般般啊')
}else {
    console.log('让你好好读书，偏偏要放牛')
}

【3】swith

• swith就是提前列举好可能出现的条件，并且在后面跟上响应的操作语句
• 注意在每个操作语句的最后要加上break，要不然在匹配到第一个符合的条件之后就会一直往下执行。

var age = 11

switch (age){
    case 17:
        console.log('还没成年哦小弟弟')
        break
    case 18:
        console.log('刚刚成年哦，注意一下')
        break
    case 21:
        console.log('老司机哦，888套票安排')
        break
    default:
        console.log('未知未知')
}

【4】for循环

• for后面的小括号要跟三个参数
• 初始化表达式：这个表达式在循环开始之前执行，通常用来初始化计数器变量
• 条件表达式：这个表达式在每次循环迭代之前都会进行判断，为true就执行，为false就终止循环
• 增量表达式：这个表达式在每次循环迭代之后执行，通常用于更新计数器变量的值

for(let i=0;i<5;i++){
    console.log(i)
}

【5】while循环

var i = 0
while (i<=100){
    console.log(i,'sb')
    i++
}

【6】三元运算符

var a = 1>2?1:3
console.log(a)

函数

• 在python中定义函数需要用到关键字def

• 在js中定义函数需要用到关键字function

• 格式：function 函数名(形参1，形参2，形参3...)

【1】无参函数

function a (){
    console.log('hello world')
}
a()

【2】有参函数

• 在js中，不管多传了参数还是少传了参数，都不会报错
• 如果多传了参数，那么函数只会接收前面的指定个参数
• 如果传少了，只会输出传了的那个参数，其他没有传的用undefined表示

function func(a,b){
    console.log(a,b)
}
func(1,2)

-- arguments可以获取到传入的参数
function func(a,b){
    console.log(arguments) // [Arguments] { '0': 1, '1': 2 }
    console.log(a,b) // 1 2
}

func(1,2)

-- 可以利用arguments的长度做一个判断
function func(a,b){
    if (arguments.length<2){
        console.log('传少了')
    }else if (arguments.length>2){
        console.log('传多了')
    }else {
        console.log('正常执行')
        console.log(a,b)
    }
}

func(1,2)

【3】函数的返回值

• 如果函数返回了多个返回值，用一个变量接收的话只能拿到一个返回值
• js中没有解压赋值一说，但是可以通过用一个数组接收，在通过索引取值的方式，用多个变量接收。
• return除了用来返回值之外，还可以用来提前结束函数的执行流程

function func() {
    return [111, 333]
}

var res = func()
var a = res[0]
var b =res[1]

console.log(a) // 111
console.log(b) // 333

【4】匿名函数（函数表达式）

• js中的匿名函数就是没有名字的函数，用的很少
• 语法就是用一个变量接收函数，注意function关键字后面不要加函数名，因为这是匿名函数

var res = function (){
    console.log('1111')
}
res()

【5】arguments对象

• js中的arguments对象是一个特殊的对象，实际上是当前函数的一个内置属性
• arguments对象会接收所有实参
• length属性可以获取参数的个数

// 判断参数个数是否正确

function index(a,b,c){
    if (arguments.length>3){
        console.log('参数传多了')
    }else if(arguments.length<3){
        console.log('参数传少了')
    }else {
        console.log(a,b,c)
    }

}

index(3,2,3)

【5】箭头函数

• 语法：var func = v => v

  等价于

  var func = function(v){

  ​ return v

  }

• 把=>想象成一个箭头，箭头左边的是形参，右边的是返回值

• 箭头函数也可以加多个形参

• 箭头函数主要用于简单的业务逻辑，类似于python中的匿名函数

【6】函数的全局变量和局部变量

• 在JavaScript中，变量的作用域分为全局作用域和局部作用域。全局作用域中声明的变量在整个脚本中都可见，而局部作用域中声明的变量只在其所在的函数内部可见。
• 全局变量是在任何函数外部声明的变量，它可以被整个脚本中的任何地方访问。

var globalVar = 10;

function someFunction() {
    console.log(globalVar); // 可以在函数内部访问全局变量
}

console.log(globalVar); // 在函数外部也可以访问全局变量

• 局部变量是在函数内部声明的变量，它只能在声明它的函数内部访问。

function someFunction() {
    var localVar = 20;
    console.log(localVar); // 可以在函数内部访问局部变量
}

// console.log(localVar); // 试图在函数外部访问局部变量会导致错误

【7】作用域

• js的作用域查找顺序和python一样

• 都是局部>全局>内置

• 一下有几个例子

var city = "BeiJing";
function f() {
  var city = "ShangHai";
  function inner(){
    var city = "ShenZhen";
    console.log(city);
  }
  inner();
}

f();  //输出结果是？

var city = "BeiJing";
function Bar() {
  console.log(city);
}
function f() {
  var city = "ShangHai";
  return Bar;
}
var ret = f();
ret();  // 打印结果是？

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

内置对象和方法

• 在js中一切皆对象，对象是拥有属性和方法的数据

【1】自定义对象

• js的对象(object)本质上就是键值对的集合，但是只能用字符串作为键
• 因为是对象，所以取值只需要对象.属性就行
• 也可以向python一样使用[]的格式取值，注意js里面没有get方法

var obj = {'name': 'green', 'age': 21}
console.log(typeof obj) // object
console.log(obj.name) // green

-- 遍历对象中的内容
var obj = {'name': 'green', 'age': 21}
for (var i in obj){
    console.log(obj[i])
}

【2】创建对象

• 直接使用{}来创建一个空对象，在初始化对象时也可以直接指定里面的键值对

var info = {'name':'hqq','age':18}

• 通过构造函数new创建对象

-- 创建对象
var person = new Object()
person.name = 'hqq'
person.age = '21'
console.log(person) // { name: 'hqq', age: '21' }

-- 在构造函数内部 this指向即将创建的新对象
function Person(name, age) {
    this.name = name
    this.age = age
}

var person = new Person(name = 'hqq', age = 18)
console.log(person) // Person { name: 'hqq', age: 18 }

【3】属性访问

• 直接使用对象加.访问属性

function Person(name, age) {
    this.name = name
    this.age = age
    this.info = function () {
        console.log(`my name is ${this.name}，my age is ${this.age}`)
    }
}
var person = new Person(name = 'hqq', age = 18)
person.info()

【4】索引式访问

• 就像python的字典一样，通过在对象后面加上[]，在里面写上键从而访问值

function Person(name, age) {
    this.name = name
    this.age = age
    this.info = function () {
        console.log(`my name is ${this.name}，my age is ${this.age}`)
    }
}
var person = new Person(name = 'hqq', age = 18)
console.log(person['name']);

【5】for in 遍历数组

function Person(name, age) {
    this.name = name
    this.age = age
    this.info = function () {
        console.log(`my name is ${this.name}，my age is ${this.age}`)
    }
}
var person = new Person(name = 'hqq', age = 18)

for(let key in person){
    console.log(person[key])
}

日期对象Date

• JavaScript中的日期对象（Date object）用于处理日期和时间。
• 它提供了处理日期、时间和相关操作的方法。

【1】创建日期对象

-- 创建当前日期和时间
var date = new Date() // 2024-02-21T09:13:58.447Z

-- 指定字符串日期参数
var date = new Date('2002/7/23 6:16')
var data1 = new Date(2002,7,23,10,2)

-- 转时间格式
data.toLocaleString() // 2002/7/23 18:18:00
data.toLocaleTimeString() // 18:18:00
data.toLocaleDateString() // 2002/7/23

• Date对象的方法

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

• 小练习 将当前日期按“2017-12-27 11:11 星期三”格式输出。

function showTime() {
    var date = new Date()
    var dic = {
        '1': '星期一',
        '2': '星期二',
        '3': '星期三',
        '4': '星期四',
        '5': '星期五',
        '6': '星期六',
        '7': '星期天',
    }
    var year = date.getFullYear()
    var month = date.getMonth()
    var dat = date.getDate()
    var week = dic[date.getDay()]
    var hours = date.getHours()
    var min = date.getMinutes()
    console.log(year + '-' + (month + 1) + '-' + dat + ' ' + hours + ':' + min + ' ' + week)
}

JSON对象

• 在python中有序列化和反序列化
• 在js中也有序列化和反序列化

-- 序列化stringify
var obj = {'name': 'hqq', 'age': 18}
var res1 = JSON.stringify(obj)
console.log(res1) // {"name":"hqq","age":18}

-- 反序列化parse
var res2 = JSON.parse(res1)
console.log(res2) // { name: 'hqq', age: 18 }

RegExp对象

• 正则表达式（Regular Expression）是一种用来匹配、查找和操作字符串的工具。
• 在Python中如果需要使用正则 需要借助于re模块
• 在JavaScript中，我们可以使用RegExp对象来创建和操作正则表达式。

【1】方式一

let reg = new RegExp('正则表达式')

【2】方式二

let reg2 = /正则表达式/

【3】正则方法介绍

test()

• 测试字符串是否匹配正则表达式，返回布尔值

let res = reg1.test('正则表达式')
console.log(res) // true

exec()

• 在字符串中搜索匹配正则表达式的内容，并且返回结果数组
• 如果没有匹配的内容则返回null

var str = "Hello world!";
var regex = /Hello (\w+)/;

var result = regex.exec(str);
console.log(result);
// ["Hello world", "world"]