day44 js

js介绍

是前端的一段编程语言（也是有逻辑的）

node.js 支持前端js代码跑在后端服务器上

js跟Java的关系？

​ 半毛钱的关系都没有

​ 原因：当初Java火 想蹭热度

js是网警公司开发的 想让索引的浏览器都支持该语言，折中 改名字 js也叫ECMAScript（两者等价）

当前使用较多的版本 ECMAScript5.1 ECMAScript6（简称ES6）

注释

单行注释： //

多行注释：

/*

*/

引入方式

1.script标签内部直接书写

<script>
	alert(123)
</script>

2.通过script标签内src属性引入外部js文件

<script src="js.js"></script>

js变量

在js中声明变量需要使用关键字

变量命名规范；

​ 1.由数字 字符 下划线 $组成,不能以数字开头

​ 2.不能用关键字作为变量名，区分大小写

​ 3.推荐使用驼峰体命名

​ python推荐使用下划线（C++）

​ username='jason'

​ js推荐使用驼峰体

​ userName='jason'

​ js代码默认以分号作为结束符,不写也没有问题

confirm('are you sure');

var与let的区别

var：声明的是全局有效

let：可以只在局部有效，let局部声明只会在局部有效，不会影响全局（ES6新语法）

var name ='jason';
let name= 'oscar';

js中有常量,const 定义正常的常量 不能修改

const PI =3.1415

js数据类型

js拥有动态类型

var x;//x是undefined
var x=1;//x是数字
var x='alex'//x是字符串

数值类型Number

js包含整形浮点型int float

var a=12.34;
var b=10;

NaN也是数值类型，但表示的意思是 不是一个数字

var a=123
parseInt(a)//123
var b='sdfgd'
parseInt(b)//NaN
var c='122axs456'
parseInt(c)//122 只要字符串里有数字就会将数字拿出来
var d='123.123.123'
parseFloat(d)//123.123

字符类型string

字符串的拼接:python 不推荐使用加好（效率极低） 用 %是format js中推荐使用加号

var a='Hello'
var b='world'
console.log(a+b)//Helloworld

常见方法：

方法	说明
.length	返回长度
.trim()	移除空白
.trimLeft()	移除左边空白
.trimRight()	移除右边空白
.charAt(n)	返回第n个字符
.concat(value,...)	拼接
.indexOf(substring,strat)	子序列位置
.substring(from,to)	根据索引获取子序列
.slice(start,end)	切片
.toLowerCase()	小写
.toUpperCase()	大写
.split(deliniter,limit)	分割

//返回长度  .length
var name='jasonjsaon'
name.length//10

//移除空白  .trim()
var name='  jason  jason   '
name.trim()//"jason  jason"

// 返回第n个字符  .charAt(n) 根据索引取值
var name='jsaonjason'
name.charAt(3)//"o"

//子序列位置  indexOf(substring,start)  根据值找索引
var name='jsaonjason'
name.indexOf('n')//4

//拼接  .concat(value,....)
var name='jsaonjason'
name.concat('dsbdsbdsb')//"jsaonjasondsbdsbdsb"

//根据索引获取子序列  .substring(from,to)
name.substring(1,4)//"sao" 不支持负数

//分割  .split(delimiter,limit)
name.slice(1,4)//"sao"
name.slice(0,-2)//"jsaonjas"
name.slice(2)//"aonjason"

//大小写  .toLOwerCase()  .toUpperCase()
var name='Kdsd'
name.toLocaleUpperCase()//"KDSD"
name.toLocaleLowerCase()//"kdsd"

如何定义多行文本

模板字符串是增强版字符串，要用反引号··

var name='nick';
var age=18
var res =`
my nageame is ${name} my age is ${age}
`/*"
my nageame is nick my age is 18
"*/

布尔值Boolean

区别于python，js中true和false都是小写的

var a=true//true
var b=false;//false

