康少带你玩转JavaScript
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~11
var day = d1.getDate();
var hour = d1.getHours();
var minute = d1.getMinutes() < 10?"0"+d1.getMinutes():d1.getMinutes(); //三元运算
var week = WEEKMAP[d1.getDay()]; //星期是从0~6
var 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) 返回角的正切。
康少带你玩转JavaScript的更多相关文章
- 康少带你玩转CSS-1
什么是CSS? 层叠样式表(假如HTML是一个人的话,css就是一个人的装饰品,比如裙子,衣服口红) 用来干什么的 设置标签样式的 css注释 单行注释/**/ 多行注释 /* */ 语法结构 三种引 ...
- 带你玩转JavaScript中的隐式强制类型转换
正题开始前我想先抛出一个问题,==和===有什么区别?可能一般人会想,不就是后者除了比较值相等之外还会比较类型是否相等嘛,有什么好问的,谁不知道?!但是这样说还不够准确,两者的真正区别其实是==在比较 ...
- 康少带你python项目从部署到上线云服务器
首先,服务器要安装nginx和mysql,网站文件建议放在/usr/local/www,环境python3.6+mysql5.7,阿里云的服务器可以用公共镜像有一个配置好的,不然就自己装一下环境吧. ...
- 康少带你手撸orm
orm 什么是orm? 对象关系映射: 一个类映射成一张数据库的表 类的对象映射成数据库中的一条条数据 对象点数据映射成数据库某条记录的某个值 优点:不会写sql语句的程序员也可以很6的操作sql语句 ...
- 转: 带你玩转Visual Studio——带你理解多字节编码与Unicode码
上一篇文章带你玩转Visual Studio——带你跳出坑爹的Runtime Library坑帮我们理解了Windows中的各种类型C/C++运行时库及它的来龙去脉,这是C++开发中特别容易误入歧途的 ...
- iOS开发——高级UI&带你玩转UITableView
带你玩装UITableView 在实际iOS开发中UITableView是使用最多,也是最重要的一个控件,如果你不会用它,那别说什么大神了,菜鸟都不如. 其实关于UItableView事非常简单的,实 ...
- 玩下Javascript
玩下Javascript 前言 好久没有更新博客了,也蛮少捣弄javascript,今儿看到一个题目,关于给你一个面板,你可以随意的在上面画矩形,可以移动和删除任意一个你创建的矩形,心血来潮搞着玩哈, ...
- 分分钟带你玩转 Web Services【2】CXF
在实践中一直在使用 JAX-WS 构建 WebService 服务,服务还是非常稳定.高效的. 但还是比较好奇其他的 WebService 开源框架,比如:CXF/Axis2/Spring WS等. ...
- 带你玩转Visual Studio——带你理解多字节编码与Unicode码
目录(?)[-] 多字节字符与宽字节字符 char与wchar_t string与wstring string 与 wstring的相关转换 字符集Charcater Set与字符编码Encoding ...
随机推荐
- 启动MyEclipse 出现java.lang.RuntimeException: No application id has been found 解决办法
咋一看,太熟悉了,就去eclipse\links 目录下,发现指定的MyEclipse的路径不对. 突然想起来了,MyEclipse是换地了. MyEclipse里面内置的eclipse找不到MyEc ...
- 时序分析:串匹配—Brute-Force算法
在使用KMP算法之前,使用了BF算法用于串匹配:原文链接已无法查找..... 设有主串s和子串t,子串t的定位就是要在主串s中找到一个与子串t相等的子串.通常把主串s称为目标串,把子串t ...
- Swift - AnyClass,元类型和 .self
在Swift中能够表示 “任意” 这个概念的除了 Any 和 AnyObject 以外,还有一个AnyClass.我们能够使用AnyClass协议作为任意类型实例的具体类型.AnyClass在Swif ...
- vue2.0模拟锚点实现定位平滑滚动
vue2.0模拟锚点实现定位平滑滚动 效果为点击哪一个标题,平滑滚动到具体的详情. 如果是传统项目,这个效果就非常简单.但是放到 Vue 中,就有两大难题: 1. 在没有 jQuery 的 anima ...
- 腾讯模板引擎template
template.js是一款JavaScript模板引擎,用来渲染页面的. 原理:提前将Html代码放进编写模板 script id="tpl" type="text/ ...
- 记录:通过SSH远程连接Ubuntu
一.安装openssh服务器 $ sudo apt-get install openssh-server 二.启动ssh服务 安装完成后,启动服务: $ sudo /etc/init.d/ssh st ...
- eas之添加表格列宽自动调整设置
设置表格整体宽度自动调整为所在panel的宽度 KDTable table=new KDTable(); table. setAutoResize (boolean); 注意:该功能在冻结功能启用后, ...
- AtCoder Grand Contest 021完整题解
提示:如果公式挂了请多刷新几次,MathJex的公式渲染速度并不是那么理想. 总的来说,还是自己太弱了啊.只做了T1,还WA了两发.今天还有一场CodeForces,晚上0点qwq... 题解还是要好 ...
- onunload与onbeforeunload事件解析 标签: 浏览器 2017-04-10 09:46 45人阅读 评论(0)
注:只测试了chrome和IE浏览器的表现情况 onunload事件 //JS Document window.onunload = onunload_message; function onunlo ...
- 今天写了一个简单的新浪新闻RSS操作类库
今天,有位群友问我如何获新浪新闻列表相关问题,我想,用正则表达式网页中取显然既复杂又不一定准确,现在许多大型网站都有RSS集合,所以我就跟他说用RSS应该好办一些. 一年前我写过一个RSS阅读器,不过 ...