js ECMAscript（一）变量，类型，运算符，流程控制，数组，函数
1、js介绍
2、js的书写位置
3、js代码的注意事项和注释
4、输出消息的几种方式
5、变量
6、数据类型和typeof
7、类型转换
8、运算符
9、流程控制
10、数组
11、函数
12、js的全局函数
13、js的函数重载
1、js介绍 <--返回目录
* js是一款运行在客户端的网页编程语言。最初的目的是为了处理表单的验证操作。
- 弱类型语言
- 脚本语言
- 解释型语言
- 动态类型的语言
- 基于对象的语言
* 组成
- ECMAscript：js标准
- DOM(Document Object Model)：文档对象模型，通过js操作网页元素
- BOM(Bowser Object Model)：浏览器对象模型，通过api操作浏览器
* 特点：
- 简单易用
- 解释执行，无需编译
- 基于对象
* js的应用场景
- 网页特效
- 服务端开发（nodejs）
- 命令行工具（nodejs）
- 桌面程序（Electron）
- app（Cordova）
- 控制硬件-物联网（Ruff）
- 游戏开发（coco2d-js）
2、js的书写位置 <--返回目录
* 内嵌式
<script type="text/javascript">
alert("Hello~");
</script>
* 外链式
<script src="" type="text/javascript"></script>
* html标签内嵌
<input type='button' value='alert(hello~)' onclick='' />
3、js代码的注意事项和注释 <--返回目录
1）在一对script标签中有错误的js代码，该错误代码后面代码不执行
2）一对script标签中有错误js代码，不会影响其他scrip标签js代码的执行
3）script标签可以写成<script type='text/javascript'>，这是标准写法
<script language='javascript'>或<script type='text/javascript' language='javascript'>也可以
* js注释
单行注释 //
多行注释 /* */
4、输出消息的几种方式 <--返回目录
* Javascript执行过程中的原理
- html页面中出现<script>标签后，就会让页面暂停等待脚本的解析和执行。
无论当前脚本是内嵌式还是外链式，页面的下载和渲染都必须停下来
等待脚本的执行完成才能继续，这在页面的生命周期中是必须的。
* alert():在页面弹出一个对话框，早期JS调试使用。
* confirm():在页面弹出一个对话框(有确定|取消的标签), 常配合if判断使用。
* console.log():将信息输入到控制台，用于js调试
* prompt():弹出对话框，用于接收用户输入的信息。
var ssd = prompt("请输入摄氏度");
alert("温度为："+ssd);
* document.write():在页面输出消息或标签
5、变量 <--返回目录
* var num = 10; // 声明变量并初始化
* 变量的命名规范
- 不能以数字或者纯数字开头来定义变量名。
- 不推荐使用中文来定义变量名。
- 不能使用特殊符号或者特殊符号开头(下划线_除外);
- 不推荐使用关键字和保留字来定义变量名。
* 在JS中严格区分大小写的！！！
6、数据类型和typeof <--返回目录
6种数据类型：number,string,boolean,undefined,null,object
* 数字类型number
var num1 = 2;//正数
var num2 = -2.1;//负数，小数
alert(typeof(num1));//number
alert(typeof num2);//number
十进制表示var num1 = 2;
十六进制0x开头，0-9 a(A)-f(F)表示 var num3 = 0xffff;
八进制 0开头，0-7组成
Number.MIN_VALUE // 数字的最小值
Number.MAX_VALUE // 数字的最大值
console.log(0.1 + 0.2); // 0.30000000000000004
console.log(1/0); // Infinity
* 字符串类型string
字符串:由单引号或双引号扩起来 var str = 'abc';
console.log('10' + 5); // 15
console.log(typeof('10' + 5)); // string
console.log('10' - 5); // 5
console.log(typeof('10' - 5)); // number
转义字符
\" 双引
\' 单引
\n 换行
\r 回车
* 布尔类型boolean
实际运算中true=1,false=0
var flag = true;
alert(flag + 1);//2
var flag = false;
alert(flag + 1);//1
var a = 1;
var b = 2;
var c = a > b;
alert(c);//false
* undefined 变量未初始化
定义了变量，没有给变量赋值，变量在内存中是存在的
函数没有明确返回值，如果接收了，结果也是undefined
var num;
console.log(num + 10); // NaN
console.log(isNaN(num + 10)) // true
* null 变量未引用，值为空，在内存中没有该变量
var nul = null
console.log(typeof nul) // object
7、类型转换 <--返回目录
* string==>number
- var num1 = Number("123");
** 数字类型的字符串，转换之后得到的数字。
** 非数字字符串，转换之后得到是NaN。
** 小数类型的字符串，转换之后得到的是原数字。
- var num2 = parseInt("123");
** 整数数字类型的字符串，转换之后得到的整数数字。
** 数字开头的字符串，转换之后得到的是前边的数字。
** 非数字开头的字符串，转换之后得到的是NaN。
** 小数类型的字符串，转换之后【取整】，去除小数
- parseFloat
** 整数数字类型的字符串，转换之后得到的整数数字。
** 数字开头的字符串，转换之后得到的是前边的数字。
** 非数字开头的字符串，转换之后得到的是NaN。
** 小数类型的字符串，转换之后得到的是原数字。
// 其他类型转数字类型 // 1. parseInt() 转整数 console.log(parseInt('10')) // 10 console.log(parseInt('10a')) // 10 console.log(parseInt('a10')) // NaN console.log(parseInt('10.23')) // 10 console.log(parseInt('10.23a')) // 10 // 2. parseFloat() 转小数 console.log(parseFloat('10')) // 10 console.log(parseFloat('10a')) // 10 console.log(parseFloat('a10')) // NaN console.log(parseFloat('10.23')) // 10.23 console.log(parseFloat('10.23a')) // 10.23 // 3. Number() 参数是一个数字才能转成功 console.log(Number('10')) // 10 console.log(Number('10a')) // NaN console.log(Number('a10')) // NaN console.log(Number('10.23')) // 10.23 console.log(Number('10.23a')) // NaN // 其他类型转字符串 // 1. toString() var num = 10; console.log(typeof num.toString()) // string //console.log(typeof num1.toString()) // 报错 num1 is not defined // 2. String() console.log(typeof String(10)) // string // 其他类型转boolean类型 console.log(Boolean(1)) // true console.log(Boolean(0)) // false console.log(Boolean('')) // false console.log(Boolean({})) // true console.log(Boolean([])) // true console.log(Boolean(null)) // false console.log(Boolean(undefined)) // false
隐式数据类型转换：在运算过程中，程序自己进行的数据转换(程序员没有操作)，例如:
var n1=12; var n2="2"; alert(n1-n2);//10
8、运算符 <--返回目录
8.1、赋值运算符：=
带操作的赋值运算 += -= *= /=
8.2、算数运算符：+ - * / %
带操作的赋值运算 += -= *= /=
js里面不区分整数和小数 123/1000*1000=123
var a; a += 1; // a = a + 1;
alert("456"+1); //结果是4561
alert("456"-1);//结果是455
alert("abc"-1);//结果是NaN
alert(flag+1); //flag为true（值为1），结果是2 alert(flag+1); //flag为false（值为0），结果是1
8.3、比较运算符
< > <= >= == != === !==
==和===的区别：==比较值内容；===比较值和类型
8.4、逻辑运算符
与&& 或|| 非!
8.5、运算符++ --
var num = 10; console.log(num++); // 10 console.log(num); // 11 var num1 = 10; console.log(++num1); // 11
9、流程控制 <--返回目录
条件判断: if、else if、else
// 条件判断：if var num = 10; if (num > 5) { console.log('num 大于 5'); } var num1 = 10 if (num1 > 5) console.log('num1 大于 5');
// 条件判断：if、else var num2 = 2; if (num2 > 5) { console.log('num2 大于 5'); } else { console.log('num2 不大于 5'); } var num3 = 2; if (num3 > 5) console.log('num3 大于 5'); else console.log('num3 不大于 5');
// 条件判断if、else if、else var num4 = 10; if (num4 > 10) { console.log('num4 大于10') } else if (num4 < 0) { console.log('num4 小于0') } else { console.log('num4 在0到10之间') }
三元表达式： 表达式 ? 结果1：结果2；
如果表达式结果为true，执行结果1，如果表达式结果为false，执行结果2。可以理解为if else的另外一种写法。
switch...case
var num = 2 switch (num) { case 1: console.log('num为1'); break; case 2: console.log('num为1'); break; default: console.log('num不为1或2'); break; }
var str = 'b' switch (str) { case 'a': console.log('str为a'); break; case 'b': console.log('str为b'); break; default: console.log('str不为a或b'); break; }
// case穿透: 执行case 'a'后面的语句块后没有break, 继续执行，这就是case穿透 var str = 'a' switch (str) { case 'a': console.log('str为a'); case 'b': console.log('str为b'); break; default: console.log('str不为a或b'); break; }
case穿透的应用场景
var month = prompt("请输入月份"); switch(month){ case "3": case "4": case "5": alert("春季"); break; case "6": case "7": case "8": alert("夏季"); break; case "9": case "10": case "11": alert("秋季"); break; case "12": case "1": case "2": alert("冬季"); break; default: alert("您在火星"); break; }
while循环
var i = 0; while (i < 10) { console.log(`i=${i}`) i++; } console.log(`最后i=${i}`)
do...while循环
var i = 0; do { console.log(`i=${i}`) i++ } while (i < 10) console.log(`最后i=${i}`)
for循环
for (var i = 0; i < 10; i++) { console.log(`i=${i}`) } console.log(`最后i=${i}`)
关键字break
var sum = 0; var i = 0; while (sum < 100) { sum += i; i++ } console.log(`sum=${sum}`) var sum = 0; var i = 0; while (true) { // 如果sum大于100，跳出循环 if (sum > 100) break; sum += i; i++ } console.log(`sum=${sum}`)
关键字continue
for (var i = 0; i < 10; i++) { // 如果i为偶数，执行下一次循环 if (i % 2 === 0) continue; console.log(`i=${i}`) } console.log(`最后i=${i}`)
10、数组一组有序的数据 <--返回目录
定义方式（三种）
1）var arr = [1,2,"3"];
2）使用内置对象Array
var arr = new Array(3);
arr[0] = 1;
3）var arr = new Array(1,2,3);
* 数组的属性length：数组长度
* 数组长度可变
* 数组可以存放不同的数据类型
// 定义空数组： new Array() var arr1 = new Array() console.log(arr1.length) // 0 console.log(arr1[0]) // undefined arr1[0] = 1 console.log(arr1.length) // 1 console.log(arr1[0]) // 1 // 定义数组的初始长度： new Array(3)，数组长度为3，每个元素为undefined var arr2 = new Array(3) console.log(arr2.length) // 3 console.log(arr2[0]) // undefined // 定义数组并初始化 var arr3 = new Array(1,2,3) console.log(arr3.length) // 3 console.log(arr3[0]) // 1 console.log(arr3[1]) // 2 console.log(arr3[2]) // 3 console.log(arr3[3]) // undefined
concat()方法: 数组的合并
var arr1 = [1,"2"]; var arr2 = [3,'a',"",'哈哈',true,null,false]; var arr3 = arr1.concat(arr2); console.log(arr3); // [ 1, "2", 3, "a", "", "哈哈", true, null, false ] console.log(arr3.length) // 9 console.log(arr3[4]) // <empty string> console.log(arr3[7]) // null
join()方法: 返回一个字符串
var arr1 = [1,"2","", true,false,null,'哈哈']; var result = arr1.join("&"); console.log(result); // 1&2&&true&false&&哈哈 console.log(typeof(result)); // string
遍历
var arr = [1, "2", "", true, false, null, '哈哈']; for (var i = 0, len = arr.length; i < len; i++) { console.log(`arr[${i}] = ${arr[i]}`) } for (let e of arr) { console.log(e) }
11、函数 <--返回目录
//函数定义 function max(x, y) { if(x > y) { alert(x); } else { alert(y); } } //函数的调用 max(2, 4);
匿名函数
//定义匿名函数 var add = function(m, n) { return m + n; } //调用函数 var result = add(5, 6); console.log(`5 + 6 = ${result}`)
参数传递
function fun (num1, num2) { console.log(`交换前, num1=${num1}, num2=${num2}`) var temp = num1 num1 = num2 num2 = temp console.log(`交换后, num1=${num1}, num2=${num2}`) } var a = 1 var b = 2 console.log(`a=${a}, b=${b}`) // a=1, b=2 fun(a, b) console.log(`a=${a}, b=${b}`) // a=1, b=2
function fun2 (arr) { arr[0] = 10 return arr } var array = [1, 2, 3] console.log(array) // [ 1, 2, 3 ] fun2(array) console.log(array) // [ 10, 2, 3 ]
arguments对象伪数组
function sum() { console.log(arguments.length) var temp = 0 for (var i = 0, len = arguments.length; i < len; i++) { temp += arguments[i] } return temp } console.log(sum(1, 2, 3)) console.log(sum(1, 2, 3, 4))
函数自调用
var result = (function() { console.log(arguments.length) var temp = 0 for (var i = 0, len = arguments.length; i < len; i++) { temp += arguments[i] } console.log(`temp=${temp}`) return temp })(1, 2, 3) console.log(`result=${result}`)
函数也是一种数据类型
function fun () { console.log('hello') } console.log(typeof fun) // function
函数作为参数使用
function fun (a, b, callback) { var temp = a a = b b = temp callback(a, b) } var a = 1 var b = 2 fun(a, b, function(a, b) { console.log(`回调函数中，a=${a}, b=${b}`) // a=2, b=1 })
12、js的全局函数 <--返回目录
* 不属于任何一个对象，直接写名称使用
* eval():执行js代码。如果字符串是一个js代码，可以直接使用
- var str="alert('123');"; eval(str);
* encodeURI():对字符进行编码
* decodeURI():对字符进行解码
* isNaN():判断当前字符串是否是数字，是数字返回false
- var str="123";
alert(isNaN(str));//false
* parseInt(str):类型转换为number
13、js的函数重载 <--返回目录
什么是重载？方法名相同，参数列表不同
js的重载是否存在：不存在。调用最后一个方法，前面的失效。
js是否存在重载：
1）js不存在重载
2）但是可以通过其他方式模拟重载的效果。通过arguments数组。
function add(){ var sum=0; for(var i=0;i<arguments.length;i++){ sum +=arguments[i]; } return sum; }
----
posted on 2020-01-11 15:53 wenbin_ouyang 阅读(201) 评论(0) 编辑 收藏 举报
