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();