初始学习js

js简介

一、 什么是javascript

就是用这个语言操作网页的css和浏览器的功能 和 网络（显示效果和用户交互 前后端交互）

二、js是由什么组成的

1. 在任何地方添加任意一个script 然后在标签内部就可以写js代码

		 <script>
        //  在控制台打印666666
         console.log(666666)  
         </script> 

2. 在标签内部的事件属性中写js代码：行内写js

	 <a href="JavaScript:console.log(680)">去不了</a>
     <button onclick="console.log(690)">点我</button>

3. js文件写：外部导入
   ES5 和ES6

js的用法

**

关于变量的知识变量是js的三大难点之一

变量的作用
1.变量可以保存数据
2.获取标签元素
3.使用数据
有的数据太大了或者经常变换 不好写出逻辑 需要一个别名代码来使用这个数据这个时候就需要用到我们的变量名的书写方式（变量的书写规则）
1.区分大小写
2.变量名是$ _ 字母 数字不能开头

var mybook="bookname"
console.log(mybook)
// 小驼峰命名
var topBarBth=document.querySelector(".box")
// 大驼峰命名
var TopBarBth=document.querySelector(".box")
// 变量中能够保存什么数据

变量的声明

在js中用var来声明变量

		var a;//声明变量但是不赋值
        console.log(a)

结果

当变量啊已经赋值的时候再去改变a的值，a会保存最后一次的值

`		<script>
        	var a = 20;
       		 a=100;
        	console.log(a)
   		</script>

结果

js中可以进行加减乘除的
例如：
加法 (+)

  <script>
	   var a=50;
       var b=20;
       var c=a+b;
       console.log(c)
  </script>

结果

减法 (-)

	<script>
       var a=50;
       var b=20;
       var c=a-b;
       console.log(c)
    </script>

结果

乘法 (*)（注意不是x这个）

	<script>
       var a=50;
       var b=20;
       var c=a*b;
       console.log(c)
    </script>

结果

除法（/）

	<script>
       var a=50;
       var b=20;
       var c=a/b;
       console.log(c)
    </script>

结果

其中比较重要的是取余（%）

	<script>
       var a=50;
       var b=20;
       var c=a%b;
       console.log(c)
    </script>

结果

为什么是10呢？
因为a%b就是说：a整除以b然后能除尽的就是0，不能除尽的就是剩下的余数
50除以20余数为10（50/20*2=10）

js中的基本数据类型

什么是基本数据类型：是一种既非对象也没有方法的数据。在js中一共有七种基本数据类型。

一、undefined

undefined未定义，或者是定义了变量但是没有初始化
在使用 var 声明变量但未对其没有赋值时，这个变量的值就是 undefined
例如

		var a;
        alert(a==undefined);

结果

二、number （数值，基本类型）

Number 类型应该是 ECMAScript 中最令人关注的数据类型了，这种类型用来表示整数和浮点数值（浮点数值在某些语言中也被称为双精度数值）。

1. 整数数值：包括（十进制，八进制，十六进制）
2. 浮点数值：所谓浮点数值，就是该数值中必须包含一个小数点，并且小数点后面必须至少有一位数字。虽然小数点前面可以没有整数
3. 数值范围：由于内存的限制， ECMAScript 并不能保存世界上所有的数值
4. NaN：NaN，即非数值（Not a Number）是一个特殊的数值，这个数值用于表示一个本来要返回数值的操作数未返回数值的情况（这样就不会抛出错误了）。
5. 转换成数字类型：+(加)、-(减)、*(乘)、/(除)，会把类型转换成数字。另有 3 个函数可以把非数值转换为数值： Number()、 parseInt()和 parseFloat()。第一个函数，即转型函数 Number()可以用于任何数据类型，而另两个函数则专门用于把字符串转换成数值。

三、Boolean（布尔值，基本类型）

Boolean 类型是 ECMAScript 中使用得最多的一种类型，该类型只有两个字面值： true 和 false。（主要用在做项目的时候的逻辑判断）true和false都是关键字代表布尔值
布尔表达式：他表达的结果是布尔值

		if(20>18){
            console.log('可以开车')
        }

结果

四、null（）

null类型是第二个只有一个值的数据类型，这个特殊的值是 null。

null和undefined的区别

- null

代表了一个变量是有数据的 只不过还没有写业务数据；
typeof null：返回的是字符串object；
通常我们把null看成自有类型的唯一成员

- undefined
undefined表明只声明了变量没有赋值；
如果函数没有返回值，则返回undefined；
typeof undefined：返回的是字符串undefined；
认为NULL和undefined是相等的；===则返回false；

五、string（字符串，基本类型）

字符串可以由双引号（"）或单引号（'）表示，单双引号在ECMAScript 中的这两种语法形式没有什么区别。用双引号表示的字符串和用单引号表示的字符串完全相同。不过，以双引号开头的字符串也必须以双引号结尾，而以单引号开头的字符串必须以单引号结尾。引号不是字符是一种标记为了和变量名区别的它里面才是字符串

如果a和b有任意一个是字符串 就会把另外一个不是字符串的数据转换为字符串并且拼接起来
展示

		var a='dasdas'
        var b='skggg123'
        var c=a+b
        console.log(c)

结果

六、BigInt

是一种内置对象，它提供了一种方法来表示大于 2^53 - 1 的整数（了解）更多了解biglnt

七、Symbol

symbol 是一种基本数据类型（primitive data type）。Symbol() 函数会返回 symbol 类型的值，该类型具有静态属性和静态方法。它的静态属性会暴露几个内建的成员对象；它的静态方法会暴露全局的 symbol 注册，且类似于内建对象类，但作为构造函数来说它并不完整，因为它不支持语法：“new Symbol()”。（了解）更多了解symbol

引用数据

引用数据：对象object（函数 数组 时间 标签等等）
如何分清楚一个变量中保存的数据是什么类型的数据
typeof（数据容器）

		var a=typeof(10)
        console.log(a)

        var a1=typeof('10')
        console.log(a1)

        var a2=typeof(null)
        console.log(a2)

        var a3=typeof(20>18)
        console.log(a3)

        var a4=typeof(undefined)
        console.log(a4)

对象

对象-object 根数据一样用来保存数据的 只不过每一个数据都有自己设计“下标”’ 对象可以保存任何类型的数据
取值操作(取a的值存到数组的小标为0的位置)

		var a=20
        var arr=[a,200]
        console.log(a)```

