从小白到小黑 python学习之旅 日常总结 54(JavaScript基础)

数据类型

数值类型(number)     字符类型(string)     字符类型常用方法     布尔值(boolean)     null与undefined

对象

数组    数组的常用方法     自定义对象     内置对象

运算符

流程控制

函数

 

 

 

数据类型

 JavaScript 是一门面向对象 的动态类型的 编程语言 

数值类型(number)

var a = 11;
var b = 11.11;

如何查看当前数据类型

typeof a;
typeof b;
"number"

类型转换

parseInt()  //转成整数
parseFloat()  //转成小数
parseInt('12312312')  
12312312
parseFloat('11.11')
11.11
parseInt('11.11')  //截取整数部分
11
parseInt('123sdasdajs2312dasd')  //取开头整数部分
123
parseInt('asdasdad123sdasdajs2312dasd')  
NaN     // 特殊的 NaN(NOT A NUMBER):数值类型    表示的意思是“不是一个数字”

 

 

字符类型(string)

var s = 'jason';
typeof s;   //"string"
var s1 = "jason";
typeof s1;  //"string"

// 不支持三引号

 

模版字符串

// 模版字符串
var s3 = `
asdkajsd
sdjkladj
asdjlajdkl
`
typeof s3  //"string"


// 模版字符串除了可以定义多行文本之外还可以实现格式化字符串操作
// 书写${} 会自动去前面找大括号里面的变量名对应的值 如果没有定义直接报错
var name = 'jason'
var age = 18
var sss = `
   my name is ${name} and my age is ${age}
`
sss  // my name is jason and my age is 18



//如果说${}里面 的 变量名没有定义 直接报错 var s4 = `my name is ${namemmmmm}` VM1140:1 Uncaught ReferenceError: namemmmmm is not defined at <anonymous>:1:24

 字符串的拼接

     在js中推荐你直接使用+做拼接    # python中 推荐用join   不推荐+

 

字符类型常用方法

.length 返回长度

var a='zhdjs'
a.length
//5

 .trim() 移除空白    .trimLeft() 移除左边的空白   .trimRight() 移除右边的空白  

//只能移除空白

var a='   zhdjs   '
a.trim();  //移除两边空白
//"zhdjs"


a.trimLeft()  //移除左边的空白
//"zhdjs   "


a.trimRight()  //移除右边的空白
//"   zhdjs"

.charAt(n) 返回第n个字符

var a='zhdjs';
a.charAt(1); 
//"h"

 .indexOf(substring, start) 子序列位置

var a='zhdjs';
a.indexOf('hd');  // 返回第一个字符的索引
//1

.substring(from, to) 根据索引获取子序列

var a='zhdjs';
a.substring(1,3);  //过头不过尾
//"hd"

.slice(start, end) 切片

//推荐使用   能识别负数
var a='zhdjs';
a.slice(0,-1);
//"zhdj"

.toLowerCase() 变小写     .toUpperCase() 变大写

var a='abcABC123';

a.toUpperCase()  //大写
//"ABCABC123"

a.toLowerCase(); //小写
//"abcabc123"

.split(delimiter, limit) 分割

var a='aaa|bbb|ccc|123'
a.split('|');
//(4) ["aaa", "bbb", "ccc", "123"]



var a='aaa|bbb|ccc|123'
a.split('|',2);    // 拿切割数据的前两个    #python 里是就切前2个
//(2) ["aaa", "bbb"]

.concat(value, ...) 拼接

var a='aaa';
var b='bbb';
a.concat(b);
//"aaabbb"


var a='aaa';
var c=123;  // python中字符串不能和整数类型拼接   js可以这是弱类型语言的特点(内部会自动转换成相同的数据类型做操作)
a.concat(c);   
//"aaa123"

 

 

 布尔值(boolean)

var a=true;
typeof a;
//"boolean"
//js中布尔值是全小写的
    true
    false

//布尔值是false的有哪些
空字符串、0、null、undefined、NaN

 

 

null与undefined

/*
null
     表示值为空 一般都是指定或者清空一个变量时使用

         var a=123;
         var a=null;
         a
         //null


undefined
    表示声明了一个变量 但是该变量没有做初始化操作(没有给值)
    一般函数没有指定返回值的时候 返回的也是undefined
*/            

 

 

对象

 数组(类似于python里面的列表) []

var l=[111,'aaa',true];  //支持多个不同的数据类型
typeof l;
//"object"
//#索引取值  不支持负数
var l=[111,'aaa',true];
l[1]
//"aaa"

 

数组的常用方法

.length  数组的大小

var l=[111,'aaa',true];  //统计列表里元素的个数
l.length
//3

 

.push(ele)  尾部追加元素

 

var l=[111,'aaa',true];
l.push('cool');
//4
l
//(4) [111, "aaa", true, "cool"]

.pop()  获取尾部的元素

var l=[111,'aaa',true];
l.pop();    // 从数组里拿出最后一个元素
//true
l           // 拿出了 列表里也就没有了
//(2) [111, "aaa"]

 

.unshift(ele)  头部插入元素      .shift()  头部移除元素

