javascript基础

JavaScript入门

JavaScript分为三个部分：

　　1，ECMAScript 标准-----js的基本语法
　　2，DOM------------Document Object Model 文档对象类型
　　3，BOM----------Browser Object Model 浏览器对象模型

JavaScript是什么？

　　是一门脚本语言
　　是一门解释性语言
　　是一门动态类型的语言
　　是一本基于对象的语言

　　是一门弱类型的语言

JavaScript代码的书写注意：

　　1，在一对script的标签中有错误的js代码，那么该错误代码后面的js代码不会执行
　　2，第一队script标签中有错误，不会影响后面的script标签中的js代码
　　3，script标签中可以写什么内容 type="text/javascript"是标准写法。或者写Language="JavaScript"都可以。但是目前在我们HTML页面中，type和Language都可以省略
　　4，有可能会同时出现这种情况：script标签中可能会同时出现type和Language的写法
　　5，script标签在页面中可以出现多对
　　6，script标签一般放在body标签的最后，有的时候会在head标签中
　　7，如果script标签是引入的外部js文件的作用，那么这对标签中不能写任何的js代码，如果要写，重新写一堆script标签，里面写代码

JavaScript中的注释：

　　1，单行注释： //

　　2，多行注册： /**/

JavaScript中变量和数据类型

变量

js中声明变量都用 var 存储数据，数据都应该有对应的数据类型

变量声明（有var 有变量名字，没有值）

变量声明的方式：var 变量名字；

变量初始化（有var 有变量名字 有值）

变量声明并初始化的方式：var 变量名字 = 值;

变量命名的注意：

　　js中的每一行代码结束都应该有分号；（写代码有分号的习惯）

　　js中的大小写是区分的 ：var N =10；n和N不是一回事

　　js中的字符串可以使用单引号，也可以使用双引号。

数据类型

原始数据类型：number、string、boolean、null、undefined、object

　　number 数字类型（整数和小数）

　　string 字符串类型（值一般都用单引号或者双引号括起来）“34”

　　boolean 布尔类型（值只有两个 true真，false假）

　　null 空类型 值只有一个null，一个对象指向为空了，此时可以赋值为null

　　undefined ：未定义，值只有一个undefined

　　　　什么情况下是undefined:

　　　　　　1,变量声明了但没有赋值，结果是undefined

　　　　　　2，函数没有明确返回值，如果接收了结果也是undefined

　　　　如果一个变量的结果是undefined和一个数字进行计算，结果NaN不是一个数字，没有意义

　　object 对象

类型转换

1，其他类型转number型

　　1.parseInt();//转整数

console.log(parseInt("10"));//10
console.log(parseInt("10afrswfdsf"));//10
console.log(parseInt("g10"));//NaN
console.log(parseInt("1fds0"));//1
console.log(parseInt("10.98"));//10
console.log(parseInt("10.98fdsfd"));//10

　　2，parseFloat();//转小数

console.log(parseFloat("10"));//10
console.log(parseFloat("10afrswfdsf"));//10
console.log(parseFloat("g10"));//NaN
console.log(parseFloat("1fds0"));//1
console.log(parseFloat("10.98"));//10.98
console.log(parseFloat("10.98fdsfd"));//10.98

　　3，number();//转数字

console.log(Number("10"));//10
console.log(Number("10afrswfdsf"));//NaN
console.log(Number("g10"));//NaN
console.log(Number("1fds0"));//NaN
console.log(Number("10.98"));//10.98
console.log(Number("10.98fdsfd"));//NaN

　　三者之间的差别：

　　　　想要转整数用parseInt()。想要转小数用parseFloat()。想要转数字:Number();但要比上面的两种方式严格。

2，其他类型转string型

　　1， .toString()；// 方法

var num=10;
console.log(num.toString());//字符串类型

　　2，String();//方法

var num1=20;
console.log(String(num1));

　　两者之间的差别：

　　　　如果变量有意义调用.toString()使用转换
　　　　如果变量没有意义使用String()转换

3，其他类型转boolean型

　　Boolean(其他类型)；