注意：空字符串，0，null,undefined,NaN都是false

null和undefined

null 表示值是空，一般在需要制定或情况一个变量时才会用到，如name=null

undefined 表示当声明一个变量但未初始化时，该变量的默认值是undefined。函数无明确返回值时，返回的也是undefined.

null表示变量的值是空（null可以手动清空一个变量的值，使得该变量变成object类型，职位null），undefined则表示只是声明了变量，但是还没赋值

对象object

数组 [] 自定义对象{}

js其实也是面向对象编程，对象只是带有属性和方法的特殊数据类型

数组

数组对象的作用是：使用单独的变量名来储存一系列的值。类似于python中的列表

方法	说明
.length	数组的大小
.push(ele)	尾部追加元素
.pop	获取尾部的元素
.unshift(ele)	头部插入元素
.shift()	头部移除元素
.slice(start,end)	切片
.reverse()	反转
.join(seq)	将数组元素连接成字符串
.concat(val,...)	连接数组
.sort()	排序
.forEach()	将数组的每一个元素传递给回调函数
.splice()	删除元素，并向数组添加新元素
.map()	返回一个数组元素调用函数处理后的值的新数组

//数组的大小  .length
var l1=[1,2,3,4,5,6,7,8,9]
l1.length//9

//尾部追加元素  .push(ele)
l1.push(666)//10
l1//(10) [1, 2, 3, 4, 5, 6, 7, 8, 9, 666]

//获取尾部的元素  .pop()
l1.pop()//666
l1//(9) [1, 2, 3, 4, 5, 6, 7, 8, 9]

//头部插入元素   .unshift(ele)
l1.unshift(666)//10
l1//(10) [666, 1, 2, 3, 4, 5, 6, 7, 8, 9]

//头部移除元素  .shift()
l1.shift(666)//666
l1//(9) [1, 2, 3, 4, 5, 6, 7, 8, 9]

//切片   .slice(start, end)
l1.slice(1,4)//(3) [2, 3, 4]
l1.slice(1,-1)//(7) [2, 3, 4, 5, 6, 7, 8]

//反转  .reverse()
l1.reverse()//(9) [9, 8, 7, 6, 5, 4, 3, 2, 1]
l1//(9) [9, 8, 7, 6, 5, 4, 3, 2, 1]

//将数组元素连接成字符串  .join(seq)
l1.join(',')//"9,8,7,6,5,4,3,2,1"

//连接数组  .concat(val, ...)
l1.concat([99,88,66])//(12) [9, 8, 7, 6, 5, 4, 3, 2, 1, 99, 88, 66]
l1//(9) [9, 8, 7, 6, 5, 4, 3, 2, 1]

//排序  .sort()
l1.sort()//(9) [1, 2, 3, 4, 5, 6, 7, 8, 9]

forEach()

将数组的每个元素传递给回调函数

语法：

forEach(function(currentValue,index,arr),thisValue)

参数	说明
currentValue	必需。当前元素
index	可选。当前元素的索引值
arr	可选。当前元素所属的数组对象
thisValue	可选。传递给函数的值一般用“this”值。如果这个参数为空，“undefined”会传递给“this"值

//for循环取出每一个元素交给函数处理
var l2=[11,22,33,44,55,66]
l2.forEach(function(index,obj){
console.log(index,obj)
})/*11 0
 22 1
 33 2
 44 3
 55 4
 66 5*/

splice()

删除元素，并向数组添加新元素。

语法：

splice(index,howmany,item1,...,itemx)

参数	说明
index	必需。规定从何处添加/删除元素。该参数是开始插入或删除的数组元素的下标，必须是数字
howmany	必须。规定应该删除多少元素。必须是数字，但可以是0.但是未规定词参数，则删除从index开始到原数组结尾的所有元素
item1,...,itemx	可选。要添加到数组的新元素

