JavaScript之爆肝汇总【万字长文❤值得收藏】[通俗易懂]

JavaScript = ECMAScript + JavaScript自己特有的东西(BOM+DOM)

<script type="text/javascript" src="${request.contextPath}/static/js/homepage.js"></script>

window.alert()
document.write()
innerHTML
console.log()

// 声明一个变量名为test的变量。
var test;

var age, name, sex;//声明age、name、sex三个变量

//同时声明变量并赋值
var age = 10, name = "小强", sex = "1";

var num = 10; //十进制
var num1 = 012; //八进制
var num2 = ox123; //十六进制

console.log(Number.MAX_VALUE); //最大值 值为5e-324
console.log(Number.MIN_VALUE); // 最小值 值为1.7976931348623157e+308
无穷大：Infinity
无穷小：-Infinity

var num; //声明一个变量，未赋值
console.log(isNaN(num)); // true 不是一个数字吗？ 结果是true

var str = "iam a pm\\"
console.log(str); // iam a pm\

var str1 = "先生";
var str2 = "您好";
console.log(str1+str2); // 先生您好

var num;
console.log(num); // undefined

var num1 = Number("10");
console.log(num1); // 10
var num2 = Number('10adbdn');
console.log(num2); //NaN
var num3 = Number("10.78");
console.log(num3); //10.78
var num4 = Number('10.65dd');
console.log(num4); //NaN
var num5 = Number("a10");
console.log(num5); //NaN

var num1 = parseInt("10");
console.log(num1); // 10
var num2 = parseInt('10adbdn');
console.log(num2); //10
var num3 = parseInt("10.78");
console.log(num3); //10
var num4 = parseInt('10.65dd');
console.log(num4); //10
var num5 =parseInt("a10");
console.log(num5); //NaN

var num1 = parseFloat("10");
console.log(num1); // 10
var num2 = parseFloat('10adbdn');
console.log(num2); //10
var num3 = parseFloat("10.78");
console.log(num3); //10
var num4 = parseFloat('10.65dd');
console.log(num4); //10
var num5 = parseFloat("a10");
console.log(num5);

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

var num1 =5;
console.log(String(num1)); // 字符串 5

var num1 = Boolean(0);
console.log(num1); // false
var num2 = Boolean("");
console.log(num2); // false
var num3 = Boolean(null);
console.log(num3); // false
var num4 = Boolean(undefined);
console.log(num4); // false
var num5 = 10;
var num6;
console.log(Boolean(num5+num6)); // false

function functionname(){ 
   
这里是要执行的代码
}

function name(参数 1, 参数 2, 参数 3) { 
   
    要执行的代码
}

//此处创建一个函数sum
function sum(num1, num2) { 
   
    var result = num1 + num2;
    console.log("num1 + num2 = " + result);
}

// 函数调用
sum(10, 20);

$(function(){ 
   
	//不只有函数 所有变量输出等等在这里写都是页面加载直接运行
	sum()
})

var Reg = new RegExp("box","gi");

var str = 'a1b2c3a4a5',
    reg = /a/g;
console.log(str.match(reg)); //["a", "a", "a"]

var str = 'a1b2c3a4a5',
    reg = /a/;
console.log(str.search(reg)); //0

var str = 'a1b2c3a4a5',
    reg = /a/g;
console.log(str.replace(reg,function(){ 
   
    console.log(arguments);
    return 5555;
}));

var str = 'a,b,c,d',
    reg = /,/g;
//console.log(str.split(',')); //["a", "b", "c", "d"]
console.log(str.split(reg)) //["a", "b", "c", "d"]

var patt =  /pattern/i;         //忽略大小写匹配
var patt =  /pattern/g;         //全局匹配
var patt =  /pattern/m;         //执行多行匹配

. 单个任意字符，除了换行符\n与制表符\r 
\ 转义字符，将具有特殊意义的符号转义成普通符号: \.
\d 数字[0~9]
\D 非数字
\s 空格
\S 非空格
\w 字符[字母|数字|下划线]
\W 非字符
\b 单词边界( 除了 （字)字母 数字_ 都算单词边界) 
\B 非单词边界

