js学习笔记--基础部分

自增

自增 ++

• 通过自增可以使变量在自身的基础上增加1
• 对于一个变量自增以后，原变量的值会立即自增1
  
  无论使a++, 还是++a，都会立即使原变量的值自增1.
  
  不同的是a++ 和++a的值不同。
  
  a++的值的等于原变量的值
  
  ++a的值是原变量自增后的值

var a=1;
console.log("a++ =" +a++);//输出1
console.log("++a = "+ ++a);//输出3
console.log("a =",3);//输出3
 a=10
 r=a++ +a+ ++a
console.log("r =",r); //10+11+12

输入参数

var s=prompt("请输入一个数字")
console.log("你输入的数字是",s);

立即执行函数

// //立即执行函数只能执行一次
// (function() {
//     console.log("hello dj");
// })();
var obj=new Object();
var name="孙悟空";
var gender="男";
var age=18;
obj.name=name;
obj.sayName=function() {
    console.log(obj.name);
};
// 调方法
obj.sayName();
for (var n in obj)
{
    console.log(obj[n]);
}
//console.log(window);

条件运算符

/*
语法:
条件表达式?语句1:语句2
true执行条件1
flase执行条件2
*/
//true?alert("语句1"):alert("语句2");
var a=10;
var b=20;
var max=a>b?a:b
console.log(max);
a > b ?alert("a大"):alert("b大");

条件语句

var num = parseInt(prompt("请输入一个数字"))
switch (num) {
case 3:
    alert("233");
case 2:
    alert("2")
default:
    alert("else");
}

循环语句

/*
位运算符在js中的妙用：
1、使用&运算符判断一个数的奇偶
偶数 & 1 = 0
奇数 & 1 = 1
那么0&1=0,1&1=1
*/
var s = 0;
var m=0
for (var a = 0; a <= 100; a++) {
    if (a & 0x1==1) {
        s = s + a;//奇数之和
    }
    else{
      m = m + a; //偶数之和
    }
}
console.log(s);
console.log(m);

对象

//关系明确的对象
// 内建对象
// 宿主对象
// 自定义对象
// 创建对象
var obj=new Object();
var name="孙悟空";
var gender="男";
var age=18;
//可以通过点属性名给对象复制
obj.name=name
obj.gender=gender
obj.age=age
// 对象的引用 开辟一块堆空间 内存地址(指针)
var obj2=obj;
console.log(obj);
// 对象的属性名 obj.property
console.log(obj.name);
console.log(obj.ht);// 如果读取的属性不存在就输出undefined
// 删除属性
delete obj.name
console.log("obj",obj);
console.log("obj2",obj2);
console.log(obj==obj2)
//创建对象的时候给对象赋值
obj3={
    "name":"张三",
    "age":10,
    "gender":"女",
    "test":obj
}
console.log(obj3);
//打印对象实际是打印对象的toString()方法返回值
// 类型python的__repr__方法
obj3.toString=function(){
    return "返回值123"
};
console.log(obj3.toString());

GC垃圾回收机制

// 定义了不用就是垃圾。占内存空间
// js也有类型python的自动垃圾回收机制。
//将不在使用的对象设置成null。
var obj=new Object()
obj=null;

判断

console.log(undefined==null);
// NaN不等于NaN,使用isNaN可以判断
/*=== 全等 不会做类型转换。
相反！== 不全等
*/
console.log("123"==123); //true
console.log("123"===123);// false

函数

// 主要规范化代码，封装代码。
// var func=new Function("console.log(233);");
// func();
//以上代码只能在命令行或者html页面使用，不推荐使用。
//用下面的方法
function a(b) {
    console.log("hello dj");
    return b;
}
//调用
get_a=a("233")
console.log(get_a);
//匿名函数并传参数。
(function(a, b) {
    console.log("this is an anonymous function", a, b);
}
)(2, 3)
//对上面的代码进行修改
var foo = (function(a, b) {
    console.log("foo call this is anonymous function", a, b);
}
)
foo(2, 3);
//函数参数

判断奇偶性

//原理偶数和1进行与运算为0
//奇数和1进行与运算为1
function foo(num){
   if (num&0x1==0)
   {
       alert("num是偶数");
   }
   else{
       alert("num是奇数");
   }
}
var s=prompt("请输入一个数字");
foo(parseInt(s));

this

