JavaScirpt(1)

标签：function 11 tank s4 JavaScirpt l1 var

JavaScirpt编程语言

JS简介

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

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

JS基础

1.注释语法

//单行注释

/* 多行注释 */

2.引入js的多种方式

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

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

编写js方法

pycharm 创建js文件或者html文件 (编写较为复杂的js代码)
浏览器提供编写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('我需要两个参数')}
}

Js函数的返回值问题如果返回值有多个那么只会接收最后一个返回值。我们需要提前把返回值组织好比如弄成元组或者列表。

function hs(){
    return 1,2,3
}
hs()
# 3
提前把返回值组织好
function hs1(){
    return [1,2,3]
}
hs1()
# [1, 2, 3]

内置对象

1.自定义对象

就是使用new产生一个·对象

2.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属性就是类似于游标的属性，第一次匹配会到字符串尾部停滞，第二次匹配就匹配不到于是回到字符串头部。
"""

标签：function,11,tank,s4,JavaScirpt,l1,var
From： https://www.cnblogs.com/LiaJi/p/16952788.html