var reg = /\./;//匹配.
var reg = /\\/;//匹配\
var reg = /\//;//匹配/

var str = '\\';
var reg = /\\/g;
console.log(reg.test(str)); //true

function getRandomArbitrary(min, max) { 
   
  return min + Math.random() * (max - min);
}

function getRandomInt(min, max) { 
   
  return min + Math.floor(Math.random() * (max - min + 1));
}

function randomStr(n){ 
   
  var dict = '1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
  var str = '';
  for(i = 0; i < n;i++){ 
   
    str += dict[getRandomInt(0,62)];
  }
  return str;
}
var str = getRandStr(10);
console.log(str);

var arr = [[1,2],[a,b]];
alert(arr[1][0]); //a 第2列第1行所在的元素

var a=["a",,"b",,,,"c",,];

alert(arr.length); //显示数组的长度10
arr.length=15; //增大数组的长度,length属性是可变的
alert(arr.length); //显示数组的长度已经变为15

function array_max( ){ 
   
   var i, max = this[0];
   for (i = 1; i < this.length; i++){ 
   
       if (max < this[i])
       max = this[i];
   }
   return max;
}
Array.prototype.max = array_max;
var x = new Array(1, 2, 3, 4, 5, 6);
var y = x.max( );

x = new String("Hi");
if (x.constructor == String) // 进行处理（条件为真）。
//或
function MyFunc { 
   
// 函数体。
}
y = new MyFunc;
if (y.constructor == MyFunc) // 进行处理（条件为真）。

var arr=[1,2,3,4,5];
arr.concat([10,11],13);//[1,2,3,4,5,10,11,13]
arr.concat([1,[2,3]]);//[1,2,3,4,5,1,[1,3]]

var arr=[1,2,3,4,5];
arr.slice(1,3);//[2,3]
arr.slice(1);//[2,3,4,5]
arr.slice(1,-1);//[2,3,4]
arr.slice(-4,-3);//[2]

var arr=[1,2,3,4,5];
arr.splice(2);//[3,4,5]
arr;//[1,2];原数组被修改了

var arr=[1,2,3,4,5];
arr.splice(2，2);//[3,4]
arr;//[1,2,5];

var arr=[1,2,3,4,5];
arr.splice(1，1，‘a’，‘b’);//[2]
arr;//[1,"a","b",3,4,5];

var arr = [1, 2, 3, 4, 5];
arr.forEach(function(x, index, a)
{ 
   //分别对应：数组元素，元素的索引，数组本身
    console.log(x + '|' + index + '|' + (a === arr));
});
// 1|0|true
// 2|1|true
// 3|2|true
// 4|3|true
// 5|4|true

[x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)

var arr = [1, 2, 3];
var sum = arr.reduce(function(x, y) { 
   
     return x + y
}, 0); //参数 0是可选的，如果写了参数0那第一次传递的两个值就是0和1
如果不写第一次传递的就是数组的前两个值，计算结果是6
arr; //[1, 2, 3]

arr = [3, 9, 6];
var max = arr.reduce(function(x, y) { 
   
     console.log(x + "|" + y);
     return x > y ? x : y;
});
// 3|9
// 9|6
max; // 9

var person={ 
   
name:"xiaoming",
age:12
}

var json=JSON.stringify(person); //{"name":"xiaoming","age":12}

json=JSON.stringify(person,['name']); //{"name":"xiaoming"}

json=JSON.stringify(person,function(key,value){ 
   
    switch(key){ 
   
        case "name":
           return value+",wang";
        case "age":
           return undefined;
        default:
           return value;
    }
});
//{"name":"xiaoming,wang"}

json=JSON.stringify(person,null,4);
{ 
   
    "name": "xiaoming",
    "age": 12
}

var person={ 
   
    name:"xiaoming",
    age:12,
    toJSON:function(){ 
   
        return this.name+" is "+this.age;
    }
}

json=JSON.stringify(person);
console.log(json); //"xiaoming is 12"

