前端基础知识（整理自己学习使用）

1、js的数据类型

基础数据类型：string，number，boolean，undefined，null，symbol（es6新增）

复杂数据类型：Object

Symbol  和 BigInt  是 ES6 新增的数据类型:

• Symbol 代表独一无二的值，最大的用法是用来定义对象的唯一属性名。

• BigInt 可以表示任意大小的整数。

js判断数据的几种方法：

1、typeof（常见）

typeof：能判断所有值类型，函数。不可对 null、对象、数组进行精确判断，因为都返回 object

let str="str";
console.log(typeof str);   //"string"

let date = new Date();
console.log(typeof date);  //"object" 对象

let array = [1, 2, 3];
console.log(typeof array);  //"object" 数组也是一个对象

//函数在 ECMAScript 中被认为是对象，并不代表一种数据类型。
//函数有自己特殊的属性,通过 typeof 操作符来区分函数和其他对象
let func = function(){};
console.log(typeof func);    // "function" 函数

2、instanceof

双目运算符 a instanceof b ,判断a的构造器是否为b，返回值为布尔值

function b(){}
let a = new b;
console.log(a instanceof b);//true
console.log(b instanceof Object);//true
let arr = [1,2,3,4];
console.log(arr instanceof Array);//true

3、constructor构造函数

实例.constructor对象的原型链下（构造函数的原型下）有一个属性，叫constructor；

function a() {}
let a = new b;
console.log(a.constructor.name);    //a
console.log(b.constructor);         //Function（）{}
console.log(Function.constructor);  //Function（）{}

4、isArray 判断是否为数组

console.log(Array.isArray([]));//true
console.log(Array.isArray(new Array()));//true

5、prototype(通用但繁琐)

通过toString方法把对象直接转换成字符串，能检测出基本引用类型，比如：Date

Object.prototype.toString.call(str) === '[object String]'    // true
Object.prototype.toString.call(num) === '[object Number]'    // true
Object.prototype.toString.call(array) === '[object Array]'   // true
Object.prototype.toString.call(date) === '[object Date]'     // true
Object.prototype.toString.call(func) === '[object Function]' // true
Object.prototype.toString.call(symbol) === '[object Symbol]' // true
Object.prototype.toString.call(new Error()) === '[object Error]' //true

undefined与null的区别：

var a;
console.log(typeof a);  //undefined

var b=null;
console.log(typeof b);  //object

undefined ：代表未定义，不存在，变量被声明了还没有赋值，函数没有返回值，默认返回undefined等。

null：代表有值，是存在的，但是为空值。null 是 object，是一种特殊的空对象。

2、js中内置对象

js中对象分为3种：自定义对象 、内置对象、 浏览器对象

内置对象：Math、 Date 、Array、String等

 2.1 Math 对象

Math 对象不是构造函数，它具有数学常数和函数的属性和方法。

2.2 Date 日期对象

Date 对象和 Math 对象不一样，Date是一个构造函数，所以使用时需要实例化后才能使用其中具体方法和属性。Date 实例用来处理日期和时间。

//实例化Date日期对象
var date = new Date();

//获取指定时间的日期对象
var future = new Date('2021/1/1');

//方法和属性（部分）
//获取当年
var year = data.getFullYear(); 
//获取当月（0~11）
var Month= data.getFullMonth();

通过Date获取总毫秒数（基于1970年1月1日期的毫秒数）

2.3 数组对象

2.3.1 创建数组的两种方式

var arr = [1,"a",true];      //字面量方式

var arr1 = new Array();  //new Array() 创建了一个空数组，如果只传入一个参数，则参数规定了数组的长度，如果传入了多个参数，则参数称为数组的元素

 2.3.2 添加删除数组元素的方法

push(...);

pop();

unshift(...);

shift();

 2.3.3 数组排序

reverse();  //颠倒数组中元素的顺序，无参数

sort();     //对数组元素进行排序，有参数

var arr1 = [44, 13, 1, 7];
// arr1.sort(); //sort()只能对个位数排序 如果位数多了会出错
arr1.sort(function (a,b) {
      // return a - b; //升序的顺序排列
      return b - a; //降序的顺序排列
})
console.log(arr1);   // [44,13,7,1]

2.3.4 数组转换为字符串

toString()  :  把数组转换成字符串，逗号分隔

join('分隔符')  ：把数组中的所有元素转换为字符串，默认使用逗号分隔，若有分隔符分隔

<script>
      var arr = [1, 2, 3];
      console.log(arr.toString());    //1,2,3
 
      var arr1 = ['red', 'yellow', 'pink'];
      console.log(arr1.join()); //默认使用逗号连接   'red','yellow','pink'
      console.log(arr1.join('-'));     //'red'-'yellow'-'pink'
</script>

2.3.5 其他

concat()  :  连接两个或多个数组，不影响原数组，返回一个新的数组

slice(begin,end)   :   截取 

splice(起始位置，删除个数)  :  返回被删除的新数组

 2.4 字符串对象 

2.4.1 字符串不可变

指的是里面的值不可变，虽然看上去可以改变内容，但其实是地址变了，内存中新开辟了一个内存空间。

var str = 'abc';

str = 'hello';

//当重新给str赋值的时候，常量'abc'不会被修改，依然在内存中

//重新给字符串赋值，会重新在内存中开辟空间，这个特点就是字符串的不可变

2.4.2 返回字符位置

 indexOf('要查找的字符',[开始的位置])   //返回指定字符在字符串中的位置，找不到返回-1

lastIndexOf()    //从后往前找

2.4.3 根据位置返回字符

charAt(index)

返回指定位置的字符（index字符串的索引号）

str.charAt(0)

<script>
        // 根据位置返回字符
        // 1.charAt(index)根据位置返回字符
        var str = 'andy';
        console.log(str.charAt(3));   //y
        // 遍历所有字符
        for (var i = 0; i < str.length; i++) {
            console.log(str.charAt(i));   //a n d y
        }
</script>

2.4.4 字符串操作方法

concat(str1,str2,str3...)     //拼接两个或多个字符串，相当于+

substr(start,length)           //从start位置开始，length 取的个数

slice(start,end)                  //截取

substring(start,end)           //从start位置开始，截取到end位置，end取不到，基本和slice相同，但是不接受负值

<script>
        // 1.concat('字符串1','字符串2',...)
        var str = 'andy';
        console.log(str.concat('red')); //andyred
 
        // 2.substr('截取的起始位置','截取几个字符');
        var str1 = 'adljdb';
        console.log(str1.substr(2, 2)); //lj
    </script>

 <script>
        // 1.替换字符 replace('被替换的字符','替换为的字符'); 他只会替换第一个字符
        var str = 'andyandy';
        console.log(str.replace('a', 'b')); // bndyandy
        // 'dasdadaadas'把所有a替换成o
        var str1 = 'dasdadaadas';
        while (str1.indexOf('a') !== -1) {
            str1 = str1.replace('a', 'o');
        }
        console.log(str1); // dosdodoodos
 
        // 2.字符转换为数组 split('分隔符') 前面学过join把数组转换为字符
        var str2 = 'red,pink,blue';
        console.log(str2.split(',')); // ['red', 'pink', 'blue']
</script>