console.log(Boolean(1));//true
console.log(Boolean(0));//false
console.log(Boolean(11));//true
console.log(Boolean(-10));//true
console.log(Boolean("哈哈"));//true
console.log(Boolean(""));//false
console.log(Boolean(null));//false
console.log(Boolean(undefined));//false

JavaScript中的函数

 函数定义的两种方式：

　　第一种：直接定义函数

　　　　function 函数名(参数){ 函数体 }

// 函数定义
function f1() {
      console.log("哈哈，我又变帅了");
}
// 函数调用
f1();

　　第二种：函数表达式

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

// 函数定义
var f2=function () {
      console.log("真帅");
};
// 函数调用
f2();

JavaScript中的预解析

预解析：就是在解析代码之前把当前作用域下var和function关键字的事先声明，并在内存中安排好。然后再从上到下执行js语句。

　　　　预解析只会发生在通过var定义的变量和function上。

预解析做什么事情？

　　把变量的声明提前了----提前到当前所在的作用域最前面。只是声明提前，不会提前定义

　　函数声明也会被提前----提前到当前所在的作用域最上面，并且该函数也会被提前定义，及在改函数上面调用该函数也不会报错

注意：对于函数表达式的函数，并不会提前定义，只会提前声明了该函数表达式。

 预解析的案例：

// 变量声明提前
//把变量的声明提前了
console.log(num);//undefined
var num =10;

————————————————————————————————
// 函数声明提前
f1();// 哈哈哈
function f1() {
     console.log("哈哈哈");
}


-------------------------------------------------------------------------
函数声明比较特殊的一个例子
f1();
console.log(c);//9
console.log(b);//9
console.log(a);//报错

function f1() {
     var a = b = c = 9;
     console.log(a);//9
     console.log(b);//9
     console.log(c);//9
}
**********解析
原因：
function f1() {
     var a;//局部变量
     a=9;
     //隐式全局变量
     b=9;
     c=9;
     console.log(a);//9
      console.log(b);//9
      console.log(c);//9
}
f1();
console.log(c);//9
console.log(b);//9
console.log(a);//报错




-------------------------------------------------------------
//函数表达式
f1();//报错

var f1 = function () {
       console.log(num);
       var num=10;
}

JavaScript中的对象

创建对象的三种方式：

　　1，调用系统的构造函数创建对象：var 变量名 = new Object（ ）；

 //实例化对象
var obj = new Object();
//对象有特征------属性和行为------方法

//添加属性-----如何添加属性？  对象.名字=值；
obj.name = "小苏";
obj.age = 18;
obj.sex = "女";
obj.eat = function () {
      console.log("喜欢吃");
};
obj.play =function () {
     console.log("喜欢玩");
};

console.log(obj.name);//获取输出
console.log(obj.age);
console.log(obj.sex);
obj.eat();
obj.play();

　　2，自定义构造函数创建对象（结合第一种的需求通过工厂模式创建对象）
　　　　1，工厂模式创建对象

 //一次性创建多个对象：把创建对象的代码封装在一个函数中
function createObject(name,age) {
       var obj = new Object();
       // obj.name = "小芳";
       obj.name=name;
       // obj.age=10;
       obj.age=age;
       obj.sayHi = function () {
             console.log("我叫"+this.name+"今年"+this.age+"岁了");
         };
       return obj;
}

//创建人对象
var par1=createObject("小张",20);
par1.sayHi();
var par2=createObject("小王",30);
par2.sayHi();

　　　　2，自定义构造函数的方式创建对象

　　　　　　自定义构造函数创建对象,我自己定义一个构造函数，自定义构造函数，创建对象
　　　　　　函数和构造函数的区别：名字是不是大写（首字母是大写）

function Person() {
     this.name="小明";
     this.age=10;
     this.sayHi=function () {
           console.log("哈哈");
      }
}

//自定义构造函数创建对象：先自定义一个构造函数，创建对象
var per = new Person();
console.log(per.name);
console.log(per.age);
per.sayHi();

　　3，字面量的方式

　　　　字面量创建对象的缺陷:一次性的对象

//字面量方式创建对象
var obj = {};
obj.name = "小白";
obj.age = 10;
obj.sayHi = function () {
      console.log("我是。。。");
};
obj.sayHi();

