JavaScript

内联标签

xxxxxxxxxx
<script>JS内容</script>

外部文件

• 新建一个 .js 文件，在文件内部书写 JS 代码

• 通过 <script>标签的 src 属性引入

x
<!-- 可不写type -->
<script type="text/javascript" src="hello.js"></script> 

基础语法

简介 / 注释

x
var x = 1;
var y = 2;
var sum = x + y;
console.log(sum);
// 单行注释

/*
多行注释
*/

/**
 * 多行注释
 */

变量 var/let/const

• 变量名一般以字母开头，不要以特殊字符开头

• 一般场景下不推荐使用 __ 开头和结尾

• JS 变量对大小写敏感

  xxxxxxxxxx
  // 不同
  var x = 1;
  var X = 2;
  

数据类型

动态弱类型语言(JS)

x
var num = 5;
console.log(num); // 输出数字5
num = "Javascript";
console.log(num); // 输出字符串Javascript

值类型 (基本类型)

• Number 数字类型(整数，负数，小数)

  xxxxxxxxxx
  var num1 = 1;
  var num2 = -1;
  var pi =3.1415926;
  

• string 字符串类型

  xxxxxxxxxx
  var str1 = "我是帅哥";
  var str2 = "1234";
  var str = str1 + str2;
  console.log(str) // 我是帅哥1234
  

• bool 布尔类型 False / True

  x
  var num = 3.14;
  var str = 3.14;
  var isEqual = num === str;
  console.log(isEqual) // False
  

• Null & Undefined

  xxxxxxxxxx
  var nullVal = null; // null 有值，为空
  var undefinedVal; // undefined 没有值，为被定义
  

  • Undefined使用场景

    • 声明一个变量但是未初始化

    • 定义一个函数，但是没有给返回值，返回值默认是undefined

    • 访问一个不存在的对象属性时，这个属性值返回undefined

  • Null使用场景

    • 清空变量原有的值或者原有的引用

引用类型

• Object 对象类型

  xxxxxxxxxx
  // 创建一个对象
  var person = {
    name: "John",
    age: 30,
    greet: function () {
      console.log("Hello, my name is " + this.name);
    },
  };
  // 访问对象的属性和方法
  console.log(person.name); // 输出 john
  console.log(person.age); // 输出 30
  person.greet(); // 输出 Hello, my name is John
  
  

• Array 数组类型

  • New 运算符搭配 Array 对象来创建数组

    xxxxxxxxxx
    var students = new Array("Tom", "Jack", "Rose");
    console.log("第一个学生：", students[0]);
    

  • 直接赋值，更推荐的使用方式

    xxxxxxxxxx
    var students = ["Tom", "Jack", "Rose"];
    console.log("第一个学生：", students[0]);
    

  • 内置方法

    xxxxxxxxxx
    var students = ["Tom", "Jack", "Rose"];
    students.push("Pu"); // 添加一个元素到末尾
    students.pop(); // 弹出最后一个元素
    

• Function 函数

  • 关键字 function 声明一个函数

  • 函数名称

  • () 传递函数参数

  • {} 函数体

  • 返回值 return

  xxxxxxxxxx
  function greet(name) {
    alert(`Hello, ${name}!`);
  }
  
  function add(num1, num2) {
    return num1 + num2;
  }
  

  • 通过匿名函数赋值给变量的形式，声明一个函数

  xxxxxxxxxx
  var multiply = function (num1, num2) {
    return num1 * num2;
  }
  console.log(multiply(1, 2));
  

• RegExp 正则表达式

  • 匹配

  xxxxxxxxxx
  // 1.定义一个有规则的正则表达式
  var regex = /hello/i; // 匹配不区分大小写的 "hello"
  // 2.使用正则表达式内置方法 test 来判断字符串是否符合规则
  var result = regex.test("Hello World!"); // true
  

  • 替换

  xxxxxxxxxx
  var str = 'Hello World!';
  var regex = /hello/i; 
  var newstr = str.replace(regex, "Hi");
  console.log(newstr);
  

  • 正则表达式的定义方式

    • var reg1 = /hello/; 通过 / / 在中间书写 / rule /

    • var reg2 = new RegExp('hello', i); 通过 new 关键字 加上 RegExp 构造函数

• Date 日期对象

  xxxxxxxxxx
  var date = new Date(); // 得到当前日期
  console.log(date);
  // 可以通过 date.toLocaleString() 方法获取日期的字符串
  console.log(date.toLocaleString());
  // 其他 API 操作日期
  console.log(date.getFullYear()); // 获取年份
  console.log(date.getMonth() + 1); // 获取月份
  console.log(date.getDate()); // 获取日期
  console.log(date.getDay()); // 获取星期几 0->周日
  console.log(date.getHours()); // 获取小时
  console.log(date.getMinutes()); // 获取分钟
  console.log(date.getSeconds()); // 获取秒
  Date.now(); // 时间戳，距离公元元年时间距离多少毫秒
  

