【一】JavaScipt基础
【1】什么是JavaScript
(1)定义
-
JavaScript最初由Netscape公司(现在的Mozilla基金会)的Brendan Eich在1995年创造。
-
JavaScript是一种广泛用于网页开发的脚本语言。
-
它是一种动态、解释性的语言,可以在网页上实现复杂的交互和动态效果。
-
JavaScript通常用于前端开发,用于改变网页的内容、样式和行为,以及与用户进行交互。
(2)特点
- 它是一种解释性的语言,不需要编译,可以直接在网页上运行。
- 它是一种动态类型语言,变量的类型可以在运行时改变。
- 它支持面向对象编程(OOP)和函数式编程(FP)的范式。
- 它具有丰富的内置对象和方法,可以用于处理字符串、数组、日期、正则表达式等。
- 它可以与HTML和CSS无缝集成,通过DOM(文档对象模型)和CSSOM(CSS对象模型)操作网页元素和样式。
- 它具有广泛的第三方库和框架,如React、Angular和Vue.js,可以简化开发过程并提供更丰富的功能。
- 注意:在JavaScript中,分号(;)用于表示语句的结束。
【2】注释语法
- 在JavaScript中,注释是用于在代码中添加说明和备注的文本,它们不会被执行或解释为代码的一部分。
- 注释对于代码的可读性和维护性非常重要,可以帮助其他开发人员理解代码的意图和功能。
(1)单行注释
// 注释内容
(2)多行注释
/*
注释内容
*/
【3】调试工具
(1)alert
alert
是一个弹出窗口,用于显示一条消息给用户- 它可以用于调试目的,将特定的值或消息显示给用户
alert
方法会阻塞代码的执行,直到用户关闭弹出窗口为止。
alert('Surprise!')
(2)prompt
prompt
是一个弹出窗口,用于接收用户的输入,并将输入的值作为返回值返回给代码- 用于调试,以便在代码中获取用户的输入值。
var name = prompt("username:>>>");
(3)console
console
是一个用于在浏览器控制台输出调试信息的对象。- 它提供了一组方法,如
log
、warn
、error
等,用于输出不同级别的调试信息。
console.log(123)
【3】引入方式
(1)写在script标签里面
- body内书写:行内书写、body最下面
- head内书写
<!DOCTYPE html>
<html>
<head>
<script><!-- js代码 -->
</script>
</head>
<body><div onclick="(alert('Surprise!'))">click me !</div><script><!-- js代码 -->
</script>
</body>
</html>
(2)写在Js文件里面
- 在script标签中指定js文件路径
<!DOCTYPE html>
<html>
<head><script src='javascript.js'></script>
</head>
<body>
</body>
</html>
【二】基本数据类型
【1】字面量
- 字面量是直接表示数据的固定值。
- 它们是在代码中直接使用的值,不需要通过变量或常量进行存储。
- JavaScript中常见的字面量包括数字字面量、字符串字面量、布尔字面量、数组字面量和对象字面量等。
3.14
’hello‘
true
【2】变量和常量
(1)变量
- 变量是用于存储和引用数据的标识符。
- 建议命名为小写字母开头的驼峰体
- 在JavaScript中,可以使用
var
或let
声明变量。
var x = 5;
let y = "Hello";
1.1var和let的区别
-
作用域:
var
是函数级作用域,let
是块级作用域 -
var 在循环内定义也会影响到全局, 和python一样
-
let 在局部定义只会在局部生效,6.0版本以上可以用
var i = 10;
for (var i=0; i<4; i++){}
console.log(i)
# 4
let i = 10;
for (let i=0; i<4; i++){}
console.log(i)
# 10
- 提升:
var
声明的变量会被提升到其作用域的顶部。这意味着你可以在声明变量之前使用变量,而变量的值将是undefined
。let
声明的变量也会被提升,但是你不能在声明之前使用它们,否则会抛出ReferenceError
。这个区间被称为“暂时性死区”。
console.log(x); //undefined
var x = 5;console.log(y); //ReferenceError
let y = 5;
-
重声明:在同一个作用域中,
var
允许你重新声明同一个变量,而let
不允许。var x = 1; var x = 2; //可以let y = 1; let y = 2; //SyntaxError
(2)常量
-
常量是指在程序执行期间不可更改的值。
-
在JavaScript中,可以使用
const
关键字声明常量。常量一旦被赋值后,其值就不能再被修改 -
python并没有真正意义上的常量
const PI = 3.14 undefined PI = 3.145 Uncaught TypeError: Assignment to constant variable.at <anonymous>:1:4
【3】数值类型
- 数值类型是一种原始数据类型,用于存储数值,可以进行数学运算和比较操作。
(1)定义数据
var age = 18; //整数
var pi = 3.14; //小数
var salary = 2e5; //200000
var a = -0.5; //负数
var biggest = Infinity; //无穷大
var smallest = -Infinity; //无穷小
var b = NaN; //Not a number 非数值类型
(2)查看数据类型typeof
typeof a;
// 'number'
typeof biggest;
// 'number'
typeof b;
// 'number'
(3)类型转换
parseInt
:转换为整数parseFloat
:转换为浮点数- 字符串可以转换为数字
- 开头是数字就能转换前面的数字
- 无法转换就是NaN
console.log(parseInt(11.99)); //11
console.log(parseInt("11.99")); //11
console.log(parseFloat("11.99")); //11.99
console.log(parseInt("123aa")); //123
console.log(parseInt("aa")); //NaN
【4】字符串类型
(1)定义并查看类型
var name = 'bruce';
var hobby = "running";
typeof name; //'string'
typeof hobby; //'string'
(2)模板字符串(这是反引号`)
var introduce = `name: ${name} hobby: ${hobby}`;
console.log(introduce); //name: bruce hobby: running
(3)常用方法
3.1拼接字符串
- +号
- .concate()
var a = "123";
var b = "456";
var c = a + b; //'123456'
c.concat(a, b) //'123456123456' 没接收所以c实际不变
3.2字符串长度
- .length
c.length; //6
3.3移除空白
- .trim():移除两端空白
- .trimLeft():移除左端空白
- .trimRight():移除右端空白
- python可以指定字符,trim不行
var name = ' bruce ';
name.trim(); //'bruce'
name.trimLeft(); //'bruce '
name.trimRight(); //' bruce'
var hobby = '$swimming';
hobby.trim("$"); //'$swimming'
3.4索引
- .charAt(n):返回索引为n的值
- .indexOf(“str”):返回字符串所在的索引位置
var introduce = "hello my name is bruce";
introduce.charAt(4); //'0'
introduce.CharAt(100); //''introduce.indexOf('name'); //9
3.5切片
- .slice(m, n):[m, n)
- .substring(m, n):[m, n),不支持负数
var introduce = "my name is bruce";
introduce.slice(3, 7); //'name'
introduce.slice(0, -1); //'my name is bruc'
introduce.substring(0, -1); //''
3.6大小写转换
- .toLowerCase()
- .toUpperCase()
var name = "Bruce";
name.toLowerCase(); //'bruce'
name.toUpperCase(); //'BRUCE'
3.7切分
- .split(‘str’)
- .split(‘str’, n) 和Python运行结果不同,只保留前n个
var hobby = 'run|eat|play|swim|see';
hobby.split("|");
//(5) ['run', 'eat', 'play', 'swim', 'see']
hobby.split("|", 2);
//(2) ['run', 'eat']
# python中
hobby = 'run|eat|play|swim|see'
print(hobby.split("|", 2))
# ['run', 'eat', 'play|swim|see']
3.8类型转换
- 通过+号
- String
- .toString():数组可以,单独的数字不行
typeof(2 + ""); //'string'
typeof(String(2)); //'string'
typeof([2].toString()); //'string'
【5】布尔类型
(1)定义并查看类型
- 注意:需要全小写
var flag = true;
var indetify = false;
typeof flag; //'boolean'
(2)分类
2.1为假
-
空字符串
-
0
-
null
-
undefined
-
NaN
2.2为真
- 其他为真
(3)类型转换
- Boolean()
Boolean(null); //false
Boolean(NaN); //false
【6】null和undefined
(1)undefined
- 当一个变量声明但未赋值时,或者访问对象属性或数组元素时不存在时,该值被视为
undefined
。 - 它表示一个未定义或缺少值的状态
var name;
console.log(name); //undefined
var arr = [1, 2, 3];
console.log(arr[3]); //undefined
(2)null
- 表示一个空值或不存在的对象。
- 一般都是指定或者清空一个变量时使用
var y = null;
console.log(y); //null