JavaScript基础
1.快速入门
如何写一段JS代码并运行
行内
<!-- 将JS代码写在HTML行内 -->
<input type="button" value="按钮" onclick="alert(123)">
标签
<!-- 将JS代码写在script标签中 -->
<script>
alert(456)
</script>
单独文件
//js文件
//单独js文件中的代码，是不能直接在浏览器中打开运行的
//需要将js文件引入到html中
alert(789)
<!-- html文件 -->
<!-- 注意：那script标签中就不要再写其他js代码，写了也没用 -->
<script src="./1.js"></script>
声明变量并赋值
//声明一个
var i = 10;
//声明多个
var h1 = 11, h2 = 12, h3 = 13;
变量命名规则
- 变量的名字必须是 数字、字母、下划线_ 和 $ 组成
- 变量名字不能以数字开头
- 变量名不能是关键字
- 变量区分大小写
- 变量的命名尽可能使用驼峰法命名
var a = 1;
var b = 2;
var c = a;
a = b;
b = c;
alert(a,b);
2.数据类型
//数值Number、字符串String、布尔Boolean、undefined、null、对象Object
//李四在这里不是字符串
//var str1 = 李四;
var str1 = '李四';
//如果在字符串中要使用引号，请加转义字符
var str = '这是一段需要转义的\'文本\'';
var s1 = '123';
var s2 = '456';
var s3 = s1 + s2;
var s4 = 1;
var s5 = 2;
// + 既可以作为数字运算使用也可以作为字符串拼接使用
// 从前往后进行运算，如果两个变量都是数值型那么加号作为数学运算符
// 直到遇到一个字符串，此后所有的加号都是字符串拼接
console.log(s4 + s5 + s3); //3123456
console.log(s3 + s4 + s5); //12345612
Boolean
true为1，false为0
Undefined和Null
- undefined表示一个声明了没有赋值的变量，变量只声明的时候值默认是undefined
- null表示一个空，变量的值如果想为null，必须手动设置
复杂数据类型
参考：
字符串的颜色是黑色的，数值类型是蓝色的，布尔类型也是蓝色的，undefined和null是灰色的
打印长度
console.log(s1.length);
获取变量的类型
typeof
var age = 18;
console.log(typeof age); // 'number'
代码注释
//单行注释
/*
多行注释
*/
其他类型转为字符串
var n = 5;
//方法一
var s = n.toString();
//方法二
console.log(typeof String(n));
//方法三
var s = '' + n;
数值类型转换
var a = '1';
//方法一
var b = Number(a);
console.log(typeof b);
var c = Number('c'); //NaN
var d = Number(null); //0
var e = Number(undefined); //NaN
console.log(c,d,e);
/*
NaN = not a number
*/
//方法二
var f = parseInt('2'); //2
var g = parseInt('k22'); //NaN
var h = parseInt(null); //NaN
var i = parseInt(undefined); //NaN
console.log(f, g, h, i);
/*
2 NaN NaN NaN
*/
parseFloat('1.23df'); //1.23
parseFloat('1.3.4.5'); //1.3
Number转的null为0，parseInt转的null为NaN
布尔类型转换
var a = Boolean('0'); //true
var b = Boolean(0); //false
var c = Boolean('2'); //true
var d = Boolean(null); //false
var e = Boolean(undefined); //false
var f = Boolean(''); //false
var g = Boolean(' '); //true
3.操作符与运算符
/*
算数操作符
+ - * / %
*/
/*
一元运算符
++ -- 对自身操作加一或者减一
*/
var n1 = 5;
n1++;
n1--;
++n1;
--n1;
/*
逻辑运算符
&& 逻辑与运算符
|| 逻辑或运算符
！ 逻辑非运算符
*/
/*
比较运算符
> < >= <= == != === !==
因为JS是一种弱类型语言
变量的数据类型存在自动转换
== 只比较值，不比较数据类型
console.log(a==b);
=== 全等比较 既比较值也比较数据类型
！== 不全等
*/
var a = '2';
var b = 2;
console.log(a===b); // false
/*
赋值运算
= += -= /= *= %=
*/
/*
运算符的优先级
()
一元运算符 ++ -- !
算数操作符 先乘除后加减
关系运算符 > < >= <=
相等运算符 == != === !==
逻辑运算符 先&& 后||
赋值运算 =
*/
4.语句
if判断
if(2>1){
console.log(1);
}else if(5>3){
console.log(2);
}
//如果有代码执行，那么后面的代码不管成立还是不成立都不会执行
switch-case的用法
switch(i){
case 1:
语句;
break;
case 2:
语句;
break;
default:
语句;
break;
}
while循环
while(条件){
语句;
}
do-while循环
do{
语句;
}while(条件);
for循环
for(var i = 1; i < 10; i++){
语句;
}
for循环打印图形
//打印正方形
var s = '';
for(var i = 0; i < 10; i++){
for(var h = 0; h < 10; h++){
s += "* ";
}
s += '\n'
}
console.log(s);
//打印三角形
var str = '';
for(var i = 0; i < 10; i++){
for(var h = i; h < 10; h++){
str += "* ";
}
str += '\n';
}
console.log(str);
for循环乘法表
//打印九九乘法表
var s = '';
for(var i = 1;i < 10;i++){
for(var h = i;h < 10;h++){
s += i + ' * ' + h + ' = ' + i * h + '\t';
}
s += '\n';
}
console.log(s);
continue与break
//计算100以内不能被7整除的所有数的和
var sum = 0;
for(var i = 0;i <=100;i++){
if(i%7){
sum += i;
}
}
console.log(sum);
//continue的写法
var sum = 0;
for(var i = 0; i <= 100; i++){
if(i%7 == 0){
continue;
}
sum += i;
}
console.log(sum);
//请打印在200--300之间 第一个 能被7整除的数字
for(var i = 200; i <= 300; i++){
if(i%7 == 0){
console.log(i);
break;
}
}
5.数组
var arr = ['1','2','3'];
var arr2 = [1,2,3];
console.log(arr[1]);
//字面量方式创建数组
var a1 = []; //空数组
var a2 = [1,'d'];
console.log(a2);
//声明构造函数创建数组
var a3 = new Array(); //空数组
var a4 = new Array(1,3,'h','k');
console.log(a4);
//获取数组长度
a4.length
//数组里可以有数组，称为多维数组
6.函数
//函数声明
//关键字声明
function 函数名(){
}
//表达式声明
var f = function(){
}
//函数调用
function f1(){
}
f1();
//形参与实参
function fun(形参1,形参2,形参3){}
fun(实参1,实参2,实参3);
function f1(s){console.log(s);}
//返回值
function f(形参){
语句;
return 返回值;
}
var re = f(实参);
//如果函数没有return，那么函数调用之后接到的返回值就是undefined
//如果函数有return，但return后面没有值，那么函数调用之后接到的返回值就是undefined
//函数中return之后，不管有什么代码，均不执行;return后函数的调用结束
匿名函数与自调用
//匿名函数，函数本身是没有名字的
var fun = function(){
alert(123);
}
fun();
//自调用匿名函数
(function(){
alert(123);
})();
//两段代码形式上相同
//函数的意义
//作用域
//防止全局变量的污染，封装一个局部作用
函数当作参数1
//函数也是一种数据类型
function fn(){
}
//function 数据类型 --> 对象(数组、函数)
console.log(typeof fn);
//函数当作参数
function f1(s){
s();
}
var f2 = function(){
console.log(222);
}
f1(f2);
//回调：把函数当作值放到另一个函数里面执行
函数当作参数2
function f1(){
var a = 10;
var f2 = function(){
alert(2);
}
return f2;
}
var k = f1();
k();
//闭包：把一个函数作为值返回到函数外面
新名词：回调、闭包
变量提升及代码执行阶段
全局变量和局部变量
不使用var声明的变量是全局变量，不推荐使用
变量退出作用域之后会销毁，全局变量关闭网页或浏览器才会销毁
console.log(a); //undefined
var a = 2;
//变量提升：在代码执行之前变量已经在编译阶段被声明了;
//JS代码的运行分为两个阶段
//1：解释（编译）阶段：语法检查，变量及函数进行声明
//2：运行阶段：变量的赋值，代码流程的执行
//上面的代码相当于
var a;
console.log(a);
a = 2;
作用域与代码执行
var a = 12;
function abc(){
alert(a); //undefined
var a = 10;
}
abc();
//因为在abc()中已经声明了变量a，所以外部的全局变量不使用
console.log(a); // function a(){console.log('aaaa');}
function a(){
console.log('aaaa');
}
var a = 1;
console.log(a); //1
//如果函数与变量同名，那么函数声明会替换变量声明
var a = 1;
function a(){
console.log('aaaa');
}
console.log(a); //1
//不管是函数声明还是变量声明，在运行阶段的赋值都会把a的值替换掉
作用域及作用域链
只有函数可以制造作用域结构，只要有代码，就至少有一个作用域
var a = 1;
function f1(){
//var a = 5;
function f2(){
//var a = 4;
function f3(){
//var a =3;
console.log(a);
}
f3();
}
f2();
}
f1();
7.对象
//字面量声明对象
var obj1 = {};
//对象里都是键值成对存在的
var obj2 = {
age:12,
name:'李四',
fei:function(){}
};
/*
通常来说，值是函数则称为方法，其他类型的值都是属性，但是在JS官方手册里面没有方法这个说法，之所以这么叫法是为了交流方便
*/
//实例化方式 声明对象（内置构造函数）
var obj2 = new Object();
//实例化自定义构造函数方式声明对象
function Fun(){
}
var f = new Fun();
//获取对象的属性或者方法 对象.属性名
var obj2 = {
age:12,
name:'李四',
fei:function(){
console.log(2);
}
};
console.log(obj2.age);
obj2.fei();
this是个对象
var obj1 = {
name:'李四',
age:18,
fun:function(){
//在方法中的this指的就是这个方法所在的对象
var s = this.age;
console.log(s);
}
}
obj1.fun();
示例一
function f(){
console.log(this.a); //undefined
}
f();
示例二
function f(){
// 普通的函数中也是有this的
// this 指向全局对象（window）
console.log(this);
}
f();
// this永远指向一个对象
// this在什么情况下什么地方 指向哪个对象
this的指向
示例一
k = '678';
function fun(){
var k = '89';
console.log(this.k);
}
var o1 = {
k:"123",
f:fun,
}
var o2 = {
k:"345",
f:fun,
}
o1.f(); //123
o2.f(); //345
//this运行在哪个对象下，就指向哪个对象
示例二
var o1 = {
age:18,
fun:function(){
console.log(this.age);
}
}
var o2 = {
age:16,
fun:o1.fun,
}
o2.fun();
对象的遍历及删除
遍历
var o1 = {
name:'李四',
age:15,
sex:'男'
}
// for...in
// for(键 in 对象)
// for...in循环不仅可以循环变量对象还可以，循环遍历数组
for(var k in o1){
console.log(o1[k]);
}
//补充：for in 遍历数组
var arr = [2,4,7,8,4];
for(var k in arr){
console.log(arr[k]);
}
删除
var o1 = {
name:'李四',
age:15,
sex:'男'
}
console.log(o1);
delete o1.age;
console.log(o1);
包装对象
//var str = '123';
//console.log(str.length);
//包装对象
//三种原始类型 数值 字符串 布尔
//原始类型的数据在一定条件下可以自动转为对象 这就是包装对象
//var v1 = new Number(123);
//console.log(v1);
//原始值 可以自动当作对象来调用，可以调用各种属性及方法
//如果包装对象使用完成，会自动立即销毁
var a = '456';
a.length;
火狐开发手册https://developer.mozilla.org/zh-CN/docs/Web/JavaScript
数学对象
得到一个两数之间的随机数
这个例子返回了一个在指定值之间的随机数。这个值不小于 min（有可能等于），并且小于（不等于）max。
function getRandomArbitrary(min, max) {
return Math.random() * (max - min) + min;
}
得到一个两数之间的随机整数
这个例子返回了一个在指定值之间的随机整数。这个值不小于 min （如果 min 不是整数，则不小于 min 的向上取整数），且小于（不等于）max。
function getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min)) + min;
//不含最大值，含最小值
}
//获取随机数
Math.random();
//获取最大的整数（向上取整）
Math.floor();
//获取最大的整数（向下取整）
Math.ceil();
日期对象
//实例化构造函数获取时间对象
var da = new Date();
console.log(da);
var n = Date.now();
console.log(n);
console.log(da.getHours());
//JS中获取的时间是计算本地时间
//JS中月份的数组是从0开始的
数组对象
var arr = [1,6,4,8,2,4];
console.log(arr.length);
var k = 3;
arr.push(k); //在最后添加元素[1,6,4,8,2,4,3]
arr.pop(); //删除最后一位元素[1,6,4,8,2,4]
console.log(arr);
**slice()** 方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。原始数组不会被改变。
const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
console.log(animals.slice(2));
// expected output: Array ["camel", "duck", "elephant"]
console.log(animals.slice(2, 4));
// expected output: Array ["camel", "duck"]
console.log(animals.slice(1, 5));
// expected output: Array ["bison", "camel", "duck", "elephant"]
**concat()** 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。
const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);
console.log(array3);
// expected output: Array ["a", "b", "c", "d", "e", "f"]
**join()** 方法将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目，那么将返回该项目而不使用分隔符。
const elements = ['Fire', 'Air', 'Water'];
console.log(elements.join());
// expected output: "Fire,Air,Water"
console.log(elements.join(''));
// expected output: "FireAirWater"
console.log(elements.join('-'));
// expected output: "Fire-Air-Water"
字符串对象
**indexOf()** 方法返回调用它的 String 对象中第一次出现的指定值的索引，从 fromIndex 处进行搜索。如果未找到该值，则返回 -1。
const paragraph = 'The quick brown fox jumps over the lazy dog. If the dog barked, was it really lazy?';
const searchTerm = 'dog';
const indexOfFirst = paragraph.indexOf(searchTerm);
console.log(`The index of the first "${searchTerm}" from the beginning is ${indexOfFirst}`);
// expected output: "The index of the first "dog" from the beginning is 40"
console.log(`The index of the 2nd "${searchTerm}" is ${paragraph.indexOf(searchTerm, (indexOfFirst + 1))}`);
// expected output: "The index of the 2nd "dog" is 52"
substring() 方法返回一个字符串在开始索引到结束索引之间的一个子集, 或从开始索引直到字符串的末尾的一个子集。
str.substring(indexStart, indexEnd)
**toLowerCase()** 会将调用该方法的字符串值转为小写形式，并返回。
toUpperCase() 方法将调用该方法的字符串转为大写形式并返回（如果调用该方法的值不是字符串类型会被强制转换）。
replace() 方法返回一个由替换值（replacement）替换部分或所有的模式（pattern）匹配项后的新字符串。模式可以是一个字符串或者一个正则表达式，替换值可以是一个字符串或者一个每次匹配都要调用的回调函数。如果pattern是字符串，则仅替换第一个匹配项。
const p = 'The quick brown fox jumps over the lazy dog. If the dog reacted, was it really lazy?';
const regex = /dog/gi;
console.log(p.replace(regex, 'ferret'));
// expected output: "The quick brown fox jumps over the lazy ferret. If the ferret reacted, was it really lazy?"
console.log(p.replace('dog', 'monkey'));
// expected output: "The quick brown fox jumps over the lazy monkey. If the dog reacted, was it really lazy?"
trim() 方法会从一个字符串的两端删除空白字符。在这个上下文中的空白字符是所有的空白字符 (space, tab, no-break space 等) 以及所有行终止符字符（如 LF，CR等）。
代码规范
缩进问题
语句结尾回车就可以，分号可以不加，压缩代码的时候会自动添加分号删除回车
