前端JavaScript（语法）

目录

第一个程序

JavaScript的书写形式

输入输出

变量

基本数据类型

运算符

条件语句

循环语句

数组

函数

对象

---

第一个程序

注释

单行注释 //

多行注释 /* */

多行注释不能嵌套. 形如这种代码就会报错

JavaScript的书写形式

行内式

直接嵌入到 html 元素内部

JS 中字符串常量可以使用单引号表示, 也可以 使用双引号表示.

HTML 中推荐使用双引号, JS 中推荐使用单引号.

内嵌式

写在script标签中

外部式

写在单独的.js文件中

这种情况下 script 标签中间不能写代码. 必须空着

alert("哈哈哈哈");

输入输出

输入：prompt

// d出一个输入框
prompt("请输入您的姓名:");

输出：alert

// d出一个警示对话框
alert("hello");

输出：console.log

// 向控制台输出日志
console.log("这是一条日志");

供程序员看

变量

创建变量

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

使用变量

console.log(age);
age = 31;

理解动态类型

1. JS 的变量类型是程序运行过程中才确定的(运行到 = 语句才会确定类型)

2. 随着程序运行, 变量的类型可能会发生改变.

基本数据类型

JS 中内置的几种类型

number: 数字. 不区分整数和小数.

boolean: true 真, false 假.

string: 字符串类型.

undefined: 只有唯一的值 undefined. 表示未定义的值.

null: 只有唯一的值 null. 表示空值

number数字类型

JS 中不区分整数和浮点数, 统一都使用 "数字类型" 来表示.

数字进制表示

let a = 07; //八进制，以0开头
let b = 0xa; //十六进制，以0x开头
let c = 0b10; //二进制，以0b开头

特殊的数字值

Infinity: 无穷大, 大于任何数字. 表示数字已经超过了 JS 能表示的范围.

-Infinity: 负无穷大, 小于任何数字. 表示数字已经超过了 JS 能表示的范围.

NaN: 表示当前的结果不是一个数字.

let max = Number.MAX_VALUE;
// 得到 Infinity
console.log(max * 2);
// 得到 -Infinity
console.log(-max * 2);
// 得到 NaN
console.log('hehe' - 10);

1. 负无穷大 和 无穷小 不是一回事. 无穷小指无限趋近与 0, 值为 1 / Infinity

2. 'hehe' + 10 得到的不是 NaN, 而是 'hehe10', 会把数字隐式转成字符串, 再进行字符串拼接.

3. 可以使用 isNaN 函数判定是不是一个非数字.

string字符串类型

let msg = "My name is "zhangsan""; 
// 出错
let msg = "My name is \"zhangsan\""; 
// 正确, 使用转义字符. \" 来表示字符串内部的引号.
let msg = "My name is 'zhangsan'"; 
// 正确, 搭配使用单双引号
let msg = 'My name is "zhangsan"'; 
// 正确, 搭配使用单双引号

转移字符

\n    \\    \'    \"    \t

求长度

使用 String 的 length 属性即可

得到的是字符的数量

let a = 'hehe';
console.log(a.length);
//4
let b = '哈哈';
console.log(b.length);
//2

字符串拼接

使用 + 进行拼接

let a = "a";
let b = "b";
console.log(a+b);
//ab
let c = 100;
console.log(a+c);
//a100

boolean 布尔类型

Boolean 参与运算时当做 1 和 0 来看待.

undefined 未定义数据类型

如果一个变量没有被初始化过, 结果就是 undefined, 是 undefined 类型

let a;
console.log(a);
//undefined
console.log(a + "10"); 
// undefined10
console.log(a + 10);
//NaN

null 空值类型

null 表示当前的变量是一个 "空值".

let b = null;
console.log(b + 10); 
// 10
console.log(b + "10"); 
// null10

运算符

算术运算符

+    -    *    /    %

赋值运算符&复合赋值运算符

=    +=    -=    *=    /=    %=

自增自减运算符

++    --

比较运算符

<    >    <=    >=    

== 比较相等(会进行隐式类型转换) !=

=== 比较相等(不会进行隐式类型转换) !==

逻辑运算符

&&    !

|| 如果a为真，返回的是a，如果a为假，返回的是b

位运算

&    |    ~    ^

移位运算

<<    >>    >>>

条件语句

if语句

if(条件1){
    语句1;
}else if(条件2){
    语句2;
}else{
    语句3;
}

三元表达式

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

switch

switch(parseInt(day)){
    case 1:
        语句1;
        break;
    default:
        语句2;
}

循环语句

while循环

while (条件) {
    循环体;
}

continue

结束这次循环，开始下次循环

break

结束循环

for循环

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

数组

创建数组

let arr1 = [];
let arr2 = [1,2,"haha",false,undefined];

获取数组元素

console.log(arr);
//打印的是数组中的所有元素
console.log(arr[0]);
//1
console.log(arr[100]);
//undefined

arr[hello] = 'world';
//arr.hello = 'world';
console.log(arr[hello]);
//console.log(arr.hello);

新增数组元素

1.通过修改length新增

let arr = [9, 5, 2, 7];
arr.length = 6;
console.log(arr[4], arr[5]);

2.通过下标新增

let arr = [];
arr[2] = 10;

3.使用push进行追加元素

给定一个数组, 把数组中的奇数放到一个 newArr 中

let arr = [9, 5, 2, 7, 3, 6, 8];
let newArr = [];
for (let i = 0; i < arr.length; i++) {
    if (arr[i] % 2 != 0) {
        newArr.push(arr[i]);
    }
}

删除数组元素

使用splice方法删除元素

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

函数

语法格式

//函数定义
function 函数名(形参列表) {
    函数体
    return 返回值;
}
//函数调用
函数名(实参列表);
返回值=函数名(实参列表);

关于参数个数

1. 如果实参个数比形参个数多, 则多出的参数不参与函数运算

2. 如果实参个数比形参个数少, 则此时多出来的形参值为 undefined

function add(x,y){
    return x+y;
}
console.log("hello","world");
console.log(1,1);
//只要传入的参数能够支持函数体里的逻辑即可

函数表达式

let add = function() {
    let sum = 0;
    for (let i = 0; i < arguments.length; i++) {
        sum += arguments[i];
    }
    return sum;
}
console.log(add(10, 20));
// 30
console.log(add(1, 2, 3, 4));
// 10

作用域链

函数可以定义在函数内部

内层函数可以访问外层函数的局部变量.

内部函数可以访问外部函数的变量. 采取的是链式查找的方式. 从内到外依次进行查找.

let num = 1;
function test1() {
    let num = 10;
    function test2() {
        let num = 20;
        console.log(num);
    }
    test2();
}
test1();

对象

使用字面量创建对象

都是使用键值对来表示的

既可以有属性也可以有方法

键值对之间，分割

键值之间：分割

let a = {};
// 创建了一个空的对象
let student = {
    name: '张三',
    height: 180,
    weight: 70,
    sayHello: function() {
        console.log("hello");
    }
};
//使用
console.log(student.name);
console.log(student['name']);
student.sayHello();

使用new Object()创建对象

let student = new Object();
student.name = "李四";
student.height = 180;
student['weight'] = 70;
student.sayHello = function(){
    console.log("hello");
}

使用构造函数创建对象

function Cat(name,type){
    this.name = name;
    this.type = type;
    this.sayMiao = function(){
        console.log('miao');    
    }
}
let cat1 = new Cat('小猫','狸花猫');