js基础（一）

且陶陶

发布于 2023-04-12 14:51:29

2.6K0

文章被收录于专栏：Triciaの小世界Triciaの小世界

JavaScript起源：

借鉴java的管理机制，c的函数，最开始交Mocha,后改为LiveScript,当时java特别火，和sun公司合作以后改名为JavaScript。（与java毫无关系）

ECMA:欧洲计算机制造商协会

ECMAScript1.0 ：制定了js语法标准。
ECMAScript10 ：最新版本
ECMAScript5.0、ECMAScript6.0 常用版本

JavaScript简介

JavaScript是基于对象和事件驱动的解释性脚本语言

基于对象：js是一种基于对象的语言，这意味着它能运用自己已经创建的对象。
事件驱动：JavaScript可以直接对用户或者克服输入作出响应，无需经过web服务器，它对用户的响应，以事件驱动的方式进行。
解释性：浏览器可以直接识别和解析js代码。

编译性：C、C++（高级语法），计算机只能识别机器语言（0、1）编译成能够识别的二进制代码。解释性：JavaScript、php，可以直接被浏览器识别执行，一行一行执行

JavaScript兼容性好，可以跨平台。

JavaScript的组成：

ECMAScript：指定JavaScript语法标准。
DOM：Document Object Model 文档对象模型
BOM：Browser Object Model 浏览器对象模型

JavaScript与ECMAScript的关系？ ECMAScript是JavaScript的语法标准。 JavaScript是ECMAScript的具体体现。

js的编写位置：

标签的属性中（不推荐）
- 可以将js代码编写到标签的onclick属性中。当我们点击按钮时，才会执行！
- 可以将js代码写在超链接的href属性中，点击超链接时，会执行js代码 script标签中。
编写到外部js文件中，然后引入。（推荐）写到外部文件中可以在不同的页面中引用，也可以利用浏览器的缓存机制。

所有的js代码都要写在< script>标签中。

可以引入多个script标签。他们之间顺序执行。

JavaScript三种引入方式：

行内引入：在html开始标签中引入：<div onclick = "alert('点击了')"> </div>
内部引入：在script标签中写js代码：<script>alert(1)</script>
外部引入(常用)：通过script标签的src属性引入js文件到html中：<script src = 'index.js'></script>

【注】如果当前script标签作用引入外部文件，那么这个script标签中，就不能在写代码了。可以创建新的script标签来写外部代码。

如果想要输出文本内容为,不能直接写 document.write("");正确写法：

&lt 代替“<”
&gt 代替“>”

注释快捷键：

单行注释 Ctrl+/ 多行注释Ctrl+shift+/

小栗子：

<script>
        alert("hello world"); //在页面弹出警告框
        document.write("hello world!!");  //在当前文本进行输出
        document.write("&lt/script&gt");
        console.log("hello");  //向控制台输出
    </script>

js基本语法

js严格区分大小写
js中每条语句以分号结尾
js会自动忽略多个空格和换行

概念：

字面量，一些不可改变的值，都可以直接使用（一般不会直接使用，比较麻烦）2r7325291ur
变量，可以保存字面量，值可以任意改变（常用） x = 2r7325291ur 在js中使用var关键字声明变量。 var a = 10000;
标识符，在js中可以由我们自主命名的都可以称为标识符。（如变量名、函数名、属性名）。
1. 命名规则：可以含有字母、数字、下划线、$。
2. 不能以数字开头。
3. 不能是js中的关键字或者保留字。
4. 采用驼峰命名如：helloWorld。
5. js底层保存标识符时采用Unicode编码。

关键字和保留字

块作用域

块： {} let: 使用 let 关键词声明拥有块作用域的变量。

在块内声明的变量无法从块外访问
let不允许多次声明同一个变量

{
    let x = 6;  //把6赋值给x
}
例如在循环中使用let:


<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
let i = 5;
for (let i = 0; i < 10; i++) {
document.write(i+" ");
  // 输出为0 1 2 3 4 5 6 7 8 9
}
document.getElementById("demo").innerHTML = i;
// 输出为 5，因为在循环中用 let 声明了变量 i，那么只有在循环内，变量 i 才是可见的
</script>

</body>
</html>

数据类型

6种数据类型：

String 字符串
Number 数值
Boolean 布尔值
Null 空
Undefined 未定义以上是基本数据类型。
Object 对象
function 函数
array 数组这是引用数据类型。 == 注意：与java不同的是，js是弱数据类型，即到底是什么数据类型赋值后才知道==

下面介绍一下这些数据类型：

一、String:

使用字符串必须用引号引起来。
单引号双引号都可。
双引号里可以放单引号，但是同类型不能嵌套。
在字符串中，可以使用 \ 作为转义字符，当输出一些特殊符号需要转义时使用。

模板字符串：