-----------------------------------------------
//优化后的写法
var obj2 = {
      name: "小明",
      age: 20,
      sayHi: function () {
          console.log("你好");
       },
       eat: function () {
          console.log("吃了");
        }
};

obj2.sayHi();
obj2.eat();

对象中的点语法和另一种获取属性的方法

点语法

点语法：对象.名字=值;对象.名字=函数;    没有什么点，就有了

对象没有什么，只要点了，通过点语法，那么就可以为对象添加属性或者方法

点语法也是第一种获取属性的方法。

获取属性的另一种方法

对象名[属性名]：可以设置可以获取

function Person(name,age) {
      this.name=name;
      this.age=age;
      this.play=function () {
          console.log("玩游戏");
       }

}
var obj = new Person("卡卡西",20);

//可以将.name换成["name"]
obj["name"]="佐助";
        
console.log(obj.name);

对象中的json格式数据

JSON格式的数据：一般都是成对的,是键值对

JSON也是一个对象，数据都是成对的，一般json格式的数据无论是键还是值都是用双引号括起来的。

JSON和对象是相同的，能对对象使用的方法，JSON都可以

var json = {
       "name":"小明",
       "age":"10",
       "sex":"男"
};

// 访问属性的方法和对象都相同
console.log(json.name);
console.log(json["name"]);

对象的遍历

对象不能使用for循环来遍历，应该使用 for --- in 来遍历

注意： 在for--in循环中，不能使用   对象名.key 的方式来获取value，这样是给对象中添加了key这个属性

　　　应该使用：对象名[key]

var json = {
      "name": "小明",
      "age": "10",
      "sex": "男"
};

// for---in遍历
for(var key in json)
{
     // console.log(key);//json对象中属性的名字

     //不能.key因为用.时如果对象中有点后后面的内容，则输出对应的值，没有这个名字则添加这个名字的属性
    console.log(json[key]);

    //对象中确实有这个属性对象.属性的名字  或者对象[属性名字]
}

简单类型和复杂类型

数据类型分类

原始数据类型：number、string、boolean、undefined、null，object
　　基本类型（简单类型），值类型：number，string，boolean
　　复杂类型（引用类型）：object
　　空类型：undefined，null

存储空间

值类型的值在那一块空间存储： 栈

引用类型的值在那一块空间存储： 栈和堆 对象在堆上存储，地址在栈上存储

值类型与引用类型传递什么

值类型中间传递的是值。值类型作为函数的参数，传递的是值

引用类型之间传递的是地址（引用）。引用类型作为函数的参数，传递的是地址

值类型和引用类型传递代码

//值类型与引用类型
var nume = 10; //值类型，值在栈上
var obj = {};//复杂类型，对象在堆，地址（引用）在栈


------------------------------------------------------------------
// 值类型的传递
var num = 10;//值类型
var num2 = num;//传递值

function f1(x) {
      x = 100;
}

var num = 10;
f1(num);
console.log(num);



----------------------------------------------------------------------
// 引用类型的传递
var obj = {
      name: "小明"
};

function f2(obj2) {
      obj2.name = "小红";
}

console.log(obj.name);//小明

f2(obj);
console.log(obj.name);//小红

JavaScript中的内置对象

MDN在线查询文档

实例对象与静态对象

实例对象：通过构造函数创建出来，实例化的对象

静态对象：不需要创建，直接就是一个对象，方法（静态方法）直接通过对象名调用

实例方法必须通过实例对象调用

静态方法必须通过大写的对象调用

Math

 Math为一个静态对象

Math.ceil();-----------向上取整

Math.floor();------向先取整

Math.pi-----------π

Math.Max()-------一组数的最大值

Math.Min()-------一组数的最小值

Math.abs()-------绝对值

Math.random()------生成一个伪随机数。返回一个浮点(0-1)伪随机数，可以*和+

Math.sqrt()------开平方

Math.pow()-------一个数字的多少次方

//返回π的值
console.log(Math.PI);


-------------------------------------------------------------------------------
//方法abs（）；返回参数的绝对值   null返回0  其他形式都返回NaN
console.log(Math.abs(-1));//1
console.log(Math.abs(-2));//2
console.log(Math.abs(null));//0
console.log(Math.abs("string"));//NaN


