javascript整理

javascript整理

基础

输出

● 警告框：alert(" “);
● 向中输出：document.write(” “);
● 向控制台输出：console.log(” ");

标识符

在JS中所有的可以由我们自主命名的都可以称为是标识符。例如:变量名、函数名、属性名都属于标识符。
JS底层保存标识符时实际上是采用的Unicode编码，所以理论上讲，所有的utf-8中含有的内容都可以作为标识符。

字符串

转义字符：\

1. “：表示【”】。
2. ‘：表示【’】。
3. \n：表示换行。
4. \t：表示制表符【tab】。
5. \：表示【\】。

强制类型转换：String

1. 调用被转换数据类型的toString( )方法，该方法不会影响原变量，会返回转换的结果。Null和Undefined没有toString( )方法，调用会出错。
2. 调用String( )函数，将待转换变量作为参数传入，相当于还是调用toString( )方法。对于Null和Undefined不会调用toString( )方法，它会直接转为“Null”和“Undefined”。

强制类型转换：Number

1. 使用Number( )函数。
   ● 字符串转数字：如果是纯数字字符串，就转换为数字；如果字符传中包含非数字内容，则转换成NaN；如果是空字符串或全是空格，则会转为0。
   ● 布尔转数字：true转为1，false转为0。
   ● null转数字：转为0。
   ● undefined转数字：转为NaN。
2. 专用于字符串，转其他的都会变成NaN。
   ● parseInt( )：把一个字符串转换为一个整数，可以将一个字符串中的有效的整数内容提出来。
   ● parseFloat( )：把一个字符串转换为一个浮点数，可以将一个字符串中的有效的小数内容提出来。

布尔值Boolean

用于逻辑判断，只有两个值：true（真），false（假）。

转换为Boolean

使用Boolean( )函数：
● 数字转Boolean，只要不是0和NaN，转换出来都是true。
● 字符串转Boolean，除了空串，转换出来都是true。
● Null和Undefined转Boolean，转换出来都是false。

Null和Undefined

● Null类型的值只有null一个，专用于表示一个为空的对象，用typeof检查时会返回Object。
● Undefined类型的值只有undefined一个，声明一个变量但未赋值时是undefined，用typeof检查时会返回undefined。

JSON

JS中的对象只有JS自己认识，其他语言都不认识。
JSON就是一个特殊格式的字符串，这个字符串可以被任意的语言所识别，并且可以转换为任意语言中的对象，JSON在开发中主要用来数据的交互。

JSON基本含义：
● JavaScript object Notation，JS对象表示法。
● JSON和JS对象的格式一样，只不过JSON字符串中的属性名必须加双引号,其他的和JS语法─致。
JSON分类：

1. 对象{ }
2. 数组[ ]

JSON中允许的值：
3. 字符串
4. 数值
5. 布尔值
6. null
7. 对象（普通对象，不能是函数对象）
8. 数组

将JSON字符串转换为JS中的对象：在]S中，为我们提供了一个工具类，就叫了JSON，这个对象可以帮助我们将一个JSON转换为JS对象，也可以将一个JS对象转换成JSON。
10. JSON=>JS：JSON.parse( )
● 可以将以JSON字符串转换为JS对象。
● 它需要一个JSON字符串作为参数，会将该字符串转换为JS对象并返回。
11. JS=>JSON：JSON.stringify ( )
● 可以将一个JS对象转换为JSON字符串。
● 需要一个JS对象作为参数，会返回一个JSON字符串。
注：JSON这个对象在IE7以下不支持，调用会报错。
● 使用eval( )函数，这个函数可以用来执行一段字符串形式的JS代码，并将执行结果返回。但在开发中不推荐使用，因为他的执行性能比较差，且具有安全隐患。
● 引入外部JS文件来处理

关系运算符

比较两个值之间的大小关系，关系成立返回true，不成立返回false。
非数值的情况：
● 对于非数值进行比较时，会将其转换为数字然后再比较。
● 如果符号两侧的值都是字符串时，不会将其转换为数字进行比较，而会分别比较字符串中字符的Unicode编码。
● 在比较两个字符串型数字时，一定要转型。

1. ，>=

2. <，<=

Unicode编码表

1. 在字符串中使用转义字符输入Unicode编码：\u四位编码。
2. 在网页中使用Unicode编码：&#编码。这里的编码是10进制的。

运算符优先级

函数

定义

var fun=new Function()
//声明式
function name(a,b){
    var ss=a+b;
   
}
 //调用函数时，解析器也不会检查实参的数量，多余实参不会被赋值。如果实参的数量少于形参的数量，则没有对应实参的形参将是undefined。
name(2)
//表达式形式
var na=function (params) {
    var s=params;
}

作用域

全局作用域

1. 直接编写在script标签中的JS代码，都是全局作用域。
2. 全局作用域在页面打开时创建，在页面关闭时销毁。
3. 在全局作用域中，有一个全局对象window，它代表的是一个浏览器窗口，由浏览器创建，我们可以直接使用。
4. 在全局作用域中，创建的变量都会作为window对象的属性保存，创建的函数都会作为window的方法保存。
5. 全局作用域中的变量都是全局变量，可以在页面任意部分进行访问。
   变量的声明提前：
   ● 使用var关键字声明的变量，会在所有的代码执行之前被声明。但声明变量时不使用var关键字，则变量不会被提前声明。
   函数的声明提前：
   ● 使用函数声明形式创建的函数【function函数(){}】，它会在所有的代码执行之前就被创建，所以我们可以在函数声明前进行调用。
   ● 使用函数表达式创建的函数，不会被声明提前，所以不能在声明前调用。

函数作用域

● 调用函数时创建函数作用域，函数执行完毕以后，函数作用域销毁。
● 每调用一次函数就会创建一个新的函数作用域，他们之间是互相独立的。
● 在函数作用域中可以访问到全局变量，但不能访问其他函数作用域中的变量。函数外无法访问该函数的变量。
● 当在函数作用域操作一个变量时，它会先在自身作用域中寻找，如果有就直接使用。如果没有则向上一级作用域中寻找，直到找到全局作用域，如果全局作用域中依然没有找到，则会报错。
● 在函数中，不使用var声明的变量都会成为全局变量。
● 定义形参就相当于在函数作用域中声明了变量

this

● 解析器在调用函数每次都会向函数内部传递进一个隐含的参数，这个隐含的参数就是this。
● this指向的是一个对象，这个对象被称为函数执行的上下文对象。
● 根据函数的调用方式的不同，this会指向不同的对象。
a. 以函数形式调用时，this永远都是window
b. 以方法形式调用时，this是调用方法的那个对象。
● this可以根据调用者的不同变成不同的值。

五、基本引用类型

1.Date

//Data
let now=new Date();
//二者等价
let someDate=new Date(Date.parse("May 23,2019"));
let ss=new Date("May 23,2019");
//Date.parse()方法接收一个表示日期的字符串参数，尝试将这个字符串转换为表示该日期的毫秒数
let someDate=new Date(Date.parse("5/23/2019"));
//2000年5月5日，注：一月是0
let hh=new Date(Date.UTC(2000,4,5,17,3,5));

//Date.now()方法，返回表示方法执行时日期和时间的毫秒数
let start=Date.now();
function st(){
    return 3;
}
st();
let stop=Date.now();
result= stop - start;
console.log(result);

● 在]S中使用Date对象来表示时间。
● 如果直接使用构造函数创建一个Date对象，则会封装为当前代码执行的时间。
● 创建一个指定的时间对象，需要在构造函数中传递一个表示时间的字符串作为参数，日期的格式月份/日/年时:分:秒。
● getDate( )：获取当前日期对象是几日。
● getDay( )：获取当前日期对象是周几。周日是0，周一是1，依次递增。
● getDate( )：获取当前日期对象的月份。一月是0，以此类推。
● getTime( )：获取当前日期对象的时间戳。
○ 时间戳，指的是从格林威治标准时间的1970年1月1日0时0分0秒，到当前日期所花费的毫秒数秒= 10日e毫秒)。
○ 计算机底层在保存时间时使用都是时间戳。
○ 利用时间戳来测试代码的执行的性能
○ 获取当前的时间戳：time = Data.now( );

