首页 > 编程语言 >前端-JavaScript

前端-JavaScript

时间:2022-12-05 20:57:15浏览次数:38  
标签:console log max 前端 JavaScript let var name

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

相关文章

  • web前端开发:JavaScript网页脚本语言
    目录JavaScript网页脚本语言一、JavaScript简介1.注释语法2.引入JS的方式(1)head内script标签内编写(2)head内script标签src属性引入外部JS资源(3)body内最底部通过script标签src......
  • 前端之JavaScript
    前端之JavaScriptjs简介全程javascript但是与java一毛钱关系都没有之所以这么教是为了蹭当时大火的java的热度,所有我们一般把它叫做JS他是一门前端工程师的编程语言......
  • JavaScript简介
    JavaScript概述全称JavaScript,但是与Java一毛钱关系都没有,之所以这么叫是为了蹭Java的热度。它是一门前端工程师的编程语言,但是它本身有很多逻辑错误(不是很严谨)。IT行......
  • 进入python的世界_day45_前端——JS的学习(和学python基础一样的学)
    一、JS介绍​ 是一门编程语言,可以进行逻辑运算,但是跟java没有关系主要是为了蹭热度​ 全称是JavaScript,曾经叫过ECMASript,创造出这门语言的公司已经倒闭完整的Java......
  • JavaScript——基础知识、函数
    JavaScript——基础知识、函数一、JS简介 JavaScript(简称“JS”)是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名,但......
  • 前端之JavaScript
    目录JavaScriptJS简介JS基础变量与常量基本数据类型1.数值类型(Number)2.类型转换关键字parse3.字符类型4.布尔值(Boolean)5.对象(object)6.数组运算符流程控制函数内置对象作......
  • 前端学习4 JavaScript
    JavaScript一、JavaScript简介1.JS简介JS全程JavaScript但是跟Java半毛钱关系都没有之所以这么叫是为例蹭热度它是一门前端工程师的编程语言但是它本身有很......
  • 前端开发:4、JavaScript简介、变量与常量、数据类型及内置方法、运算符、流程控制、循
    前端开发之JavaScript目录前端开发之JavaScript一、JavaScript简介二、JS基础三、变量与常量四、基本数据类型1、数值类型2、字符类型3、布尔类型五、特殊数据类型1、nu......
  • 前端之JavaScript
    前端之JavaScript基础1.注释语法//单行注释/*多行注释*/2.前端引入js的多种方式1.head内script标签内编写2.head内script标签src属性引入外......
  • JavaScript
    JavaScriptJavaScript是Web的编程语言。JavaScript是脚本语言JavaScript是一种轻量级的编程语言。JavaScript是可插入HTML页面的编程代码。JavaScript插入H......