-----------------------------------------------------------------------------------
//ceil（）；返回参数的向上取整
console.log(Math.ceil(12.001));//13
console.log(Math.ceil(12.991));//13
console.log(Math.ceil(12.00001));//13


-----------------------------------------------------------------------------------
//floor（）；返回参数的向下取整
console.log(Math.floor(12.001));//12
console.log(Math.floor(12.991));//12
console.log(Math.floor(12.00001));//12


-------------------------------------------------------------------------------------
//fround（）；返回参数   离它最近的单精度浮点数形式的数字
console.log(Math.fround(2));//2
console.log(Math.fround(2.1));//2.0999999046325684
console.log(Math.fround(2.9));//2.9000000953674316


---------------------------------------------------------------------------------
//max（）；返回一组数的最大值
console.log(Math.max(12,3,4,67,100,42));//100


----------------------------------------------------------------------------------
//min（）；返回一组数的最小值
console.log(Math.min(12,4,2,1,0,100));//0


-----------------------------------------------------------------------------------
//pow（x,y）；返回x的y此幂
console.log(Math.pow(20,2));//400


-----------------------------------------------------------------------------------
//sqrt();开平方
console.log(Math.sqrt(16));//4


----------------------------------------------------------------------------------
//random（）；返回一个浮点(0-1)伪随机数；
console.log(Math.random());
console.log(Math.ceil(Math.random()*5));//产生1-5的伪随机数
console.log(Math.floor(Math.random()*100)+1);

Date

 Date为实例对象

用于不支持HTML5的浏览器创建Date对象：var dt = +new Date();//一种特殊的写法，只适用于Date的对象

var dt = new Date();

dt.getFullYear();-----------------------年

dt.getMonth();------------------月--->从0开始到11

dt.getDate();--------------------日

dt.getHours();-------------------小时

dt.getMinutes();----------------分钟

dt.getSeconds();----------------秒

dt.getDay();---------------------星期 --->从0开头，0代表周日

dt.toDateString();---------------日期

dt.toLocaleTimeString();--------日期

dt.toTimeString();----------------时间

dt.toLocaleTimeString();--------时间

dt.valueOf();---------------------毫秒

var date2 = Date.now();-------------毫秒值

// 得到毫秒值
var date2 = Date.now();
console.log(date2);//获得从1970年到现在的毫秒数
var dt = new Date();
console.log(dt.valueOf());//毫秒值

-------------------------------------------------------------
var dt= new Date();
//获取年份
console.log(dt.getFullYear());
//获取月份
console.log(dt.getMonth());//获取的月份从0开始,真实月份需要加1
//获取日期
console.log(dt.getDate());
//获取小时
console.log(dt.getHours());
//获取分钟
console.log(dt.getMinutes());
//获取秒
console.log(dt.getSeconds());
//获取星期
console.log(dt.getDay());//星期从0开始，0代表星期日


----------------------------------------------------------------------
var dt = new Date();
//英文格式的日期
console.log(dt.toDateString());//Sun Mar 08 2020
// 数字格式--日期
console.log(dt.toLocaleDateString());//2020/3/8


-------------------------------------------------------------------------------
var dt = new Date();
//小时分钟秒
console.log(dt.toTimeString());//20:36:38 GMT+0800 (中国标准时间)
//分上下午的小时分钟和秒
console.log(dt.toLocaleTimeString());//下午8:36:38

String

字符串特性：不可变性，字符串的值不可变

字符串可以通过索引访问字符串中的某个值，但是是只读的

 .length---------字符串的长度

.charAt(索引)-----返回值是只读索引位置的字符串，超出索引则返回空字符串

.fromCharCode(数字值,可以是多个参数)-----返回ASCII码对应的值

.concat(字符串1，字符串2.....)-----返回这些字符串合成的字符串

.indexOf() 返回调用该方法的字符串中是否含有该参数，含有就返回索引。参数还可以有两个，第二个参数决定开始的位置。没找到返回-1

.lastIndexOf() 方法返回调用String 对象的指定值最后一次出现的索引，在一个字符串中的指定位置 fromIndex处从后向前搜索

.replace() 方法用于替换，如果元字符串有第一个参数，则替换为第二个参数

.slice() 方法提取某个字符串的一部分，并返回一个新的字符串，且不会改动原字符串

