JavaScript基础

  • JavaScript基础已关闭评论
  • 92 次浏览
  • A+
所属分类：Web前端
摘要

JavaScript 程序不能独立运行，它需要被嵌入 HTML 中，然后浏览器才能执行 JavaScript 代码。
便宜好用的国外VPS推荐

引入方式

JavaScript 程序不能独立运行，它需要被嵌入 HTML 中，然后浏览器才能执行 JavaScript 代码。

内部引入

写在 body 结束标签的上方。

<!DOCTYPE html> <html lang="en">  <head>   <meta charset="UTF-8">   <meta http-equiv="X-UA-Compatible" content="IE=edge">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Document</title> </head>  <body>   <!-- 内部js -->   <script>     // 页面弹出警示框     alert('你好，js~')   </script> </body>  </html>

外部引入

// 文件名 demo.js alert('我是外部的 js文件') 
<!DOCTYPE html> <html lang="en">  <head>   <meta charset="UTF-8">   <meta http-equiv="X-UA-Compatible" content="IE=edge">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Document</title> </head>  <body>   <script src="demo.js">     // 中间不要写内容，会被忽略   </script> </body>  </html>

内联引入

<!DOCTYPE html> <html lang="en">  <head>   <meta charset="UTF-8">   <meta http-equiv="X-UA-Compatible" content="IE=edge">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Document</title> </head>  <body>   <button onclick="alter('内联引入')">       按钮   </button> </body>  </html>

输入输出

输出

  1. alter() 以弹窗形式输出。
  2. document.writer() 输出在页面上。可以写 HTML 标签，会被解析。
  3. console.log() 控制台输出。

输入

展示一个输入弹窗。

prompt() prompt(message) prompt(message, defaultValue)

参数说明：

  • message：提示信息
  • defaultValue：文本框中的默认值

变量

声明及赋值

let name1; let name1 = value1; let name1 = value1, name2 = value2; let name1, name2 = value2; let name1 = value1, name2, /* …, */ nameN = valueN;

参数说明：

  • nameN：变量名称。
  • valueN：变量初始值，默认值为 undefined。

关键字

JavaScript 使用专门的关键字 let 和 var 来声明（定义）变量，在使用时需要注意一些细节：

以下是使用 let 时的注意事项：

  1. 允许声明和赋值同时进行
  2. 不允许重复声明
  3. 允许同时声明多个变量并赋值
  4. JavaScript 中内置的一些关键字不能被当做变量名

以下是使用 var 时的注意事项：

  1. 允许声明和赋值同时进行
  2. 允许重复声明
  3. 允许同时声明多个变量并赋值

大部分情况使用 let 和 var 区别不大，但是 let 相较 var 更严谨，因此推荐使用 let。

命名规则

关于变量的名称（标识符）有一系列的规则需要遵守：

  1. 只能是字母、数字、下划线、$，且不能能数字开头
  2. 字母区分大小写，如 Age 和 age 是不同的变量
  3. JavaScript 内部已占用于单词（关键字或保留字）不允许使用
  4. 尽量保证变量具有一定的语义，见字知义

常量

概念：使用 const 声明的变量称为“常量”。

使用场景：当某个变量永远不会改变的时候，就可以使用 const 来声明，而不是let。

命名规范：和变量一致

const PI = 3.14

注意： 常量不允许重新赋值,声明的时候必须赋值（初始化）

数据类型

可以通过 typeof 关键字检测数据类型

document.writer(typeof 1) // number document.writer(typeof '字符串') // string document.writer(typeof true) // boolean let tmp document.writer(typeof tmp) // undefined

基本数据类型

  • number：数值型

  • string：字符串型

    • // 使用 "" '' `` 包裹的都为字符串 // 当使用 `` 时，为模板字符串，例如： `我今年${age}岁`，可以避免字符串拼接 let age = 20 document.writer(`我今年${age}岁`)

  • boolean：布尔型

  • undefined：未定义型

  • null：空类型

引用数据类型

  • object：对象

数组

定义数组

let arr = [] // a) 数组单元值的类型为字符类型 let list = ['HTML', 'CSS', 'JavaScript'] // b) 数组单元值的类型为数值类型 let scores = [78, 84, 70, 62, 75] // c) 混合多种类型 let mixin = [true, 1, false, 'hello']

操作数组

  1. push 动态向数组的尾部添加一个单元

    /*     push()     push(element0)     push(element0, element1)     push(element0, element1, … , elementN) */  const animals = ['pigs', 'goats', 'sheep'];  const count = animals.push('cows'); console.log(count); // Expected output: 4 console.log(animals); // Expected output: Array ["pigs", "goats", "sheep", "cows"]  animals.push('chickens', 'cats', 'dogs'); console.log(animals); // Expected output: Array ["pigs", "goats", "sheep", "cows", "chickens", "cats", "dogs"]

  2. unshit 动态向数组头部添加一个单元

    /*     unshift()     unshift(element1)     unshift(element1, element2)     unshift(element1, element2,  …,  elementN) */  const array1 = [1, 2, 3];  console.log(array1.unshift(4, 5)); // Expected output: 5  console.log(array1); // Expected output: Array [4, 5, 1, 2, 3]

  3. pop 删除最后一个单元

  4. shift 删除第一个单元

  5. splice 从指定位置开始，删除0~N个数

    /*     splice(start)     splice(start, deleteCount)     splice(start, deleteCount, item1)     splice(start, deleteCount, item1, item2, itemN)          start：开始位置，包括该位置     deleteCount（可选）：删除的个数，如果为0则必须有 item，即将 item 插入指定索引位置     item（可选）：要插入的元素 */  const months = ['Jan', 'March', 'April', 'June']; months.splice(1, 0, 'Feb'); // Inserts at index 1 console.log(months); // Expected output: Array ["Jan", "Feb", "March", "April", "June"]  months.splice(4, 1, 'May'); // Replaces 1 element at index 4 console.log(months); // Expected output: Array ["Jan", "Feb", "March", "April", "May"]

函数声明

/*  function：关键字  形参与返回值是可选的，非必须 */ function 函数名(形参) {  // 逻辑代码    return 返回值; }  /*  匿名函数，一般用于函数表达式 */ let fun = function() {  console.log('函数表达式') } // 调用 fun()  /*  立即执行函数  多个立即执行函数之间必须要使用 ; 隔开 */ (function(形参) {   })(实参); (function(形参) {   }(实参));

对象

对象的构成与声明

// 空对象 let obj = {} // 对象构成 let 对象名 = {     属性名: 属性值,     方法名: function() {} }

对象的操作

属性访问与方法调用

/* 	属性名需要使用 "" 或 '' 包裹，但可以省略 	当属性名包含特殊符号时则必须使用上述符号包裹 */ const person = {   name: ["Bob", "Smith"],   age: 32,   bio: function () {     console.log(`${this.name[0]} ${this.name[1]} 现在 ${this.age} 岁了。`);   },   introduceSelf: function () {     console.log(`你好！我是 ${this.name[0]}。`);   }, };  // 点表示法 person.name; // 括号表示法，一般用于属性名有特殊符号的时候 person['name']; person.name[0]; person.age; person.bio(); // "Bob Smith 现在 32 岁了。" person.introduceSelf(); // "你好！我是 Bob。"

遍历对象

const obj = {   uname: '张三',   age: 18,   gender: '男' };  for (let key : obj) {     console.log(obj[key])     /*     	张三     	18     	男     */ }
便宜好用的国外VPS推荐