/*
this是个隐藏的参数。
根据函数调用方式的不同
 1.以函数的形式调用时,this永远都是window
 2.以方法的形式调用时,this是调用方法的那个对象
 函数的形式调用：下面的fun
 方法的形式调用：下面的fun2
*/
function fun() {
    console.log("fun this", this);
}
fun()
// 等价于
//window.fun()
function fun2() {
    console.log("fun2 this", this);
}
var obj = {
    "name": "张三",
    "age": 10,
    "gender": "女",
    "sayName": fun2
}
obj.sayName();
var obj2 = {
    "name": "张四",
    "age": 10,
    "gender": "女",
    "sayName": fun2
}
obj2.sayName();
//------------华丽的分割线---------------------
function createPerson(name, age, gender) {
    var obj = new Object();
    obj.name = name
    obj.age = age
    obj.gender = gender
    obj.sayName = function() {
        alert(this.name)
    }
    return obj
}
var obj2=createPerson("张三1",10,'男')
var obj3=createPerson("张三2",10,'男')
var obj4=createPerson("张三3",10,'男')
obj3.sayName();

构造函数

/*
构造函数执行流程
1.立即创建一个新的对象
2.将新建的对象设为函数中this
3.逐行执行函数中的代码
4.将新建的对象作为返回值
*/
function Person(name,age,gender){
    // this就是当前实例化对象，类似python的this
     this.name=name
     this.age=age
     this.gender=gender
}
function Dog(){
}
var per=new Person("张三",14,"女"); //构造函数实例化
var per2=new Person("莉丝",14,"女");
var dog=new Dog();
console.log(per instanceof Person);
//instanceof类似python的isinstance,可以判断对象的所属类型
console.log(dog);

原型

/*/prototype
//我们创建函数的时候，会自动加一个prototype属性
//这个属性对应着一个对象，这个对象就是原型对象。
//当函数以构造函数的形式存在时，它所创建的对象都有一个隐含的属性
//指向该构造函数的原型对象，可以通过__proto__来访问该属性
使用原型就不用创建多个函数了*/
function Person() {}
var p = new Person();
var p2 = new Person();
Person.prototype.a = 123
//将对象中的公共内容，统一设置到原型对象。
Person.prototype.sayName = function() {
    console.log(this.__proto__);
}
console.log(p.__proto__ == Person.prototype);
console.log(p.__proto__ == p2.__proto__);
console.log(p.a)
console.log(p2.a)
//访问公共区域原型里的值。
console.log(p2.sayName())
//访问公共区域原型里的值。
//------------华丽的分割线---------------------
function Myclass() {}
Myclass.prototype.name = "lisa"
var mc = new Myclass();
console.log(mc.__proto__);
console.log(Myclass.hasOwnProperty("name"));
mc.name="233"
console.log(mc.hasOwnProperty("name"));
//原型的原型一般找2层
console.log("what",mc.__proto__.__proto__.hasOwnProperty("hasOwnProperty"))
//再往上就是null了
//proto的原型object，object的原型null
console.log("what",mc.__proto__.__proto__.__proto__)

数组

// 下标从0开始，如果访问的索引不存在返回undefined
//不要创建下标不连续的数组
var a = new Array();
a[0] = "1"
a[1] = "2"
//获取数组的长度length属性
console.log("before a=", a.length);
// 同时可以修改数组的长度
a.length = 10
console.log("after a=", a.length);
a.length = 2
//往数组最添加元素
a[a.length]="3"
console.log("a", a);
//--------------华丽的分割线-----------------
/*通过字面量的形式创建,同时可以进行赋值，数组里面的元素类型不限制
推荐
new Array也可以同时添加元素，元素之间逗号隔开
*/
var arr=[1,2,4,5,"hello",document,true,[24,4]]
console.log(arr);
//数组的方法
//向数组末尾添加一个或多个元素push。
//返回值是数组新的长度
var arr2=["1","A","s",3]
arr2.push(false)
arr2.push(false,1,"as",function(){})
console.log("arr2 = ",arr2)
//删除数组末尾元素 pop。
//返回被删除的元素
//向数组开头添加一个或多个元素unshift()
//其他元素索引重新调整
//删除数组第一个元素 shift()。
//返回被删除的元素

数组遍历

