JavaScript

Posted 2021-11-27 doner

javascript

背景

? javascript创造者netscape 公司 将JavaScript 提交给国际化标准组织ECMA，希望这门语言能够成为国际标准，所以EMCA 给 js 制定了标准，所以叫ECMAScript。

ES6（ECMAScript 6） - 最新的版本，用的最多的时ES5 类似于python2 和 python3的关系

组成

一个完整的JavaScript实现是由以下3个不同部分组成的

• 核心 （ECMAScript ）
• 文档对象模型 （DOM） Document object model(整合js,css,html)
• 浏览器对象模型（BOM）Broswer object model (整合js 和浏览器)

ECMAScript 和 JS

ECMAScript 描述了JavaScript 语言本身的相关内容

JS:

• JS 是脚本语言
• JS 是一种轻量级的编程语言。后来出现了node.js,可以做后端语言来开发，但是坑多。
• JS 是可以内插html 页面的编程代码，由浏览器执行
• JS 简单

2. JS 的引入 和基本的数据类型

2.1 两种引入方式

内部引入

   < script>
            js
        < /script>
  //f12建打开浏览器的调试窗口，然后在console这个调试台就能看到这个内容了

外部引入

script src =‘文件路径’

2.2 代码注释

 //是单行注释
/* 是多行注释*/

尽量不要使用/* / 使用// , 到了正则表达式那里 与正则式子里的 / 冲突 —— 《JS语言精粹》

2.3 JavaScript 语言基础

1. JS 的变量名可以使用**_,数字，字母** $组成， 不能以数字开头 $不提倡 不通用

2. var 声明变量名

   var name = "Alex";   var age =18;

3. ES6 之后新加let 命令声明变量，所声明的变量只在let命令所在的代码块内有效，但是不能重复赋值

4. ES6 新增 const 用来声明敞亮。 一旦声明， 其值就不能改变。---为了定义一个固定的常量。

   const PI = 3.1415;

5. 推荐命名使用驼峰体 首字母大写 命名不要用保留字

2.4 JavaScript 数据类型

(和python一样拥有动态数据类型)

动态数据类型：变量赋完值 才知道类型
静态数据类型： 如C， 创建变量时，要指定变量的类型
            var x = 1  ; // 此时x是数字  var x = 'aaa';   // 此时是字符串

数值 (Number)不分整型浮点型 统称

NaN  ： 转换不了   ----not  a  number(typeof number....⊙﹏⊙)
    parseInt('123')  字符串转数字
    parseInt('123a')  提出123 不报错
    parseInt('a1')  NaN
    parseInt('aa')
    parseInt('1a2a')   1  

字符串

.length                    //不加括号的是属性      返回长度      

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

.charAt(n)                       //返回第n个字符 通过索引取元素
                              //超过最大值返回''空字符串
.concat(value,..)              // s1= 'hello'; s.concat('xx') = helloxx  拼接

.indexOf(substring, start)    //这个start 是从索引几开始找，没有返回-1 //子序列位置

.slice(start,end)                     //切片 左包右不包

.toUpperCase();                       //大写
.toLowerCase()                        //小写

.split();                             // 分割
    .split(delimiter,limit)                    // limit 加参数个数 返回个数
var s2='你好'；

var s3= `20期， $｛s2｝`;                     //格式化

布尔值

运行之前 有个提示 都是undefined 运行完了就好了

null 和 undefined

null 啥也没有 打印的时候是fault 
undefined  定义变量的时候就是没调用的时候的状态

1.15 对象

var a = new String('xx');
typeof a        //  类型是object而不是 string 类型

 // 两种定义方法
var l1 = [11,22];
typeof l1;                      //  "object"
var l2 = new Array([11,22]);

方法

.length        数组的大小 

.push(ele)      尾部追加元素

.pop        获取尾部的元素 

.unshift(ele)   头部插入元素

.shift()     头部移除元素

.slice(start,end)    切片

.reverse()                      //在原数组上改   反转

.join(seq)                     //  a1.join('+'),seq  是连接符  将数组的每个元素传递

.contat(val,...)                   //连个数组合并，得到一个新数组，原数组不变  连接数组

l1 = [11,22,33,2,3]
        
    l1 . sort()                    //[11, 13, 2, 2, 21]  首字母排列

    function sortNumber(a,b){
        return a - b 
    }
    
    l1.sort(sortNumber)                    // 排序  sort 可以识别函数 小于零不变 >0 变位置   升序排列 

?
?

l1.splice(1,2)  1，从哪删（索引） 2,删几个 3.删除位置替换新元素（可以多个）  删除元素，并向数组添加新元素  

?

1.15 自定义对象

类似于python的字典  typeof d1  ： "object"

可以不加 引号：

var d1 = {'name' : 'bb'}

var d2 = {name:'zneg' , age:'222'}

d2.age  /   d2["age"]

?

o = nuw Object()  o.name ='xx';

1.16 运算符

算数运算符

var a = 10 ;
a++
11 

if (a++ ==14) {console.log('a等于14')} else{console.log('a 不等于14')}

a = 10 
if a == 11: print(a)
else:print(a)

比较运算符

a = 10  var c ='10'  a==c : true
a+c = '1010'                    //相加是字符串

== 弱等于  不比较类型（好像等于 不用踩坑）

=== 强等于

a!=c   false ....

逻辑运算符

&&  || ！                    // and or 非（取反） ！null 返回 true

赋值运算符

=  +-*/ =