Math

● Math和其他对象不同，它不是一个构造函数，他属于一个工具类，不用创建对象，它里边封装了数学运算相关的属性和方法。
○ Math.PI：圆周率。
○ abs()：计算一个数的绝对值。
○ Math.ceil()：对一个数进行向上取整，小数位只有有值就自动进1。
○ Math.floor()：对一个数进行向下取整，小数部分会被省掉。
○ Math.round()：四舍五入取整。
○ Math.random( )：生成一个0-1之间的随机数。生成一个x-y之间的随机数：Math.round(Math.random( )*(y-x)+x)
○ Math.max( )：获取多个数中的最大值。
○ Math.min( )：获取多个数中的最小值。
○ Math.pow(x,y)：返回x的y次幂。
○ Math.sqrt( )：开方。

2.RegExp

❑ g：全局模式，表示查找字符串的全部内容，而不是找到第一个匹配的内容就结束。
❑ i：不区分大小写，表示在查找匹配时忽略pattern和字符串的大小写。
❑ m：多行模式，表示查找到一行文本末尾时会继续查找。
❑ y：粘附模式，表示只查找从lastIndex开始及之后的字符串。
❑ u: Unicode模式，启用Unicode匹配。
❑ s:dotAll模式，表示元字符．匹配任何字符（包括\n或\r）。