用于拼接字符串和变量。
内容拼接变量时，用 ${} 包住变量。

let nAme = "崔皓月"
document.write(`大家好，我叫${nAme}`)

二、Number:

整数和小数都可以使用。
可以使用运算符typeof来检测变量类型。
语法：typeof 变量
例如：

var a = 123;
var b = "123";
console.log(typeof a);

结果如下：

表示数字的最值：
最大值：Number.MAX_VALUE,如果超过了这个最大值，返回Infinity（正无穷，也是字面量）。
最小值：Number.MIN_VALUE，大于0的最小值。
NaN 是一个特殊的数字，表示Not A Number。
js中整数的运算基本可以保证精确。
如果使用js进行浮点数运算，可能不精确。

三、Boolean:

只有两个值：true、flase,主要做逻辑判断。

四、Null:

只有一个值：null，专门用来表示为空的对象。

五、Undefined:

只有一个值：undefined：当声明变量，但是不给变量赋值时，他就是undefined。

强制类型转换

隐式转换：

某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换。

+号两边只要有一个是字符串，都会把另外一个转成字符串。
除了+以外的算术运算符比如 - * / 等都会把数据转成数字类型。

显示转换

一、其他类型转换为String：

调用被转换类型的toStirng()方法。

var c = 12345;
c = c.toString();
console.log(typeof c);

调用String()函数，并将被转换的数据作为参数传递给函数。

var a = 123;
a = String(a);
console.log(typeof a);

对于Number和Boolean,实际上就是调用的toString()方法。
对于Null和Undefined，直接转换。

二、将其他类型转化为Number：

使用Number（）函数

字符串—>数字

如果是纯数字的字符串，则直接转换。
如果含有非数字内容，则转换NaN。
如果是空串或者是一个全是空格的串，则转换为0。

布尔—>数字

true转成1
false转成0

null—>数字

Undefined—>数字

这种方式专门用来对付字符串。

parseInt（）把一个字符串转换为一个整数。（把一个字符串中的有效整数取出来然后转化为Number。）

parseFloat（）把一个字符串转换成浮点型。（把一个字符串中的有效浮点数取出来然后转化为Number。）

ps.如果对非String使用，它会先将其转化为String然后操作。

三、转化为其他进制

在js中，如果需要表示16进制数字，需要以0x开头。如果需要表示8进制数字，则以0开头。徐耀表示2进制数字，则以0b开头。
对于字符串，可以再parseInt中传递一个第二个参数值，来指定数字的进制。如 a = "070"; parseInt(a,10);

四、将其他类型转化为Boolean

使用Boolean（）函数。

数字—>布尔
- 除了0和NaN,其余都是true。
字符串—>布尔
- 除了空串，其余全是true。
null—>布尔
- false
undefined—>布尔
- false
对象—>布尔
- true

隐式类型转换。

可以为一个任意数据取两次反，来将其转化为布尔值。如：

var a = "hello";  
a = !!a;//true

运算符

运算符也叫操作符，可以对一个或多个值进行运算。

typeof就是运算符，可以来获得一个值的类型，并将该值的类型以字符串形式返回

算术运算符：

（对非Number类型的值进行运算是，会将这些值转换为Number,然后再运算。 true = 1；false = 0；null = 0；NaN = NaN ）

+：
- 可以对两个值进行加法运算，并将结果返回。
- 任何数与NaN相加，都是NaN。
- 两个字符串相加，拼接起来。
  - 由于双引号是不能换行的，当写一些比较长的字符串时，可以用加号进行拼串。
- 任何值和字符串做加法，都会转化为字符串，然后拼接。
  - 我们可以利用这一特点，将任意一个字符串转化为String。只需要为任意的数据类型 + “”(空串)。实际上它也是调用String（）函数。如：

var c = 123;
c = c+"";
console.log(c);
console.log(typeof c);

-：
- 可以对两个值进行减法运算。
- 与字符串操作，把字符串转化为Number。
*：
- 可以对两个值进行乘法运算。
- 与字符串操作，把字符串转化为Number。
/：
- 可以对两个值进行除法运算。
- 与字符串操作，把字符串转化为Number。

任何值做- * /时都会自动转为Number,我们可以利用这一特点做隐式类型转换。

%：
- 取模运算（取余数）

一元运算符，只需要一个操作数。 1. +：正号（不会对数字产生影响） 2. -：负号（可以对数字进行符号取反） 3. 对于非Number值，它会将其先转化为Number再计算。 4. 可以对一个其他任意数据类型使用+，将其转化为Number。
赋值运算符 =：可以将符号右侧的值赋值给符号左侧的值。
- +=
- -=
- *-
- /=
- %=

自增自减

