初识JavaScript

JS书写形式

1、内嵌式：

把JS代码写到script标签中

2、内联式：

把JS代码放到标签的特殊属性中

"button" value="点我一下" onclick="alert('haha')">

3、外部式：

把JS代码写到单独的.js文件中，在html中引入这个js文件(使用script标签引入)

注释

单行注释：//

多行注释：/* */

输入输出

alert弹出一个警示对话框, 输出结果

console.log在控制台打印一个日志，它显示在开发者工具的console中~~

prompt弹出一个输入框

变量

var 和 let 是 JS 中的关键字, 表示这是一个变量~~

var是老式写法，里面坑比较多~~let是新式写法，这个是当前的推荐写法~~

var name = 'zhangsan';
let age = 20;

JS 的变量类型是程序运行过程中才确定的运行到 = 语句才会确定类型)~~随着程序运行, 变量的类型是可以发生改变的~~

let a = 10;   // 数字
a = "hehe";   // 字符串

基本数据类型

number：数字，不区分整数和小数

boolean：true 真，false 假~~true可以隐式转换为1，false可以隐式转换为0~~非0为true0为false~~

string：字符串类型，JS中的字符串可以用''也可以用""

undefined：唯一值 undefined，表示未定义的值，JS没有异常都是出现undefined~~

null：唯一值null，表示空值~~

1、求字符串长度~~

let b = 'haha';
console.log(b.length);

2、字符串拼接~~

let a = "my name is ";
let b = "zhangsan";
console.log(a + b);

3、比较两个字符串是否相同~~

console.log("张三" == "李四");

4、查看当前变量类型~~

let name = '张三';
console.log(typeof(name));

转义字符

\n 换行
\\ 得到一个\
\' 得到一个'
\" 得到一个"
\t 制表位

运算符

算术运算符：

+ 加
- 减
* 乘
/ 除
% 取余

赋值运算符：

= 赋值
+= 加等
-= 减等
*= 乘等
/= 除等
%= 取余等

自增自减运算符：

++: 自增1
--: 自减1

比较运算符：

< 小于
> 大于
<= 小于等于
>= 大于等于
== 比较相等(会进行隐式类型转换)
!= 不等于(会进行隐式类型转换)
=== 比较相等(不会进行隐式类型转换)
!== 不等于(会进行隐式类型转换)

逻辑运算符：

&& 与: 一假则假
|| 或: 一真则真
! 非

位运算：

& 按位与
| 按位或
~ 按位取反
^ 按位异或

移位运算：

<< 左移
>> 有符号右移(算术右移)
>>> 无符号右移(逻辑右移)

条件语句

if语句：

// 形式1
if (条件) {
  语句
}
// 形式2
if (条件) {
  语句1
} else {
  语句2
}
// 形式3
if (条件1) {
  语句1
} else if (条件2) {
  语句2 
} else if .... {
  语句...
} else {
  语句N
}

三元表达式：

条件 ? 表达式1 : 表达式2

switch语句：

switch (表达式) {
  case 值1:
    语句1;
    break;
  case 值2:
    语句2;
    break;
  default:
    语句N;
}

循环语句

continue：结束这次循环

break：结束整个循环

while循环：

while (条件) {
  循环体;
}

for 循环：

for (表达式1; 表达式2; 表达式3) {
    循环体;
}

JS数组

JS的数组长度是可以动态变化的，JS 的数组不要求元素是相同类型~~

创建数组：

1、第一种创建方式
let arr = new Array();
​
2、第二种创建方式
let arr = [];
let arr2 = [1, 2, 'haha', false];

获取数组元素：

let arr = ['小猪佩奇', '小猪乔治', '小羊苏西'];
console.log(arr[0]);

获取数组长度：

let arr = ['小猪佩奇', '小猪乔治', '小羊苏西'];
console.log(arr.length);

新增数组元素：

对于js数组来说，[]里是非负整数时才把这个操作视为是"操作下标"，其他的都认为是属性~~

下标操作：
let arr = ['小猪佩奇', '小猪乔治', '小羊苏西'];
arr[4] = '水兵月野兔';//此时下标3元素为undefined
 
或
​
let arr = ['小猪佩奇', '小猪乔治', '小羊苏西'];
arr.length = 6;//新增的元素默认值为 undefined
​
或
​
let arr = ['小猪佩奇', '小猪乔治', '小羊苏西'];
arr.push('老六');//尾插
属性操作：arr[属性] = 值;//等价于 arr.属性 = 值

删除数组元素：

let arr = [9, 5, 2, 7];
arr.splice(2, 1);//第一个参数表示从2下标开始删除,第二个参数表示要删除的元素个数是 1 个
​
let arr = [9, 5, 2, 7];
arr.pop();//尾删

替换元素：

let arr = [1,2,3,4,5];//将3替换为hello
arr.splice(2,1,'hello');//参数1是在2下标替换,参数2是用hello替换2下标后0个元素,参数3是用hello替换

插入元素：

let arr = [1,2,3,4,5];//在2 3之间插入一个hello
arr.splice(2,0,'hello');//参数2为0的时候,也就是表示插入操作

JS函数

函数声明：

function 函数名(形参列表) { //形参的类型不必显示写出,也不必写返回值类型
  函数体
  return 返回值;
}

函数调用：

函数名(实参列表)      // 不考虑返回值
​
返回值 = 函数名(实参列表)  // 考虑返回值

lambda表达式：

let add = function() {
    函数体
    return 返回值;
}
​
console.log(add(10, 20)); 

JS对象

JS中使用 { } 创建对象~~

var a = {};  // 创建了一个空的对象
​
var student = {
  name: '蔡徐坤',
  height: 175,
  weight: 170,
  sing: function() {
    console.log("只因你太美");
  }
};
​
// 1. 使用.成员访问运算符来访问属性 `.` 可以理解成 "的"
console.log(student.name);
// 2. 使用 [ ] 访问属性, 此时属性需要加上引号
console.log(student['height']);
// 3. 调用方法, 别忘记加上 ()
student.sing();

JS构造函数

前面的创建对象方式只能创建一个对象. 而使用构造函数可以很方便 的创建 多个对象.

function 构造函数名(形参) {
  this.属性 = 值;
  this.方法 = function() {
      //.....
  }
}
 
var obj = new 构造函数名(实参);