JavaScript基础

引入方式

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>

输入输出

输出

alter() 以弹窗形式输出。
document.writer() 输出在页面上。可以写 HTML 标签，会被解析。
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 时的注意事项：

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

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

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

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

命名规则

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

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

常量

概念：使用 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']

操作数组

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"]

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]

pop 删除最后一个单元
shift 删除第一个单元

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"]

map()

map() 方法创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。

<body>
  <script>
    const arr = ['red', 'blue', 'green']
    // map 方法也是遍历  处理数据  可以返回一个数组
    const newArr = arr.map(function (item, i) {
      // console.log(item)  // 数组元素  'red'
      // console.log(i)  // 下标
      return item + '老师'
    })
    console.log(newArr) // ['red老师', 'blue老师', 'green老师']
    const newArr2 = arr.map(function(item, i) {
        if (i < 2) {
            return item
        }
    })
    console.log(newArr2) // ['red', 'blue', 'undefined']
  </script>
</body>

join()

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"

函数声明

/*
 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
    	男
    */
}

posted @ 2023-11-02 19:55 沦陷在梦里阅读(72) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

fallingintodreams