结果

对象的成员有一种简便的写法（语法糖）
obj[‘name’]<===>等价于obj.name

数组

数组（Array）是有序的元素序列。 若将有限个类型相同的变量的集合命名，那么这个名称为数组名。 组成数组的各个变量称为数组的分量，也称为数组的元素，有时也称为下标变量。 用于区分数组的各个元素的数字编号称为下标。
数组的具体了解

函数

		var a=function(){
            console.log(9999);
            
        }
        // 函数的写法function关键字小括号，大括号
        console.log(a) 

函数不会自己运行大括号中的代码
数字的使用方式 往往是+ — * / %计算
字符串的使用方式 打印 渲染 +
a是一个函数 它的使用方式是运行大括号代码
a()函数的调用==》让大括号的代码运行起来
特点：调用一次运行一次
函数是一种非常特殊的对象（引用数据）因此typeof检测的结果不再是object 而是function

		var a=function(){
         
        }
        console.log(typeof(a));

结果

如何证明函数是一个引用数据

	var a=function(){
          
        }
        a.age=100
        var b=a
        b.age=400
        console.log(a.age)

若a的age为400说明函数真的是引用数据

如果是基本数据他应该打印100，不应该改变的
声明一个函数（声明式）

		function fn(){
            console.log(lll)//代码不会直接运行
        }

定义一个函数（定义式）

var a=function(){
           
        }

表达式

js的代码的形式
基本数据的直接量

        1
        2
        'hello world'

a ; 变量名
function fn（）{} ; 函数名

表达式和表达式就组成了语句 语句与语句配合就成了程序

var a=1; 变量声明初始化语句

