JavaScript常用的方法大全

js三部曲（语法分析，预编译，执行代码）

 	// 预编译的四部曲：口诀:（变量（var a = 123） a声明提升a=undefined,函数声明整体提示)
  	// 1.创建GO/AO对象 // GO是全局代表的window地方  AO代表啊的函数存储的地方
    // 2.找形参和变量声明，将变量和形参名作为AO属性名，值为undefined
    // 3.将实参值和形参统一(有形参先把参数赋值)
    // 4.在函数体里面找函数声明，值赋予函数体
    
    console.log(a);//undefined
    var a = 1;
    b = 2;
    console.log(b);//2
    function f(a){
        console.log(a);//function a(){}
        var a = 123;
        console.log(a);//123 直接把AO里的a变成123
        function a(){}
        var b = function(){};
        function d(){}
        console.log(b);//function(){}
    }
    f(5);
    console.log(a);//1
	
    // 1,我们一步一步来先创建GO对象 2,找到 a 和 f 函数 （b不是的）
    //3,将实参值和形参统一 4.在函数体里面找函数声明，值赋予函数体
    // GO ={//GO代表就是全局的 GO = window
    //     a:undefined,
    //     f:function f(a){},
    // };
    // 全局执行完毕 我们执行AO
    // 1,我们一步一步来先创建AO对象 2,找到 a,b.d,如果重复下一个会覆盖上一个
    //3,将实参值和形参统一 (有参数先吧参数赋值)4.在函数体里面找函数声明，值赋予函数体
    //这些预编译完成,在进行代码执行
    // AO = {
    //     a:function(){},
    //     b:function(){},
    //     d:function (){},
    // }

函数常用写法（匿名函数，函数表达式）

// 函数有2中写法,匿名函数 function test(){};函数表达上 var test1 = function(){}; 命名规则 小驼峰 theFirs
  
// 函数变量 函数内部可以访问函数外部的变量，外部访问不到内部的 会报错

// 2种常用的立即执行函数 （function (){}()); (function () {})(); 不常用的 var test = function(){}(); ! function(){}()

var test1 = function () {
    //arguments a哥闷死  是一个数组，arguments是函数体自带的 arguments(形参)改变，形参(arguments)也改变
    console.log(arguments);//1,2 这是一个伪类数组 可以通过[...arguments]变成数组
    var num = 0;
    for(let i=0; i<arguments.length; i++){
        num += arguments[i];
    }
    //函数，每一个函数都有一个return return代表着终止函数和返回函数（不写系统默认自带）
    return num;
};
var num = test1(1, 2);//3  num就是函数test1 返回接收的内容

函数（生成器函数，构造函数）

// 生成器函数可以解决异步操作(不需要在ajax嵌套ajax了)
function getUsers(){
    setTimeout(()=>{
        let data = '用户数据';
        //调用 next 方法, 并且将数据传入
        iterator.next(data);
    }, 1000);
}

function getOrders(){
    setTimeout(()=>{
        let data = '订单数据';
        iterator.next(data);
    }, 1000)
}

function * gen(){
    let users = yield getUsers();
	console.log(users)
    let orders = yield getOrders();
	console.log(orders)
}

//调用生成器函数
let iterator = gen();
iterator.next();


// 构造函数  命名规则 小驼峰  function Thefirs(){};
//构造函数写法 必须带new
function Test(name) {
	// 构造函数就是在函数顶部增加一个 var this = {} 对象 可以增删改查，
	this.name = name;
	this.sex = "男";
	this.say = function() {
		return "I am " + this.name;
	};
	// 这里会生成闭包
	// 底部最后返回这个对象 return this 返回的时候只能是对象 数组
}

var test = new Test("xiaozhang"); //new 它就是一个构造函数 不new 它就是匿名函数
var say = test.say();
test.num = 100;
console.log(test.num); //100
console.log(test.sex); //男
console.log(test.name); //xiaozhang
console.log(say); //I am xiaozhang

函数（箭头函数，高级函数）

// 箭头函数(this 是静态的. this 始终指向函数声明时所在作用域下的 this 的值)
			
var list = n =>{ //有一个形参这里的()可以省略不写
	console.log(n)
}
list(1)

var list1 = () =>{//没有形参这里的()要写
	console.log(2)
}
list1()

var list2 = n => n * n //函数内部做一条判断{}可以省略不写
console.log(list2(3))

var obj ={
	list(){//list这里也是一个匿名函数(只不过在对象做:function可以省略不写)
		
	}
}
obj.list();

//高阶函数：如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数。
	//1.若A函数，接收的参数是一个函数，那么A就可以称之为高阶函数。
	//2.若A函数，调用的返回值依然是一个函数，那么A就可以称之为高阶函数。
	//常见的高阶函数有：Promise、setTimeout、arr.map()等等

//函数的柯里化：通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式。 
	function sum(a){
		return(b)=>{
			return (c)=>{
				return a+b+c
			}
		}
	}               

数组常用方法，