var l=[111,'aaa',true];
l.unshift('cool');  // 头部插入元素
//4
l
//(4) ["cool", 111, "aaa", true]


l.shift();  //  头部移除元素
//"cool"
l
//(3) [111, "aaa", true]

.slice(start, end)  切片

var l=[111,'aaa',true];
l.slice(1,3)
//(2) ["aaa", true]

.reverse()  反转

var l=[111,'aaa',true];
l.reverse();
//(3) [true, "aaa", 111]

 

.join(seq)  将数组元素连接成字符串

var l=[111,'aaa',true];
l.join('$');
//"111$aaa$true"

.concat(val, ...)  连接数组

var l=[111,'aaa',true];
l.concat([11,22,33]);
//(6) [111, "aaa", true, 11, 22, 33]

.sort()  排序

var l=[666,222,333];
l.sort();
//(3) [222, 333, 666]

.forEach()  将数组的每个元素传递给回调函数

var l=[666,222,333];
l.forEach(function(v){console.log(v)},l);  // 一个参数就是数组里面每一个元素对象
//666
//222
//333

var l=[666,222,333];
l.forEach(function(v,index){console.log(v,index)},l); // 两个参数就是元素 + 元素索引
//666 0
//222 1
//333 2

var l=[666,222,333];
l.forEach(function(v,index,arr){console.log(v,index,arr)},l);  // 元素 + 元素索引 + 元素的数据来源
//666 0 (3) [666, 222, 333]
//222 1 (3) [666, 222, 333]
//333 2 (3) [666, 222, 333]

.splice()  删除元素,并向数组添加新元素

var l=[111,222,333,555,666,777];
l.splice(0,2);  // 两个参数 第一个是起始位置 第二个是删除的个数
//(2) [111, 222]
l
//(4) [333, 555, 666, 777]


var l=[111,222,333,555,666,777];
l.splice(0,1,88);  //三个参数  先删除后添加
//[111]
l
//(6) [88, 222, 333, 555, 666, 777]

 

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

var l=[111,222,333,555,666,777];
l.map(function(v){console.log(v)},l);
//111
//222
//333
//555
//666
//777


var l=[111,222,333,555,666,777];
l.map(function(v){return v*2},l);
//(6) [222, 444, 666, 1110, 1332, 1554]

 

自定义对象 # 类似python中的字典

 创建自定义对象 {}

// 第一种
var d = {'name':'jason','age':18};
typeof d
//"object"




// 第二种  需要使用关键字 new
var d2 = new Object()  // 先创建一个空的自定义对象  #{}

// 然后再往里面添加元素
d2.name = 'jason'
//"jason"
d2
//{name: "jason"}


d2['age'] = 18
//18
d2
//{name: "jason", age: 18}

 

 

 取值

var d = {'name':'jason','age':18};

d['name']
//"jason"

d.name
//"jason"


// 支持for循环 暴露给外界可以直接获取的也是键

for(let i in d){
  console.log(i,d[i])
}
// name jason
// age 18

 

 

内置对象

Date对象

let d3 = new Date();
d3
//Sun May 17 2020 21:01:06 GMT+0800 (中国标准时间)

d3.toLocaleString()
//"2020/5/17 下午9:01:06"

自己手动输入时间

let d4 = new Date('2200/11/11 11:11:11')
d4.toLocaleString()
//"2200/11/11 上午11:11:11"


let d5 = new Date(1111,11,11,11,11,11)
d5.toLocaleString()
//"1111/12/11 上午11:11:11"   // 月份从0开始0-11月

时间对象具体方法

let d6 = new Date();
d6.getDate()            //获取日
d6.getDay()             //获取星期
d6.getMonth()           //获取月份(0-11)
d6.getFullYear()        //获取完整的年份
d6.getHours()           //获取小时
d6.getMinutes()         //获取分钟
d6.getSeconds()         //获取秒
d6.getMilliseconds()    //获取毫秒
d6.getTime()            //时间戳

 

 

JSON对象

js中的 序列化反序列化
JSON.stringify()  //序列化       类似python中 dumps
JSON.parse()      //反序列化     类似python中 loads    

 

let d7 = {'name':'jason','age':18}


let res666 = JSON.stringify(d7)   // 序列化
res666
//"{"name":"jason","age":18}"


JSON.parse(res666)                    // 反序列化
//{name: "jason", age: 18}

 

 

RegExp对象

// 在js中需要你创建正则对象

//第一种
let reg1 = new RegExp('^[a-zA-Z][a-zA-Z0-9]{5,11}')

//第二种
let reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,11}/


# 匹配内容
reg1.test('egondsb') //true
reg2.test('egondsb') //true



//获取字符串里面所有的字母s
let sss = 'egondsb dsb dsb'
sss.match(/s/)  // 拿到一个就停止了
sss.match(/s/g)    // 全局匹配  g就表示全局模式

全局匹配模式吐槽点

let reg3 = /^[a-zA-Z][a-zA-Z0-9]{5,11}/g

reg3.test('egondsb')  # 全局模式有一个lastIndex属性
//true
reg3.test('egondsb')
//false
reg3.test('egondsb')
//true
reg3.test('egondsb')
//false

