js基础（一）

且陶陶º

已于 2022-03-24 15:46:43 修改

阅读量153

点赞数 1

分类专栏：前端文章标签： js

于 2021-02-04 14:08:27 首次发布

本文链接：https://blog.csdn.net/qq_41675812/article/details/113388942

版权

前端专栏收录该内容

51 篇文章 2 订阅

订阅专栏

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. 对象使用命名索引。

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

且陶陶º

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
js基础（一）

JavaScript起源：借鉴java的管理机制，c的函数，最开始交Mocha,后改为LiveScript,当时java特别火，和sun公司合作以后改名为JavaScript。（与java毫无关系）ECMA:欧洲计算机制造商协会ECMAScript1.0 ：制定了js语法标准。ECMAScript10 ：最新版本ECMAScript5.0、ECMAScript6.0 常用版本JavaScript简介JavaScript是基于对象和事件驱动的解释性脚本语言基于对象：js是一种基于对象的
复制链接

扫一扫