.split() 方法使用指定的分隔符字符串将一个String对象分割成子字符串数组，以一个指定的分割字串来决定每个拆分的位置

.substr() 方法返回一个字符串中从指定位置开始到指定字符数的字符。

.substring() 方法返回一个字符串在开始索引到结束索引之间的一个子集(不包含结束),或从开始索引直到字符串的末尾的一个子集

.toLocaleLowerCase()方法根据任何指定区域语言环境设置的大小写映射，返回调用字符串被转换为小写的格式。

.toLowerCase() 转小写

.toLocaleUpperCase() 转大写

.toUpperCase() 转大写

.trim() 方法会从一个字符串的两端删除空白字符

// .length:字符串长度
var str="12345";
console.log(str.length);


---------------------------------------------------------------------
// char(索引)：返回索引位置的字符。超出位置返回空字符
var str = "qwertyuio";
var rs=str.charAt(4);
console.log(rs);//t


----------------------------------------------------------------
//.fromCharCode(数值):返回该数值对应的ASCII码
var str=String.fromCharCode(65);
console.log(str);


-----------------------------------------------------------------------
// .concat(字符串)；拼接字符串
var str="what";
console.log(str+" ara "+"you ");
var str="小苏";
console.log(str.concat("喜欢","凤姐"));


-----------------------------------------------------------------------
//.indexOf()  返回调用该方法的字符串中是否含有该参数，含有就返回索引。参数还可以有两个，第二个参数决定开始的位置
var str= "Hello word";
console.log(str.indexOf("l"));//2


--------------------------------------------------------------------------------
//.lastIndexOf( )  从后往前找，但索引还是从前往后排
var str= "Hello amen";
console.log(str.lastIndexOf("e"));//8


-------------------------------------------------------------------------------
//.replace  替换方法
var str = "小苏好帅哦，真的好勇敢";
if (str.indexOf("小苏") != -1) {
        str = str.replace("小苏", "小杨");
} else {
       console.log("不存在");
}
console.log(str);


----------------------------------------------------------------------------
//.slice()  返回从参数1到参数2-1的一个新字符串并返回
var str = "hello word";
var str1 = str.slice(3,6);
console.log(str1);


----------------------------------------------------------------------------
//.split()  按照传入参数将原字符串分隔成多个字符串.第二个参数决定切割后留下的字符串个数
var str = "乔峰|慕容|凤姐|梅超风|小苏";
var arr=str.split("|",3);
 for(var i=0;i<arr.length;i++){
        console.log(arr[i]);
}


--------------------------------------------------------------------------------
//.substr()返回一个字符串中从指定位置开始到指定字符数的字符
var str= "哈哈，小苏好帅哦";
str=str.substr(5,2);
console.log(str);//好帅


----------------------------------------------------------------
//.substring()
var str= "哈哈，小苏真的好帅哦";
str= str.substring(3,7);
console.log(str);


---------------------------------------------------------------
//.toLocaleLowerCase()  转小写
//.toLowerCase()      转小写
var str ="HELLO";
str= str.toLocaleLowerCase();
str= str.toLowerCase();
console.log(str);


---------------------------------------------------------------
//toLocaleUpperCase()  转大写
//toUpperCase()      转大写
var str = "hello";
str = str.toLocaleUpperCase();
str = str.toUpperCase();
console.log(str);


-------------------------------------------------------------------
//trim()  删除开头和结尾的空格
var str = "   ,真好。    ";
str = str.trim();
console.log("======"+str+"=======");

Array

Array.isArray(对象)-------判断这个对象是不是数组         instanceof关键字：a instanceof Array;判读a是不是数组

.concat(数组1，数组2...)----将调用该方法的数组与参数数组拼接

.every(函数)-----返回值是布尔类型，函数作为参数使用，函数中有三个参数，第一个参数是元素值，第二个参数是索引值第三个参数是原来的数组（没用） 如果这个数组中每个元素的值都符合条件，最后才返回true

.filter(函数)----返回的是数组中每一个元素都复合参数函数条件的元素，组成了一个新的数组

.push(值)-----把值追加到数组中，加到最后。返回值为插入后的长度

