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 是松散型语言,决定了它只是在某一个特定时间保存某一特定的值的一个名字而已.由于在定义变量的时候不需要显示规定必须保存某种类型的值,故变量的值以及保存的 ...
随机推荐
- 图论分支-Tarjan初步-边双联通分量
本来应该先说强连通分量,但是有一定的分配,所以这个在下一篇博客将会见到. 这个本想连点连通分量一起讲,但是量有点大,所以我就分两步讲. 我们先看定义 再来看看图解 很容易就能发现,只要将割边断掉,然后 ...
- java io系列22之 FileReader和FileWriter
FileReader 是用于读取字符流的类,它继承于InputStreamReader.要读取原始字节流,请考虑使用 FileInputStream.FileWriter 是用于写入字符流的类,它继承 ...
- MyBatis-DynamicSQL IF判断
在写动态sql时发现字符串的判断没有生效 <if test="CLLX != null and CLLX != ''"> and a.CLLX = #{CLLX} &l ...
- 7.桥接模式(Bridge Pattern)
动机(Motivate): 在软件系统中,某些类型由于自身的逻辑,它具有两个或多个维度的变化,那么如何应对这种“多维度的变化”?如何利用面向对象的技术来使得该类型能够轻松的沿着多个方向进行变化, ...
- GridView固定行宽,自动换行,鼠标放在Table的Tr上变色
//固定行宽table-layout:fixed;//自动换行word-break :break-all;word-wrap:break-wordGridView.Attributes.Add(&qu ...
- 【leetcode-89 动态规划】 格雷编码
( 中等难度题(×) -背答案题(√) ) 格雷编码是一个二进制数字系统,在该系统中,两个连续的数值仅有一个位数的差异. 给定一个代表编码总位数的非负整数 n,打印其格雷编码序列.格雷编码序列必须以 ...
- python读取wav文件并播放[pyaudio/wave]
#!/usr/bin/python # encoding:utf-8 import pyaudio import wave CHUNK = 1024 # 从目录中读取语音 wf = wave.open ...
- std::rotate使用
1. 进行元素范围上的左旋转 first - 原范围的起始 n_first - 应出现在旋转后范围起始的元素 last - 原范围的结尾 原来:1 2 3 左旋转后(起始元素是2) : 2 3 1
- redhat开启端口
设置端口:sudo iptables -I INPUT -p tcp -m tcp --dport 80 -j ACCEPT 或 /etc/init.d/iptables -I INPUT -p tc ...
- zookeeper的安装与使用
zookeeper的安装与使用: Zookeeper简介 1.可以作为集群的管理工具使用. 2.可以集中管理配置文件. Zookeeper是一个高效的分布式协调服务,可以提供配置信息管理.命名.分布式 ...