<script type="text/javascript">
//编写js代码
alert('I am 派大星');
alert('Hello?')
</script>
<script type="text/javascript" src="JS外部文件XXXX.js"></script>
//单行注释
/*
多行注释1
多行注释2
多行注释3
*/
//JavaScript 每一条语句末尾都以分号(;)结尾, 并且所有符号都必须得是英文符号
var x = 2;
var y;
y = 2
ES5语法,我们采用var关键词定义变量,并且没有常量的概念
ES6语法,我们采用let关键词定义变量,用const关键词定义常量
可以先声明后定义(赋值)
var name; //声明时无需指定类型, 变量 name 可以接受任意类型
name = "shawn" //再对变量名进行赋值
声明并立即定义(变量初始化)
var name = "shawn"
var a = 100;
var b = "100";
var c = a + b;
//你期望的可能是200, 但实际上是"100100", 这个错误在强类型语言中决不会出现
//然而正是因为JavaScript没有这些约束,所以可以很方便地拼接数字和字符串类型
var a = "22";
a = a - "";
typeof(a);
//"-"可以是一元运算符(取负), 也可以是二元(减法运算)
JS变量的声明被提前到作用域顶部,赋值保留在原地;(不要小看这句总结)请看下面这个例子:
var color = "blue";
function getColor()
{
console.log(color); // undefined
var color = "red";
return color;
}
console.log(getColor()); // red
可能你已经掌握了局部作用域会覆盖上一级作用域的同名变量。然后Line4的color先使用上一级作用域的color,所以误认为值是blue。其实不是,原因就在于,JS变量的声明(var修饰)会被提前到函数作用域的开始处,即相当于Line5的var color=“red”;被分解成var color; color=“red”;而var color先被JS引擎解析,覆盖了上一级的color,接着执行Line4的输出,此时color没有被赋值,赋值color=“red”;依然保留在Line5处。以上代码理解如下:
var color;
color = "blue"
function getColor()
{
var color;
console.log(color); // undefined
color = "red";
return color;
}
console.log(getColor()); // red
这个细节,告诉我们,不能只知其一不知其二。特别是函数:
console.log(window.sum);
// 执行结果
/*
ƒ sum(a,b){
return a+b;
}
*/
alert(sum(1,1)); // 2
function sum(a,b){
return a+b;
}
console.log(window.sum); // undefined
alert(sum(1,1)); // 报错
var sum = function (a,b){
return a+b;
}
// 如下
var sum;
alert(sum(1,1)); // 报错
sum = function (a,b){
return a+b;
}
总结: 在执行JS代码之前,所有的全局变量(包括函数和变量),都会绑定到window对象上,只是函数会包含函数体,变量仅仅是一个undefined。
var _A = 40;
var $ = 100;
alert(_A); //浏览器弹窗显示结果
alert($);
例如:for循环的计数器就很适合使用let命令
for(let i=1;i<=5;i++){
}
ES6新增const用来声明常量。一旦声明,其值就不能改变。
const PI = 3.1415;
PI // 3.1415
PI = 3
// TypeError: "PI" is read-only
or (let i; i < n; i++)
一种很推荐的写法总之呢,let从规范化的角度来说,要比var要进步了很大一步。所以一般情况下的话,推荐用let,const这些。
5种基本数据类型: number, string, boolean, undefined, null
打印数据类型: alert(声明的变量名);
查看属性类型: alert(typeof 声明的变量名);
var a = 11;
var b = 11.11;
// 如何查看当前数据类型?
console.log(typeof a); // number
console.log(typeof b); // number
// 特殊的 NaN:数值类型 表示的意思是“不是一个数字” NOT A NUMBER
console.log(typeof NaN); // number
// 类型转换
// python中int类型只能转换纯数字的字符串, float只能转换带一个点的纯数字的字符串
console.log(parseInt('123123')); // 12312312
console.log(parseFloat('11.11')); // 11.11
console.log(parseInt('11.11')); // 11
console.log(parseInt('123sdasdajs2312d')); // 123
console.log();parseInt('asdasdad123sdad'); // NaN
console.log(parseFloat('11')); // 11
console.log(parseFloat('11.11')); // 11.11
console.log(parseFloat('11.111faweff')); // 11.111
console.log(parseFloat('awefe11.11')); // NaN
// 总结
/*
1. 数值类型: 纯数字, 浮点数, NaN
2. 查看类型: typeof
3. 字符串转换成数值类型: parseInt() parseFloat()
*/
ps : typeof 用来检查当前变量的数据类型
var s = 'jason';
var s1 = 'tank';
// var s2 = '''alex''' // 不支持三引号(抛出异常: VM665:1 Uncaught SyntaxError: Unexpected string)
console.log(typeof s1); // string
// 模版字符串(注意: 如果模板字符串中需要使用反引号,则在其前面要用反斜杠转义。)
var s3 = `
\`多行显示使用模版字符串
\`多行显示使用模版字符串
`;
console.log(typeof s3); // string
// 模版字符串除了可以定义多行文本之外还可以实现格式化字符串操作
var name = 'jason';
var age = 18;
var sss = `
My name is ${
name} My age is ${
age}`;
console.log(sss); // My name is jason My age is 18
// 书写${} 会自动去前面找大括号里面的变量名对应的值 如果没有定义直接报错
// var s4 = `my name is ${xxxxx}`;
// console.log(s4); // 抛出异常: Uncaught ReferenceError: namemmmmm is not defined
// 字符串的拼接
/*
在python中不推荐你使用+做拼接 join
在js中推荐你直接使用+做拼接: python中字符串数值不能直接和字符串进行拼接, 但是再js中会把数值类型转换成字符串类型再进行拼接
*/
var sss1 = name + age;
console.log(sss1); // jason18
// 总结
/*
1. python中使用三引号展示多行字符串. js中使用模板字符串展示多行字符串
2. python中使用%s,format,f"{}"等方式实现字符串的格式化. js中使用`${}`实现字符串的格式化
3. python中使用+,join实现字符串的拼接, +号数值不能直接和字符串进行拼接, join中列表中元素必须是字符串类型(推荐用join). 而js中使用+实现字符串的拼接,且当+号进行拼接时遇见数值类型会先换成字符串类型再进行拼接
*/
功能 | js | python | mysql | 区别 |
返回长度 | .length | len() | char_length() | |
移除两边空白 | .trim() | .strip() | python中除了移除空白, 还可以指定要移除的字符, js只能单纯的移除空白 | |
移除左边的空白 | .trimLeft() | .lstrip() | ||
移除右边的空白 | .trimRight() | .rstrip() | ||
返回第n个字符 | .charAt(n) | list[n] | ||
拼接 | .concat(value,…) | .join(), + | concat(), concat_ws(), group_concat() | python中使用+,join实现字符串的拼接, +号数值不能直接和字符串进行拼接, join中列表中元素必须是字符串类型(推荐用join). 而js中使用+, 或者.concat()实现字符串的拼接,当进行拼接时遇见数值类型会先换成字符串类型再进行拼接 |
子序列位置 | .indexOf(substring, start) | .index(), rindex(), .find(), .rfind() | ||
根据索引获取子序列 | .substring(start , end) | list[start, end, step] | python中可以识别负数, js中substring不识别, 而slice则支持负数(推荐) | |
切片 | .slice(start, end) | list[start, end, step] | ||
小写 | .toLowerCase() | .lower() | ||
大写 | .toupperCase(0 | .upper() | ||
分割 | .split(delimiter, limit) | .split(sep, maxsplit), rsplit(sep, maxsplit) | python中第二个参数是限制分隔字符的个数, js中式获取切割之后的元素个数 |
var name = 'egonDSB';
console.log(name.length); // 7
var name1 = ' egonDSB ';
console.log(name1.trim()); // egonDSB
console.log(name1.trimLeft()); // egonDSB
console.log(name1.trimRight()); // egonDSB
var name2 = '$$jason$$';
console.log(name2.trim('$')); // $$jason$$(不能加括号指定去除的内容)
console.log(name2.charAt(0)); // $
console.log(name2.indexOf('as')); // 3
console.log(name2.substring(0,2)); // $$
console.log(name2.substring(0,-1)); // 不识别负数
console.log(name2.slice(0,-1)); // $$jason$
var name3 = 'eGoNDsb123666HahA';
console.log(name3.toUpperCase()); // EGONDSB123666HAHA
console.log(name3.toLowerCase()); // egondsb123666haha
var name4 = 'tank|hecha|liaomei|mengsao|...';
console.log(name4.split('|')); // ["tank", "hecha", "liaomei", "mengsao", "..."]
console.log(name4.split('|', 2)); // ["tank", "hecha"](第二个参数不是限制切割字符的个数还是获取切割之后元素的个数)
console.log(name.concat(name1, name2)); // egonDSB egonDSB $$jason$$
console.log(name+name1+name2); // egonDSB egonDSB $$jason$$
var p = 1;
console.log(name.concat(p)); // egonDSB1*(js是弱类型, 内部会自动转换成相同的数据类型做操作)
// 总结
/*
.length 长度
.trim(), .trimLeft(), .trimRight() 只能移除空格没有参数
.substring(start, end), .slice(start, end) slice支持负数
.concat(val, ...), +
.indexOf(substring, start), .charAt(substring)
.toUpperCase(), toLowerCase()
.split(delimiter, limit) 第二个参数指定切分的个数, 不是次数
*/
2种转换方式: 隐式转换,或者调用.toString()
方法
var num = 123;
var str = 123 + "abc";
.toString()
方法var num = 123;
var str = num.toString();
Number()
方法字符串中不是全是数值类型的情况下:
报错, alert打印出现NaN: Not a number, 类型打印为number
var str = 'abc';
var num = Number(str);
字符串中全是数字类型的情况:
正确转换
var str = '123.123';
var num = Number(str);
"""
1.在python中布尔值是首字母大写的
True
False
2.但是在js中布尔值是全小写的
true
false
# 布尔值是false的有哪些
空字符串、0、null、undefined、NaN
"""
console.log(Boolean(0)); // false
console.log(Boolean(false)); // false
console.log(Boolean(undefined)); // false
console.log(Boolean(NaN)); // false
var x;
x // undefined
typeof(x) // "undefined"
var xx = null;
xx // null
typeof(xx); // "object"
null表示变量的值是空(null可以手动清空一个变量的值,使得该变量变为object类型,值为null),undefined则表示只声明了变量,但还没有赋值。
还不明白,上图吧!
前提:n = 5
运算符 | 描述 | 例子 | x结果 | n结果 |
---|---|---|---|---|
+ | 加法 | x=n+2 | 7 | 5 |
- | 减法 | x=n-2 | 3 | 5 |
* | 乘法 | x=n*2 | 10 | 5 |
/ | 除法 | x=n/2 | 2.5 | 5 |
% | 取模(余数) | x=n/2 | 1 | 5 |
++ | 自增 | x=++n | 6 | 6 |
x=n++ | 5 | 6 | ||
– | 自减 | x=–n | 4 | 4 |
x=n– | 5 | 4 |
/*
++表示自增1 类似于python中的 +=1
加号在前先加后赋值 加号在后先赋值后加
*/
var x = 10;
var res = x++;
console.log(res); // 10
var res1 = ++x;
console.log(res1); // 12
前提:x=5,y=5
运算符 | 例子 | 等同于 | 运算结果 |
---|---|---|---|
= | x=y | 5 | |
+= | x+=y | x=x+y | 10 |
-= | x-=y | x=x-y | 0 |
*= | x*=y | x=x*y | 25 |
/= | x/=y | x=x/y | 1 |
%= | x%=y | x=x%y | 0 |
/*
++表示自增1 类似于python中的 +=1
加号在前先加后赋值 加号在后先赋值后加
*/
var x = 10;
var res = x++;
console.log(res); // 10
var res1 = ++x;
console.log(res1); // 12
前提:x=5
运算符 | 描述 | 比较 | 结果 |
---|---|---|---|
== | 等于 | x==”5” | true |
=== | 绝对等于 | x===”5” | false |
!= | 不等于 | x!=”5” | fales |
!== | 不绝对等于 | x!==”5” | true |
> | 大于 | x>5 | false |
< | 小于 | x<5 | false |
>= | 大于等于 | x>=5 | true |
<= | 小于等于 | x<=5 | true |
/*
python中 and or not
js中 && || !
注意: 比较运算符返回的结果是布尔值, 逻辑运算返回的结果是短路运算以后的结果.
短路运算举例:
0 && 1 返回结果是0. 也就是说0的布尔值为false, 与运算只要有一个结果是false那么结果就是false, 所以计算到0就不会往后计算了.
*/
console.log(5 && '5'); // '5'
console.log(0 || 1); // 1
console.log(!5 && '5'); // false
前提:n=5
运算符 | 描述 | 例子 | 结果 |
---|---|---|---|
&& | 与 | x=n>10&&++n | x=false,n=5(短路) |
|| | 或 | x=n<10||n– | x=true,n=5(短路) |
! | 非 | x=!n | x=false,x=5 |
// &&
var weather = 'sunny';
var temp = 29;
if (weather ==='sunny' && temp >30){
console.log('天气太热,在家吃西瓜吹空调');
}else if(weather ==='sunny' && temp <= 30){
console.log('天气不错,出去玩');
}
// ||
var chanese = 85;
var math = 75;
if (chanese >=90 || math >=80){
console.log('出去玩');
}else{
console.log('在家写作业');
}
// !
var login = false;
alert(!login);
if (!login) {
console.log('用户已登入');
}
var [变量名] = [条件] ? [真的执行这个] : [假的执行这个]
// 结果 = 条件表达式 ? 结果1 : 结果2;
// 语法规则:条件表达式成立,将结果1赋值给结果,否则赋值结果2
// 案例:
var weather = prompt("天气(晴|雨)"); // 文本输入弹出框
var res = tq == '晴' ? "今天天气挺好" : "请假回家收衣服";
console.log(res); // 今天天气挺好
/*
注意: 在js中代码是没有缩进的, js中的`(条件){代码块}`替代了缩进, 以一下的缩进只是为了可读性, 而python是有缩进这么一说的.
*/
var age = 28;
// if
if (age>18){
console.log('来啊 来啊')
}
// if-else
if (age>18){
console.log('来啊 来啊')
}else{
console.log('没钱 滚蛋')
}
// if-else if-else
if (age > 25){
console.log('你好我们不合适!');
} else if (age < 18) {
console.log('培养一下');
} else {
console.log('我们在一起吧!');
}
switch中的case子句通常都会加break语句,否则程序会继续执行后续case中的语句
var num = 2;
switch (num) {
case 0: // case 条件: 条件=num成立执行
console.log('吃');
break; // 不加break 匹配到一个之后 就一直往下执行(简称: 穿透执行)
case 1:
console.log('喝');
break;
case 2:
console.log('玩'); // 执行结果: 玩
break;
case 3:
console.log('乐');
break;
default:
console.log('条件都没有匹配上 默认走的流程');
}
语法:
for([初始化条件];[结束条件];[递增条件]){
// 需要执行的代码
}
// 1. for循环控制执行次数: 打印0-9数字
for (let i = 0; i < 10; i++) {
console.log(i);
}
// 2. for循环遍历取值
for (let i in ['aaa', 'bbb', 'ccc']) {
console.log(i);
}
// 3. for循环死循环之break和cointinue语句+死循环
let i = 0;
for (;;) {
// 死循环
console.log('哈哈哈');
if (i === 10000) {
break; // break跳出当前循环
}
// i ++;
i += 1;
}
let sum = 0; // 计算1~10数值, 并排除5这个数
for (let j = 1; j < 11; j++) {
if (j === 10) {
continue; // continue跳出当前循环, 下次循环继续进行
}
sum += j;
j += 1;
}
console.log(sum); // 25
语法
while([判断循环结束条件]){
// 需要执行的代码
// 递增条件
}
示例:打印1~100
var i = 1;
while (i < 101) {
console.log(i);
i += 1;
}
// 0~99 之和
var sum = 0; // 初始和
var i = 1; // 初始奇数
do{
sum = sum + i;
i++;
}while(i <= 100);
alert(sum);
var sum = 0;
var i = 1;
do{
sum = sum + i;
i++;
}while(i<=1);
alert(sum);
// 结果等于
var [变量名] = [条件] ? [真的执行这个] : [假的执行这个]
/*
python中三元运算符 res = 条件成立返回的结果 if 条件 else 条件不成立返回的结果
JS中三元运算 res = 条件 ? 条件成立返回的结果:条件不成立返回的结果
*/
var res = 1 > 2 ? 2:8;
console.log(res); // 8
var res1 = 1 > 2 ? 2:(3 < !6 ? 1:0); // 三元运算符不要写的过于复杂
console.log(res1); // 0
/*
if (条件) {子代码块}
if (条件) {子代码块} else (条件) {子代码块}
if (条件) {子代码块} else if (条件) {子代码块} else (条件) {子代码块}
switch (参数) {
case 条件: // 参数=条件则成立就执行以下代码块
子代码块
break;
...
default:
以上条件都没成立则指定这里的子代码块
}
for循环控制执行次数+遍历取值
for (语句 1; 语句 2; 语句 3) { // 循环控制执行次数
要执行的代码块
}
语句 1 在循环(代码块)开始之前执行。
语句 2 定义运行循环(代码块)的条件。
语句 3 会在循环(代码块)每次被执行后执行。
for (let i in 可遍历对象) {
要执行的代码块
}
while (条件) {
子代码块
}
res = 条件 ? 条件成立返回的结果:条件不成立返回的结果
*/
功能 | js | python | 区别 |
---|---|---|---|
数组的大小 | .length | len() | |
获取数组中的元素 | array[index] | list[index] | python中支持负数, js中不支持负数索引 |
尾部追加元素 | .push(ele) | .append(ele) | |
弹出尾部的元素 | .pop() | .pop() | |
头部插入元素 | .unshift(ele) | .insert(0, ele), list[0]=ele | |
头部移除元素 | .shift() | .remove(头ele), pop(0), del list[0] | |
切片 | .selice(start, end) | list[start, end] | |
反转 | .reverse() | .reverse() | |
将数组元素连接成字符串 | .join(seq) | '.join() | python中join中’'中放的是连接的字符括号中放的是每个元素都是字符串类型的索引类型元素, 而js中点前面是数组后面是连接的字符. |
连接数组 | .concat(val, …) | .extend, + | |
排序 | .sort() | .sort() | |
将数组的每个元素传递给回调函数 | forEach(function(currentValue, index, arr), thisValue) | ||
删除元素,并向数组添加新元素。 | splice(index,howmany,item1,…,itemX) | ||
返回一个数组元素调用函数处理后的值的新数组 | map(function(currentValue,index,arr), thisValue) |
// 数组(类似于python里面的列表) []
var array1 = [222, 333, 444, 555];
console.log(typeof array1); // object
console.log(array1[1]); // 333
console.log(array1[-1]); // undefined(不支持负数索引)
console.log(array1.push(666)); // 5
console.log(array1); // [222, 333, 444, 555, 666]
console.log(array1.pop()); // 666
console.log(array1); // [222, 333, 444, 555]
console.log(array1.unshift(111)); // 5
console.log(array1); // [111, 222, 333, 444, 555]
console.log(array1.shift(111)); // 111
console.log(array1); // [222, 333, 444, 555]
console.log(array1.slice(0, -1)); // [222, 333, 444]
console.log(array1.slice(0, array1.length)); // [222, 333, 444, 555] (如果通过切片的方式复制一门数组对象, 结束位置指定-1是不行的, 这也只能取到数组的倒数第二个值, 因此我们要用.length属性)
console.log(array1.reverse()); // [555, 444, 333, 222]
console.log(array1.join('$')); // 555$444$333$222
console.log(array1.concat(['aaa', 'bbb'])); // [555, 444, 333, 222, "aaa", "bbb"]
console.log(array1); // [555, 444, 333, 222]
// forEach: forEach(function(currentValue, index, arr), thisValue)
// 1. 一个参数就是数组里面每一个元素对象
var array2 = [111, 222, 333, 444, 555];
array2.forEach(function (value) {
console.log(value);
}, array2);
// 执行结果:
/*
111
222
333
444
555
666
*/
// 2. 两个参数就是元素 + 元素索引
array2.forEach(function (value, index) {
console.log(value, index);
}, array2);
// 执行结果:
/*
111 0
222 1
333 2
444 3
555 4
666 5
*/
// 3. 元素 + 元素索引 + 元素的数据来源
array2.forEach(function (value, index, arr, xxx) {
console.log(value, index, arr, xxx); // 最多三个. 基于js这种弱类型语言, 如果没有xxx传入也不会报错. 会抛出undefined
// return [value, index, arr, xxx]; // 最多三个. 基于js这种弱类型语言, 如果没有xxx传入也不会报错. 会抛出undefined
}, array2);
// 执行结果:
/*
111 0 (6) [111, 222, 333, 444, 555, 666] undefined
222 1 (6) [111, 222, 333, 444, 555, 666] undefined
333 2 (6) [111, 222, 333, 444, 555, 666] undefined
444 3 (6) [111, 222, 333, 444, 555, 666] undefined
555 4 (6) [111, 222, 333, 444, 555, 666] undefined
666 5 (6) [111, 222, 333, 444, 555, 666] undefined
*/
// map: map(function(currentValue,index,arr), thisValue)
var array4 = [11, 22, 33, 44, 55];
array4.map(function (value) {
console.log(value);
}, array4);
// 执行结果:
/*
11
22
33
44
55
66
*/
var res1 = array4.map(function (value, index) {
return [value * 2, index]; // 如果相返回多个值, 必须被包含, 如果不包含返回的是逗号前的第一个值. 和python中只要逗号隔开返回元组不一样.
}, array4);
console.log(res1); // [11, 22, 33, 44, 55]
// 执行结果:
/*
[Array(2), Array(2), Array(2), Array(2), Array(2)]
0: (2) [22, 0]
1: (2) [44, 1]
2: (2) [66, 2]
3: (2) [88, 3]
4: (2) [110, 4]
length: 5
*/
var res2 = array4.map(function (value, index, arr) {
return [value * 2, index*2, arr];
}, array4);
console.log(res2); // [22, 44, 66, 88, 110]
// 执行结果:
/*
[Array(3), Array(3), Array(3), Array(3), Array(3)]
0: (3) [22, 0, Array(5)]
1: (3) [44, 2, Array(5)]
2: (3) [66, 4, Array(5)]
3: (3) [88, 6, Array(5)]
4: (3) [110, 8, Array(5)]
length: 5
*/
// splice: splice(index,howmany,item1,.....,itemX)
var array3 = [111, 222, 333, 444, 555];
array3.splice(0, 3); // 两个参数 第一个是起始索引位置 第二个是删除的个数
console.log(array3); // [444, 555]
array3.splice(0, 1, 666); // 第三个参数 要添加到数组的新元素
console.log(array3); // [666, 555]
array3.splice(0, 1, ['aaa', 'bbb']);
console.log(array3);
/*
[Array(2), 555]
0: (2) ["aaa", "bbb"]
1: 555
length: 2
*/
//
/*
1. 能用forEach()做到的,map()同样可以。反过来也是如此。
2. map()会分配内存空间存储新数组并返回,forEach()方法不会返回执行结果,而是undefined. 也就是说,forEach()会修改原来的数组。而map()方法会得到一个新的数组并返回。
*/
var array5 = [11, 22, 33, 44, 55];
var aaa = array5.forEach(function (value) {
return value;
});
var bbb = array5.map(function (value) {
return value*2;
});
console.log(aaa); // undefined
console.log(bbb); // [11, 22, 33, 44, 55]
.length 长度
array[index] 索引取值(索引不能为负数)
.push(ele), .pop() 尾部追加/删除
.unshift(ele), .shift() 头部追加/删除
.slice(start, end) 切片(想实现复制end通过.length获取数组的长度, -1只能取到倒数第二个值)
.reverse() 反转
.join(seq) 拼接
.concat(val, ...) 连接数组(+号只能连接字符串)
.sort() 排序
.foreach(function(value,index,arr){
}, thisValue) function是一个回调函数callback
.map(function(value,index,arr){
}, thisValue)
.splice(index, removeCount, item1, ... , itemX)