基本数据是不可分割的 因为每一个数据 系统都已经设定好了
数组初始化表达式

var arr = [10,20,30] 数组直接量
var arr2 = new Array() 创建数组
var arr3 = new Array(3)  []=>length:3
var arr3 = new Array(10,20,30)		[10,20,30]

对象初始化表达式

var obj = {name:'xiaoming'}  对象直接量
var obj2= new Object()  创建一个对象

成员访问表达式，属性访问表达式
引用数据通过‘key’的形式访问成员（属性）或者通过点语法

调用表达式
取值得到一个函数 然后加上小括号就可以调用函数了
取值：变量可以取值 数组可以取值 只要能得到值的表达式 都是取值

算数表达式

var a=10
var b=20
var c=b-a
console.log(c)

var a=true
var b=false
console.log(a+b)

操作符

一元操作符

只操作一个变量的符号
a++就是先取a的值然后再加一并保存
++a就是先加一然后再保存取a的值
减减a和a减减也是一样的同上

逻辑操作符

布尔值和布尔表达式

		var a=true
        var b=20
        if(a){
            console.log(111)
        }

        var a=true
        var b=20
        if(b>18){
            console.log('可以开车')
        }

&& and 既要a满足也要b满足需要同时满足才行

        var a=22
        var b=20
        if(a>18&&b>18){
            console.log('可以喝酒')
        }

当有一者不满足时

        var a=17
        var b=20
        if(b>18&&a>18){
            console.log('可以喝酒')
        }else{
            console.log("不能喝酒")
        }

|| or 或者二者中满足一个条件即可 ，A表达式的布尔判定为true re=A注意：B表达式不运行（||这个符号在开发中 往往是优化的代码最常用的js符号）

        var a=17
        var b=20
        if(b>18||a>18){
            console.log('可以考大学')
        }else{
            console.log("不能考大学")
        }

当二者都不能满足的时候不成立

        var a=17
        var b=16
        if(b>18||a>18){
            console.log('可以考大学')
        }else{
            console.log("不能考大学")
        }

0作布尔判定时会被判定为flase，取一个变量的数据时没有声明就会报错 取的是最近一次保存的数据，js中变量保存数据已经有了就更新，没有就会隐藏声明，A是一个表达式，B也是一个表达式，re等于A表达式或者B表达式（如果A表达式判定为布尔表达式的值的false）re就是A否则为B表达式 如果re为A表达式那么B表达式不运行

        var a=(b=0)&&(c=30)
        console.log(a)
        console.log(b)
        console.log(c)

结果

！取反 a=！a把a的值取出来然后转换为布尔值true 再取反
可用于开关的思想：把一个变量中保存一个布尔值 ，然后在业务执行时 修改这个变量的值 为取反 然后通过变量的值执行分支业务

比较运算符

比较运算符a>20,a<b,a<=m
运算符==>底层cpu会去计算 会执行操作 得到一个结果
等号 = 运算符先执行等号右边然后赋值给等号左边的
‘+’ , ‘-’ 运算符
运算符优先级

条件操作符（三目运算符）

（开发时建议使用if else）
expr1？a:b expr1表达式会做布尔判定 判定的结果为true就会执行表达式a，否则执行b。
三目运算表达式的结果是a或者b
当判定为true时

        var a=20
        var re=a>18?20:{sex:'男'}
        console.log(re)

结果

当判定为false时

        var a=20
        var re=a<18?10:{sex:'男'}
        console.log(re)

结果

逗号运算符

多元运算符
var re=A,B,C,D,E,F 会把逗号隔开的表达式全部执行 最后运算的表达式的结果就是逗号运算符的结果
re==>F

var a,b,c,d,e=20
隐式操作 var a； var b; var c; var d; var e=20;

表达式计算

eval()可以解释运行由JavaScript源代码组成的字符串，并产生一个值；如果你使用了eval()，你要确定你确实需要使用它。

