引入方式
script 标签内写代码:
在 head 标签里面可以写, 在 body 里面也可以写
- <script>
- # 在这里写你的代码
- console.log("骑士计划!")
- # f12 打开浏览器的调试窗口, 然后在 console 这个调试台就能看到这个内容
- alert("骑士计划!")
- # 这个是浏览器窗口一打开咱们这个文件, 就弹出一个窗口
- <script>
引入额外的 JS 文件:
<script src="myscript.js"></script>
JavaScript 语言规范
注释
- // 这是单行注释
- /*
- 这是多行
- 注释
- */
结束符
? JS 中的语句要以分号 (;) 为结束符. 也就是说和缩进没关系
JavaScript 语言基础
变量声明
? JavaScript 的变量名可以使用 _ , 数字, 字母, $ 组成, 不能以数字开头
? 声明变量使用 var + 变量名 的格式来进行声明
var name = "Alex";
/* 也可以分两步, 声明变量 var name; 然后 name = "alex", 但是通常我们都是一步写完
var age = 18;
? 注意:
? 变量名是区分大小写的. 推荐使用驼峰式命名规则. 首字母大写. 保留字 (关键字) 不能用作变量名
JavaScript 数据类型
JS 拥有动态类型
var x;
# 此时 x 是 undefined 静态语言比如 c: 创建变量的时候要指定变量的类型.
var x = 1;
# 此时 x 是数字.
var x = "Alex";
# 此时 x 是字符串.
数值(Number)
? JS 不区分整型和浮点型, 只有一种数字类型
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, 代表非数字值的特殊值. 该属性用于指示某个值不是数字
# 转换成浮点数
parseFloat("123.456") // 返回 123.456
字符串(String)
var a = "Hello";
var b = "wworld";
var c = a + b;
console.log(c); // 得到 Helloworld
常用方法:
# 返回长度
var a = "asdfghjk"
a.length; // 8
# 移除两侧空白
var a = "asdfghjk"
a.trim(); // "asdfghjk"
# 移除左边 / 右边空白
var a = "asdf"
var b = "ghjk"
a.trimLeft(); // "asdf"
b.trimRight(); // "ghjk"
# 返回第 n 个字符
var a = "asdfghjk"
a.charAt(n) # n 类似索引, 从 0 开始, 超过最大值返回空字符串
# 字符串拼接
var a = "asdf"
var b = "ghjk"
a.concat(b) // "asdfghjk"
# 子序列位置
var a = "asdf"
a.indexOf("d",1) // 2
# 从索引 1 开始 查找字符串 "d", 如果找不到就返回 -1, 找到返回索引值
# 根据索引获取子序列
var a = "asdf"
a.substring(1,3) // "sd"
# 不支持负数, 所以一般不使用, 了解即可
# 切片
var a = "asdf"
a.slice(1,3) //"sd"
# 全部变小写 / 大写
var a = "asDF"
a.toLowerCase() //"asdf"
a.toUpperCase() //"ASDF"
# 分割
var a = "asdf"
a.split("s") //["a", "df"]
a.split("s",1) //["a"]
布尔值
var a = true;
var b = false;
数据类型都有布尔值: '',0,null,undefined,NaN... 都是 false
null 和 undefined
null 表示值是空, 一般在需要指定或清空一个变量时才会使用, 如 name=null;
undefined 表示当声明一个变量但未初始化时, 该变量的默认值是 undefined. 还有就是函数无明确的返回值时, 返回的也是 undefined.
var a; -- undefined
null 表示变量的值是空, undefined 则表示只声明了变量, 但还没有赋值.
object 类型
var a = 'xx';
var b = new String('oo');
数组
var a = [11,22,33];
typeof a; -- "object"
var b = new Array([11,22,33,44]);
typeof b; -- "object"
数组常用方法
var a = [11,22,33];
索引取值 -- a[0];
数组长度 -- a.length;
尾部追加 -- a.push(44);
尾部删除 -- a.pop()
示例:
var a = [11, 22, 33, 44];
var b = a.pop();
结果:
a -- [11, 22, 33]
b -- 44
头部添加 -- a.unshift('aa')
示例:
var a = [11, 22, 33];
a.unshift('aa')
a -- ["aa", 11, 22, 33]
头部删除 -- shift()
示例:
var a = ["aa", 11, 22, 33];
a.shift() -- 'aa'
a -- [11, 22, 33];
切片 -- slice()
var b = a.slice(0,3);
b -- [11, 22]
反转 reverse()
var a = [11,22,33];
a.reverse()
a -- [33,22,11]
数组元素拼接 join
示例:
var a = ['aa','bb','cc'];
var b = a.join('_');
b -- "aa_bb_cc";
数组合并 concat
var a = ["aa", "bb", "cc"];
var b = [11,22];
var c = a.concat(b);
c -- ["aa", "bb", "cc", 11, 22];
排序 sort 比较尬
示例:
var a = [12,3,25,43];
对 a 进行升序排列:
1 定义函数
function sortNumber(a,b){
return a - b
};
2 var b = a.sort(sortNumber)
b -- [3, 12, 25, 43]
sort 规则:
如果想按照其他标准进行排序, 就需要提供比较函数, 也就是自己提供一个函数提供排序规则, 该函数要比较两个值, 然后返回一个用于说明这两个值的相对顺序的数字. 比较函数应该具有两个参数 a 和 b, 其返回值如下:
若 a 小于 b, 在排序后的数组中 a 应该出现在 b 之前, 则返回一个小于 0 的值.
若 a 等于 b, 则返回 0.
若 a 大于 b, 则返回一个大于 0 的值.
删除 .splice()
示例:
var a = ['aa','bb',33,44];
单纯删除: a.splice(1,1)
a -- ["aa", 33, 44]
删除在替换新元素:
var a = ["aa", 33, 44];
a.splice(0,2,'hello','world');
a -- ["hello", "world", 44];
三个参数介绍:
参数: 1. 从哪删(索引), 2. 删几个 3. 删除位置替换的新元素(可多个元素)
自定义对象 -- python 字典
索引取值
var a = {'name':'alex','age':48};
键可以不加引号: var a = {name:'alex',age:48};
a['age']; -- 48
a.age; -- 48
类型查询
运算符
算数运算符
+ - */ % + -- i++, 是 i 自加 1,i-- 是 i 自减 1 i++ 的这个加 1 操作优先级低, 先执行逻辑, 然后再自加 1, 而 ++i, 这个加 1 操作优先级高, 先自加 1, 然后再执行代码后面的逻辑
示例:
var a = 100;
a++; 或者 ++a; -- 101 a 自增 1
a++ 和 ++a 的区别, 示例:
- var a = 102;
- a++ == 102; -- true
- a -- 103;
- ++a == 103; -- false
- a -- 104;
比较运算符
>>= <<= != == === !==
==(弱等于)和 ===(强等于)两者的区别:
示例:
- var a = 11;
- var b = '11';
- a == b -- true
- a === b; -- false
逻辑运算符
&& || ! #and,or, 非(取反)!null 返回 true
示例:
- var a = true;
- var b = true;
- var c = false;
- a && b; -- true
- a && c; -- false
- a || c; -- true
- !c; -- true
赋值运算符
= += -= *= /=
示例: n += 1 其实就是 n = n + 1
流程控制
if 判断
简单 if-else 判断
- var a = 4;
- if (a> 5){
- console.log('a 大于 5');
- }
- else{
- console.log('小于 5');
- };
多条件判断
- 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 a = 1;
- switch (a++){ // 这里 day 这个参数必须是一个值或者是一个能够得到一个值的算式才行, 这个值和后面写的 case 后面的值逐个比较, 满足其中一个就执行 case 对应的下面的语句, 然后 break, 如果没有加 break, 还会继续往下判断
- case 1:
- console.log('等于 1');
- break;
- case 3:
- console.log('等于 3');
- break;
default: case 都不成立, 执行 default
- console.log('啥也不是!')
- }
for 循环
- for (var i=0;i<10;i++) { /* 就这么个写法, 声明一个变量, 变量小于 10, 变量每次循环自增 1,for(;;){console.log(i)}; 这种写法就是个死循环, 会一直循环, 直到你的浏览器崩了, 就不工作了, 回头可以拿别人的电脑试试~~ */
- console.log(i);
- }
循环数组:
var l2 = ['aa','bb','dd','cc']
方式 1
- for (var i in l2){
- console.log(i,l2[i]);
- }
方式 2
- for (var i=0;i<l2.length;i++){
- console.log(i,l2[i])
- }
循环自定义对象:
- var d = {aa:'xxx',bb:'ss',name:'小明'};
- for (var i in d){
- console.log(i,d[i],d.i) #注意循环自定义对象的时候, 打印键对应的值, 只能是对象 [键] 来取值, 不能使用对象. 键来取值.
- }
while 循环
- var i = 0;
- var a = 10;
- while (i < a){
- i++;
- console.log(i);
- if (i>5){
- continue;
- break;
- }
- };
三元运算
var c = a>b ? a:b;
函数
定义函数
普通函数
- function f1(){
- console.log('111');
- }
f1(); 执行函数
带参数的函数
- function f1(a,b){
- console.log('111');
- }
- f1(1,2);
带返回值的函数
- function f1(a,b){
- return a+b;
- }
- f1(1,2); -- 3
返回值不能有多个
- function f1(a,b){
- return a,b;
- }
- f1(1,2); -- 2
- function f1(a,b){
return [a,b]; 想要多个返回值, 需要换一种数据类型
- }
- f1(1,2); -- [1, 2]
匿名函数:
- var f1 = function(){
- console.log('111');
- }
- f1();
自执行函数
- (function(a,b){
- console.log(a+b);
- })(1,2);
函数的全局变量和局部变量
局部变量:
在 JavaScript 函数内部声明的变量 (使用 var) 是局部变量, 所以只能在函数内部访问它(该变量的作用域是函数内部). 只要函数运行完毕, 本地变量就会被删除.
全局变量:
在函数外声明的变量是 * 全局 * 变量, 网页上的所有脚本和函数都能访问它.
变量生存周期:
JavaScript 变量的生命期从它们被声明的时间开始.
局部变量会在函数运行以后被删除.
全局变量会在页面关闭后被删除.
作用域
首先在函数内部查找变量, 找不到则到外层函数查找, 逐步找到最外层.
- var city = "BeiJing";
- function f() {
- var city = "ShangHai";
- function inner(){
- var city = "ShenZhen";
- console.log(city);
- }
- inner();
- }
- f();
- var city = "BeiJing";
- function Bar() {
- console.log(city);
- }
- function f() {
- var city = "ShangHai";
- return Bar;
- }
- var ret = f();
- ret();
闭包:
- var city = "BeiJing";
- function f(){
- var city = "ShangHai";
- function inner(){
- console.log(city);
- }
- return inner;
- }
- var ret = f();
- ret();
面向对象
- function Person(name){
- this.name = name;
- };
- var p = new Person('taibai');
- console.log(p.name);
- Person.prototype.sum = function(a,b){ // 封装方法
- return a+b;
- };
- p.sum(1,2);
- 3
date 对象
- // 方法 1: 不指定参数
- var d1 = new Date(); // 获取当前时间
- console.log(d1.toLocaleString()); // 当前 2 时间日期的字符串表示
- // 方法 2: 参数为日期字符串
- var d2 = new Date("2004/3/20 11:12");
- console.log(d2.toLocaleString())
常用方法
var d = new Date();
使用 d.getDate()
- //getDate() 获取日
- //getDay () 获取星期 , 数字表示(0-6), 周日数字是 0
- //getMonth () 获取月(0-11,0 表示 1 月, 依次类推)
- //getFullYear () 获取完整年份
- //getHours () 获取小时
- //getMinutes () 获取分钟
- //getSeconds () 获取秒
- //getMilliseconds () 获取毫秒
- //getTime () 返回累计毫秒数(从 1970/1/1 午夜), 时间戳
JSON 对象
- var a = {"name":"太白", "age":89}
- # 序列化:
- var b = JSON.stringify(a)
- # 反序列化:
- var c = JSON.parse(b)
RegExp 对象
- var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$");
- # 简写方式:
- var reg2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/;
- reg2.test("a468468684")
- # true
- reg2.test("s1")
- # false
- # 坑:
- reg2.test();
- # 什么也不填写, 会默认成 reg2.test('undefined'); 如果'undefined'满足你的正则要求, 就返回 true
- # 字符串使用正则是的一些方法:
- var s2 = "hello world";
- s2.match(/o/);
- # 匹配元素
- # ["o", index: 4, input: "hello world", groups: undefined]
- s2.match(/o/g);
- # 加上 g 是全局匹配
- # (2)?["o", "o"]
- s2.search(/o/);
- # 找符合正则规则的字符串的索引位置
- # 4
- s2.split(/o/);
- # 用符合正则的字符串进行分割
- # (3)?["hell", "w", "rld"]
- var s3 = 'Alex is A xiaosb';
- s3.replace(/a/gi,'DSB');
- # 替换, g 全局替换, i 不区分大小写
- # "DSBlex is DSB xiDSBosb"
- # 正则加 g 之后, 进行 test 测试需要注意的问题
- var reg3 = /a/g;
- var s1 = 'alex is a xiaosb';
- reg3.lastIndex
- # 0
- reg3.test(s1);
- # true
- reg3.lastIndex
- # 1
- reg3.test(s1);
- # true
- reg3.lastIndex
- # 9
- reg3.test(s1);
- # true
- reg3.lastIndex
- # 13
- reg3.test(s1);
- # false
- # 置零:
- reg3.lastIndex = 0
Math 对象
- Math.abs(x)
- # 返回数的绝对值.
- Math.exp(x)
- # 返回 e 的指数.
- Math.floor(x)
- # 小数部分进行直接舍去.
- Math.log(x)
- # 返回数的自然对数(底为 e).
- Math.max(x,y)
- # 返回 x 和 y 中的最高值.
- Math.min(x,y)
- # 返回 x 和 y 中的最低值.
- Math.pow(x,y)
- # 返回 x 的 y 次幂.
- Math.random()
- # 返回 0 ~ 1 之间的随机数.
- Math.round(x)
- # 把数四舍五入为最接近的整数.
- Math.sin(x)
- # 返回数的正弦.
- Math.sqrt(x)
- # 返回数的平方根.
- Math.tan(x)
- # 返回角的正切.
来源: http://www.bubuko.com/infodetail-3304890.html