var arr = ["1", "A", "s", 3]
arr.push(false)
arr.push(false, 1, "as", function() {})
// console.log("arr2 = ",arr2)
for (var a = 0; a < arr.length; a++) {
    console.log(arr[a])
}
//map的形式
arr.map(v=>{
    console.log("v =", v);
}
)
//forEach的形式
arr.forEach(v=>{
    console.log("v =", v);
}
)

数组去重

var arr = [1, 2, 3, 4, 5, 5, 6]
var arr2 = []
for (var a = 0; a < arr.length; a++) {
    item=arr[a];
    if (arr2.indexOf(item)>-1) {
        console.log("重复元素",item);
    } else {
        console.log("item=",item);
        arr2.push(item);
    }
}
console.log(arr2);
//判断元素是否存在用indexOf 不用in。

数组遍历值forEach的使用

var arr = ["1", "A", "s", 3]
arr.push(false)
arr.push(false, 1, "as", function() {})
// console.log("arr2 = ",arr2)
//forEach的形式，IE8以下不支持。
// arr.forEach(function(v){
//     console.log("v =", v);
// });
//以上可以简写成下面的方式：
arr.forEach(v=>{
    console.log("v =", v);
}
)
//----------
/*三个参数
1.就是当前遍历的元素
2.当前遍历的索引
3.正在遍历的数组
*/
arr.forEach(function(v,a,b){
    console.log("v =", v);
    console.log("a =", a);
    if (a==1)
    {
       console.log("b =", b);
    }
});

数组的几个方法

//sort
/*
默认是根据unciode的顺序判断的，所以判断数字的时候需要自己定义规则。
函数的返回值a-b>0 顺序排列
*/
arr=[11,2,3]
console.log(arr.sort(
function(a,b){return a-b}
));
//concat
/*链接两个数组*/
arr2=[4,6,9,"hehe"]
console.log("arr2",arr2.concat(arr));
//join 类似python的join
console.log(arr2.join(""));//拼接的时候数字会被转成字符串
//reverse
数组的逆转

函数的调用之call和apply方法的使用

/*
apply
call都是调用函数
和直接调用函数的区别是可以指定this的类型。
后面跟实参
*/
/*
this是个隐藏的参数。
根据函数调用方式的不同
 1.以函数的形式调用时,this永远都是window
 2.以方法的形式调用时,this是调用方法的那个对象
 3.以构造函数的形式调用时，this是新创建的对象
 4.使用call和apply调用时，this是指定的那个对象。
*/
var obj={"name":"obj"};
function a(c,d){
    console.log(this,c,d);
}
a();
a.call(obj,2,3);
a.apply(obj,4,5);

arguments

//arguments
/*
是一个类数组对象
在调用函数 时，我们传递的实参都在arguments中保存
不管是否定义形式参数，传递参数都可以在arguments的
实参中体现出来
arguments的callee属性会打出当前函数体。
*/
function func(){
    a=arguments[0]
    b=arguments[1]
    console.log(arguments.callee);
    console.log(arguments,a,b);
}
func("2",3);

日期相关内建函数操作

// Date时间对象
var d=new Date(); //当前代码执行的时间
console.log(d);
// 指定时间对象
//日期格式 月/日/年 时:分:秒
//年份如果不完整会由于不同的浏览器产出歧义，所以写四位的年。
var d2=new Date("12/01/2019 11:10:09")
console.log(d2);
//以下是在d2的基础上进行操作的
//获取当前日期的日。
var date=d2.getDate();
var day=d2.getDay();
console.log("date =",date);
console.log("day =",day);//0-6的值，0表示周日 依次类推。
// 返回0-11值,0表示1月。以此类推。
var month=d2.getMonth();
console.log("month =",month);
//获取完整年。
var fullyear=d2.getFullYear();
console.log("fullyear =",fullyear); 
//----------华丽的分割线
//getTime获取unixtime
//格林威治时间1970年1月1日0时0分0秒(和北京差8小时)到现在的毫秒数
var time=d.getTime();
console.log(time);
//获取当前时间戳
start=Date.now()
for(var a=0;a<1000;a++)
{
    console.log("可以根据结束时间减去开始时间计算运行时间")
}
console.log("上面的循环运行时间为",Date.now()-start);

Math工具类

