JavaScript知识总结（一）_.sort(function(before, after)-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_46416772/article/details/125230910

1. 四种输出方式

（1）弹出警告框 window.alert()

（2）写入HTML文档 document.write()

（3）写入HTML元素 document.getElementById.innerHTML=""

（4）写入浏览器控制台 console.log()

2. 两大数据类型

（1） 基本数据类型（值类型）：字符串(String)、数字(Number)、布尔(Boolean)、空(Null)、未定义(Undefined)、独一无二(Symbol) 栈内存

注： 0/0为NaN（非数字），正数/0为infinity（正无穷大），负数/0为-infinity（负无穷小）

typeof(NaN)==> Number，typeof(null) ==> Object，typeof(undefined) ==> undefined

/* 字符串 以字符数组的形式保存 */
var str = "12";
//方法
str.concat('');    //拼串
str.slice(start,end);    //提取部分substr() substring(start,end)
str.indexOf('');    //第一次出现位置
str.lastIndexOf('');    //最后一次出现的位置
str.startsWith('');    //是否以开头
str.endsWith('');    //是否以结尾
str.toUpperCase();    //转换为大写
str.toLowerCase();    //转换为小写
str.charAt(index);    //返回指定位置的字符
str.split(",");    //将字符串拆分为数组
str.trim();    //移除字符串首尾空白
//字符串模板与字符串插值
var m = `${}`;

/* 数字 */
var num = 1;

/* 布尔 */
var bool1 = true;
var bool0 = false;

/* 空 */
var n = null;

/* 未定义 */
var undef;

/* 非数字 */
var nan = str-undef;

（2）引用数据类型（对象类型）：对象(Object)、数组(Array)、函数(Function)、正则(RegExp)、日期(Date) 堆内存

对象:

/* 对象 */
var obj = {
    //属性
    firstName:"Liang",
    lastName:"tutu",
    //方法
    fullName:function(){
        return this.firstName+" "+this.lastName;
    }
    //访问器getter和setter
    get fulName(){
        return this.firstName+" "+this.lastName;
    }
    set lastame(last){
        this.lastName = last;
    }
};
//读取属性（两种寻址方式）
obj.firstName;
obj["lastName"];
//以函数形式访问
obj.fullName();
//以属性形式访问
obj.fulName;
//遍历对象的属性
for(i in obj){
    console.log(obj[i]);
}
//添加属性
obj.sex = "男";
//添加方法
obj.f = function(){};
// 删除属性
delete obj.sex;
//修改属性
obj.sex = "女";

/* 对象显示：若直接输出obj则显示为Object */
var arr = obj.values();
var str = JSON.stringify(obj);

/* 对象方法 */
//更改或添加属性值
Object.defineProperty(obj,"lastName",{value:"kaka"});
//添加getter和setter
Object.defineProperty(obj,"fullName",{get:function(){}});

/* 构造器 */
// 通过构造函数创建类
function Person(name,sex){
    this.name=name;
    this.sex=sex;
}
// 创建类的实例--对象
var p = new Person("haha","女");

/* 原型 prototype属性：为对象构造器添加新属性或新方法*/
Person.prototype.age = 17;
Person.prototype.f = function(){};

数组：

/* 数组 */
var arr1 = [1,2,7];
var arr2 = [1,2,6,9];
/* 方法 */
//搜索数组中的元素，并返回它第一次出现的位置；若找不到，则返回-1。
arr1.indexOf(item,startIndex);
//将数组转换为一个字符串，默认以,隔开 
arry.join("#");  
//连接两个或更多的数组，并返回结果。
arr1.concat(arr2,11);    
//选取数组的一部分，并返回一个新数组。
arr1.slice(startIndex,endIndex); 
//从数组中删除元素，返回被删除的元素。  
arr1.splice(startIndex,number);  
//替换index<arr1.length,返回被替换元素；插入index>=arr1.length新元素在index之前,返回[]。
arr1.splice(index,number,newValue); 
//反转数组项顺序
arr1.reverse();
//排序，默认从小到大
arr1.sort(function(before,after){
    return before-after; //>0交换,<0不交换
});
//遍历，数组每个元素都执行一次回调函数。
arr1.forEach(function(value,index,arr){});
//映射，通过指定函数处理数组的每个元素，并返回处理后的数组。
arr1.map(function(value,index,arr){});
//过滤，检测数值元素，并返回符合条件所有元素的数组。
arr1.filter(function(value,index,arr){});
//判断数组中每一项都是否满足条件，只有所有项都满足条件，才会返回true。
arr1.every(function(value,index,arr){});
//判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回true。
arr1.some(function(value,index,arr){});
//在数组中查找符合条件的元素，找到就返回并且终止循环,找不到就是ubdefined.
arr1.find(function(value,index,arr){});

函数：

/* 函数 this指向函数执行时的当前对象*/
f();    //函数提升
//函数声明
function f(){}
//函数表达式
var fc = function(a,b){
    //隐式参数arguments=[a,b]
    sum1 = arguments[0]+arguments[1];
    //显示参数
    sum2 = a+b;
};
//调用
fc(1,2);
//立即执行函数
(function(){})();

/* 箭头函数 绑定外层this的值 */
const sum = (a,b) => a+b; //(参数)={return 表达式;}

/* 预定义函数方法call()和apply(),改变this的值 */
var fco = fc.call(fco,1,2);    //传参
var fao = fc.apply(fao,[1,2]);    //传数组

闭包：当一个函数的返回值是另外一个函数，而返回的那个函数如果调用了其父函数内部的其它变量，如果返回的这个函数在外部被执行，就产生了闭包。

/* 
特性：1.函数嵌套函数
      2.函数内部可以引用外部的参数和变量，避免全局变量污染
      3.参数和变量不会被垃圾回收机制回收，常驻内存，易造成内存泄露
*/
//方式一：
var f1 = function(x){
    var y = 1;
    function f2(){
        return x+y;
    }
    f2();
}
f1(1);
//方式二：
var f1 = function(x){
    var y = 1;
    function f2(z){
        return x+y+z;
    }
    return f2;
}
var f = f1(1);
f(1);
//方式三：
var f1 = function(x){
    var y = 1;
    return (function f2(){
        return x+y;
    })();
}
f1(1);

正则：

（1）语法：var reg = /正则表达式/修饰符(匹配模式);

（2）修饰符：

  i 忽略大小写；

g 全局匹配；

m 多行匹配；

（3）方括号：

[ab] 查找[]内任意字符；

[0-9] 查找0至9的数字；

[a-z] 查找a至z的小写字母;

[A-Z]       查找A至Z的大写字母;

[A-z] 查找任意字母；

[^] 除了；

（4）量词：

a+ 包含至少1个；

a* 包含0个或多个；

a? 包含0个或1个；

a{n} 包含n个；

a{x,} 连续出现至少x次以上；

a{x,y} 连续出现至少x次，至多y次；

^a 开头；

a$ 结尾；

?=a 其后紧接；

?!a 其后没有紧接；

（5）元字符：

. 查找单个字符，除了换行和行结束符；

\w 查找数字、字母和下划线；

\d 查找数字；

\s 查找空白字符；

\b 匹配单词边界；

\0 查找NULL字符；

\n 查找换行符；

\f 查找换页符；

\r 查找回车符；

\t 查找制表符；

（6）对象方法：

reg.test(str); 返回true或false

reg.exec(str); 返回值或null

（7）支持正则表达式的String对象的方法：

str.split(reg);         拆分字符串，返回数组

str.search(reg);         返回第一次出现的位置，无则返回-1

str.replace(reg,newstr); 替换新内容

str.match(reg); 提取符合条件的，返回数组

Error对象：

（1）属性：错误名name、错误信息message

（2）六个name值：

eval()函数中 EvalError

超出数字范围 RangeError

非法引用 ReferenceError

语法错误 SyntaxError

类型错误 TypeError

encodeURI()中 URIError

（3）异常：

try{检测throw抛出}catch(err){处理}finally{都执行}

Map()：键值对

//创建
var m = new Map();
//属性
m.size；//元素数量
/* 方法 */
//设置键值
m.set(key,value);
//获取键的值
m.get(key);
//返回键的数组
m.keys();
//返回值的数组
m.values();
//返回键值对的数组
m.entries();
//删除指定元素
m.delete(key);
//删除所有元素
m.clear();
//判断是否存在
m.has(key);

Set()：唯一值的集合

//创建
var s = new Set();
//属性：元素个数
s.size;
/* 方法 */
//添加新元素
s.add(v);
//删除指定元素
s.delete(v);
//删除所有元素
s.clear();
//是否存在
s.has(v);
//以数组返回
s.entries();
s.keys();
s.values();

日期：获取、设置与比较

var d = new Date();    //当前时间
var dd = new Date("12/05/2022 11:10:30");    // 日期格式：月/日/年 时：分：秒
/* 方法 */
// 年份 
d.getFullYear();
// 几月 0-11
d.getMonth();
// 几号 1-31
d.getDate(); 
// 周几 0-6
d.getDay();
// 时间戳  从1970年到当前日期的毫秒数，统一单位
d.getTime();
// 代码执行时间戳       
Date.now();

Math：

/* 常用方法 */
//绝对值
Math.abs(x);
//四舍五入
Math.round(x);
//上舍入
Math.ceil(x);
//下舍入
Math.floor(x);
//x的y次幂
Math.pow(x,y);
//平方根
Math.sqrt(x);
//随机数
Math.random();
//最大值
Math.max(x,y...,z);
//最小值
Math.min(x,y...,z);

类：对象的模板，没有hoisting

//基类（父类）
class Animal{
    //构造函数：初始化对象属性
    constructor(name){this.name = name;}
    //getter获取值
    get a_name(){return this.name;}
    //setter设置值
    set a_name(aname){this.name = aname;}
    //静态方法：不能在对象上调用
    static method(){}
}
//实例化对象
let obj = new Animal(value);

/* 继承 */
//派生类（子类）
class Dog extends Animal{
    constructor(name,sex){
        //引用父类的构造方法
        super(name);
        this.sex = sex;
    }
}

3. 数据类型转换

（1）强制转换为String：String(s) 、s.toString() 隐式转换：+""

所有其他类型都可以转换为对应的字符串

（2）强制转换为Number：Number(n)、n.parseInt()、n.parseFloat() 解析只取数值

隐式转换：-0、*1、/1、+

字符串==>非纯数字(NaN)、空串或空格(0) null==>0 undefined==>NaN

（3）强制转换为Boolean：Boolean(bool) 隐式转换：!!

数值==>0和NaN(false) 字符串==>空串(false) null和undefined==>false

4. 三种变量的区别

*** 变量提升：先使用后声明 ***

（1） const 只读常量，必须初始化，值不能被修改，不能重置，不会变量提升。

注意：对象和数组的值可以通过属性和下标或方法修改，但不能重新赋值。

/* 对象 */
const obj = { name:"object", age:19 };
// 通过属性修改（两种寻址方式）
obj["name"] = "obj";
obj.age = 20;

/* 数组 */
const arr = [7, 11];
// 通过下标修改
arr[1] = 1;
// 通过数组方法修改
arr.push(2); //末尾添加一个或多个元素，返回新的数组长度
arr.pop(); //删除并返回末尾元素
arr.shift(); //删除并返回开头元素
arr.unshift(9); //开头添加一个或多个元素，返回新的数组长度

（2） let 块级{}作用域，不能重置，不会变量提升，声明的全局变量不属于window对象。

（3） var 全局(window对象)或函数局部作用域，可重置，可变量提升（初始化后不会）。

5. 七种运算符

（1）算术运算符：+、-、*、/、%、++、--

+ 任何值与字符串相加先转换为字符串，再进行拼串操作。

-、*、/ 先将字符串转为数值，再进行运算。

（2）赋值运算符： =、+=、-=、*=、/=、%=

（3）比较运算符：==（自动类型转换）、===（全等）、!=、!==

>、<、>=、<= 两个字符串比较Unicode编码，一位一位地比较。

注： "1"==true==1 null==0(false) undefined==null

NaN不和任何值相等(包括它本身)，可通过isNaN()函数进行判断

（4）条件运算符：条件表达式?语句1(true):语句2(false)

（5）逻辑运算符：&&（与）、||（或）、!（非）

&& 第一个值为true则返回第二个值，第一个为false则直接返回第一个值。

|| 第一个值为true则直接返回第一个，第一个值为false则返回第二个值。

（6）位运算符： &（AND）、|（OR）、-（取反）、^（异或）、<<（左移）、>>（右移)

（7）类型运算符：typeof(v) 返回变量类型、a instanceof b 判断a是否为b的实例