自增：（++）
1. 可以使变量在自身的基础上+1；
2. 自增分为两种：后++（i ++），前++（++ i），无论是i++还是++i，都会立即使原变量值增加1。
3. 不同的是i++和++i的值不同。i++的值等于原变量的值（原值），++i的值等于原变量自增后的值（新值）。

  var c = 10;
        console.log(c++);//此时原值是10。
        c++;
        console.log(c++);//调了两次c++，此时原值是12。

例子：

var c = 10;
var sum = c++ + ++c + c;
//10 + 12 + 12 = 34
console.log(sum);

自减：（–）
1. 在自身基础上减一。
2. 自减分两种，后–和前–。无论是i–还是–i，都会立即使原变量值减1。
3. 不同的是i–和--i的值不同。i–的值等于原变量的值（原值），–i的值等于原变量自减后的值（新值）。

逻辑运算符

！：非；
- ！可以用来对一个值进行非运算。
- 所谓非运算就是对一个布尔值进行取反。
- 进行两次取反不会变化。
- 如果对非布尔值进行取反，现将其变为布尔值，再进行运算。
- 可以为一个任意数据取两次反，来将其转化为布尔值，原理和Boolean()一样。
&&：与；
- 可以对符号两侧的值进行与运算，并返回结果。
- 如果两个值都是true，返回true。只要有一个false，就返回false。
- js中的与属于短路的与。第一个值是false，则不会检查第二个值。
- 对于非布尔值进行与运算时，会先将其转化为布尔值，然后进行计算。注意：返回的是原值。
  - 如果第一个值是true，则直接返回第二个。
  - 如果第一个值是false，则返回第一个。
| |：或；
- 可以对符号两侧的值进行或运算，并返回结果。
- 只要有一个true，就返回true。
- js中的与属于短路的或。第一个值是true，则不会检查第二个值。
- 对于非布尔值进行或运算时，会先将其转化为布尔值，然后进行计算。注意：返回的是原值。
  - 如果第一个值是true，则直接返回第一个。
  - 如果第一个值是false，则返回第二个。

赋值运算符

符号：=，+=，-=，*=，/=，%= 将等号右侧的值赋给左侧。

数组

语法：数组用方括号书写：数组下标从0开始

let 数组名 = [数据1 ， 数据2 ， ...]

创建一个空数组：

var points = [];

例如

var cars = ["Porsche", "Volvo", "BMW"];
document.write(cars[0]);
//  访问数组中的某一元素 例如Porsche
document.write(cars);
//访问整个数组

数组是一种特殊类型的对象。数组的属性和方法：

var x = cars.length;   // length 属性返回元素的数量
var y = cars.sort();   // sort() 方法对数组进行排序

遍历数组元素： 1. 使用for循环（⭐）

var fruits, text, fLen, i;
fruits = ["Banana", "Orange", "Apple", "Mango"];
fLen = fruits.length;
text = "<ul>";
for (i = 0; i < fLen; i++) {    
    text += "<li>" + fruits[i] + "</li>";
}

使用array.foreach()函数

function myFunction(value) {  
    text += "<li>" + value + "</li>";
}
var fruits, text;
fruits = ["Banana", "Orange", "Apple", "Mango"];
text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";

增加元素： 1. 使用push方法

var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction() {
  fruits.push("Lemon");
  document.getElementById("demo").innerHTML = fruits;
}

使用fruits[fruits.length] = “值” 方法

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[6] = "Lemon";

注意：JavaScript 不支持命名索引的数组。在 JavaScript 中，数组只能使用数字索引 例如：可以array[0] = “apple”,但是不可以 array[“foot”] = “apple”

数组和对象的区别: 1. 数组使用数字索引。 2. 对象使用命名索引。

如果希望元素名为字符串（文本）则应该使用对象。
如果希望元素名为数字则应该使用数组。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-03-24，如有侵权请联系 cloudcommunity@tencent.com 删除

变量

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度

js基础（一）

js基础（一）

JavaScript起源：

JavaScript简介

js的编写位置：

JavaScript三种引入方式：

注释快捷键：

js基本语法

概念：

关键字和保留字

块作用域

数据类型

下面介绍一下这些数据类型：

强制类型转换

隐式转换：

显示转换

一、其他类型转换为String：

二、将其他类型转化为Number：

三、转化为其他进制

四、将其他类型转化为Boolean

运算符

算术运算符：

自增自减

逻辑运算符

赋值运算符

数组

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

js基础（一）

js基础（一）

JavaScript起源：

JavaScript简介

js的编写位置：

JavaScript三种引入方式：

注释快捷键 ：

js基本语法

概念：

关键字和保留字

块作用域

数据类型

下面介绍一下这些数据类型：

强制类型转换

隐式转换：

显示转换

一、其他类型转换为String：

二、将其他类型转化为Number：

三、转化为其他进制

四、将其他类型转化为Boolean

运算符

算术运算符：

自增自减

逻辑运算符

赋值运算符

数组

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

注释快捷键：