JavaScript基本介绍
JavaScript基础
文章目录
- JavaScript基础
- 1 概述
- 2 基本语法
- 2.1 注释
- 2.2 定义变量
- 2.3 数据类型
- 2.3.1 Number类型
- 2.3.2 字符串
- 2.3.3 布尔类型
- 2.3.4 null 和 undefined
- 2.3.5 数组
- 2.3.6 对象
- 2.3.7 集合（ Map 和 Set ）
- 2.4 流程控制
- 2.4.1 条件控制 [ if 、 switch ]
- 2.4.2 循环控制 [ while 和 for ]
- 2.5 迭代器 [iterable]
- 3 函数
- 3.1 自定义定义函数
- 3.2 变量的作用域
- 3.2.1 局部变量
- 3.2.2 全局变量
- 3.3 方法
- 4 内部对象
- 4.1 Date 对象
- 4.2 JSON 对象
- 5 面向对象编程
- 5.1 定义类
- 5.2 继承
- 6 操作 BOM 对象
- 6.1 Window
- 6.2 Navigator
- 6.3 Screen
- 6.4 Location
- 6.4 Document（*）
- 6.5 History
- 7 操作 DOM 对象
- 7.1 获取节点
- 7.2 更新节点
- 7.3 删除节点
- 7.3 插入节点
- 7.3.1 插入（移动）一个已有节点
- 7.3.2 插入 JavaScript 新建的节点
- 7.3.4 插入 css 属性
- 7.3.3 指定节点插入位置
1 概述
JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的高级编程语言。虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。百度百科
2 基本语法
2.1 注释
//单行注释
/*
多行注释
*/
2.2 定义变量
i = 1; //不建议这样定义
var i = "hello"; //函数作用域
let i = 'world'; //块作用域，ES6新增
const i = 3.14; //const用于定义一个只读常量，不能被修改，ES6新增
- 关于
var和let关键字的区别，参考博客以下：- 详解js中let与var声明变量的区别
- js es6中let const和var的区别
2.3 数据类型
2.3.1 Number类型
JavaScript不区分整数和浮点数，统一用Number表示。
123; // 整数123
3.14; // 浮点数0.456
1.2345e3; // 科学计数法
-99; // 负数
NaN; // NaN表示不是一个数字。NaN和所有值比较都返回false，包括与自己比较，只能用isNaN()方法判断
Infinity; // Infinity表示无限大，当数值超过了JavaScript的Number所能表示的最大值时，就表示为Infinity
2.3.2 字符串
字符串是以单引号’或双引号"括起来的任意文本，长度不可变。
'abc';
"Jacks";
`
多行
字符串
`;
let msg = `你好，${name}!`; //模板字符串，类似el表达式
- 正常字符串使用单引号或双引号包裹。
- 特殊字符需要用斜杠转义
\'
\n
\t
\u4e2d \u#### // unicode编码
\x41 //ASCLL码
...
常用方法：
str.length; //获取字符串长度
str.toUpperCase(); //转换成大写
str.toLowerCase(); //转换成小写
str.indexOf('t'); //t字符第一次出现的位置
str.substring(index); //截取字符串，从 index 所有开始到最后
str.substring(start,end); //截取字符串，左闭右开
2.3.3 布尔类型
true;
false;
常常配合运算符使用：
| 逻辑运算符 | 说明 |
|---|---|
| && | 与运算，同为true，返回true |
| || | 或运算，有true，返回true |
| ! | 非运算，全为false，返回true |
| 比较运算符 | 说明 |
|---|---|
| a > b | a 大于 b 时返回 true |
a | a 小于 b 时返回 true |
|
| … | … |
| = | 赋值符号，可以改变变量的 值 和 类型 |
| == | 等于，类型不一样，值一样，返回true。如：false==0，返回值为true |
| === | 绝对等于，类型一样，值一样，返回true。如：false === 0，返回值为false，建议使用。 |
2.3.4 null 和 undefined
null表示值为空，注意与0和""区分，前者表示数字 0，后者表示长度为 0 的字符串。undefined表示值未定义。
2.3.5 数组
数组是一组按顺序排列的集合，集合的每个值称为元素。JavaScript的数组可以包括任意数据类型,且长度是可变的。
[1, 2, 3.14, 'Hello', null, true];
new Array(1, 2, 3);
var arr = [1, 2, 3.14, 'Hello', null, true];
arr[0]; //取值
arr[0] = 1; //赋值
var arrays = [[1,2],[3,4],[5,6]]; //多维数组
arrays[0][0]; //取值
arrays[0][0] = 2; //赋值
常用方法：
arr.length;// 获取长度，赋值后可以改变数组长度
arr.indexOf(obj); //通过元素获取下标索引，字符串和数字有区分，如 1 和 "1"
arr.slice(); //截取一部分，类似str.substring，左闭右开
arr.push(); //在尾部添加元素
arr.pop(); //弹出尾部的一个元素
arr.unshift(); //在头部添加元素
arr.shift(); //从头部开始弹出一个元素
arr.sort(); //排序
arr.reverse(); //元素反转
arr.concat(arr); //拼接数组，并没有修改数组，只会返回一个新的数组。
arr.join('-'); //打印拼接数组，使用特定符号拼接
2.3.6 对象
JavaScript 的对象是一种无序的集合数据类型，它由若干键值对组成。键的类型为字符串，值的类型是任意对象，键值对之间用逗号隔开，最后一个属性不需要加逗号。
var person = {
name: 'Jacks',
age: 22,
tags: ['js', 'web', 'mobile'],
city: 'Beijing',
hasCar: true,
zipcode: null
};
可以动态的删除或增加对象属性：
var student = {
name:"Jacks",
sex:"man",
score:90
}
student.name = "赤魂"; //对象赋值
delete student.score; //动态删除属性
student.email = "[email protected]"; //动态添加属性
"age" in person; //判断属性值是否在对象或对象的父类中,如toString可能不在对象属性中，而是在父类中
person.hasOwnProperty("age"); //判断对象中是否有某个属性，仅判断当前对象
2.3.7 集合（ Map 和 Set ）
Map和Set是ES6标准新增的数据类型。
Map 是一组键值对的结构的集合。初始化 Map 需要一个二维数组，或者直接初始化一个空 Map。
var map = new Map([[key,value],[key,value],[key,value]]);
var map = new Map();
map.set(key,value); //添加，或修改
map.delete(key); //删除
map.keys();//获取所有的键，返回值是MapIterator
map.values();//获取所有的值，返回值是MapIterator
注意：
- 一个
key只能对应一个value，对一个key赋予多次value，前面的值会被后面的值覆盖。
Set 是没有重复值的集合，要创建一个 Set，需要提供一个Array作为输入，或者直接创建一个空 Set。
var set = new Set([3,1,1,1]);//可以去重
var set = new Set();
set.add(value); //添加
set.delete(value); //删除
set.has(value); //判断是否包含某个元素
2.4 流程控制
2.4.1 条件控制 [ if 、 switch ]
if(条件){
执行体;
}else if(条件){
执行体;
}else{
执行体;
}
switch(n)
{
case 1:
执行代码块 1
break;
case 2:
执行代码块 2
break;
default:
与 case 1 和 case 2 不同时执行的代码
}
2.4.2 循环控制 [ while 和 for ]
while(条件){
循环体;
}
do{
循环体;
}while(条件);
for(let i = 0; i < 100; i++){
循环体;
}
2.5 迭代器 [iterable]
- 遍历
Array可以采用下标循环，遍历Map和Set就无法使用下标。 - 为了统一集合类型，
ES6标准引入了新的iterable类型，Array、Map和Set都属于iterable类型。 - 具有
iterable类型的集合可以通过新的for ... of循环来遍历，这也是ES6的新特性。 - 详细参考：廖雪峰官方网站
1 遍历数组
arr.forEach(function (value){
执行体;
});//value就是arr里面的元素
for(let num in arr){
执行体;
}//num是索引位置
for(let value of arr){
执行体;
}//value是数组中的元素
2 遍历集合（ Map 和 Set ）
for(let value of map){
执行体;
}//value 为map中的键值对
for(let value of map.keys()){
执行体;
}//value 为map中的键
for(let value of map.values()){
执行体;
}//value 为map中的值
for(let x of set){
执行体;
}//x为set中的值
3 函数
3.1 自定义定义函数
function 方法名 (参数列表){
函数体;
}
//方法一
function sum(x,y){
return x + y;
}
//方法二
var sum = function(x,y){
return x + y;
}//匿名函数，将返回值赋值给sum，通过sum(x,y)可以直接调用
sum(1,2); // 3
注意：
- 函数会执行到
return结束，然后返回结果。若没有执行return会返回undefined。 JavaScript的函数可以传递任意个参数，无关函数定义，也可以不传递参数。程序不会报错，但会影响最终结果，我们可以手动去处理。
参数类型错误规避：手动抛出异常。
function sum(x,y){
if(typeof x !== 'number' || typeof y !== 'number'){
throw 'Not a number';
}
return x + y;
}
sum(1,2); //3
sum(1,"2"); //Not a number
- 使用
typeOf判断参数类型。
多余参数处理：arguments 关键字和 rest 关键字[ES6新特性]。
function sum(x,y){
if(arguments.length == 2){
if(typeof x !== 'number' || typeof y !== 'number'){
throw 'Not a number';
}
return x + y;
}else{
throw '传参错误';
}
}
arguments是由传入参数组成的数组，可用于判断处理多余参数。
function sum(x,y,...rest){
console.log("x=>" + x);
console.log("y=>" + y);
console.log(rest);
}
rest关键字代表可变长参数，可以将多余的参数作其他处理。参数定义为...rest
3.2 变量的作用域
3.2.1 局部变量
function myFunc(){
var x = 1;
return x;
}
x = x + 2;//Uncaught ReferenceError:x is not defined
- 局部变量只能在被定义的局部域中调用，局部域是可以嵌套的，比如嵌套函数。
function myFunc1(){
var x = 1;
function myFunc2(){
var y = x + 1;
console.log(y);
}
myFunc2();
}
myFunc1();
- 在局部域中调用不存在的变量，会从上一层域中查找，如果也没有就会报错：
xxx is not defined
var 关键字存在的问题
function myFunc(){
for(var i = 0; i < 5;i++){
console.log(i);//0 1 2 3 4
}
console.log(i + 1);// 6
}
for循环中的变量i，可以在for循环体外被调用，这不是我们想要的结果。ES6提出的let关键字解决上述问题。- 更建议使用
let关键字去定义局部域的变量。
function myFunc(){
for(let i = 0; i < 5;i++){
console.log(i);//0 1 2 3 4
}
console.log(i + 1);// i is not defined
}
3.2.2 全局变量
如果直接在