JavaScirpt(1)

JavaScirpt编程语言

JS简介

​ 全称JavaScirpt虽然名字中含有Java其实与Java一点关系都没有。

​ 主要作用于前端编程语言。

JS基础

1.注释语法

​ //单行注释

/* 多行注释 */

2.引入js的多种方式
  1. head内script标签内编写

  2. head内script标签src属性引入外部js资源

  3. body内最底部通过script标签src属性引入外部js资源 (最常用)

    注意事项: 页面的下载是从上往下的,所以操作js代码一定要等到页面加载完毕在执行才可以正常运行,所以script标签应当放于网页的最底部。

编写js方法
  1. pycharm 创建js文件或者html文件 (编写较为复杂的js代码)
  2. 浏览器提供编写js代码的环境 ( 浏览器内按F12 选择Console 在内编写)

变量与常量

js中首次定义一个变量名需要关键字声明

1.var
	var 变量名 = 值;
2.let
	let 变量名 = 值;
let是ECM6新语法 可以在局部定义变量不影响全局

浏览器内编写js代码 换行方法
	Shift+空格

js声明常量也需要关键字

const 
	const 变量名=值;

基本数据类型

​ 在JS中查看数据类型的方法 typeof

1. 数值类型(Number)

​ 在JS中整型与浮点型都是Number,但是在转换的时候可以控制保存数据是否含有小数点。

parseInt  保留整数
parseFloat 保留整数含有小数
	# 在用这两种方法转换字符的时候不会报错,会提示NaN也属于数值类型 意思是 你操作的对象不是一个数字(Not A Number)
    
parseInt(14.33)
14
parseFloat(14.33)
14.33

2. 字符类型(String)