1.17 流程控制

1.if-else 

var a = 10 ;

if (a>4){}
else{}

2.else-if 
3.switch 切换

    switch(day)
    {
        case 0:console.log('sunday'); break;
        case 1:                     break;
        case 2:                     break;
    }

    switch (++a){
            case 1: console.log('1'); break;
            case 2: console.log('这是2') ; break;
            default :
            console.log('这啥也不是'
            );}

4. for 循环  i++和++i 一样的 因为最后执行
    for (var i = 0 ; i<10 ; i++){
    console.log(i); 
    }

4.2循环数组  方式1

l1 = ['aa' , 11, 'cc']
for (var i in l1){
console.log(i)  
}

for (var i in l1){
console.log(i,l1[i])                      //索引取值
}

方式2 
l2 = ['aaa','bb','cc','ddd']
for (var i= 0 ; i< l2.length;i++)
{
console.log(i,l2[i])
}

4.3 循环自定义对象
var d= {aa:'xx',b:'ss',}
for (var i in d){
console.log(i)
}       
                  //不能用.来取值
把 aa --->'aa'了 
没法 d.i取值   显示未定义 
d.aa 取值可以  

4.4 while 循环(不要忘了自加 成死循环了)

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

4.5 三元运算符

var a = 1; 
var b = 2 ;

var c = a > b ? a:b;                     //如果a>b 这个条件 取

python中: 
    a = 10 
    b = 11
    c = a if a>b else b 

?

1.18 函数

function f1() {console.log('xx')}

function f1(a,b){return a+b}
不能返回多个
    function f1(a,b){return a,b}                   // f1(2,3)---> 3

?

匿名函数

var num = function(a,b){console.log(a+b)}  
num                 ? (a,b){console.log(a+b)}
typeof num          "function"      
num(1,2)            3

?

自执行函数

立即执行函数，页面加载到这里
(function () {
    console.log('自执行函数')
})();                     //括号里可以传参

var f = function(v){return v;}

等于  箭头函数
var f = v;

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

函数外的就是全局的
var city = 'beijing';
function Bar(){
    var city = 'shanghai';
    return Bar;
}
}
var ret = f():
console.log(ret)

闭包

函数内使用函数外定义的变量   
var city = "BeiJing";
function f(){
    var city = "ShangHai";
    function inner(){
        console.log(city);
    }
    return inner;
}
var ret = f();
ret();   ---> ShangHai

?
赋值 ： 全局变量有 在函数里声明变量 之前打印无定义
?
不声明 可以打印

var age = 18;
function foo(){
  console.log(age);                    //分析到这一步的时候，发现你下面有age变量声明，那么age变量就在AO对象上村上了，并且值为undefined，所以函数在执行的时候，还没有到age=22这步的时候，age=undefined
  var age = 22;                        //如果没有这个变量声明，那么打印的结果应该是18
  console.log(age);
}
foo();                    // 问：执行foo()之后的结果是？

undefined
22 

调用：
函数可以覆盖 变量不可以覆盖

先声明-词法分析  AO对象：  age undesigned(变量) 成了 func（函数就成这个了）
  
