康少带你玩转JavaScript
目录
- 1.JavaScript简述
- 2.JavaScript引入方式
- 3.JavaScript语法基础
- 4.JavaScript数据类型
- 5.运算符
- 6.流程控制
- 7.函数
- 8.内置对象和方法
1.JavaScript简述
JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。
2.JavaScript引入方式
JavaScript引入的方式
script标签内写代码
<!--方式一:可以是在head标签内也可以是在body标签内-->
<script>// 在这里写你的JS代码
</script>
<!--方式二:引用外部写好的js文件-->
<script src="myscript.js"></script>
3.JavaScript语法基础
1.JavaScript注释:
//单行注释
/*多行注释*/
注意:JavaScript写完一句完整的代码必须要以分号(;)结尾
2.JavaScript变量:
变量声明:
1.JavaScript的变量名可以使用字母,下划线,数字,$组合而成,切忌不能以数字开头
2.声明变量用var 变量名的格式来声明
一般来说在JavaScript中变量名以驼峰体的命名规则来定义
var name = 'zk';
var age = '18';
注意:新增了let命令,用来声明变量(这里要与var 定义的变量区分开来 var定义的变量是全局作用域有效的,而let定义的变量只是在局部作用域有效)。let的运用场景for循环已经只是存在局部作用域中的变量,都以let定义。
3.JavaScript中的常量:
const PI =3.1415926 /*常量名要用const关键字来定义 且常量名称一般来说大写*/
注意:JavaScript中的常量不是与python中的一样,python中的常量只是一种形式长的说法,而JavaScript中的常量一旦定义就不能修改。
4.JavaScript数据类型
JavaScript与python一样都是拥有动态类型的不像其他语言一样需要指定类型:
1.数字类型(number):
var x = 1; // x为整型
var x = 3.14 // x为浮点型parseInt('123') // 类型强转为number类型 得到的值为 整型 123
2.字符串类型:
var x ='赵康' // x为字符串类型
var y = '帅哥'
var z = x +y // 字符串拼接
console.log(c)// console.log(z)为打印的意思 相当于python中的print()
//z的值为:赵康帅哥
字符串中的常用的方法:
方法 | 说明 |
---|---|
.length | 返回长度 |
.trim() | 移除空白 |
.trimLeft() | 移除左边的空白 |
.trimRight() | 移除右边的空白 |
.charAt(n) | 返回第n个字符 |
.concat(value, ...) | 拼接 |
.indexOf(substring, start) | 子序列位置 |
.substring(from, to) | 根据索引获取子序列 |
.slice(start, end) | 切片 |
.toLowerCase() | 小写 |
.toUpperCase() | 大写 |
.split(delimiter, limit) | 分割 |
// length方法 ==> 相当于python中的len()内置函数
var a = 'zhaokang';
console.log(a.length); // 结果为8// trim()方法 ==>相当于python中的字符串方法的strip()
var b = ' zhaokang ' ;
console.log(b.trim()); // 结果为:zhaokang// trimLeft()方法 ==> 相当于python中的字符串方法的lstrip()
var b = ' zhaokang ' ;
console.log(b.trimLeft()); // 结果为:zhaokang 注意右边有一个空格,因为右边的没有去// .trimRight()方法 ==>相当于python中的字符串方法rstrip()
var b = ' zhaokang ' ;
console.log(b.trimRight()); // 结果为: zhaokang注意左边有一个空格,因为右边的没有去
// .charAt(n)方法需要传入一个参数索引值然后得到一个结果 ==> 相当于python中的b[索引值]
var b = ' zhaokang ' ;
b.charAt(4) //返回结果是 “o”
// .concat(value, ...) 方法用于字符串的拼接
var b = ' zhaokang ' ;
b.concat('123','456') //返回结果是 “o” 并且括号内可以无限传递参数
// 结果为:" zhao kang 123456"//.indexOf(substring, start) 根据第一个参数取到索引取值,如果第一个参数没有返回-1
// 第二个参数可以指定索引其实位置 ==>对应python中的.index和.find方法
var b = ' zhaokang ' ;
b.indexOf('o') // 结果为4
b.indexOf('o',5) // 如果索引从5开始找返回的就是-1 没有这个值// .substring(start, end) ==>相当于索引取值 在python就是切片的意思
// 如果第二个参数小于0或者0 会把第一个start和end调换为 小于0 默认就是从0开始
//比如 .substring(4, -1) 这里-1会变成0 并且会和4调换位置 变成.substring(0, 4)
var b = ' zhaokang ' ;
b.substring(1,3) // 结果为 zh// .slice(start, end) 按索引取值 反向切片与substring不一样
var b = ' zhaokang ' ;
b.substring(1,3) // 结果为 zh// .toLowerCase() 小写 ==>对应python lower()
var b = ' zhaokang ' ;
b.substring(1,3) // 结果为: zhaokang // .toUpperCase() 大写 ==>对应python中的 .upper()
var b = ' zhaokang ' ;
b.toUpperCase() // 结果为: ZHAO KANG // .split() 切割 第一个参数 是按照什么来切割 第二个参数是切割几次 如果第二个参数不给默认为1
var b = ' zhaokang ' ;
b.split(' ') // 结果 ['','zhao','kang','']
布尔类型:
var a = true;
var b = false;
// 空字符串、0、null、undefined、NaN都是false。
null和undefined
- null表示值是空,一般在需要指定或清空一个变量时才会使用,如 name=null;
- undefined表示当声明一个变量但未初始化时,该变量的默认值是undefined。还有就是函数无明确的返回值时,返回的也是undefined。
对象(object):
JavaScript 中的所有事物都是对象:字符串、数值、数组、函数...此外,JavaScript 允许自 定义对象。
JavaScript 提供多个内建对象,比如 String、Date、Array 等等。
对象只是带有属性和方法的特殊数据类型。
数组:
数组对象的作用:就是一个集合里面存储很多东西,类似python的列表。
数组的常用方法:
方法 | 说明 |
---|---|
.length | 数组的大小 |
.push(ele) | 尾部追加元素 |
.pop() | 获取尾部的元素 |
.unshift(ele) | 头部插入元素 |
.shift() | 头部移除元素 |
.slice(start, end) | 切片 |
.reverse() | 反转 |
.join(seq) | 将数组元素连接成字符串 |
.concat(val, ...) | 连接数组 |
.sort() | 排序 |
.forEach() | 将数组的每个元素传递给回调函数 |
.splice() | 删除元素,并向数组添加新元素。 |
.map() | 返回一个数组元素调用函数处理后的值的新数组 |
var q = [1,2,3,4,5,6] // 定义一个数组
// .length 获取数组的长度 ==>对应python中的len()
q.length // 结果:6// .push(值)往尾部添加值 ==>相当于python中列表方法的 append
var q = [1,2,3,4,5,6]
q.push(2) // [1, 2, 3, 4, 5, 6, 2]// .pop 删除尾部元素 ==>相当于python中列表方法的 pop
// 如果给了索引参数默认也删除最后一个 并拿到删除的返回值
var q = [1,2,3,4,5,6]
q.pop() // [1,2,3,4,5]// .unshift(值) 往头部增加元素并拿到返回值
var q = [1,2,3,4,5,6]
q.unshift('1')// .shift('需要移除元素的值') 移除元素 并拿到返回值
var q = ['1',1,2,3,4,5,6]
q.shift('1') // [1,2,3,4,5,6]// .slice(start, end) 切片 顾头不顾尾
var q = [1,2,3,4,5,6]
q.slice(0, 3) // 结果 [1,2,3]// .reverse() 反转 ==>相当于python中列表方法的.reverse()
var q = [1,2,3,4,5,6]
q.reverse() // [5, 4, 3, 2, 1]// .join() 将数值拼接成字符串
var q = [1,2,3,4,5,6]
q.join('|') // 结果:"1|2|3|4|5|6"// .concat(val, ...) 给数组中添加多个值 ==>相当于python中的extend()
var q = [1,2,3,4,5,6]
q.concat('1','2') // 结果:[1,2,3,4,5,6,'1','2']// .sort() 排序(正序) ==>相当于python中的 .sort()
var q =[2,1,3,5,4]
q.sort() // 结果:[1,2,3,4,5]// .forEach() 将数组的每个元素传递给回调函数
// 第一个参数是数组里面的元素
// 第二个数元素对应的索引值
// 第三个参数相当于元素所在的容器
var q = [1,2,3,4,5,6]
q.forEach(function(val){console.log(val)}) // 1 2 3 4 5 6// .splice() 删除元素,并向数组添加新的元素。
var q = [1,2,3,4,5,6]
q.splice(1,3,'haha') // 结果[1,'haha',5,6]// .map() 返回一个数组元素调用函数处理后的值的新数组
var q = [1,2,3,4,5,6]
q.map(function(currentValue,index,arr),thisValue)
补充:使用typeof 可以查看变量的类型。
有一点需要注意下列如:typeof:null 得到的结果是object类型
5.运算符
1.算数运算符
+ - * / % ++ --
var x=10;
var res1=x++;
var res2=++x;res1;
10
res2;
12这里由于的x++和++x在出现赋值运算式,x++会先赋值再进行自增1运算,而++x会先进行自增运算再赋值!
2.比较运算符
> >= < <= != == === !==
注意:
1 == '1' // true 弱等于
1 === "1" // false 强等于
//上面这张情况出现的原因在于JS是一门弱类型语言(会自动转换数据类型),所以当你用两个等号进行比较时,JS内部会自动先将
//数值类型的1转换成字符串类型的1再进行比较,所以我们以后写JS涉及到比较时尽量用三等号来强制限制类型,防止判断错误
6.流程控制
if (条件语句){} else{}
var a = 10;
if (a > 5){console.log("yes");
}else {console.log("no");
}
if (条件语句){} else if (添加语句){}
var a = 10;
if (a > 5){console.log("a > 5");
}else if (a < 5) {console.log("a < 5");
}else {console.log("a = 5");
}
switch:
var day = 1;
switch (day) {case 0:console.log("Sunday");break;case 1:console.log("Monday");break;
default:console.log("...")
}
switch中的case子句通常都会加break语句,否则程序会继续执行后续case中的语句。
for:
for (var i=0;i<10;i++){console.log(i);
}
while:
var i =0;
while (i<10){console.log(i);i++;
}
三元运算符:
var a = 1;
var b = 2;
var c = a > b? a:b
//这里的三元运算顺序是先写判断条件a>b再写条件成立返回的值为a,条件不成立返回的值为b;三元运算可以嵌套使用;
var a=10,b=20;
var x=a>b ?a:(b=="20")?a:b;
7.函数
JavaScript中的函数和Python中的非常类似,只是定义方式有点区别。
// 无参函数
function func(){console.log('hello world')}
func() // 函数的调用// 带参数的函数
function func(x,y){console.log(x+y);
}
func(1,2)// 带返回值的函数
function func(x,y){return x+y;
}
func3(1,2)// 匿名函数方式
var sum = function(a,b){return a + y;
}
sum(1,2)// 箭头函数
var f = v => v;
// 等同于
var f = function(v){return v;
}
函数中的arguments参数
function func(x,y){console.log(arguments);if (arguments.length>2){// 由于JavaScript函数不严谨虽然你函数定义过程中定义了两个形参// 但是在调用函数的时候可以无限传参且不会报错,所以得用arguments来限制console.log('今天客满')
}console.log(x,y)
}
注意:JavaScript函数中只能返回一个值,如果想要接收多个值得话可以用数组把他装起来。
函数的全局变量和局部变量
局部变量:
在JavaScript函数内部声明的变量(使用 let)是局部变量,所以只能在函数内部访问它(该变量的作用域是函数内部)。只要函数运行完毕,本地变量就会被删除。
全局变量:
在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它。
变量生存周期:
JavaScript变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。
作用域
首先在函数内部查找变量,找不到则到外层函数查找,逐步找到最外层。与python作用域关系查找一模一样!
几个例子:
var city = "BeiJing";
function f() {var city = "ShangHai";function inner(){var city = "ShenZhen";console.log(city);}inner();
}f(); //输出结果是ShenZhen
var city = "BeiJing";
function Bar() {console.log(city);
}
function f() {var city = "ShangHai";return Bar;
}
var ret = f();
ret(); // 打印结果是BeiJing
3.闭包
var city = "BeiJing";
function f(){var city = "ShangHai";function inner(){console.log(city);}return inner;
}
var ret = f();
ret(); // 打印结果是ShangHai
词法分析JavaScript中在调用函数的那一瞬间,会先进行词法分析。
词法分析的过程:
当函数调用的前一瞬间,会先形成一个激活对象:Avtive Object(AO),并会分析以下3个方面:
1:函数参数,如果有,则将此参数赋值给AO,且值为undefined。如果没有,则不做任何操作。
2:函数局部变量,如果AO上有同名的值,则不做任何操作。如果没有,则将此变量赋值给AO,并且值为undefined。
3:函数声明,如果AO上有,则会将AO上的对象覆盖。如果没有,则不做任何操作。
函数内部无论是使用参数还是使用局部变量都到AO上找。
看两个例子:
var age = 18;
function foo(){console.log(age);var age = 22;console.log(age);
}
foo(); // 问:执行foo()之后的结果是?
2:
var age = 18;
function foo(){console.log(age);var age = 22;console.log(age);function age(){console.log("呵呵");}console.log(age);
}
foo(); // 执行后的结果是?
词法分析过程:
1、分析参数,有一个参数,形成一个 AO.age=undefine;
2、分析变量声明,有一个 var age, 发现 AO 上面已经有一个 AO.age,因此不做任何处理
3、分析函数声明,有一个 function age(){...} 声明, 则把原有的 age 覆盖成 AO.age=function(){...};最终,AO上的属性只有一个age,并且值为一个函数声明执行过程:
注意:执行过程中所有的值都是从AO对象上去寻找1、执行第一个 console.log(age) 时,此时的 AO.age 是一个函数,所以第一个输出的一个函数
2、这句 var age=22; 是对 AO.age 的属性赋值, 此时AO.age=22 ,所以在第二个输出的是 2
3、同理第三个输出的还是22, 因为中间再没有改变age值的语句了
8.内置对象和方法
JavaScript中的所有事物都是对象:字符串、数字、数组、日期,等等。在JavaScript中,对象是拥有属性和方法的数据。
注意var s1 = "abc"和var s2 = new String("abc")的区别:typeof s1 --> string而 typeof s2 --> Object
自定义对象
JavaScript的对象(Object)本质上是键值对的集合(Hash结构),但是只能用字符串作为键。
var a = {"name": "zhaokang", "age": 18};
console.log(a.name);
console.log(a["age"]);
遍历对象中的内容:
var a = {"name": "Alex", "age": 18};
for (var i in a){console.log(i, a[i]);
}
创建对象:
var person=new Object(); // 创建一个person对象
person.name="zhaokang"; // person对象的name属性
person.age=18; // person对象的age属性
Date对象
创建Date对象
//方法1:不指定参数
var d1 = new Date();
console.log(d1.toLocaleString());
//方法2:参数为日期字符串
var d2 = new Date("2004/3/20 11:12");
console.log(d2.toLocaleString());
var d3 = new Date("04/03/20 11:12");
console.log(d3.toLocaleString());
//方法3:参数为毫秒数
var d3 = new Date(5000);
console.log(d3.toLocaleString());
console.log(d3.toUTCString());//方法4:参数为年月日小时分钟秒毫秒
var d4 = new Date(2004,2,20,11,12,0,300);
console.log(d4.toLocaleString()); //毫秒并不直接显示
Date对象的方法:
var d = new Date();
//getDate() 获取日
//getDay () 获取星期
//getMonth () 获取月(0-11)
//getFullYear () 获取完整年份
//getYear () 获取年
//getHours () 获取小时
//getMinutes () 获取分钟
//getSeconds () 获取秒
//getMilliseconds () 获取毫秒
//getTime () 返回累计毫秒数(从1970/1/1午夜)
练习:
编写代码,将当前日期按“2017-12-27 11:11 星期三”格式输出。
const WEEKMAP = { 0:"星期天",1:"星期一",2:"星期二",3:"星期三",4:"星期四",5:"星期五",6:"星期六"
}; //定义一个数字与星期的对应关系对象function showTime() {var d1 = new Date();var year = d1.getFullYear();var month = d1.getMonth() + 1; //注意月份是从0~11var day = d1.getDate();var hour = d1.getHours();var minute = d1.getMinutes() < 10?"0"+d1.getMinutes():d1.getMinutes(); //三元运算var week = WEEKMAP[d1.getDay()]; //星期是从0~6var strTime = `${year}-${month}-${day} ${hour}:${minute} ${week}`;console.log(strTime)
};showTime();
JSON对象
var str1 = '{"name": "zhaokang", "age": 18}';
var obj1 = {"name": "zhaokang", "age": 18};
// JSON字符串转换成对象
var obj = JSON.parse(str1);
// 对象转换成JSON字符串
var str = JSON.stringify(obj1);
RegExp对象
RegExp对象
// 定义正则表达式两种方式
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;// 正则校验数据
reg1.test('jason666')
reg2.test('jason666')/*第一个注意事项,正则表达式中不能有空格*/ // 全局匹配
var s1 = 'egondsb dsb dsb';
s1.match(/s/)
s1.match(/s/g)
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g
reg2.test('egondsb');
reg2.test('egondsb');
reg2.lastIndex;
/*第二个注意事项,全局匹配时有一个lastIndex属性*/// 校验时不传参数
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/
reg2.test();
reg2.test(undefined);var reg3 = /undefined/;
reg3.test();
Math对象
abs(x) 返回数的绝对值。
exp(x) 返回 e 的指数。
floor(x) 对数进行下舍入。
log(x) 返回数的自然对数(底为e)。
max(x,y) 返回 x 和 y 中的最高值。
min(x,y) 返回 x 和 y 中的最低值。
pow(x,y) 返回 x 的 y 次幂。
random() 返回 0 ~ 1 之间的随机数。
round(x) 把数四舍五入为最接近的整数。
sin(x) 返回数的正弦。
sqrt(x) 返回数的平方根。
tan(x) 返回角的正切。
转载于:https://www.cnblogs.com/ZKPython/p/10958160.html
康少带你玩转JavaScript相关推荐
- 肝了4.5万字,手把手带你玩转JavaScript(建议收藏)
江哥手把带你玩转 JavaScript 分为 5 期,大概 15 万字,建议点赞,关注,收藏,防止失联. 本期为第一期入门篇,4.5 万字. 什么是JavaScript? JavaScript简称JS ...
- 多种方式带你玩转 javascript 实现关闭浏览器页签
你知道的越多,你不知道的越多 点赞再看,养成习惯 如果您有疑问或者见解,或者没有积分想获取项目,欢迎指教: 企鹅:869192208 文章目录 前言 方法一 方法二 方法三 方法四 方法五 方法六 附 ...
- java cxf 入口统一_分分钟带你玩转 Web Services【2】CXF
在实践中一直在使用 JAX-WS 构建 WebService 服务,服务还是非常稳定.高效的. 但还是比较好奇其他的 WebService 开源框架,比如:CXF/Axis2/Spring WS等. ...
- 独家直播双十一全网动态?前黑客“劳改”带你玩转大数据
独家直播双十一全网动态?前黑客"劳改"带你玩转大数据 发表于2015-11-24 10:26| 4044次阅读| 来源CSDN| 7 条评论| 作者蒲婧 CTO俱乐部CTOCTO讲 ...
- 【转】带你玩转Visual Studio——01.开篇介绍
开篇之前,先唠叨几句 本人从事C++开发工作一年半,总想就C++开发方面写点东西.写什么呢?想了一下还是写点跟开发密切相关的吧,要说跟开发最密切相关的那莫过于就是开发工具了,也就是常常说的集成开发环境 ...
- 21.08.01 cnvoron带你玩转Voron2.4
树哥带你玩Voron之用蜘蛛8轴主板玩转Voron2.4 2021.08.01 第一版 本教程版权所有,未经许可,切勿用作商业用途,违者必究! VORON2.4使用者(大树-执笔) 文 ...
- 老司机带你玩转面试(2):Redis 过期策略以及缓存雪崩、击穿、穿透
前文回顾 建议前一篇文章没看过的同学先看下前面的文章: 「老司机带你玩转面试(1):缓存中间件 Redis 基础知识以及数据持久化」 过期策略 Redis 的过期策略都有哪些? 在聊这个问题之前,一定 ...
- 收藏 | 100+篇大数据学习资讯,带你玩转大数据分析!
2019独角兽企业重金招聘Python工程师标准>>> 深度解析如何挑选适合自己的Hadoop平台 什么是Hadoop,怎样学习Hadoop 分布式文件系统HDFS解析 Hadoop ...
- 金士顿固态硬盘不认盘修复_#原创新人#老司机带你玩转PC,故障之SSD篇 篇一:金士顿 V300 240G SATA3 固态硬盘 丢盘掉速解决记录...
#原创新人#老司机带你玩转PC,故障之SSD篇 篇一:金士顿 V300 240G SATA3 固态硬盘 丢盘掉速解决记录 2016-10-25 11:14:08 12点赞 72收藏 23评论 小编注: ...
最新文章
- android调试步骤,Android16_Android调试步骤
- 这场编程语言的发布会,不参加可太亏了!
- C# 中的Async 和 Await 的用法详解
- 再见,Postman...
- 工业POE交换机使用中的常见问题汇总
- Python函数积累
- 【LeetCode笔记】剑指Offer 51. 数组中的逆序对(Java、分治)
- epp是什么意思_什么是1K/2K/3K注塑?
- 55 - I. 二叉树的深度
- Python字符串函数说明(菜鸟教程里面的)
- 判定是否过拟合、欠拟合的一种方式
- 360强力删除也无法删除的文件 的 终极删除方法
- 一个连衣服都穿不整齐的人,代码也肯定写不整齐。
- docker host模式拿到nginx远程ip端口_docker网络模式实战
- 计算机上键盘无法输入法,电脑中输入法设置窗口提示检测到不兼容的键盘驱动的解决方法...
- android 远程调试工具,Android 远程调试工具STF——开源项目
- Java中反射机制入门
- 陌陌也出了网页版,醉翁之意不在酒在直播
- 有哪些好用的视频录制工具?
- “一点”也不能忍 | 精准检测让屏幕缺陷无所遁形