//原因
reg3.lastIndex
//0
reg3.test('egondsb')
//true
reg3.lastIndex
//7

 

 

let reg4 = /^[a-zA-Z][a-zA-Z0-9]{5,11}/
reg4.test()  # 什么都不传 默认传的是undefined
true
reg4.test()
true

//验证
reg4.test(undefined)
//true
let reg5 = /undefined/
//undefined
reg5.test('jason')
//false
reg5.test()
//true

 

Math对象

abs(x)      返回数的绝对值。
exp(x)      返回 e 的指数。
floor(x)    对数进行下舍入。
log(x)      返回数的自然对数(底为e)。
max(x,y)    返回 x 和 y 中的最高值。
min(x,y)    返回 x 和 y 中的最低值。
pow(x,y)    返回 x 的 y 次幂。
random()    返回 0 ~ 1 之间的随机数。
round(x)    把数四舍五入为最接近的整数。
sin(x)      返回数的正弦。
sqrt(x)     返回数的平方根。
tan(x)      返回角的正切。

 

 

 

运算符

算术运算符

var x=10;

// ++表示自增1 类似于 +=1
//加号在前先加后赋值 加号在后先赋值后加

var res1 = x++; 
res1   
//10  // 加号在后x(x=10)先赋值给res1  再自增

var res2 = ++x;
res2
//12  //  加号在前先自增 x=11再自增1(x=12) 后再赋值给res2

 比较运算符

1=='1'  // 弱等于  内部自动转换成相同的数据类型比较了
//true
1==='1'  // 强等于  内部不做类型转换
//false

1!='1'   // 弱等于
//false
1!=='1'  // 强等于
//true

逻辑运算符

&&    (python中的and)
||    (python中的or)
!     (python中的not)

 

//当运算到某一个值就得出最终结果之后,就返回哪个值。

5&&'5'
//"5"

0||1
//1

!5 && '5'
//false

 

赋值运算符

= += -= *= ....

 

 

 

流程控制

if 判断

 

if (条件1){
  console.log("条件1成立执行此代码")
}else if(条件2){
  console.log('条件2成立执行此代码')
}else{
  console.log('以上条件都不成立 执行此代码')
}

 

switch语法

提前列举好可能出现的条件和解决方式

 

// 例子
var num = 2;
switch(num){
  case 0:
      console.log('喝酒');
      break;  // 不加break 匹配到一个之后 就一直往下执行
  case 1:
      console.log('唱歌');
      break;
  case 2:
      console.log('洗脚');
      break;
  case 3:
      console.log('按摩');
      break;
  case 4:
      console.log('营养快线');
      break;
  case 5:
      console.log('老板慢走 欢迎下次光临');
      break;
  default:
      console.log('条件都没有匹配上 默认走的流程')
}
//洗脚

 

for循环

// 打印0-9数字
for(let i=0;i<10;i++){      //第一个参数 起始条件  第二个参数 循环的条件  第三个参数 每循环一次后条件发生的变化
  console.log(i)
}
//循环打印出数组里面的每一个元素
var l1 = [111,222,333,444,555,666]
for(let i=0;i<l1.length;i++){
  console.log(l1[i])
}

while循环

var i = 0
while(i<10){
  console.log(i)
  i++;
}

三元运算符

 

//条件成立取问好后面的值  不成立取冒号后面的值 ( 三元运算符不要写的过于复杂 )
res = 1>2?1:3
//3

 

 

函数

 

//在js中定义函数需要用到关键字function


格式
//无参
function 函数名(){函数体代码}

//有参
function 函数名(形参1,形参2,形参3...){函数体代码}

无参函数

 

function func1(){
  console.log('hello world')
}
func1()  // 调用 加括调用 跟python是一样的

有参函数

function func2(a,b){
  console.log(a,b)
}
func2(1,2)  // 多了少了 没关系 只要位置对应的数据

 

关键字arguments

function func2(a,b){
  console.log(arguments)  // 能够获取到函数接受到的所有的参数
  console.log(a,b)
}
function func2(a,b){
  if(arguments.length<2){
    console.log('传少了')
  }else if (arguments.length>2){
    console.log('传多了')
  }else{
    console.log('正常执行')
  }
}
func2(1,2);
//正常执行


func2(1,2,3)
//传多了
简单使用

 

函数的返回值  关键字return

function index(){
  return 666       // 如果返回多个返回值  只能拿到最后一个  但可以打包成数组  不过js不支持解压赋值
}

 

匿名函数(没有名字)

var res = function(){
  console.log('哈哈哈')
}

res()
//哈哈哈

 

箭头函数(主要用来处理简单的业务逻辑)

var func2 = (arg1,arg2) => arg1+arg2    // 箭头左边的是形参 右边的是返回值
// 等价于
var func2 = function(arg1,arg2){
  return arg1+arg2
}

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

名称空间的查找顺序与python一致:以定义阶段为准

#案例一
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

 

posted @ 2020-05-17 18:13  It's_cool  阅读(242)  评论(0)    收藏  举报