1.JS简介
1.全称JavaScript,但是与Java一点关系都没有,这么叫是因为蹭热度。
2.是一门前端工程师的编程语言,但是它本身有很多逻辑错误。
2.JS基础
1.注释语法:
// 单行注释
/*多行注释*/
2.引入JS的多种方式:
2.1head内script标签内编写。
2.2head内src标签守护星引入外部JS资源。
2.3body内最底部通过script标签src属性引入外部JS资源(最常用)。
/*
页面的加载顺序是从上往下的,所以要等页面加载完成之后再加载JS代码。
*/
3.变量与常量
/*
1.pycharm创建js文件,或者html文件(适合较为复杂的js代码)
2.浏览器编写(console窗口)
*/
1.在js中声明变量需要使用关键字:
1.var: var name = 'max'
2.let: let age = 18
/*let可以在局顶定义变量.不影响全局*/
2.在js中声明常量需使用关键字:
const pi = 3.14 /*再改pi会直接报错*/
4.基本数据类型
"""
在JS中如何查看数据类型?用关键字typeof
"""
1.数值类型(Number):在js中整形浮点型不分家,都叫number。
/*NaN全称是Not a Number,是指转整数或小数是输入的字符不是数字*/
typeof(123) // 'number'
typeof(12.1) //'number'
typeof('123') //'string'
2.字符类型(String):定义字符类型时可以使用以下几种方式:
2.1'' 'max' typeof('max') //'string'
2.2"" "max" typeof("max") //'string'
2.3``(模板字符串,还支持用作格式化输出) `max`
typeof(`max`) //'string'
let s1 = 'jason'
typeof s1 //'string'
格式化输出:
let name = 'max'
let age = 25
`名字${name},年龄${age}` //'名字max,年龄25'
字符串拼接:用+连接字符类型:
let name = 'max'
username + 'qwe'
// 'maxqwe'
3.布尔类型(类似布尔值):boolean
/*
python中布尔值首字母大写,而JavaScript布尔类型全部小写
*/
布尔值为false的数据类型:0、null、undefined、NaN、""(空字符串)、''
、``
4.null和undefind:
null表示值是空,一般在需要指定或清空一个变量时才会使用,如 name=null;
undefined表示当声明一个变量但未初始化时,该变量的默认值是undefined。还有就是函数无明确的返回值时,返回的也是undefined。
let d1
d1 // undefined
let name = null
name // null
5.对象(object):
JavaScript中所有的事物都是对象,字符类型、数值、数组、函数等都是。此外,JavaScript 允许自定义对象。JavaScript 提供多个内建对象,比如 String、Date、Array 等等。
对象只是带有属性和方法的特殊数据类型。
5.1对象之数组(Array)>>>:类似于python中的列表,使用单独的变量名来存储一系列的值。打印数字会发现数组前面会跟一个数组长度的数字。
let a = [1,2,'max']
console.log(a) // (3) [1, 2, 'max']
1.索引取值:
let a = [1,2,'max']
console.log(a[1]) //2
2.数组的长度:
a.length // 3
3.尾部追加元素:
a.push('jerry') // 4 会返回一个长度
console.log(a) // (4) [1, 2, 'max', 'jerry']
"""
a.push([33,44]) // 5
console.log(a) // (5) [1, 2, 'max', 'jerry', Array(2)]
如果追加时把一个数组当做一个元素增加进去,那么打印数数组可以发现前面的数字是将数组看作一个元素,但是数组中新插入的数组会以Array(数字)的形式来表示,要查看需要点开左边的三角标号查看。
"""
4.弹出尾部元素:
a.pop() // (2) [33, 44]
console.log(a) // (4) [1, 2, 'max', 'jerry']
5.头部插入元素
a.unshift('aaa') // 5
console.log(a) // (5) ['aaa', 1, 2, 'max', 'jerry']
6.头部移除元素:
a.shift('aaa') // 'aaa'
console.log(a) // (4) [1, 2, 'max', 'jerry']
"""
shift后面的元素如果填写不是头部的元素那么依然会删除第一个元素,所以要么填写第一个元素,要么直接不写。
"""
7.切片:
a.slice(0,2) // (2) [1, 2]
8.反转:
console.log(a.reverse()) // (4) ['jerry', 'max', 2, 1]
"""
reverse操作会保存,保存之后查看原来的列表发现顺序已经颠倒
"""
9.将数组元素连接成字符串:a.join('|') // 'jerry|max|2|1'
10.连接数组:
let s1 = [1,2,3], s2 = [4,5,6]
s1.concat(s2) // (6) [1, 2, 3, 4, 5, 6]
11.排序:
let s1 = [2,4,1,6,3,0,9]
s1.sort() // (7) [0, 1, 2, 3, 4, 6, 9]
12.splice:
用法一:
let arr = ['a','b','c','d']
arr.splice(1,2) //(2) ['b', 'c'] 从索引值为1的位置(包含)开始删除,删除2个元素,返回值是删除掉的元素
arr // (2) ['a', 'd']
用法二:在指定位置插入元素:
let arr = ['a','b','c','d']
arr.splice(2,0,'max') // [] 第一个参数为插入的索引值,第二个参数固定位0,第三个元素为增加的数据值
arr // (5) ['a', 'b', 'max', 'c', 'd']
6.自定义对象:
6.1JavaScript的对象(Object)本质上是键值对的集合(Hash结构),但是只能用字符串作为键。
let a = {"name":"max", "age":25}
console.log(a.name) // max 可以通过点K的方式来获取至
console.log(a["name"]) // max 也可以通过按K取值的方式来取值
6.2遍历自定义对象:
var a = {"name": "Tony", "age": 18};
for (var i in a){
console.log(i,a[i])
}
/*
name Tony
age 18
*/
6.3:通过对象来创建字典:
let b = new Object()
b.name = 'jerry' // 'jerry'
b.age = 28 // 28
console.log(b) // {name: 'jerry', age: 28}
5.运算符
1.算术运算符:
+ - * / ++(自增,相当于python中的x+=1) --(自减,相当于python中的x-=1)
let x = 10 res1 = x++ console.log(res1) // 10 加号在后面是先赋值 再自增,自增前就已经赋值,所以res1=x
let x = 10 res1 = ++x console.log(res1) // 12 加号在前面是先自增再赋值.所以res1等于x自增了两次,结果是12
2.比较运算符:
!=值不等(弱)
==值相等(弱),只要值相同,数值类型和字符类型比较也相等。
let a=1,b='1' console.log(a==b) true
===值相等(强),即使值相同,数据类型不相同结果也是flase
!==值不相等(强),值相同,数据类型不相同,也符合值不相等
"""
强指代可以自动转化数据类型,弱指代不能转化数据类型
"""
3.逻辑运算符:
&&:与 console.log(1<2 && 3>2) // true
console.log(1<2 && 3<2) // false
||:或 console.log(1>2 || 3>2) // true
!:非
6.流程控制
1.单if分支:
if (条件){
条件成立执行的代码
}
let name = 'max'
if (name='max') {
console.log('登陆成功')
} // 登陆成功
2.if...else分支:
if (条件){
条件成立执行的代码
}else{
条件不成立执行的代码
}
let name = 'max'
if (name='max'){
console.log('登陆成功')
}else{
'用户名错误'
} 登陆成功
3.if...else if else...分支:
if(条件1){
条件1成立执行的代码
}else if(条件2){
条件1不成立条件2成立执行的代码
}else{
条件1条件2都不成立执行的代码
}
let a=10
if(a>5){
console.log('a大于5')
}else if(a<5){
console.log('a小于5')
}else{
console.log('a等于5')
} // a大于5
4.如果根治结构中else if很多还可以考虑switch语法:
let age=28
switch(age){
case age>28:
console.log('猜大了')
break
case age<28:
console.log('猜小了')
break
default:
console.log('猜对了')
} // 猜对了
5.for循环:
for(起始条件;循环条件;条件处理){
循环体代码
}
for(let i=1;i<5;++i){
console.log(i)
} // 1 2 3 4
let dd = {'name':'jason','age':18}
for(let k in dd){
console.log(k)
} // name age
6.while循环:
while(循环条件){
循环体代码
}
7.三元运算:
是先写判断条件a>b再写条件成立返回的值为a,条件不成立返回的值为b;三元运算可以嵌套使用。
var a=1;
var b=2;
var c = a>b ? console.log('1') : console.log('2') // 2
7.函数
1.定义函数:
function 函数名(形参){
// 函数注释
函数体代码
return 返回值
}
函数调用还是 函数名()(有参数需要传参)
function d1(a,b){
return a*b
}
d1(2,3) // 6
2.匿名函数
let s1 = function(a,b){
return a + b
}
s1(1,2) // 3
3.箭头函数
var f = (num1,num2) => num1**num2
f(2,3) // 8
相当于:
var f = function(num1,num2){
return num1**num2
}
"""
1.在JS中函数的形参与实参个数可以不对应,传少了就是NaN,传多了不用
var f = (num1,num2) => num1**num2
f(1,3,5) // 1
2.函数体代码中有一个关键字arguments用来接收所有的实参
3.函数的返回值如果有多个需要自己处理成一个整体
var s3 = function(a,b){
return a+b,a*b,a**b
}
res1 = s3(1,2) // 1 传多个只能接收到第一个返回值
var s3 = function(a,b){
return [a+b,a*b,a**b]
}
res2 = s3(2,3) // (3) [5, 6, 8]
"""
8.内置对象
1.创建Date对象:
1.1获取固定格式的时间:
var d1 = new Date()
console.log(d1.toDateString()) // Mon Dec 05 2022
1.2将过去的时间转化为固定格式:
var d2 = new Date("2004/3/20 11:12")
console.log(d2.toDateString()) // Sat Mar 20 2004
var d3 = new Date("04/03/20 11:12")
console.log(d3.toLocaleString()); // 2020/4/3 11:12:00
1.3参数为毫秒:
var d3 = new Date(5000);
console.log(d3.toLocaleString()); // 1970/1/1 08:00:05
2.Date对象的用法:
var d = new Date();
d.getDate() 获取日
d.getDay () 获取星期
d.getMonth () 获取月(0-11)
d.getFullYear () 获取完整年份
d.getYear () 获取年
d.getHours () 获取小时
d.getMinutes () 获取分钟
d.getSeconds () 获取秒
d.getMilliseconds () 获取毫秒
d.getTime () 返回累计毫秒数(从1970/1/1午夜)
作业
const WEEKMAP = {
0:"星期天",
1:"星期一",
2:"星期二",
3:"星期三",
4:"星期四",
5:"星期五",
6:"星期六"
}
function showTime() {
var d1 = new Date()
var year = d1.getFullYear()
var month = d1.getMonth()+1
var day = d1.getDate()
var hour = d1.getHours()
var minute = d1.getMinutes()<10?"0"+d1.getMinutes():d1.getMinutes()
var week = WEEKMAP[d1.getDay()]
var strTime =
`${year}-${month}-${day} ${hour}:${minute}`
console.log(strTime)
}
showTime()
标签:console,log,max,前端,JavaScript,let,var,name
From: https://www.cnblogs.com/zkz0206/p/16953478.html