var a=Math.sqrt(2);
var b=Math.cos(Math.PI);
console.log("圆周率",Math.PI)
console.log("根号2",a);
console.log("cos 兀",b);
//ceil向上取整 天花板
//floor向下取整 地板
//round 四舍五入
//random随机数类型python。
//生成x-y的随机数
//Math.round(Math.random()*y-x)+x
//比如生成1-6直接的随机数
for(var i=0;i<10;i++)
{
    var num=Math.round(Math.random()*5)+1;
    console.log(num);
}
//max最大值
//min最小值
//pow 幂运算
var s=Math.pow(2,4);
console.log(s);

字符的操作

 var a="hello dj"
 //字符串是以字符数组的形式保存的。
 //可迭代对象,类型python
for(var i=0;i<a.length;i++)
{
    console.log(a[i]);
}
/*charAt
根据索引获取指定字符，类似取下标的方式。
*/
b=a.replace("h","H")
b2=a.replace("l","H")
console.log(b2);
/*charCodeAt
根据索引获取指定字符的unicode编码值，类似取下标的方式。
*/
var a="公众号:python学习开发"
console.log(a.charCodeAt(2));
//String.fromCharCode根据编码取字符
var b=String.fromCharCode(0x2687);
console.log(b);
//concat连接字符串，作用和+一样。
//indexOf
/*可以检查字符串中是否有指定内容，
找不到指定内容返回-1
第2个参数可以指定开始查找的位置。
其实针对可迭代对象都能用，
a.indexOf(b)>0的形式使用相当于python in的功能。
*/
console.log(a.indexOf("h"));
//lastIndexOf
/*
 -从后往前找。
*/
console.log(a.lastIndexOf("o"));
//slice 切片
/*
负数从后面算起 -1表示倒数第一数起。
*/
console.log(a.slice(1,4));
//substring
console.log(a.substring(1,4));
//slice和substring功能没区别，但是substring不能用负数。
//如果第2个参数小于第一个参数，可以自动调换位置。
//substr()
//用来截取字符串，第二个参数表示截取的数量。
console.log(a.substr(0,14));
//split() 同python。根据指定字符拆分数组
//默认逗号分隔。
console.log(a.split(":"));
//toUpperCase 全部转为大写
console.log(a.toUpperCase());
//toLowerCase 全部转为小写
console.log(a.toUpperCase().toLowerCase());

正则表达式

//主要注意和python中的使用区别
/*
参数1：正则表达式
参数2：匹配模式
*/
// var str="\w+"
// var reg=new RegExp(str,'g')
//简写,字面量的形式 var 变量=/正则表达式/匹配模式
var reg=/^12345$/g;
//使用test可以检查字符串是否符合正则表达式的规则
//只是检查类似python的sub
var result=reg.test("12345")
console.log(result)
//split可以传递正则表达式作为参数
var s="a2d5g7b 9d9"
console.log(s.split(/\d/));//匹配数字
//search 可以传入正则表达式检测字符串
console.log(s.search(/\s/)) //匹配空格
//match 提取
//默认只能找一个匹配字符
// 设置正则为全局匹配模式即可,返回数组结果
//类似python的findall
var s1="a2d5g7b \\9d9"
console.log(s1) //上的\被转义了所以下面匹配到了一个\
console.log(s1.match(/[0-9]/g).join(""))
console.log(s1.match(/\\/g)); //匹配到了一个\
/*
 正则表达式：(?<=(href=")).{1,200}(?=(">))
       解释：(?<=(href=")) 表示 匹配以(href=")开头的字符串，并且捕获(存储)到分组中
               (?=(">)) 表示 匹配以(">)结尾的字符串，并且捕获(存储)到分组中
爬虫用的最多的一种(?<=href=)(.*?) (?=alt)
*/
var html='<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />'
url=html.match(/(?<=href=)(.*?) (?=type)/g)
console.log(url[0]);
//replace() 替换
phonereg=/^1[3-9][0-9]{9}$/
//匹配原子字符需要用\转义
var reg=/\./
console.log(html.match(reg));
//正则需要长期的一个积累 没必要刻意学习，现用现找即可。
// var c=prompt("请输入你的名字");
// var condition=c.search(/[\u4e00-\u9fa5]/g);
// if (c.search(/[\u4e00-\u9fa5]/g)>-1)
// {
//    alert("你输入的内容是:"+c);
// }
// else
// {
// alert("请输入中文,谢谢!");
// }
//电子邮件匹配
//经常面试问
//+ 一次或多次
var qq="1598828268@163.com"
console.log(qq.match(/^\w{3,}(\.\w+)*@[A-z0-9]+\.([A-z])+/g)) //简单类型