eval()只有一个参数。如果传入的参数不是字符串，它直接返回这个参数。如果参数是字符串，它会把字符串当成JavaScript代码进行编译，如果编译失败者抛出一个语法错误异常。如果编译成功，则开始执行这一段代码，并返回字符串中的最后一个表达式会或语句的值，如果最后一个表达式或语句没有值，则最终返回undefifined。如果字符串抛出一个异常，这个异常将把该调用传递给eval()。

关于eval最重要的是，它使用了调用它的变量作用域环境。也就是说，它查找变量的值和定义新变量和函数的操作和局部作用域中的代码完全一样。如果一个函数定义了一个局部变量x，然后调用eval(“x”)，它会返回局部变量的值。如果它调用eval(“x=1”)，它会改变局部变量的值。如果函数调用了eval(“vary=2;”),它声明了一个新的局部变量y，同样地，一个函数可以通过如下代码声明一个全局变量：
例如：

var arr=[1,2,3,4,4,3,423424235,4,5,4,53,45,39557,575,7,5,45,3,4];
var a=arr.join('+');
var b=eval(a);
console.log(a,b)

运行结果

数组的join方法就是将数组里面的每一个用一个符号链接起来

相等判断

== === != 没有捷径就是背基本数据和基本数据比较，引用数据和引用数据比较（转换为字符串再比较）

in语法

in语法 obj对象能否使用name成员
对象在js中是一种键值对的集合：key：value key是字符串 value是数据表达式

        var obj={age:20}
        console.log('toString' in obj)

结果

        var obj={age:20}
        console.log('undefined' in obj)

结果

语句

什么叫语句：表达式就是一个最简单的语句
单语句：每一个单语句结尾都要加上；
复合语句，语句组成程序

if语句

使用 if…else 语句在条件为 true 时执行代码，在条件为 false 时执行其他代码

        var a = 1
        if (a) {
            console.log(666)
        }

结果

小括号里面的东西会去做布尔判定，布尔值只有2种true或者false，1为true，0则为false
容易犯的错误：

        var a = 20
        if (15<a<18) {
            console.log('不应该执行才对')
        }else{
            console.log(666)
        }

结果：

按照道理是打666的的因为a为20，根本不在15到18之间应该是false的
结果执行了，因为15<20是false是错误的，为0，但是0确实<18呀，所以执行了代码且打印了
正确做法：

        var a = 20
        if (15<a&&a<18) {
            console.log('不应该执行才对')
        }else{
            console.log(666)
        }

结果：

if(){A} else{}语句 A判定为真就执行第一个大括号，假就执行else后面的大括号
js的执行引擎：如果执行体只有一个语句可以省略执行体

switch语句

switch 语句用于基于不同的条件来执行不同的动作。
使用 switch 语句来选择要执行的多个代码块之一。
if else==>更具有逻辑性 Switch==>更具有业务性
语法：

switch(n) {
  	case 1: 执行代码块 1
    break; 
  	case 2: 执行代码块 2
    break; 
  	default: 与 case 1 和 case 2 不同时执行的代码 
}

例如：

        var n = '2g';
        switch (n) {
            case 'g': 
            console.log('输出代码块 1')
                break;
            case '2g': 
            console.log('输出代码块 2')
                break;
            case '3g': 
            console.log('输出代码块 3')
                break;
            case '4g': 
            console.log('输出代码块 4')
                break;
                case '5g': 
            console.log('输出代码块 5')
                break;
            default: 
            console.log('输出代码块 6')
        }

运行结果：

当执行default时：

        var n = '7g';这里改一下
        switch (n) {
            case 'g': 
            console.log('输出代码块 1')
                break;
            case '2g': 
            console.log('输出代码块 2')
                break;
            case '3g': 
            console.log('输出代码块 3')
                break;
            case '4g': 
            console.log('输出代码块 4')
                break;
                case '5g': 
            console.log('输出代码块 5')
                break;
            default: 
            console.log('输出代码块 6')
        }

结果：

for语句

语法：

    <script>
        for (a; b; c) { d }
        执行流程
        {
            a
            {
                lcble: if (b) {
                    d;
                    c;
                    在执行label
                }
                else { 跳出for语句 也就是for语句执行完毕 }
            }
        }
    </script>

