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)) //简单类型
js学习笔记--基础部分的更多相关文章
- three.js学习笔记--基础知识
基础知识 从去年开始就在计划中的three.js终于开始了 历史介绍 (摘自ijunfan1994的转载,感谢作者) OpenGL大概许多人都有所耳闻,它是最常用的跨平台图形库. WebGL是基于Op ...
- js学习笔记:webpack基础入门(一)
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- jQuery学习笔记 - 基础知识扫盲入门篇
jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...
- WebGL three.js学习笔记 使用粒子系统模拟时空隧道(虫洞)
WebGL three.js学习笔记 使用粒子系统模拟时空隧道 本例的运行结果如图: 时空隧道demo演示 Demo地址:https://nsytsqdtn.github.io/demo/sprite ...
- WebGL three.js学习笔记 创建three.js代码的基本框架
WebGL学习----Three.js学习笔记(1) webgl介绍 WebGL是一种3D绘图协议,它把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的 ...
- vue.js 学习笔记3——TypeScript
目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...
- WebGL three.js学习笔记 6种类型的纹理介绍及应用
WebGL three.js学习笔记 6种类型的纹理介绍及应用 本文所使用到的demo演示: 高光贴图Demo演示 反光效果Demo演示(因为是加载的模型,所以速度会慢) (一)普通纹理 计算机图形学 ...
- Vue.js学习笔记(2)vue-router
vue中vue-router的使用:
- JS 学习笔记--9---变量-作用域-内存相关
JS 中变量和其它语言中变量最大的区别就是,JS 是松散型语言,决定了它只是在某一个特定时间保存某一特定的值的一个名字而已.由于在定义变量的时候不需要显示规定必须保存某种类型的值,故变量的值以及保存的 ...
随机推荐
- TF报错解决
一.import tensorflow #h5py/__init__.py:34: FutureWarning: Conversion of the second argument of issubd ...
- Scrapy框架的执行流程解析
这里主要介绍七个大类Command->CrawlerProcess->Crawler->ExecutionEngine->sceduler另外还有两个类:Request和Htt ...
- Java_异常处理误区
转自:https://www.ibm.com/developerworks/cn/java/j-lo-exception-misdirection/index.html 本文着重介绍了 Java 异常 ...
- 《Go并发编程实战》读书笔记-初识Go语言
<Go并发编程实战>读书笔记-初识Go语言 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 在讲解怎样用Go语言之前,我们先介绍Go语言的特性,基础概念和标准命令. 一. ...
- linux shell变量的截取
变量的截断,经常用到的是${},##和%%几个特殊符号.假设我们定义了一个变量为:file=/dir1/dir2/dir3/my.file.txt ,可以用${ }分别替换得到不同的值: ${file ...
- log4j、log4j2和slf4j的基本使用
一.什么是log4j.log4j2和slf4j Log4j是Apache的一个开源项目,通过配置来控制日志的输出.主要是控制日志的输出级别.输出位置和输出内容格式. Log4j2是在log4j框架的基 ...
- SSH框架新线程下执行数据库持久化时 No Session found for current thread
架构:SSH框架 问题:多线程下的持久化操作 异常No Session found for current thread出现环境: SSH框架,采用声明式事务, 通过sessionFactory.ge ...
- Linux下常用配置文件
/etc/sysconfig/network 包括主机基本网络信息,用于系统启动 /etc/sysconfig/network-script/ 此目录下是系统启动最初始化网络的信息 /etc/sysc ...
- bzoj千题计划318:bzoj1396: 识别子串(后缀自动机 + 线段树)
https://www.lydsy.com/JudgeOnline/problem.php?id=1396 后缀自动机的parent树上,如果不是叶子节点,那么至少有两个子节点 而一个状态所代表子串的 ...
- SVN快速入门笔记【转】
1. SVN版本控制软件目的 协作开发 远程开发 版本回退 2. 什么是SVN subVersion 支持平台操作 支持版本回退 3. 获取SVN软件 属于C/S结构软件(客户端与服务端) serve ...