var person=JSON.parse('{"name":"xiaoming","age":12}');
var person=JSON.parse('{"name":"xiaoming","age":12}',function(key,value){ 
   
    if(key=="age"){ 
   
        return value+10;
    }
    else{ 
   
        return value;
    }
});

const xhr = new XMLHttpRequest()
xhr.open('GET', './data/test.json', true)
xhr.onreadystatechange = function () { 
   
  if (xhr.readyState === 4) { 
   
    if (xhr.status === 200) { 
   
      console.log(JSON.parse(xhr.responseText))
    } else { 
   
      console.log('其它情况...')
    }
  }
}
xhr.send()

$.ajax({ 
   
                    type:"post",  //请求方式
                    url:"a.php", //服务器的链接地址
                    dataType:"json", //传送和接受数据的格式
                    data:{ 
   
                        username:"james",
                        password:"123456"
                    },
                    success:function(data){ 
   //接受数据成功时调用的函数
                       console.log(data);//data为服务器返回的数据
                    },
                    error:function(request){ 
   //请求数据失败时调用的函数
                        alert("发生错误:"+request.status);
                    }
});

$.get( url，[ data ]，[ callback ]，[ type ])

//步骤一：创建异步对象
var ajax = new XMLHttpRequest();
//步骤二：设置请求的url参数，参数一是请求的类型，参数二是请求的url
ajax.open("get", "users.json");
//步骤三：发送请求
ajax.send();
//步骤四：注册事件 onreadystatechange 状态改变就会调用
ajax.onreadystatechange = function () { 
   
    if (ajax.readyState == 4 && ajax.status == 200) { 
   
        //步骤五：如果能够进到这个判断，说明数据完美的回来了，并且请求的页面是存在的
        console.log(ajax.responseText);//输入响应的内容
    }
};

function getCookie(c_name){ 
   
　　　　if (document.cookie.length>0){ 
   　　//先查询cookie是否为空，为空就return ""
　　　　　　c_start=document.cookie.indexOf(c_name + "=")　　//通过String对象的indexOf()来检查这个cookie是否存在，不存在就为 -1　　
　　　　　　if (c_start!=-1){ 
    
　　　　　　　　c_start=c_start + c_name.length+1　　//最后这个+1其实就是表示"="号啦，这样就获取到了cookie值的开始位置
　　　　　　　　c_end=document.cookie.indexOf(";",c_start)　　//其实我刚看见indexOf()第二个参数的时候猛然有点晕，后来想起来表示指定的开始索引的位置...这句是为了得到值的结束位置。因为需要考虑是否是最后一项，所以通过";"号是否存在来判断
　　　　　　　　if (c_end==-1) c_end=document.cookie.length　　
　　　　　　　　return unescape(document.cookie.substring(c_start,c_end))　　//通过substring()得到了值。想了解unescape()得先知道escape()是做什么的，都是很重要的基础，想了解的可以搜索下，在文章结尾处也会进行讲解cookie编码细节
　　　　　　} 
　　　　}
　　　　return ""
　　}　

$.cookie("groupCode",222)

document.cookie = "name=value;expires=date"

document.cookie = "username=zhangsan";
document.cookie = "username=lisi";
var cookies = document.cookie;
console.log(cookies);

document.cookie = "username=zhangsan";
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
var cookies = document.cookie;
console.log(cookies);

let arr = [1,2,3];
for (let i=0; i<arr.length; i++){ 
   
 console.log(i,arr[i])
}
// 0 1
// 1 2
// 2 3

let arr = [1, 2,  , 3]
let arrCopy1 = []
arr.map((item, index, arr) => { 
   
     arrCopy1.push(item * 2)
})
console.log(arrCopy1)
// [2, 4, 6]

let n = 0;

while (n < 3) { 
   
  n++;
}

console.log(n);
// expected output: 3

const list = ['a', 'b', 'c']
let i = 0
do { 
   
  console.log(list[i]) //value
  console.log(i) //index
  i = i + 1
} while (i < list.length)

for (let property in object) { 
   
  console.log(property) //property name
  console.log(object[property]) //property value
}