自增

自增 ++

  • 通过自增可以使变量在自身的基础上增加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)) //简单类型

js学习笔记--基础部分的更多相关文章

  1. three.js学习笔记--基础知识

    基础知识 从去年开始就在计划中的three.js终于开始了 历史介绍 (摘自ijunfan1994的转载,感谢作者) OpenGL大概许多人都有所耳闻,它是最常用的跨平台图形库. WebGL是基于Op ...

  2. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  3. jQuery学习笔记 - 基础知识扫盲入门篇

    jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...

  4. WebGL three.js学习笔记 使用粒子系统模拟时空隧道(虫洞)

    WebGL three.js学习笔记 使用粒子系统模拟时空隧道 本例的运行结果如图: 时空隧道demo演示 Demo地址:https://nsytsqdtn.github.io/demo/sprite ...

  5. WebGL three.js学习笔记 创建three.js代码的基本框架

    WebGL学习----Three.js学习笔记(1) webgl介绍 WebGL是一种3D绘图协议,它把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的 ...

  6. vue.js 学习笔记3——TypeScript

    目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...

  7. WebGL three.js学习笔记 6种类型的纹理介绍及应用

    WebGL three.js学习笔记 6种类型的纹理介绍及应用 本文所使用到的demo演示: 高光贴图Demo演示 反光效果Demo演示(因为是加载的模型,所以速度会慢) (一)普通纹理 计算机图形学 ...

  8. Vue.js学习笔记(2)vue-router

    vue中vue-router的使用:

  9. JS 学习笔记--9---变量-作用域-内存相关

    JS 中变量和其它语言中变量最大的区别就是,JS 是松散型语言,决定了它只是在某一个特定时间保存某一特定的值的一个名字而已.由于在定义变量的时候不需要显示规定必须保存某种类型的值,故变量的值以及保存的 ...

随机推荐

  1. TF报错解决

    一.import tensorflow #h5py/__init__.py:34: FutureWarning: Conversion of the second argument of issubd ...

  2. Scrapy框架的执行流程解析

    这里主要介绍七个大类Command->CrawlerProcess->Crawler->ExecutionEngine->sceduler另外还有两个类:Request和Htt ...

  3. Java_异常处理误区

    转自:https://www.ibm.com/developerworks/cn/java/j-lo-exception-misdirection/index.html 本文着重介绍了 Java 异常 ...

  4. 《Go并发编程实战》读书笔记-初识Go语言

    <Go并发编程实战>读书笔记-初识Go语言 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 在讲解怎样用Go语言之前,我们先介绍Go语言的特性,基础概念和标准命令. 一. ...

  5. linux shell变量的截取

    变量的截断,经常用到的是${},##和%%几个特殊符号.假设我们定义了一个变量为:file=/dir1/dir2/dir3/my.file.txt ,可以用${ }分别替换得到不同的值: ${file ...

  6. log4j、log4j2和slf4j的基本使用

    一.什么是log4j.log4j2和slf4j Log4j是Apache的一个开源项目,通过配置来控制日志的输出.主要是控制日志的输出级别.输出位置和输出内容格式. Log4j2是在log4j框架的基 ...

  7. SSH框架新线程下执行数据库持久化时 No Session found for current thread

    架构:SSH框架 问题:多线程下的持久化操作 异常No Session found for current thread出现环境: SSH框架,采用声明式事务, 通过sessionFactory.ge ...

  8. Linux下常用配置文件

    /etc/sysconfig/network 包括主机基本网络信息,用于系统启动 /etc/sysconfig/network-script/ 此目录下是系统启动最初始化网络的信息 /etc/sysc ...

  9. bzoj千题计划318:bzoj1396: 识别子串(后缀自动机 + 线段树)

    https://www.lydsy.com/JudgeOnline/problem.php?id=1396 后缀自动机的parent树上,如果不是叶子节点,那么至少有两个子节点 而一个状态所代表子串的 ...

  10. SVN快速入门笔记【转】

    1. SVN版本控制软件目的 协作开发 远程开发 版本回退 2. 什么是SVN subVersion 支持平台操作 支持版本回退 3. 获取SVN软件 属于C/S结构软件(客户端与服务端) serve ...