var arry = [
	{name:'张三',sex:'男'},
 	{name:'李四',sex:'女'},
 	{name:'王二',sex:'男'}
]
arry.splice(1,2)
//从下标1的位置截取2个元素
// 0: {name: "张三", sex: "男"}
//join把数组转换成字符串
//push(): 可以接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度。 
//pop()：数组末尾移除最后一项，减少数组的 length 值，然后返回移除的项。
//shift()：删除原数组第一项，并返回删除元素的值；如果数组为空则返回undefined 。 
//unshift():将参数添加到原数组开头，并返回数组的长度 。
//concat():数组合并
//includes('2') 判断数组中是否有这个值

var arry1 = [1,2,3,1]
var arry2 = [6,9]
let result = [...new Set(arry1)];// 数组去重
let union = [...new Set([...arry1, ...arry2])]//数组合并

对象常用方法，

var obj = { name: "御马", sex: '男', arry: [1, 2, 3, 4, 'a', 'v', 'a'] };
var obj1 = { list: '我是一个列表' };
var obj2 = {};
		
// console.log(Object.keys(obj2).length)//判断对象是否为空
// Object.assign(obj2,obj1,obj);//对象合并  	let obj3 = {...obj,...obj1}
// console.log(delete obj.name);//删除对象
// console.log('sex' in obj);//判断值是否在对象中 返回 false true

字符串常用方法，

var str = '123456';
console.log(str.slice(2,4))//从字符串的第2个位置到第4个位置直接的字符串片段: 34
//concat():字符串合并
//includes('2') 判断字符串中是否有这个值
//indexof()判断一个字符第一次出现在某个字符串的索引，如果包含返回它的索引，如果不包含返回-1.
//split() 用指定字符分割字符串，返回一个数组.对原字符串没有任何改变。

js隐式类型转换

//类型转换， 我们常用的类型转换(number,string,Boolean) 叫做强制转换
// 隐式转换口诀
// 1,字符串加数字，数字会变成字符串，
// 2,数字减(乘.除.大于.小于)字符串（字符串减数字也可以），字符串都会变成数字，字符串如果不是就会转成NaN NaN减(乘.除)都大于NaN
console.log(1 + '1');//11
console.log('1' - 1);//0 字符串转数字
console.log('abc' * 1);//NAN 字符串转NAN
console.log('8' / 4);//2
console.log('8' / '4');//2
// 隐式转换口诀 关于==
// 1,undefined等于null
//2,字符串(布尔值)和数字比较时，字符串(布尔值)转数字
//3,字符串和布尔比较时，两者转数字
console.log(undefined == null);//true
console.log('5' > 1);//true 字符串转数字
console.log(0 == false); //true 布尔转数字

原型链prototype

// 原型链 call(需要吧实参按照形参的个数传进去) apply（需要传一个arguments[a,c,c]）
//原型链 prototype 最终的原型链是object的prototype

function lang(d) {
	this.d = d
}
test.prototype = {
	//这是test的原型链  原型链是一个对象 他会一级一级往上边去找 （test.prototype = test1 test1是一个构造函数）  
	height: 1,
};

function test(a, b) {
	// 如果这里想使用lang函数方法
	lang.call(this, 3); //还可以这样写  lang.apply(this,[3])
	// call apply 是改变this指向  如果不传参数与 lang() 一样的
	this.a = a;
	this.b = b;
	this.height++; //这段代码没有height 但他还去他的原型链上去找
	console.log(this.height) //这里打印的就是2 但他还去他的原型链上去找
	console.log(this) //{d:3,a:1,b:2,height:2}
}
var test1 = new test(1, 2); //这是一个构造函数
	

循环（filter，forEach，map）

//数组的 filter()方法会创建一个新数组，forEach  map 使用方法一致
//filter循环判断时使用 返回新的数组
//forEach 单纯的循环 不返回
//map 循环时使用 返回新的数组
var arry = [1, 3, 8, 3];
let arry1 = arry.filter(function(i, index, self) {
	// i是数组的值,index是下表,self是arry循环之后的每一个数组 sele==arry
	// return i > 3 //判断数组大于3的值返回 [8]
	return self.indexOf(i) === index; //数组去重 [1,3,8]

})
 console.log(arry1)

ajax

const bth = document.getElementById('bth')
bth.onclick=function(){
	// abort  取消请求
	//1 创建对象
	const xhr = new XMLHttpRequest();
	//2 初始化 设置请求方法和url
	//get 传参在url地址?type=1&list=2  post在send里type:1&list:5
	//ie浏览器ajax缓存 可以在url地址上加时间戳?type=时间戳
	xhr.open('post','https://api.51moyoo.com/roll/getRoll');
	//设置请求头
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded','charset=UTF-8');
	// 设置响应体数据类型 json格式
	xhr.responseType = 'json';
	// 超时设置（ajax请求的时间）
	xhr.timeout = 2000;
	//超时回调
	xhr.ontimeout = function(){
		alert('超时回调')
	}
	//网络异常
	xhr.onerror = function(){
		alert('网络异常')
	}
	//3 发送
	xhr.send('type:1');
	//4 事件绑定 处理服务端返回的结果
	xhr.onreadystatechange = function(){
		//判断  服务端返回了所有的结果
		if(xhr.readyState === 4){
			//判断响应状态码 200 2开头都是成功
			if(xhr.status >=200 && xhr.status < 300){
				//处理服务端返回的结果
			}else{
				
			}
		}
	}
}