let patternl=/at/g;

与其他语言中的正则表达式类似，所有元字符在模式中也必须转义
正则表达式用于测试特定的数值序列。如果输入的文本与模式匹配，则显示匹配成功的消息。这个用法常用于验证用户输入，此时我们只在乎输入是否有效，不关心为什么无效。

let text="cat,bat,sat,fat";
let match=pattern.exec(text);

正则表达式简介

正则表达式用于定义一些字符串的规则，计算机可以根据正则表达式，来检查一个字符串是否符合规则，将字符串中符合规则的内容提取出来。
● 语法：var 变量= new RegExp(“正则表达式”,“匹配模式”);。
● 使用typeof检查正则对象，会返回object。
● 在构造函数中可以传递一个匹配模式作为第二个参数，可以是：
○ i：忽略大小写。
○ g：全局匹配模式。
正则表达式的方法:

1. test()：使用这个方法可以用来检查一个字符串是否符合正则表达式的规则，如果符合则返回true，否则返回false。

正则语法

使用字面量来创建正则表达式：
● 语法: var变量=/正则表达式/匹配模式
● 使用字面量的方式创建更加简单，使用构造函数创建更加灵活

//构造函数
var reg= new RegExp("ab","g");
console.log(reg.test("bcd"));
//字面量
var reg = /ab/g;
console.log(reg.test("bcd"));

● 【|】表示或的意思，中括号【[ ]】里的内容也是或的意思。
● [a-z]表示任意小写字母；[A-Z]表示任意大写字母；[A-z]表示任意字母；[0-9]表示任意数字。
● [^ ]表示除了。

量词：通过量词可以设置一个内容出现的次数。格式：/匹配项{次数}/。

// a出现3次
var reg = /a{3}/;
// abc出现3次
var reg = /(abc){3}/;
// b出现1到3次
var reg = /ab{1,3}c/;
// b出现1次以上
var reg = /ab{1,}c/;
// b至少出现1次
var reg = /ab+c/;
// b出不出现都行
var reg = /ab*c/;
// b最多出现1次
var reg = /ab?c/;
// 是否以a开头
var reg = /^a/;
// 是否以a结尾
var reg = /a$/;
// 如果在正则表达式中同时使用^ $则要求字符串必须完全符合正则表达式。
var reg = /^a$/;

检查一个字符串中是否含有特殊字符，需要使用\作为转义字符。

// 检查字符串中是否包含.
var reg = /\./;
var reg= new RegExp("\\.");
// 检查字符串中是否包含\
var reg = /\\/;
var reg= new RegExp("\\\\");
// 检查字符串中是否包含单词child（children不能被查出）
var reg = /\bchild\b/;
// 去除字符串前后两端的空格
str.replace(/^\s*|\s*$/g,"");

字符串与正则相关的方法