• Math 所有属性和方法都是静态的，不需要通过 new 关键字去实例化

  xxxxxxxxxx
  console.log(Math.PI); // 圆周率
  console.log(Math.abs(-1)); // 数字的绝对值
  console.log(Math.ceil(1.1)); // 向上取整
  console.log(Math.floor(1.1)); // 向下取整
  console.log(Math.max(1, 2, 3, 4)); // 取最大值
  console.log(Math.min(1, 2, 3, 4)); // 取最小值
  console.log(Math.random()); // 生成0-1之间的随机数
  console.log(Math.round()); // 四舍五入的方法
  

数据类型判断

• 值类型判断

typeof 运算符来进行判断

x
var typeVar;
// 1.没赋值，undefined
console.log(typeof typeVar); // 'undefined'
typeVar = 26;
console.log(typeof typeVar); // 'number'
typeVar = 'hello';
console.log(typeof typeVar); // 'string'
typeVar = true;
console.log(typeof typeVar); // 'boolean'

// null
typeVar = null;
console.log(typeVar === null); // true null 和 undefined 是内置变量
// 不能
var num = 1;
console.log(num === Number); // Number 是对象，不是内置变量

• 引用类型判断

instanceof 判断引用类型

x
var arr = [1, 2, 3]; // Array
var obj = { name: "大帅哥"，age: 23}; // Object
var greet = function () { // function
  console.log('hello');
};
var reg = /hello/;

console.log(arr instanceof Array);
console.log(obj instanceof Object);
console.log(greet instanceof Function);
console.log(reg instanceof RegExp);

// 用法
if (greet instanceof Function) {
  alert('greet 是一个函数对象');
};

可以通过 Object.prototype.toString.call(target) 来判断

x
console.log(Object.prototype.toString.call(arr)); // [object Array]
// 用法
if (Object.prototype.toString.call(arr) === '[object Array]') {
  alert('arr 是一个数组对象');
};

运算符

算数运算符

x
var num1 = 10;
var num2 = 3;

console.log(num1 + num2);
console.log(num1 - num2);
console.log(num1 * num2);
console.log(num1 / num2);
console.log(num1 % num2); // 取余运算
console.log(num1 ** num2); // 幂运算 10^3
num1 ++
num1 --

赋值运算符

xxxxxxxxxx
var num = 10; // 等号就是赋值运算
num += 5;
num -= 4;
num *= 2;
num /= 2'
num %= 3;

比较运算符

x
var x = 5;
var y = 10;
// == 等于
// === 绝对等于（值和类型都相等）
var pi =3.142;
var piStr = '3.142';
console.log(pi == piStr); // true
console.log(pi === piStr); // false

console.log('判断 x 是否等于 y :', x === y);
console.log('判断 x 是否不等于 y :', x !== y);
console.log('判断 x 是否大于 y :', x > y);
console.log('判断 x 是否小于 y :', x < y);
console.log('判断 x 是否大于等于 y :', x >= y);
console.log('判断 x 是否小于等于 y :', x <= y);

逻辑运算符

x
var x = true;
var y = false;
// 逻辑与运算&&
true && false; // false
// 逻辑或运算||
true || false; // true
// 逻辑非运算 !
!true;
!false;

三元运算符 ? :

xxxxxxxxxx
var num1 = 5;
var num2 = 10;
// 如果是: 执行 ? 后面
// 如果否: 执行 : 后面
(num1 > num2) ? console.log(num1 + "大于" + num2) : console.log(num1 + "小于" + num2)

字符串运算符

xxxxxxxxxx
// + +=
console.log("我是" + "大帅哥"); // "我是大帅哥"

var myString = "大";
mySring += "帅哥"; // "大帅哥"

逗号运算符

x
// 1.
var num1 = 3, num2 = 4;
// 2.
var i,j;
for(i = 1, j = 9; i < j; i++, j--) {
  console.log(i,j);
};

关系运算符

• in

• instanceof

x
var obj = {
  name = "大帅哥";
  age = 23;
};

"name" in obj; // true
"address" in obj; // false

// instanceof
var date = new Date();
date instanceof Date; // true

位运算符

x
let c = 5; // 0101
let d = 3; // 0011

console.log(c & d); // 输出: 1 (按位与)
console.log(c | d); // 输出: 7 (按位或)
console.log(c ^ d); // 输出: 6 (按位异或)
console.log(c << 1); // 输出: 10 (左移)
console.log(c >> 1); // 输出: 2 (左移)

一元运算符

• delete 用来删除对象属性

• typeof 判断基础数据类型值类型

x
var obj = {
  name = "大帅哥";
  age = 23;
};

delete obj.age;

var num = 1;
typeof num;

条件判断

if ... else

x
var temp = 30;
if (temp > 25) {
  console.log("热死我了！");
} else {
  console.log("我还能撑！");
};

if ... else if

x
var temp = 30;
if (temp > 25) {
  console.log("热死我了！");
} else if (temp < 10) {
  console.log("冷死了！");
} else {
  console.log("我还能撑！");
};

switch

x
var temp = 30;
switch (true) {
  case temp > 25:
    console.log("热死我了！");
    break
  case temp < 10:
    console.log("冷死了！");
    break
  default:
    console.log("我还能撑！");
};

循环

循环语句

• for