//第一个参数是起始位，第二个参数是删除个数，第三个参数是删除后加入的  第三个参数后有多少个就加多少个
l2//(6) [11, 22, 33, 44, 55, 66]
l2.splice(1,2)//(2) [22, 33]
l2//(4) [11, 44, 55, 66]
l2.splice(1,1,[111,222,333])//[44]
l2//(4) [11, Array(3), 55, 66]
l2.splice(1,1,888,999)//[Array(3)]
l2//(5) [11, 888, 999, 55, 66]

map

返回一个数组元素调用函数处理后的值的新数组

语法：

map(function(currentValue,index,arr),thisValues)

参数	说明
currentValue	必需。当前元素的值
index	可选。当前元素的索引值
arr	可选。当前严肃属于的数组对象
thisValue	可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。 如果省略了 thisValue ，"this" 的值为 "undefined"

var l2=[11,22,33,44,55,66]
l2.map(function(value,index,arr){
return value+1
})//(6) [12, 23, 34, 45, 56, 67]

typeof用来查看数据类型的

typeof l2

python中往列表添加数据的方式：append尾部追加 insert按照索引插入 extend扩展列表

python中列表删除元素：remove（没返回值） pop（有返回值） del

运算符

算数运算符

+ - * / % ++ --
var x=10
var res1=x++//先赋值再自增
var res2=++x//先自增再赋值
res1//10
res2//12

比较运算符

> >=  <  <=  !=  ==  ===  !==
1=='1'//true 弱等于  内部自动转化成相同的数据类型进行比较
1==='1'//false  强等于   不会进行数据类型的转换 直接进行比较

逻辑运算符

python       js
and			&&
or 		     ||
not 		 !

赋值运算符

=	+=	-=	*=	/=

流程控制

if-else

var a=10
if (a>10){
    console.log('yes')
}else{
    console.log('no')
}//no

if -else if-else

var a=10
if (a>5){
    console.log('a>5')
}
else if (a<5){
    console.log('a<5')
}
else{
    console.log('a=5')
}//a>5

switch

var day=new Date().getDay();
switch (day){
    case 0:
        console.log('sunday')
        break
    case 1:
        console.log('monday')
        break
    default:
        console.log('.....')
}//.....

for

for (var i=0;i<5;i++){
    console.log(i)
}/*0
 1
 2
3
4*/

while

var i=0
while (i<5){
   console.log(i) 
    i++
}/*0
 1
 2
3
4*/

三元运算

var a=1
var b=2
var c=a>b?a:b//这里的三元运算顺序是先写判断条件a>b再写条件成立返回的值为a，条件不成立返回的值为b；三元运算可以嵌套使用var x=a>b ?a:(b=="20")?a:b;
c//2

函数

函数定义

普通函数定义

function f1(){
    console.log('hello world')
}
f1()//hello world

带参数的函数

function f2(a,b){
    console.log(arguments)
    console.log(arguments.length)
    console.log(a,b)
}//内置的arguments接收用户传入的索引参数，组成数组
f2(1,2)/*Arguments(2) [1, 2, callee: ƒ, Symbol(Symbol.iterator): ƒ]
2
1 2*/

带返回值的函数

function sum(a,b){
    return a+b
}
sum(1,2)//3

匿名函数方式

var sum=function(a,b){
    return a+b
}
sum(1,2)//3

立即执行函数

书写立即执行的函数，首先先写两个括号（）（）这样防止书写混乱

(function(a,b){
    return a+b
})(1,2)//3

补充

ES6中允许使用箭头（=>)定义函数

var f=v=>v
//等同于
var f=function(v){
    return v
}

var f=()=>5
//等同于
var f=function(){
    return 5
}

var sum=(num1,num2)=>num1+nim2
//等同于
var sum=function(num1,num2){
    return num1+num2
}

函数中的arguments参数

function add(a,b){
    console.log(a+b)
    console.log(arguments.length)
    console.log(arguments[0])//arguments相当于将传入的参数全部包含，这里取得就是一个个元素
}
add(1,2)/*3
 2
 1*/