.pop()-------删除数组中最后一个元素，返回值就是删除的这个值

.shift()-----删除数组中第一个元素，返回值就是删除的这个值

.unshift(值)------向数组的第一个元素前面插入一个新的元素，返回值为插入后的长度

.forEach(函数)-----遍历数组使用---相当于for循环

.indexOf(值)------找数组中是否有这个值，有返回这个值得索引

.join("字符串")-----在每个元素中间添加该字符串，返回添加后的字符串

.map(函数)-------数组中每个元素都要执行这个函数，把每个元素执行过这个函数后的到新的元素 放在新的数组中

.reverse()-----反转

.sort()-----排序，可能不稳定，则需要添加固定代码

.slice(参1，参2)-----从参1到参2前一个元素截取出来一个新数组并返回

.splice(参1，参2，参3)-----参1代表开始元素，参2代表要删除的个数，参数3代表要替换的元素。一般用于删除数组中的元素，或者替换元素，或者插入元素

//对象是不是数组类型：两种
//1,  instanceof
var obj = [];
console.log(obj instanceof Array);//true
//2 使用数组的 .isArray方法
console.log(Array.isArray(obj));//true


----------------------------------------------------------------------
.from() 产生一个新的数组和原数组一样
var arr = ['a','b','c'];
var newArr=Array.from(arr);
console.log(newArr);


----------------------------------------------------------------------
//.concat 拼接数组
var arr1=[10,20,30,40];
var arr2= [40,50,60,70];
console.log(arr1.concat(arr2));


------------------------------------------------------------------------
// .every(函数)   返回布尔类型。当数组中所有元素都满足函数为true
//a----元素的值
//b----索引的值
//c----谁调用了这个方法，那么c就是谁-----arr
var arr = ["小小明明1","小曹操674","小白白214","笑眯眯a"];
var flag = arr.every(function (ele,index) {
         return ele.length>4;
});
console.log(flag);


------------------------------------------------------------------------
//  .filter(函数)  返回所有满足函数的值
var arr = [10,20,30,40,50];
var newarr=arr.filter(function (ele) {
     return ele>30;
});
console.log(newarr);


-------------------------------------------------------------------------
// push();追加到最后，pop();删除最后一个并返回
var arr = [10,20,30,40,50];
arr.push(80);
console.log(arr);
var result=arr.pop();
console.log(result);
console.log(arr);


-------------------------------------------------------------------------
// shift()    删除第一个元素
// unshift(值)   追加到第一个元素之前，成为第一个元素
var arr = [10,20,30,40,50];
arr.unshift(80);
console.log(arr);
var result=arr.shift();
console.log(result);
console.log(arr);


------------------------------------------------------------------------
// forEach(函数)；遍历数组
var arr = [10,20,30,40,50];
arr.forEach(function (ele,index) {
     console.log(ele+"========="+index);
 });


----------------------------------------------------------
// indexOf(参数); 查找参数的索引位置
var arr = [10,20,30,40,50];
var index = arr.indexOf(30);
console.log(index);


------------------------------------------------------------
//.join()每个元素中间添加参数字符
var arr = ["小白","小绿","小红","小黄"];
var str = arr.join("|");
console.log(str);


--------------------------------------------------------------
//.map(函数)每个元素都执行这个函数，返回执行后的结果
var arr = [1,4,9];
var roots = arr.map(Math.sqrt);
console.log(roots);


---------------------------------------------------------------
//.reverse() 反转
var arr = [10,20,40,50];
arr.reverse();
console.log(arr);


------------------------------------------------------------
//.sort()    排序------如果不传参则不稳定
var arr = [10,30,20,50,40];
//arr.sort();// 不稳定
arr.sort(function (a,b) {
     if(a>b){
        return 1;
     }else if (a==b){
         return 0;
     }else {
         return -1;
     }
 });
 console.log(arr);


------------------------------------------------------------
//.slice(参1，参2)    截取
var arr = [10,20,30,40,50,60,70];
var newArr = arr.slice(3,4);
console.log(newArr);


---------------------------------------------------------------
// .splice(参1，参2，参3)   替换
var arr = [10,20,30,40,50];
arr.splice(2,0,60);
console.log(arr);
arr.splice(2,1);
console.log(arr);