x
for. (var i = 0; i < 5; i++) {
  console.log("循环迭代: i = " + i);
};
// 和逗号运算符搭配使用
for(var i = 1, j = 9; i < j; i++, j--) {
  console.log("循环迭代: i = " + i + ", j = " + j);
};
// 面试题：数组去重
function uniqueArray(arr) {
  var result = [];
  for (var i = 0; i < arr.length; i++) {
    var isDuplicate = false;
    for (var j = 0; j < result.length; j++) {
      if (arr[i] === result[j]) {
        isDuplicate = true;
        break
      }
    }
    if (!isDuplicate) {
      result.push(arr[i]);
    }
  }
  return result;
}

• while

xxxxxxxxxx
var i = 0;
while (i < 10) {
  console.log(i);
  i++;
}

• do ... while

xxxxxxxxxx
var i = 6;
do {
  console.log(i);
  i++;
} while(i < 5);

循环控制

• break

• continue

• label 可和 break continue搭配使用

  xxxxxxxxxx
  var matrix = [
    [1, 2, 3]
    [4, 5, 6]
    [7, 8, 9]
  ];
  for (var i = 0; i < 3; i++) { // 第一层循环
    for (var j = 0; j < 3; j++) { // 第二层循环
      if (i >= 1 && j >= 1) { 
        break; // break 默认只跳出当前循环
      }
      console.log(`matrix[${i}][${j}]:`, matrix[i][j]);
    }
  }
  // 使用 label 标记循环
  outerLoop: for (var i = 0; i < 3; i++) { // 第一层循环
    for (var j = 0; j < 3; j++) { // 第二层循环
      if (i >= 1 && j >= 1) { 
        break outerLoop; // break 跳出指定循环
      }
      console.log(`matrix[${i}][${j}]:`, matrix[i][j]);
    }
  }
  // 跳出多层循环
  iLevelLoop: for (var i = 0; i < 3; i++) {
    jLevelLoop: for (var j = 0; j < 3; j++) {
      kLevelLoop: for (var k = 0; k < 5; k++) {
        if (k ===2) {
          break jLevelLoop;
        }
        if (k === 3) {
          break iLevelLoop;
        }
        console.log("i = " + i + ", j = " + j + ", k = " + k);
      }
    }
  }
  

其他循环语句

• for ... in

  xxxxxxxxxx
  var person = { name: "帅哥", age: 23, email: "123@.com"};
  for (var key in person) {
    console.log(key + ":" + person[key]);
  }
  

• for ... of

  • 遍历数组

    xxxxxxxxxx
    var arr = [2, 4, 6, 8, 10];
    for (var value of arr) {
      console.log("Value: " + value);
    }
    // 等同于
    for ( var i = 0; i < arr.length; i++ ) {}
    

  • 遍历字符串

    xxxxxxxxxx
    var str = "hello";
    for (var char of str) {
      console.log(char);
    }
    

  • 字符串反转

    xxxxxxxxxx
    var str = "hello";
    var reverseStr = "";
    for (var char of str) {
      reverseStr = char + reverseStr;
    }
    console.log(reversStr);
    

函数

定义方式

• 函数声明

  x
  function greet(name) {
    alert("hello " + name);
  }
  // 调用
  greet("帅哥");
  

• 函数表达式 匿名函数

  xxxxxxxxxx
  var sayHello = function (name) {
    alert("hello " + name);
  }
  // 调用
  sayHello("帅哥");
  

• 箭头函数

  xxxxxxxxxx
  var sayHello = (name) => {
    alert("hello " + name);
  }
  // 调用
  sayHello("帅哥");
  

参数

• 不传递参数

  xxxxxxxxxx
  function greet(name) {
    alert("hello " + name);
  }
  // 调用
  greet(); // undefined
  

• 特殊的函数内置对象 arguments

  xxxxxxxxxx
  // arguments 不是数组，但是可以通过下标索引
  function showArgments() {
    console.log('接受到第一个参数', arguments[0]);
    console.log('接受到第二个参数', arguments[1]);
    console.log('接受到第三个参数', arguments[2]);
  }
  showArgments(1, 2, 3);
  

返回值

xxxxxxxxxx
function add(num1, num2) {
  console.log(num1 + num2);
  return num1 + num2
}
var result = add(3,4);
console.log(result);

内置函数

• parseInt 字符串转换为整数 parseInt(num)

• parseFloat 字符串转为浮点数 parseFloat(num)

• 数组对象中的内置函数

  xxxxxxxxxx
  var arr = [1, 2, 3, 4, 5];
  // includes: 查找数组中是否包含某个元素
  arr.includes(3);
  // indexOf: 查找元素在数组中的下标
  arr.indexOf(2);
  // forEach: 内置函数提供遍历数组元素的方法
  arr.forEach((item) => {
    console.log("元素是 ", item);
  });
  

回调函数

x
// 接收一个函数作为参数，在函数中调用这个传进来的函数参数
function processUserInput(callback) {
  const name = prompt('Please enter your name');
  callback(name);
}

function greet(name) {
  alert("Hello, " + name);
}
// 调用方法
processUserInput(greet);

异步函数

• 结果回来时才打印