注意：函数只能返回一个值，如果要返回多个值，只能将其防砸数组或者对象中返回

函数的全局变量和局部变量

局部变量

在js函数内部声明的变量（使用var)是局部变量，所以只能在函数内部访问它（该变量的作用域是函数内部）。只要函数运行完毕，本地变量就会被删除。

全局变量

在函数外声明的变量时全局变量，网页上的所有脚本和函数都能访问它

变量生存周期

js变量的生命期是从他们被声明的时间开始。局部变量会在函数运行以后被删除。全局变量会在页面关闭后被删除。

作用域

var city = "BeiJing";
function f() {
  var city = "ShangHai";
  function inner(){
    var city = "ShenZhen";
    console.log(city);
  }
  inner();
}
f();//ShenZhen

var city = "BeiJing";
function Bar() {
  console.log(city);
}
function f() {
  var city = "ShangHai";
  return Bar;
}
var ret = f();
ret();//BeiJing

var city = "BeiJing";
function f(){
    var city = "ShangHai";
    function inner(){
        console.log(city);
    }
    return inner;
}
var ret = f();
ret();//ShangHai

内置对象和方法

自定义对象

js对象（object）本质上是键值对的集合（Hash结构），但是只能用字符串作为键

var a={'name':'nick','age':18}
console.log(a.name)//nick
console.log(a['age'])//18

遍历对象中的内容

for (var i in a){
    console.log(i,a[i])
}/*name nick
 age 18*/

创建对象：

var person=new Object()//创建一个person对象
person.name='nick'
person.age=18
person//{name: "nick", age: 18}

注意：

ES6中提供了Map数据结构，他类似于对象，也是键值对的集合，但是键的范围不限于字符串，各种类型的值（包括对象）都何以作键，也就是说，Object结构提供了 字符串-值 的对应 Map结构提供了 值-值的对应，是一种更完善的Hash结构实现

var m = new Map();
var o = {p: "Hello World"}

m.set(o, "content"}//m.o='content' 好像也可以
m.get(o)  // "content"//m.o好像也行

m.has(o)  // true
m.delete(o)  // true
m.has(o) // false

Date对象

//方法1：不指定参数
var d1=new Date()
console.log(d1.toLocaleString())//2019/11/16 下午4:30:28
d1//Sat Nov 16 2019 16:30:28 GMT+0800 (中国标准时间)

//方法2:参数为日期字符串
var d2=new Date('2004/3/20 11:12')
console.log(d2.toLocaleString())//2004/3/20 上午11:12:00
var d3=new Date('04/03/02 11:12')
console.log(d3.toLocaleString())//2002/4/3 上午11:12:00

//方法3：参数为毫秒数
var d3=new Date(5000)
console.log(d3.toLocaleString())//1970/1/1 上午8:00:05
console.log(d3.toUTCString())//Thu, 01 Jan 1970 00:00:05 GMT

//方法4：参数为年月日时分秒毫秒
var d4=new Date(2004,2,20,11,12,0,300)
console.log(d4.toLocaleString())//2004/3/20 上午11:12:00  毫秒并不直接显示

Date对象的方法：

var d=new Date()

方法名	功能
getDate()	获取日
getDay()	获取星期（0-6）
getMonth()	获取月（0-11）
getFullYear()	获取完整年份
getYear()	获取年(经过多少年)
getHours()	获取小时
getMinutes()	获取分钟
getSeconds()	获取秒
getMilliseconds()	获取毫秒
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 = 'egondsb dsb dsb';
s1.match(/s/)
s1.match(/s/g)
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g
reg2.test('egondsb');
reg2.test('egondsb');
reg2.lastIndex;
/*第二个注意事项，全局匹配时有一个lastIndex属性*/

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

var reg3 = /undefined/;
reg3.test();