1. 认识JavaScript
- JavaScript是一种可以在浏览器上运行的解释性编程脚本语言，它可以操作浏览器，给HTML网页增加动态功能
- JavaScript有一个标准为ECMAScript，目前ECMAScript的最新版本为ES6，但有些浏览器还只支持ES5
- 一般在ES6环境进行开发，上线则需要转换为ES5
2. JavaScript的引入
- 内部引入：直接在script标签内写JavaScript代码
- 外部引入：通过script标签引入外部的JavaScript代码
- 注意：script标签不能自闭和，必须成对出现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript引入</title>
<!-- 内部引入：直接在script标签内写JavaScript代码 -->
<script>
alert("Hello!");
</script>
<!-- 外部引入：通过script标签引入外部的JavaScript代码，注意：script标签不能自闭和，必须成对出现 -->
<script src="js/hello.js"></script>
</head>
<body>
</body>
</html>
3. 注释
3.1 单行注释
语法：在需要注释的内容前添加“//”
// 这是注释的内容
3.2 多行注释
语法：在需要注释了内容前添加“/*”，其后添加“*/”
/*
这是注释的内容1
这是注释的内容2
这是注释的内容3
*/
4. 数据类型
- JavaScript有8种数据类型，分别为：
- string：字符串，使用单引号或双引号包裹
- number：数字
- NaN（Not a Number）是数字类型，表示不是一个数字
- NaN与任何数字及NaN本身比较都为false
- 只能用isNaN()函数进行判断NaN
- 数字中的浮点数（小数）存在精度问题，一般不建议用于运算或比较
- NaN（Not a Number）是数字类型，表示不是一个数字
- boolean：布尔（true或false）
- null：空
- undefined：未定义
- symbol：独一无二
- object：对象
- function：函数
// string字符串
typeof '123'; // typeof '123'表示'123'的类型
typeof "123";
// number数字
typeof 123;
typeof NaN;
// boolean布尔
typeof true;
// null空
var str = null;
typeof str;
// undefined未定义
typeof str1; // 不声明str1则str1为未定义
// symbol独一无二
typeof Symbol("symbol");
// object对象
typeof []; // []代表数组
typeof {}; // {}代表对象
// function函数
typeof function(){};
5. 变量、常量、作用域
5.1 变量
-
JavaScript中所有类型的变量都可以用var关键字来声明
-
当变量在局部使用时，推荐使用let关键字来声明
-
变量在命名时一般遵循首字母小写驼峰原则
// 声明变量 var val; // 声明局部变量 let val2; -
所有全局变量默认绑定在window下
var val = 'hello'; console.log(val); // 结果：hello console.log(window.val); // 结果：hello -
引入多个js文件时可能产生全局变量名冲突，因此有以下规范：
每个js文件里只能拥有一个全局变量，其它变量都绑定在该变量下var OnlyOne = {}; // 定义唯一的全局变量 var OnlyOne.str = 'hello'; // 定义变量 var OnlyOne.fun = function() {}; // 定义函数
5.2 常量
-
JavaScript中所有的类型的常量都可以用const关键字来声明
-
常量一般使用大写字母加下划线来命名
// 声明常量 const PI = 3.14159265;
5.3 作用域
-
声明在最外层的变量为全局变量，其作用域为全局
-
声明在函数、方法、控制结构等局部块内的变量为局部变量，其作用域为变量所声明的局部块内
-
外部不能访问函数的变量
-
内部函数可以访问外部函数的变量
-
外部函数不能访问内部函数的变量
-
内部变量与外部变量重名时，内部变量会覆盖（屏蔽）外部变量
function test() { var x = 1; var x2 = 2; function test2() { var y = x + 1; // 内部函数可以访问外部函数的变量 var x2 = 3; // 内部变量与外部变量重名时，内部变量会覆盖（屏蔽）外部变量 console.log(x2); // 结果：3 } var z = y + 1; // 外部函数不能访问内部函数的变量 } x = 2; // 外部不能访问函数的变量 -
JavaScript会自动提升变量的作用域（将所有的var声明提到最前面）
-
声明规范：将要使用的变量提前在最前面声明
var x = 'x' + y; console.log(x); // 结果：xundefined var y = 'y'; /* 上面的代码等同于： var x; var y; x = 'x' + y; console.log(x); y = 'y'; */
6. 流程控制
6.1 顺序结构
-
正常情况下，程序中的语句都是按顺序从上到下执行
console.log("输出第一条语句"); // console.log为控制台输出语句 console.log("输出第二条语句"); console.log("输出第三条语句");
6.2 选择结构
-
选择结构是根据条件判断之后再做处理的一种语法结构，使程序运行更加灵活
-
执行方式：根据判断条件选择要执行的语句分支
// if单选结构 if(2>1) { console.log("2>1"); } /* 结果：2>1 */ // if-else双选结构 if(2<1) { console.log("2<1"); }else { console.log("2>1"); } /* 结果：2>1 */ // if-else-if多选结构 if(2===1) { console.log("2=1"); }else if(2>1) { console.log("2>1"); }else { console.log("2<1"); } /* 结果：2>1 */ // switch多选结构 switch (0) { case 0: console.log("0"); break; case 1: console.log("1"); break; case 2: console.log("2"); break; default: console.log("other"); } /* 结果：0 */
6.3 循环结构
-
循环结构用于执行具有重复性的工作，让代码编写更简便
-
执行方式：根据条件判断执行重复的语句
let i; // while循环 i = 0; while (i<2) { console.log("i"); i++; } /* 结果：0 1 */ // do-while循环，至少执行一次 i = 0; do { console.log("i"); i++ }while (i<0); /* 结果：0 */ // for循环 for (let j = 0; j < 5; j++) { console.log("j"); } /* 结果：0 1 2 3 4 */ let arr = [1,2,3,4,5,6]; // for-in循环，可以遍历数组 for (let k in arr) { console.log(arr[k]); } /* 结果：1 2 3 4 5 6 */ // foreach循环，可以遍历数组，ES5.1增加 arr.forEach(function (value) { console.log(value); }) /* 结果：1 2 3 4 5 6 */ // for-of循环，可以遍历数组，ES6增加 for (let number of arr) { console.log(number); } /* 结果：1 2 3 4 5 6 */
6.4 break
-
break用于任何循环语句以及switch多选结构中，其功能为结束循环语句或switch多选结构，即不执行循环体或switch多选结构剩余的语句
let num = 100; for(let i=0;i<num;i++) { console.log(i); if(i==5) { break; } } /* 输出结果：0 1 2 3 4 5 */
6.5 continue
-
continue用于循环语句，其功能为结束当次循环，即跳过当次循环进行下一次循环
let num = 10; for(let i=0;i<num;i++) { if(i%2===0) { continue; } console.log(i); } /* 输出结果：1 3 5 7 9 */
7. 字符串
- 字符串用于存储和处理文本
- 字符串不可变
// 字符串使用单引号或双引号包裹
let str1 = 'Hello';
let str2 = "Hello";
// 转义字符
let str3 = '\'';
let str4 = '\n';
let str5 = '\t';
let str6 = '\u4e2d'; // Unicode字符“中”
let str7 = '\x41'; // Ascll字符
// 多行字符串
let str8 = `hello
world`;
// 模板字符串
let str9 = `msg:${str8}`;
// 获取字符串长度
console.log(str9.length);
// 获取字符串中的字符
console.log(str9[0]);
// 字符串大小写转换
console.log(str9.toUpperCase());
console.log(str9.toLowerCase());
// 字符串获取指定字符下标
console.log(str9.indexOf('l'));
// 字符串截取子串
console.log(str9.substring(1, 3));
8. 数组
- 数组能够在一个变量内存储多个值
- JavaScript中的数组存储的值可以为任意值，但一般推荐存储同一类型的值
// 数组可以包含任意数据类型
var arr = [1,2.2,"hello"]; //通过下标取值和赋值
// 获取数组长度（数组长度可变）
console.log(arr.length);
// 改变数组长度 arr.length = 改变的长度（改变的长度比原来小则丢失数据，反之增加几个undefined）
arr.length = 5;
// 通过元素获得下标索引
console.log(arr.indexOf(2.2));
// 截取数组
let newArr = arr.slice(1,3);
// 添加元素到数组末尾
console.log(arr.push(3, 4));
// 获取数组末尾元素
console.log(arr.pop());
// 添加元素到数组开头
console.log(arr.unshift(5, 6));
// 获取数组开头元素
console.log(arr.shift());
// 数组排序
console.log(newArr.sort());
// 数组反转
console.log(arr.reverse());
// 数组拼接（只是返回新数组，不改变原数组）
console.log(arr.concat(newArr));
// 自定义字符串打印拼接数组
console.log(arr.join("-"));
// 多维数组
let arr2 = [[1,2],[3,4],[5,6]];
9. 函数
6.1 定义与调用函数
-
函数是完成某个特定功能的一组语句
-
函数定义的格式为：function 函数名(参数列表) {语句…} 或 var 函数名=function(参数列表) {语句…}
-
函数名在命名时一般遵循首字母小写驼峰原则
-
函数通过“函数名(参数列表)”来调用
// 定义绝对值函数 function abs(x) { if(typeof x !== 'number') { // typeof x表示x的类型 throw "Not a Number"; // 手动抛出异常 } if(x>=0) { return x; }else { return -x; } } // 或 var abs2 = function(x) { if(typeof x !== 'number') { // typeof x表示x的类型 throw "Not a Number"; // 手动抛出异常 } if(x>=0) { return x; }else { return -x; } } // 调用 console.log(abs(-9)); // console.log()为通过控制台输出函数，结果：9
6.2 arguments参数列表数组
-
JavaScript中在调用函数时可以传递超出定义个数的参数，但只取传递参数列表中定义个数的参数
-
JavaScript中在调用需要参数的函数时可以不传参数，一般返回undefined或NaN
-
在函数体中可以通过arguments获取传入参数列表数组
function print(a) { console.log(a); // 循环打印arguments数组的元素 for (let argument of arguments) { console.log(argument); } } print(1,2,3,4,5); /* 结果： 1 1 2 3 4 5 */ print(); // 结果：undefined
6.3 rest多余参数列表数组
-
在函数体中可以通过rest获取传入的除了函数定义需要的参数个数之外的参数列表的数组
-
rest参数只能写在参数列表最后面并用"…"表示
// ES6引入新特性rest function print(a,b,...rest) { console.log(a); console.log(b); for (let restElement of rest) { console.log(restElement); } } print(1,2,3,4) /* 结果： 1 2 3 4 */
10. 对象
- JavaScript中的所有事物都是对象，对象包括属性和方法
- 定义对象格式：
var 对象名 = {
属性名:属性值,
…
} - 对象的属性名类型为字符串，属性值为任意数据类型
// 定义
var person = {
name:"张三",
age:20,
sex:'男'
}
// 获取对象属性
console.log(person.name);
console.log(person['name']);
// person.id 不会报错，返回undefined
// 对象赋值 对象.属性名 = 属性值
person.age = 18;
// 动态添加属性 对象.新的属性名 = 属性值
person.id = 1001;
console.log(person);
// 动态删减属性 delete 对象.属性名
delete person.id;
console.log(person);
// 判断属性是否在对象中
console.log('name' in person);
console.log('toString' in person); // 返回值为true，toString为person继承的方法
// 判断属性是否是对象自身拥有的
console.log(person.hasOwnProperty('toString')); // 返回值为false
11. Map和Set
- Map是用于存储键值对的集合
- Map的键名是唯一的
- Set是无序不重复的集合
- Map和Set都可以用for-of循环遍历
/*********Map*********/
// 定义Map
var map = new Map([["张三",18],["李四",19]]);
// 通过键获取map中的值
console.log(map.get("张三"));
// 添加或修改键值到map
map.set("王五",20); // 添加
map.set("张三",20); // 修改
// 从map中删除键值
map.delete("王五");
/*********Set*********/
// 定义Set（无序不重复集合）
var set = new Set([1,2,3,3,3]);
// 添加值到set中
set.add(4);
// 从set中删除值
set.delete(3);
// 判断set是否包含某个元素
console.log(set.has(3));
12. Date
- Date是JavaScript中常用的时间对象
// Date时间对象
var date = new Date(); // 获取当前时间对象
console.log(date.getFullYear()); // 年
console.log(date.getMonth()); // 月 0~11
console.log(date.getDate()); // 日
console.log(date.getDay()); // 星期几
console.log(date.getHours()); // 小时
console.log(date.getMinutes()); // 分钟
console.log(date.getSeconds()); // 秒
console.log(date.getTime()); // 时间戳 全世界同一 从柏林1970.01.01 00:00:00到现在的毫秒数
// 通过时间戳获取时间对象
var date2 = new Date(1578216530021);
console.log(date2.toLocaleString()); // 转换为本地时间
13. JSON
- JSON全称JavaScript Object Notation（JavaScript 对象简谱)），是一种轻量级的数据交换格式
- JSON对象是JavaScript中常用的数据处理对象
var person = {
name: "张三",
age: 18,
sex: "男"
}
// 将对象转换为JSON字符串
var jsonStr = JSON.stringify(person);
console.log(jsonStr);
// 将JSON字符串转换为对象
var obj = JSON.parse(jsonStr);
console.log(obj);
14. 严格检测模式strict
- 虽然JavaScript的代码编写非常的灵活，但是也变得过于随意，可读性比较差。为了使代码能变得规范，在JavaScript中可以加上严格检测模式strict进行代码检测
- 引入严格检测模式需要添加语句：‘use strict’;
- 严格检测模式添加语句必须在代码开头的第一行
'use strict'; // 使用严格检测模式strict,必须在第一行
// 定义全局变量会报错
i = 1;
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