在JS中定义字符 单引号 双引号 ` 顿号都可以

顿号是可以写多行,支持格式化输出。称为模板字符串

let s1 = 'tank'
let s2 = "tank"
let s3 = `tank`
格式化输出使用${}
	`my name is ${s3}`
# 字符串的拼接操作 使用+号
 	'tank'+'nb'
字符类型的内置方法

​ 通过 . 来调用

方法 说明
.length 返回长度
.trim() 移除空白
.trimLeft() 移除左边的空白
.trimRight() 移除右边的空白
.charAt() 返回索引位的字符
.concat() 拼接
.indexOf() 获取对应的索引值 多个字符返回开头的字符的索引值
.slice() 切片 顾头不顾尾
.toLowerCase() 小写
.toUpperCase() 大写
.split() 分割 可以在后面加上需要几个值,不写默认获取全部
s4 = ' tank '
' tank '
s4.trim()      # 去除两边空白
# 'tank'
s4.length      # 统计长度
# 6
s4.trimLeft()    #  去除左边空白
# 'tank '
s4.trimRight()   #  去除右边空白 
# ' tank'
s4.charAt(1)     # 返回1索引位的字符
# 't'
s4.concat('nb')  # 拼接
#' tank nb'
s4.indexOf('ank')  # 获取字符对应的索引值 多个字符返回开头的字符的索引值
# 2
s4.slice(2,4)   # 切片操作顾头不顾尾
# 'an'
s4.toUpperCase()   # 转大写
# ' TANK '
s4.toLowerCase()   # 转小写

s4.split('a')     # 分割 可以在后面加上需要几个值,不写默认获取全部
# (2) [' t', 'nk ']
s4.split('a',1)
# [' t']

3.布尔类型(boolean)

JS布尔值 是纯小写的。 python是首字母大写

(空字符串) 0 null undefined NaN  都是False    

4. null与undefined

​ null表示值是空,一般在需要指定或清空一个变量时才会使用,如 name=null;(曾经拥有 但是没了)

undefined 表示根本就没定义(从来没有)

5. 对象(object)

与python中一致 一切皆对象。

对象之数组(Array)

python中的列表

"定义方法"
let obj1 = [11,22,33]
typeof(obj1)   # 查看数据类型
# 'object'
数组常用方法:
方法 说明
.length 数组的大小
.push() 尾部追加元素
.pop() 获取尾部的元素
.unshift() 头部插入元素
.shift() 头部移除元素 括号内默认移除头部
.slice() 切片
.reverse() 反转 颠倒顺序
.join() 将数组元素连接成字符串 可以指定链接符
.concat() 连接数组
.sort() 排序
.forEach() 将数组的每个元素传递给回调函数,相当于for循环拿出来交给函数,第二个参数打印索引值,第三个参数 被循环的对象本身(列表)
.splice() 删除元素,并向数组添加新元素。 从第一个参数索引位开始删除至第二参数的个数,第三个参数可以添加
.map() 返回一个数组元素调用函数处理后的值的新数组
l1 = [11,22,33,44,55]
l1.length  # 统计长度
# 5
l1.push()  # 尾部追加元素

l1.pop()   # 获取尾部元素
# 66
l1.unshift() # 头部插入元素
l1.shift()  # 移除头部元素
l1.slice(1,3) # 切片 顾头不顾尾
l1.reverse() # 反转 列表顺序
#  [55, 44, 33, 22, 11]
l1.join('|')  # 将数组元素连接成字符串 可以指定链接符
# '55|44|33|22|11'
l1.concat([9,8]) # 连接数组
# [55, 44, 33, 22, 11, 9, 8]
l1.sort()  # 排序
# [11, 22, 33, 44, 55]
"""
forEach
将数组的每个元素传递给回调函数,相当于for循环拿出来交给函数,第二个参数打印索引值,第三个参数 被循环的对象本身(列表)
"""
l1.forEach(function(a){
    console.log(a)})  
l1.forEach(function(a,b){
    console.log(a,b)})
l1.forEach(function(a,b,c){
    console.log(a,b,c)})
"""splice 
删除元素,并向数组添加新元素。 从第一个参数索引位开始删除至第二参数的个数,第三个参数可以添加"""
l1.splice(0,1)
# [11]
# (4) [22, 33, 44, 55]
l1.splice(0,1,23)
# [22]
# (4) [23, 33, 44, 55]
"""
map 映射 设定一个形参 在内部设置返回值
也可以放三个参数 规律与forEach一致
"""
l1.map(function(a){
    return a + 1
})
# (4) [24, 34, 45, 56]
对象之自定义对象(object)

python中的字典

" 产生一个字典语法 "
let d1 = new object();
let d2 = ['name':'tank']
可以使用按键取值
d2['name'] 
get 无法使用
可以直接通过.的方式获取
d2.name
---------------------------------------------------
let d1 = new Object();   # 产生一个空字典

d1.name = 'tank'       # 用对象.的方式添加键值对
# {name: 'tank'}

运算符

1. 算数运算符
+ - * / % ++ --
与python中一样
只有 ++ --不一样
var x=10;
var res1=x++;  # 先赋值 后递增 
res = 10
var res2=++x;  # 先递增 后赋值  
res = 12 
"因为res1 赋值了10  后 也自增了,此时x=11,所以到了res2里就是 11自增再赋值"
2. 比较运算符

​ JS里自动会把不同的数据 转换成相同的数据进行比对,不想转换可以使用=== 强等于

!=   # 不等于
==   # 值等于 弱等于 自动转换
===  # 强等于  不转换
!==  # 值不等  强不等于
3. 逻辑运算符
&&  # 与
||  # 或
!   # 非
4. 赋值运算符
= += -= *= /=

流程控制

1.单if分支
if (条件){
    条件成立执行的代码
}
2.if ...else分支
if (条件){
    条件成立执行的代码
}else{
    条件不成立执行的代码
}
3. if...else if ...else分支
if (条件1){
    条件成立执行的代码
}else if(条件2){
    条件1不成立执行的代码
}else{
    条件1和2都不成立执行的代码
}

# 分支结构中else if很多 可以使用switch语法
4. switch语法

​ 提前列好每一个语法 然后去执行

switch(条件){
    case 条件1:
   		条件1成立执行的代码;
    	break;
    case 条件2:
    	条件2成立执行的代码;
    	break;
    default:
    	条件都不满足执行的代码
}

# switch中的case子句通常都会加break语句,否则程序会继续执行后续case中的语句。
5.for循环
for(起始条件;循环条件;条件处理){
    循环体代码
}
for (let i=0;i<10;i++) {
    console.log(i)
}
练习题
let l1 = ['tank','tony','jerry','张红','周衍根']
for (let i=0;i<l1.length;i++){
    console.log(l1[i])
}

let d1 = {'name':'jason','age':18}
for (let k in d1){
    console.log(k)
}
# name
# age
undefined
for (let k in d1){
    console.log(d1[k])
}
# jason
# 18

6. while循环
while(循环条件){
    循环体代码
}
7.三元运算
python中  
值1 if 条件 else 值2  # 条件成立用值1 条件不成立用值2
JS中
条件 ?值1:值2   # # 条件成立用值1 条件不成立用值2  
5 =='6'?'我们一样':'我们不一样'

函数

function 函数名(形参){
    // 函数注释
    函数体代码
    return 返回值
} 

# 匿名函数
var s1 = function(a, b){
  return a + b;
}
# 箭头函数
var f = v => v;
 f是名字  =>左边的v是形参,右边的是返回值

全写:
var f = function(v){
  return v;
}
# 如果形参不需要参数用括号括起来
var f = () => '我滴哥';
var f = function(){return '我滴哥'};
# 形参需要多个参数
var f = (a,b) => a+b;
var f = function(a,b){
    return a + b
}
Js函数特性

​ 1.JS中函数的形参与实参个数可以不对应
​ 传少了就是undefined 传多了不用
​ 2.函数体代码中有一个关键字arguments用来接收所有的实参

function f1(a,b){
    console.log(arguments) # 可以接收所有参数
}
我们可以通过代码限制必须传对应个数的参数
function f2(a,b){
    if (arguments.length !==2){console.log('我需要两个参数')}
}
  1. Js函数的返回值问题 如果返回值有多个 那么只会接收最后一个返回值。我们需要提前把返回值组织好 比如弄成元组或者列表。
function hs(){
    return 1,2,3
}
hs()
# 3
提前把返回值组织好
function hs1(){
    return [1,2,3]
}
hs1()
# [1, 2, 3]

内置对象

1.date对象
# 创建对象
var d1= new Date();
# 获取当前时间 年月日时分秒
console.log(d1.toLocaleString()) 
 2022/12/5 16:33:24
date对象的方法
//getDate()                 获取日
//getDay ()                 获取星期
//getMonth ()               获取月(0-11)
//getFullYear ()            获取完整年份
//getYear ()                获取年
//getHours ()               获取小时
//getMinutes ()             获取分钟
//getSeconds ()             获取秒
//getMilliseconds ()        获取毫秒
//getTime ()                返回累计毫秒数(从1970/1/1午夜)
方法 描述
getFullYear () 获取完整年份
getDate() 返回月中的第几天(从 1 到 31)。
getDay() 返回星期几(0-6)。
getYear() 返回年份。 距1900年1月1日的年份,这是一个过时而不被推荐的方法
getHours() 返回小时(从 0-23)。
getMilliseconds() 返回毫秒(0-999)。
getMinutes() 返回分钟(从 0-59)。
getMonth() 返回月份(从 0-11)。
getSeconds() 返回秒数(从 0-59)。
getTime() 返回自 1970 年 1 月 1 日午夜以来与指定日期的毫秒数。

json
var str1 = '{"name": "Alex", "age": 18}';
var obj1 = {"name": "Alex", "age": 18};
// JSON字符串转换成对象
var obj = JSON.parse(str1); 
// 对象转换成JSON字符串
var str = JSON.stringify(obj1);
RegExp对象
// 定义正则表达式两种方式
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}$");
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;

// 正则校验数据
reg1.test('jason666')
reg2.test('jason666')

/*第一个注意事项,正则表达式中不能有空格*/ 

// 全局匹配
var s1 = 'tonydsb dsb dsb';
s1.match(/s/)
s1.match(/s/g)
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g
reg2.test('tonydsb');
reg2.test('tonydsb');
reg2.lastIndex;
/*第二个注意事项,全局匹配时有一个lastIndex属性*/

// 校验时不传参数
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/
reg2.test();
reg2.test(undefined);

var reg3 = /undefined/;
reg3.test();
"""
**全局匹配的bug现象**

就是上述代码中的第二种情况,测试结果一次true、一次false,因为lastIndex属性就是类似于游标的属性,第一次匹配会到字符串尾部停滞,第二次匹配就匹配不到于是回到字符串头部。
"""
posted @ 2022-12-05 20:18  李阿鸡  阅读(21)  评论(0编辑  收藏  举报
Title