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"]