后调用执行时  age 成了 22  第二三个 都成了

var age = 18;
function foo(){
  console.log(age);
  var age = 22;
  console.log(age);
  function age(){                     //发现age这个函数名也是变量，将OA上的变量给替换了，那么函数在执行的时候，去OA上找，发现OA是个函数，然后执行到age=22的时候，age才被重新赋值
  console.log("呵呵");
  }
  console.log(age);
}
foo();                    // 执行后的结果是？

结果：

　　function age(){
　　　　console.log("呵呵");
　　}
　　22
　　22

1.10 创建对象

1.11 面向对象

                  //ES5 定义类 用person  ES6 用class

封装属性

function Person(name)
{ this.name = name}

var p1 = new Person('tailiang')

p1.name                      // ---->太亮

封装方法

給类添加方法：原型链

Person.prototype.sum = function(a,b){return a+b};
                      //? (a,b){return a+b}
p1.sum(1,3)
                      //4

1.12 Date 对象

创建Date对象

                  //方法1：不指定参数
var d1 = new Date();                   //获取当前时间
console.log(d1.toLocaleString());                    //当前时间日期的字符串表示
                  //方法2：参数为日期字符串
var d2 = new Date("2004/3/20 11:12");
console.log(d2.toLocaleString());
var d3 = new Date("04/03/20 11:12");                    //月/日/年(可以写成04/03/2020)
console.log(d3.toLocaleString());
                  //方法3：参数为毫秒数，了解一下就行
var d3 = new Date(5000);  
console.log(d3.toLocaleString());
console.log(d3.toUTCString());  
 
                  //方法4：参数为年月日小时分钟秒毫秒
var d4 = new Date(2004,2,20,11,12,0,300);
console.log(d4.toLocaleString());                    //毫秒并不直接显示

var d1 = new Date(); 默认当前时间
d1         
d1.toLocaleString()  查看时间 标准的

date 对象的方法：

var d = new Date(); 
                  //getDate()                 获取日
                  //getDay ()                 获取星期 ，数字表示（0-6），周日数字是0
                  //getMonth ()               获取月（0-11,0表示1月,依次类推）
                  //getFullYear ()            获取完整年份
                  //getHours ()               获取小时
                  //getMinutes ()             获取分钟
                  //getSeconds ()             获取秒
                  //getMilliseconds ()        获取毫秒
                  //getTime ()                返回累计毫秒数(从1970/1/1午夜),时间戳

json 对象

js   json   java   python 

数据库里的数据 通过python 读出来 传给js  在前端展示出来

python 中有个json  java 中有一个json  js 有一个json对象   所有语言把自己的数据类型转换成 json
  
然后各自的语言就可以识别了 互相传输之后    

比如 python 中有字典  js理由自定义对象 有相同的 但是也有不同 不能直接传输  不能识别 

python --->  json  ---> js----->自定义对象展示

以前会有 xml  传输  但是太笨重 所以，大部分用json

转换：

python 
    先从数据库里拿到了数据
    import json 
    d1 = {'name':'yang'}
    json.dumps(d1)
  
json 
    拿到json转化为自定义对象
    反序列化
    json.parse(str1) 
    
    序列化
    json.stringify(obj1)

1.13 math 对象

Math.abs(x)      返回数的绝对值。

math.------->~

~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)      返回角的正切。

python 中 就不行 print(round(4.5))--->4
print(round(5.5)) ----->6 最接近的偶数

总结

运算符：

算数运算符 +-*/ % ++ --

函数

function 函数名（参数，参数。。）
｛
return xx 只能返回一个值，想返回多个用其他，数组，自定义对象
｝

匿名函数

var 变量名= function(参数...){}

自执行函数

（function(参数...){xxxx}）(实参...)

三元运算符

var a = 1
var b = 2
var c = a> b ? a: b

词法分析

箭头函数

var f = v => v;                    //有时会用到

面向对象

function Person(name ... 参数)
    ｛this.name = name｝

var p = new Person('chao'...)
p.name

封装方法

Person.prototype.sum = function(){}
p.sum () 

JSON
    反序列化 JSON.parse(xxx)
    序列化  JSON.Stringify(js的数据)

date

var d = new Date();
d.getDate();

Math

不用实例化对象

Math.floor(11111.1111)
Math.round(4.5)    ------>5