文章目录
JavaScript 概述
JavaScript引入方式
- Script标签内写代码
<script>
// 在这里写JS代码
</script>
- 引入额外的JS文件
JavaScript语言规范
- 注释：//
- 结束符： 分号 ;
JavaScript 语言基础
- 变量声明
- 下划线，数字，字母，$组合使用，不能以数字开头
- 使用
var 变量名;的格式来声明
推荐使用驼峰体
var name = 'laura';
undefined
var age = 20;
undefined
JavaScript数据类型
JavaScript拥有动态类型
var x; // 此时x时undefined
var x = 1; // 此时x是数字
var x = 'laura' // 此时x是字符串
数值 （Number）
JavaScript不区分整形和浮点型，只有数字类型
var a = 18.34
undefined
typeof a
"number"
var b = 90;
undefined
typeof b
"number"
var c = 878e87;
undefined
var d = 898e-5;
undefined
typeof d;
"number"
NaN类型：表示不是一个数字 Not a Number
parseInt('123')
123 //把字符串类型转换为数值类型
parseInt('ABC');
NaN //表示某个值不是数字
parseInt('89.34')
89
parseFloat('34.24')
34.24
字符串（String）
- 拼接字符串
a = 'hello'
"hello"
b = ' world'
" world"
c = a + b
"hello world"
- .length 返回字符串长度
var a = 'hello world';
undefined
a.length // 返回字符串长度
11
- .trim() 移除空格， .trimLeft() 移除左边的空格，.trimRight() 移除右边的空格
trim：修剪的意思
var s = ' hello ';
undefined
s.trim()
"hello"
s.trimLeft()
"hello "
s.trimRight()
" hello"
- charAt(n) 返回第n个字符
var s1 = 'hello world';
undefined
s1.charAt(0)
"h"
s1.charAt(100)
""
s1.charAt(4)
"o"
- .concat(value,…) 拼接
s1.concat('哈哈')
"hello world哈哈"
- .indexOf(substring, start) 子序列位置
s1.indexOf('world')
6
s1.indexOf('sg', 7)
-1 //不存在就返回-1
s1.indexOf('ss', 8)
-1
- substring(start, stop) 根据索引获取子序列
var s = 'hello wd';
undefined
s.substring(0, 5)
"hello"
s1.substring(0, -5)
""
substring特点： 如果start > stop , start 和stop 将被交换位置，如果某个参数是负数或不是数字，将会被0替换，如下图：
- .slice(start, stop) 切片
s.slice(0, 5)
"hello"
s.slice(0, -5)
"hel"
s.slice(-5, 9);
"wor"
s.slice(4, -2);
"o wor"
slice 特点：
如果strart > stop 不会交换两者
如果start 小于0， 则开始切割的位置为从末尾往前数的第abs（start）个（包含该位置字符），如
如果stop小于0， 则切割从字符串末尾往前数的第abs(stop) 个字符结束（不包含该位置字符）
- .toLowerCase() 全小写 ， .toUpperCase() 全大写
var s2 = 'Hello World'
undefined
s2.toLowerCase();
"hello world"
s2.toUpperCase();
"HELLO WORLD"
- split(delimiter, limit) 分割
s.split(' ');
(2) ["hello", "wd"]
s1.split(' ', 1)
["hello"]
s1.split(' ', 2)
(2) ["hello", "world"]
s1.split(' ', 3)
(2) ["hello", "world"]
- ES6新功能
模板字符串，用反引号`标识，它既可以当做普通字符串使用，也可以用来定义多行字符串，或在字符串中嵌入变量- 多行文本
var s = `这是一
多行的
文本
`;
undefined
s
"这是一
多行的
文本
"
- 字符串中嵌入变量
var name = 'laura';
undefined
var s1 = `${name} like swim`;
undefined
s1
"laura like swim"
布尔值（Boolean）
区别于python，true 和 false 都是小写
var a = true;
undefined
a
true
var b = false;
undefined
b
false
(空字符串), 0, null, undefined, NaN都是false
null 和undefined
- null表示值是空，一般在需要指定或清空一个变量时才会使用，如name = null；
b
false
b = null
null
b
null
- undefined 表示当声明一个变量但未初识化时，该变量的默认值是undefined，另外一种情况是函数无明确返回值时，也是返回undefined
null强调的是值，而undefined强调的是只是声明了变量，还没有被赋值
对象（Object）
JavaScript 中的所有事物都是对象，字符串，数值，数组，函数… ,此外，JavaScript允许自定义对象
JavaScript提供多个内建对象，如String，Date，Array等
对象只是带有属性和方法的特殊数据类型
数组
使用单独的变量名来储存一系列的值，类似于python的列表
数组的常用方法：
- .length 数组大小
var a = [1, 3, 8, 4];
undefined
a[1]
3
a[8]
undefined
a.length
4
- .push(ele) 尾部追加元素
var a = [1, 3, 8, 4];
undefined
a.push(5)
5
a
(5) [1, 3, 8, 4, 5]
a.push()
5
a
(5) [1, 3, 8, 4, 5]
- .pop() 获取尾部元素
a.pop()
4
a
(3) [1, 3, 8]
- .unshift(ele) 头部插入元素,.shift() 头部移除元素
a.unshift(100)
4
a.shift()
100
a
(3) [1, 3, 8]
- .slice(start, end) 切片
a.slice(1,3)
(2) [3, 8]
a.slice(1, -1)
[3]
- .reverse() 反转
a.reverse()
(3) [8, 3, 1]
a
(3) [8, 3, 1]
- join(seq) 将数组元素连接成字符串
a.join('+')
"8+3+1"
- concat(val, …) 连接数组
a.concat(3, 9, 3)
(6) [8, 3, 1, 3, 9, 3]
a.concat(['a', 'b']
VM1303:1 Uncaught SyntaxError: missing ) after argument list
a.concat(['s', 'j']);
(5) [8, 3, 1, "s", "j"]
- .sort() 排序
a.sort()
(3) [1, 3, 8]
sort 注意点：
如果调用该方法时没有使用参数，将按字母ASCII码顺序对数字中的元素进行排序，也就是把数字中的元素都转换为字符串，以便比较
- .splice() 删除元素，并向数组添加新元素
a.splice(1, 1)
[3]
a
(2) [1, 8]
a.splice(1, 1, 90)
[8]0: 8length: 1__proto__: Array(0)
a
(2) [1, 90]0: 41: 32: 3length: 3__proto__: Array(0)
a.splice(1, 10);
[90]
a
[1]
a.splice(0, 3, 4, 3, 3)
[1]
a
(3) [4, 3, 3]
- JS中自定义对象
var ol = {'name': 'laura', 'age': 18}
undefined
ol
{name: "laura", age: 18}
var od = {name: 'wendy', age: 30}
undefined
od
{name: "wendy", age: 30} //类似Python中的字典key可以不加引号
splice()
map()
类型查询
typeof iuy
"undefined" //类型为undefined
typeof false
"boolean"
typeof 'laura'
"string"
typeof 100
"number"
typeof NaN
"number"
typeof [11, 22, 33]
"object" //引用类型或Null类型
typeof null
"object"
typeof undefined
"undefined"
运算符
算数运算符
+ - * / % ++ --
2 % 2 //取余数
0
3 / 2
1.5
3 % 2
1
45 % 4
1
比较运算符
> >= < <= != == === !==
3 > 2
true
3 != 2;
true
2 == 2;
true
2 == '2' // 弱等于， 只判断值相不相等
true
2 === '2' // 强等于，即判断类型相不相等，还判断值相不相等
false
逻辑运算符
&& || ! 相当于python的and， or
1 && true
true
1 && null
null
1 || null
1
null || 1
1
!null
true
赋值运算符
= += -= *= /=
var n = 100;
undefined
n += 1;
101
n -= 1;
100
n *= 2;
200
n /= 2;
100
流程控制
if
var age = 30;
if (age < 18) {
console.log('未成年');
}else if (age > 60){
console.log('退休');
}else {
console.log('苦逼上班的');
}
VM396:7 苦逼上班的
if-else
var a = 10;
undefined
if (a > 5) {
console.log('a>5');
}else if (a < 5) {
console.log('a<5');
}else {
console.log('a=5');
}
VM487:2 a>5
switch
var day = 3;
undefined
switch (day) {
case 1:
console.log('红烧肉');
break
case 2:
consloe.log('饺子');
break
case 3:
console.log('鸡公煲');
break
default:
console.log('外卖');
}
VM439:9 鸡公煲
switch中的case子句通常都会加break语句，否则程序会继续执行后续case中的语句
for 循环
for (var i=0; i<10; i++) {
console.log(i);
}
VM507:2 0
VM507:2 1
VM507:2 2
VM507:2 3
VM507:2 4
VM507:2 5
VM507:2 6
VM507:2 7
VM507:2 8
VM507:2 9
while循环
var n = 10;
undefined
while (n > 0){
console.log(n);
n--
}
VM538:2 10
VM538:2 9
VM538:2 8
VM538:2 7
VM538:2 6
VM538:2 5
VM538:2 4
VM538:2 3
VM538:2 2
VM538:2 1
1
三元运算
var 条件 ：
var x = 100;
undefined
var y = 10;
undefined
var a = x > y? x:y
undefined
a
100
JS中的函数
JavaScript中的函数和Python中的非常类似，只是定义方式有点区别
- 基本函数
function func(x, y){
return [x, y, 1, 2, 3, 4, 5]
}
undefined
var ret = func(100, 200);
undefined
console.log(ret);
VM148:1 (7) [100, 200, 1, 2, 3, 4, 5]
undefined
- 匿名函数
var foo = function(x, y) {
return x + y
};
undefined
var ret1 = foo(10, 20);
undefined
console.log(ret1);
VM192:1 30
undefined
- 立即执行函数
(function (x, y) {
console.log('自动执行函数！');
console.log(x + y);
})(125, 521);
VM237:2 自动执行函数！
VM237:3 646
JS中的面向对象
ES5中没有类的概念，可以通过构造函数的方法创建一个类。首字母需大写
function Person(name) {
this.name = name
}
undefined
Person.prototype.dream = function() {
console.log(this.name + '梦想是：做喜欢做的事情！');
}; //给人加统一的方法
ƒ () {
console.log(this.name + '梦想是：做喜欢做的事情！');
}
var p1 = new Person('Laura'); //使用new关键字进行实例化
undefined
console.log(p1.name);
VM330:1 Laura
undefined
p1.dream();
VM297:2 Laura梦想是：做喜欢做的事情！
JS中内置对象
时间对象Date
date = new Date() //新建一个时间对象
Tue Oct 16 2018 23:22:03 GMT+0800 (中国标准时间)
var d1 = date.toLocaleDateString
undefined
d1
ƒ toLocaleDateString() { [native code] }
d1 = date.toLocaleDateString()
"2018/10/16"
date.toLocaleString()
"2018/10/16 下午11:22:03"
date.toString()
"Tue Oct 16 2018 23:22:03 GMT+0800 (中国标准时间)"
typeof date
"object"
typeof d1
"string"
date.getMonth()
9 //月份从0开始的
date.getFullYear()
2018
date.getYear()
118
date.getDay()
2 //星期几
- $(‘document’).ready(function() {}) : ready 文档全部加载完后再执行函数
17万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
