老师的博客地址:https://www.cnblogs.com/liwenzhou/p/8004649.html
js的引入方式:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>js引入事例</title> <!--第一种方式--> <script src="js测试.js"></script> </head> <body> <p id="1">这是测试js代码</p> <!--第二种方式--> <script>alert('你的js代码')</script> </body>
js的语言规范
注释
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
// 这是单行注释 /* 这是 多行注释 */
结束符:1 ; 相当于python的 换行符
js的语言基础
变量:就是的变量与python一样而且多了一条可以用$这个符号
声明变量必须要加上 var 来声明这是个变量。
var n=0;
var name='dxx';
值得注意的是变量的命名规则推荐使用驼峰命名规则,而且会区分大小的,js的关键字不能够用来做变量
ES6补充了let const关键字与var的用法类似,只是let声明后只能在这个局部,例如for中有效,而const这是便是这个变量不可跟改,详细见老师的博客。
js数据类型
js也是一门动态语言;
var x; // 此时x是undefined var x = 1; // 此时x是数字 var x = "Alex" // 此时x是字符串
数值number
javaScript不区分整型和浮点型,就只有一种数字类型。
var a = 12.34; var b = 20; var c = 123e5; // 12300000 var d = 123e-5; // 0.00123
还有一种NaN,表示不是一个数字(Not a Number)。
常用方法:
parseInt("123") // 返回123 parseInt("ABC") // 返回NaN,NaN属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。 parseFloat("123.456") // 返回123.456
以上内容摘自老师的博客
parse:n,解析 v,分析
字符串
字符串与python一样,必须用''或者""
字符串的拼接用+
var a = "Hello" var b = "world; var c = a + b; console.log(c); // 得到Helloworld console.log相当于print
字符串的常用方法有
方法 | 说明 |
.length | 返回长度 没有() |
.trim() | 移除首尾空白 |
.trimLeft() | 移除左边的空白 |
.trimRight() | 移除右边的空白 |
.charAt(n) | 返回第n个字符 |
.concat(value, ...) | 拼接 |
.indexOf(substring, start) | 子序列位置(这是啥) |
.substring(from, to) | 根据索引获取子序列 |
.slice(start, end) | 切片 |
.toLowerCase() | 小写(不会改变原来的) |
.toUpperCase() | 大写 |
.split(delimiter, limit) | 分割 |
。
1 var s='fd' 2 undefined 3 s.length 4 2 5 var s='fdfaf fdsvvfdsf ' 6 undefined 7 s.trim() 8 "fdfaf fdsvvfdsf" 9 s.charAt(00) 10 "f" 11 s.indexOf(1,9); 12 -1 13 s.indexOf(f,0); 14 VM26723:1 Uncaught ReferenceError: f is not defined 15 at <anonymous>:1:11 16 (anonymous) @ VM26723:1 17 s.indexOf(fetch,1) 18 -1 19 s.substring(0,5); 20 "fdfaf" 21 s.slice(0,10); 22 "fdfaf fds" 23 var a=s.substring(1,3); 24 undefined 25 a 26 "df" 27 s.toLowerCase; 28 ƒ toLowerCase() { [native code] } 29 s.touppercase(); 30 VM27024:1 Uncaught TypeError: s.touppercase is not a function 31 at <anonymous>:1:3 32 (anonymous) @ VM27024:1 33 s.toUpperCase(); 34 "FDFAF FDSVVFDSF " 35 s 36 "fdfaf fdsvvfdsf " 37 s; 38 "fdfaf fdsvvfdsf " 39 print 40 ƒ print() { [native code] } 41 a=s.toUpperCase(); 42 "FDFAF FDSVVFDSF " 43 a 44 "FDFAF FDSVVFDSF " 45 19VM165:98 Uncaught TypeError: a.scrollTop is not a function 46 at HTMLDocument.eval (eval at globalEval (jquery-2.2.0.min.js:2), <anonymous>:98:27) 47 at HTMLDocument.dispatch (jquery-2.2.0.min.js:3) 48 at HTMLDocument.r.handle (jquery-2.2.0.min.js:3) 49 (anonymous) @ VM165:98 50 dispatch @ jquery-2.2.0.min.js:3 51 r.handle @ jquery-2.2.0.min.js:3 52 b=s.split(); 53 ["fdfaf fdsvvfdsf "] 54 b 55 ["fdfaf fdsvvfdsf "] 56 b=s.split(''); 57 (18) ["f", "d", "f", "a", "f", " ", " ", "f", "d", "s", "v", "v", "f", "d", "s", "f", " ", " "] 58 b 59 (18) ["f", "d", "f", "a", "f", " ", " ", "f", "d", "s", "v", "v", "f", "d", "s", "f", " ", " "]
slice与substring的区别:
var s='alexl alelx ' undefined s.slice(0); "alexl alelx " s.length; 12 s.slice(12); "" s.slice(1,13); "lexl alelx " s.slice(-1,5); "" s.slice(-1,2); "" s.slice(-1); " " s.slice(1,-3); "lexl ale" s.slice(-11,5); "lexl" s.substring(3,1); "le" s.substring(-6,9); "alexl ale"
string.slice(start, stop)和string.substring(start, stop): 两者的相同点: 如果start等于end,返回空字符串 如果stop参数省略,则取到字符串末 如果某个参数超过string的长度,这个参数会被替换为string的长度 substirng()的特点: 如果 start > stop ,start和stop将被交换 如果参数是负数或者不是数字,将会被0替换 silce()的特点: 如果 start > stop 不会交换两者 如果start小于0,则切割从字符串末尾往前数的第abs(start)个的字符开始(包括该位置的字符) 如果stop小于0,则切割在从字符串末尾往前数的第abs(stop)个字符结束(不包含该位置字符)
template string:模板字符串
ES6中引入了模板字符串。模板字符串(template string)是增强版的字符串,用反引号(`)标识。它可以当做普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。
var name="alex",age="18";s=`my name is $(name)and my age is $(age)` "my name is ${name}and my age is ${age}"; "my name is ${name}and my age is ${age}" s "my name is $(name)and my age is $(age)"
/ 普通字符串 `这是普通字符串!` // 多行文本 `这是多行的 文本` // 字符串中嵌入变量 var name = "q1mi", time = "today"; `Hello ${name}, how are you ${time}?`
如果模板字符串中需要使用反引号,则在其前面要用反斜杠转义。
JSHint启用ES6语法支持:/* jshint esversion: 6 */
布尔值Boolean
区别于Python,true和false都是小写。
var a = true; var b = false;
""(空字符串)、0、null、undefined、NaN都是false。
null与undefined
null是值为空,而defined是定义了,但是却没有赋值。
var a; undefined a; n.fn.init [document, context: document] a=null null a; null
undefined == null; true null == undefined; true
对象object
数组:相当于python中的list
var b=['fasd',522]; undefined console.log(b[0]); fasd
常用的方法:
方法 | 说明 |
.length | 数组的大小 |
.push(ele) | 尾部追加元素 |
.pop() | 获取尾部的元素 |
.unshift(ele) | 头部插入元素 |
.shift() | 头部移除元素 |
.slice(start, end) | 切片 |
.reverse() | 反转 |
.join(seq) | 将数组元素连接成字符串 |
.concat(val, ...) | 连接数组 |
.sort() | 排序 |
.forEach() | 将数组的每个元素传递给回调函数 |
.splice() | 删除元素,并向数组添加新元素。 |
.map() | 返回一个数组元素调用函数处理后的值的新数组 |
。
var a=['','dfa',0,545,'dfdf']; undefined a.length; 5 a.push('dffd1'); 6 a; (6) ["", "dfa", 0, 545, "dfdf", "dffd1"] b=a.pop(); "dffd1" b "dffd1" a (5) ["", "dfa", 0, 545, "dfdf"] a.unshift(4); 6 a (6) [4, "", "dfa", 0, 545, "dfdf"] c=a.shift(); 4 c 4 a.slice(0,2); (2) ["", "dfa"] a (5) ["", "dfa", 0, 545, "dfdf"] a.reverse() (5) ["dfdf", 545, 0, "dfa", ""] a (5) ["dfdf", 545, 0, "dfa", ""] a.join('+'); "dfdf+545+0+dfa+" a.concat(a); (10) ["dfdf", 545, 0, "dfa", "", "dfdf", 545, 0, "dfa", ""] a.sort(); (5) ["", 0, 545, "dfa", "dfdf"] dispatch @ jquery-2.2.0.min.js:3 r.handle @ jquery-2.2.0.min.js:3 a.splice('fd'); (5) ["", 0, 545, "dfa", "dfdf"]0
a; []length: 0__proto__: Array(0)
forEach
forEach(function(currentValue, index, arr), thisValue)
splice()
splice(index,howmany,item1,.....,itemX)
map()
map(function(currentValue,index,arr), thisValue)
数据查询:typeof
typeof "abc" // "string" typeof null // "object" typeof true // "boolean" typeof 123 // "number"
undefined - 如果变量是 Undefined 类型的 boolean - 如果变量是 Boolean 类型的 number - 如果变量是 Number 类型的 string - 如果变量是 String 类型的 object - 如果变量是一种引用类型或 元祖 Null 类型的
运算符
算数运算符:+-*/% ++ -- += -=
比较运算符: > >= < <= != == === !==
var a=12; undefined var b='12'; undefined a ==b ; true a ===b; false a !=b; false a!==b; true
==是弱等于 只要值一样就可以
=== 就强等于,不但值相等,而且要类型相等。
逻辑运算符:
&& || !
var a=4 ; undefined var b=4; undefined var c=5; undefined a===b &&c===a; false a==b||c===a; true a!=c; true
&& 表示and
||表示or
!表示not
赋值运算符:= += ++ -- -= *= /=
var num=3; undefined num ++ ; 3 num; 4 num--; 4 num; 3 num *=6; 18 num; 18 num/=6; 3 num; 3 num%=2; 1 num; 1
流程控制:
if -else if-else:与pythony一样,只是写法不一样
if (a>11){ console.log('a>11'); }else if (a>9) { console.log('a>11'); }else{ console.log('a=9'); } VM39768:6 a=9
switch:
var num=0; switch (num){ case 0: console.log(0); num ++; case 1: console.log(1); num ++; default:console.log('终于循环了') }
0
1
终于循环了
switch中的case子句通常都会加break语句,否则程序会继续执行后续case中的语句。
var day = new Date().getDay(); //获取今天几号,4月1号返回值是1 switch (day) { case 0: console.log("Sunday"); break; case 1: console.log("Monday"); break; default: console.log("...") }
for循环:
for (var i=0;i<10;i++) { console.log(i);i++ };
只有for里面的才能对i经行处理。
for (var i=0;i<10;i) { console.log(i); };
上面两个输出的值都是一样的都是一到九
while循环
var i = 0; while (i < 10) { console.log(i); i++; }
三元运算
var a=0 var b=1 var c=a>b ? b:a; 0
// ?前面是条件后面是结果
。