for循环编程时只使用了它非常简单的一个功能 希望重复得到的变化的便利店的值 值是有规律的变化
for循环的使用方法

        var arr=[1,2,3,4]
        for(var i=0;i<arr.length;i++){
            console.log(arr[i])
        }

结果

for循环中的业务的条件筛选

        var arr=[
            {age:20,name:'karen',rank:300},
            {age:14,name:'jack',rank:100},
            {age:11,name:'marry',rank:100},
            {age:19,name:'kate',rank:400},
            {age:15,name:'lsduj',rank:350},
        ]
        //打印数组中对象的名字
        for(i=0;i<arr.length;i++){
            console.log(arr[i].name)
        }
        //打印年龄大于14岁的对象的rank值
        for(i=0;i<arr.length;i++){
            if(arr[i].age>14){
                console.log(arr[i].rank)
            }
        }
        //打印年龄大于15周岁且rank大于250的name
        for(i=0;i<arr.length;i++){
            if(arr[i].age>15&&arr[i].rank>250){
                console.log(arr[i].name)
            }
        }

运算结果：

for的嵌套和业务的混合
需求取出数组中嵌套的数组的每一个元素

        var arr=[{name:'karen',age:'16'},[1,2,3,4],{name:'jack',age:'19'},]
        for(i=0;i<arr.length;i++){
                if(arr[i].typeof=Array){
                    for(j=0;j<arr[i].length;j++){
                        console.log(arr[i][j])
                    }
                }
        }

结果

箭头函数

箭头函数表达式的语法比函数表达式更简洁，并且没有自己的this，arguments，super或new.target。箭头函数表达式更适用于那些本来需要匿名函数的地方，并且它不能用作构造函数。
原来的函数

		var fn=function(a,b){
            return a+b
        }
        var re=fn(100,200)
        console.log(re)

箭头函数

		var fn=(a,b)=>{
            return a+b
        }
        var re=fn(100,200)
        console.log(re)

1.this

箭头函数不会创建自己的this，this是离它最近的嵌套的 function/方法这个函数的调用者 直到顶层都没有就是window

2.

如果箭头函数的执行体只有一个表达式 就是返回值 那么可以省略大括号

			var fn2=(a,b)=>a+b
			var re=fn2(10,20)
            console.log(re)

结果

如果箭头函数的形参只有一个 可以省略参数体小括号

			var fn3=a=>a*a
			var re2=fn3(100)
			console.log(re2)

结果

模块化

js代码有3种方式把js脚本写在页面中
1.行内式:js引擎要去执行的标签的某些(事件)属性中
2.嵌入式
3.导入 src的地址是一个js的路径 会加载js编码(jsonp)
引入文件

    <script type="module">
        import {a} from "./15-模块化/src/test.js"		
    </script>

使用 import 语句，然后你被花括号包围的用逗号分隔的你想导入的功能列表，然后是关键字 from，然后是模块文件的路径然后把 type=“module” 放到script标签中，来声明这个脚本是一个模块，只能在模块内部使用 import 和export 语句；不是普通脚本文件。
详细解答https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Modules

类

类是用于创建对象的模板。他们用代码封装数据以处理该数据。 JS 中的类建立在原型上，但也具有某些语法和语义未与 ES5 类相似语义共享。
语法：
请使用关键字 class 创建类。（类名建议大写）
请始终添加名为 constructor() 的方法：

       class myname{
        constructor() {}
}

不能先用再声明，要先声明再用
类语法有两个组成部分：匿名类和声明类
1声明类

       class myname{
        constructor() {}
}

2匿名类

		var fn = class myname {
            constructor() { }

        }
        var re = new fn
        console.log(re)

js没有类 是原型的思想设计的类,但是学习和使用这个技术时,心中要用类的思想学习
Person类的内部可以写一个constructor方法 用这个类创建对象时 就会运行构造函数
不写构造函数 系统会默认有一个空的构造运行

（本作品作为个人学习笔记，有网上适当借鉴，无盈利目的）