1. split( )：方法中传递一个正则表达式作为参数，就将会根据正则表达式去拆分字符串。根据任意字母将字符串拆分成数组：split([A-z]);。这个方法即使不指定全局匹配，也会全部拆分。
2. search( )：它可以接受一个正则表达式作为参数，然后会根据正则表达式去检索字符串。
3. match( )：可以根据正则表达式，从一个字符串中将符合条件的内容提取出来。默认情况下，match只会找到第一个符合要求的内容，找到以后就会停止。match会将匹配到的内容封装到一个数组中返回，即使只查询到一个结果。
   ○ 可以通过这支正则表达式为全局匹配模式，这样就会匹配到所有的内容。
   ○ 可以为一个正则表达式设置多个匹配模式，且顺序无所谓。
4. replace( )：可以将字符串中指定内容替换为新的内容。有两个参数，用第二个参数去替换第一个参数。可以传入正则表达式作为第一个参数。
5. 

//判断电子邮件
var emailReg = /^\w{3,}(\.\w+)*@[A-z0-9]+\.[A-z]{2,5}){1,2}$/;

3.原始值包装类型

为了方便操作原始值，ECMAScript提供了3种特殊的引用类型：Boolean、Number和String。
引用类型与原始值包装类型的主要区别在于对象的生命周期。

//在通过new实例化引用类型后，得到的实例会在离开作用域时被销毁
let s1="some text";//let s1 =new string("some text");
let s2=s1.substring(2);

//自动创建的原始值包装对象则只存在于访问它的那行代码执行期间。这意味着不能在运行时给原始值添加属性和方法
let s1="some text";
s1.color="red";
console.log(s1,color);//未定义

字符串的方法

在底层，字符串是以字符数组的形式保存的。

1. length属性：用于获取字符串的长度。
2. charAt( )：可以返回字符串中指定位置的字符，根据索引获取指定的字符。
3. charCodeAt( )：获取指定位置字符的字符编码（Unicode编码）。
4. search( )：可以搜索字符串中是否含有指定的内容。如果搜索到指定内容，则会返回第一次出现的索引，如果没有搜索到返回-1。
5. replace( )：可以将字符串中指定内容替换为新的内容。有两个参数，用第二个参数去替换第一个参数。
6. String.formCharCode( )：可以根据字符编码去获取字符。
7. concat( )：可以用来连接两个或多个字符串，作用和+—样。
8. indexof( )：检索一个字符串中是否含有指定内容。如果字符串中含有该内容，则会返回其第一次出现的索引；如果没找到，则会返回-1。可以通过第二个参数指定开始查找的位置。
9. lastIndexOf( )：用法和indexOf()一样。不同的是，indexOf是从前往后找，而lastIndexOf是从后往前找。
10. slice( )：可以从字符串中截取指定的内容。不会影响原字符串，而是将截取到内容返回。
    ○ 第一个参数：开始位置的索引(包括开始位置)。
    ○ 第二个参数：结束位置的索引（不包括结束位置)。如果省略第二个参数，则会截取到后边所有的。也可以传递一个负数作为参数，负数将会从后计算。
11. substring( )：可以用来截取一个字符串，和slice( )类似。
    ○ 这个方法不可以传递负数作为参数，如果传递了负值则会自动默认为0。而且他还自动调整参数的位置，如果第二个参数小于第一个参数，则自动交换。
12. substr( )：用来截取字符串。
    ○ 第一个参数：截取开始位置的索引。
    ○ 第二个参数：截取的长度。
13. split( )：可以将一个字符串拆分为一个数组。
    ○ 需要一个字符串作为参数，将会根据该字符串去拆分数组
14. toUpperCase()：将一个字符串转换为大写并返回。
15. toLowerCase()：将一个字符串转换为小写并返回。

二、集合引用类型

1.Object

//对象字面量表示法
let person={
    name:"Ni",
    age:29
}
//只有默认属性的和方法的对象
let person={};
person.age=29;

2.Array

Array的原型上暴露了3个用于检索数组内容的方法：keys()、values()和entries()。keys()返回数组索引的迭代器，values()返回数组元素的迭代器，而entries()返回索引/值对的迭代器

//使用Array构造函数
let colors=new Array("red","blue");
//数组字面量
let colors1=["red","blue"];
//from()用于将类数组结构转换为数组实例
console.log(Array.from("matt"));//[ 'm', 'a', 't', 't' ]
//Array.of()可以把一组参数转换为数组。
console.log(Array.of(undefined));//[ undefined ]

//ES6新增方法普遍将这些空位当成存在的元素，只不过值为undefined
const op=[1, , , ,5];
for(const o of op){
    console.log(o==op);
}
let c=[1,2,3];
c.length=2;//删除最后一个

//检测数组
if(Array.isArray(c)){
    console.log(1);
}

所有对象都有toLocaleString()、toString()和valueOf()方法。
其中，valueOf()返回的还是数组本身。
而toString()返回由数组中每个值的等效字符串拼接而成的一个逗号分隔的字符串。

//使用Array构造函数
let colors=new Array("red","blue");
//队尾栈
let count=colors.push("ss");
let item=colors.pop("ss");
//队头栈
let count=colors.shift("ss");//取出
let count=colors.unshift("ss");
//排序
let values=[1,2,3,4,5];
values.reverse();//反向
values.sort();//排序
alert(values);

values.sort((a,b)=>a<b?1:a>b?-1:0);
function compare(value1,value2){
    return value2-value1;
}

//末尾加元素
let colorss=colors.concat("ye");
//则slice()会返回该索引到数组末尾的所有元素
let colors2=colors.slice(1,4);
//splice()的主要目的是在数组中间插入元素

八、面向对象

//ES6之前
var student={
    name:"xiao",
    run: function(){
        console.log("run");
    }
};
var xiaoming={
    name:"xiaoming"
};

xiaoming.__proto__=student;
xiaoming.run();

        
//ES6引入的class关键字
class st{
    constructor(name){ this.name=name;}
    hello(){
        console.log("hello");
    }
}
class xiaost extends st{
    constructor(name,grade){
        super(name)
        this.grade=grade;
    }
    myGrade(){
        console.log("hhhhh");
    }
}

十、函数

//箭头函数
let sum=(num1,num2)=>{
    return num1+num2;
}
//参数扩展与收集
let values=[1,2,3,4];
function getsum(){
    let sum=0;
    for(let i=0;i<arguments.length;++i){
        sum+=arguments[i];
    }
    return sum;
}
//无扩展符
console.log(getsum.apply(null,values));
//扩展符
console.log(getsum(...values));
//收集参数
function first(fir,...values){
    console.log(values);
}
first(1,2,3);//输出[2,3]

//函数作为值
function creatr(propertyname){
    return function(object1,object2){
        let value1=object1[propertyname];
        let value2=object2[propertyname];
        if(value1<value2){
            return -1;
        }
        else if(value1>value2){
            return 1;
        }
        else{
            return 0;
        }
    }
}
let data=[{name:"ss",age:27},{name:"dd",age:23}];
data.sort(creatr("name"));
console.log(data[0].name);

//函数表达式
let say;
if(condition){
    say=function(){
        console.log("aa");
    };
}else{
    say=function(){
        console.log("bb");
    };
}
//递归
function factorial(num){
    if(num<=1){
        return 1;
    }else{
        return num*arguments.callee(num-1);
    }
}

十二、BOM

B：浏览器对象模型
IE6~11,Chrome,safari,FireFox,Opera

• window代表浏览器窗口

window.alert(1)
window.innerHeight
window.innerWidth
window.outerHeight
window.outerWidth

• Navigator:封装了浏览器的信息

大多数我们不会使用，因为会被人为修改，不建议使用这些属性来判断和编写代码

navigator.appName
navigator.appVersion
navigator.userAgent
navigator.platform

• screen :屏幕
• location 代表当前页面的URL信息
• history

DOM

二十三、JSON

var user={
    name:"geng",
    age:3
}
//对象转化为字符串
var jsonuser=JSON.stringify(user);
//字符串转化为对象
var obj=JSON.parse('{"name":"geng","age":3}');
console.log(user);
console.log(jsonuser);
console.log(obj);

---

总结