javascript知识小总结

最新推荐文章于 2024-08-04 16:33:59 发布

风继续吹Lao.z.c

最新推荐文章于 2024-08-04 16:33:59 发布

阅读量1k

点赞数 2

文章标签： javascript elementui 前端

本文链接：https://blog.csdn.net/m0_61608123/article/details/123319986

版权

1.JS使用：

A.标签：<script></script>

B.标签可以放置在head或者body中，在body中时，要把脚本置于 <body> 元素的底部，可改善显示速度，因为脚本编译会拖慢显示。

C.默认属性：<script type="text/javascript">，但是type 属性不是必需的。JavaScript 是 HTML 中的默认脚本语言。

D.外界引入：<script src="myScript.js"></script>

2.JS输出：

A.使用 innerHTML.
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5 + 6;//插入内容
</script>
B.使用document.write().但是要注意这种一般用于测试.
<script>
document.write(5 + 6);
</script>
C.使用 console.log().一般用于控制台显示.
<script>
console.log(5 + 6);
</script>
D.使用 window.alert().会弹出一个警告窗口.也可以不用window.
<script>
window.alert('学习前端要努力');
</script>
效果图：

3.JS变量命名

A.所有 JavaScript 标识符对大小写敏感。

例如变量 lastName 和 lastname，是两个不同的变量。

B.下划线命名法：

例如：qian_duan

C.驼峰命名法：

例如：FirstName, LastName, MasterCard, InterCity.即以单词的大写开头，然后连接起来.

但是JavaScript 程序员倾向于使用以小写字母开头的驼峰大小写.例如：getElementById.

D.在编程时一行多个变量：var person = "Bill Gates", carName = "porsche", price = 15000;

4.JS注释

A.单行注释： //......

B.多行注释： /* ......*/

5.JS中的let和const.

A.在JS中，var没有块作用域。在块 { }内声明的变量可以从块之外进行访问。使用 var 关键字重新声明变量会带来问题。使用 let 关键字重新声明变量可以解决这个问题。在块中重新声明变量不会重新声明块外的变量.
var x = 10;
// 此处 x 为 10
{ 
  let x = 6;
  // 此处 x 为 6
}
// 此处 x 为 10
B. const 定义的变量与 let 变量类似，但不能重新赋值.例如：

const PI=3.14159.

C.使用typeof可以返回变量的类型。

D.x ** y 产生的结果与 Math.pow(x,y) 相同:

6.JS的数据类型

JavaScript 变量能够保存多种数据类型：数值、字符串值、数组、对象等等：
var length = 7;                             // 数字
var lastName = "Gates";                      // 字符串
var cars = ["Porsche", "Volvo", "BMW"];         // 数组
var x = {firstName:"Bill", lastName:"Gates"};    // 对象

7.JS函数

function name(参数1, 参数 2, 参数 3) 
{
    要执行的代码
    return 参数
}

8.JS对象

如果通过关键词 "new" 来声明 JavaScript 变量，则该变量会被创建为对象.
var x = new String();        // 把 x 声明为 String 对象
var y = new Number();        // 把 y 声明为 Number 对象
var z = new Boolean();       //	把 z 声明为 Boolean 对象

9.JS对象

如下为常见的JS对象：

10.JS字符串

A.可以使用单引号或双引号进行引用

var study="qianduanxuexi" 或者 var study='qianduanxuexi'

B.内建属性 length 可返回字符串的长度.例如上文中study.length

C.特殊字符：

D.转义字符：

E.为了最佳可读性，程序员们通常会避免每行代码超过 80 个字符串。可以在字符串中换行，通过一个反斜杠即可.例如：
document.getElementById("demo").innerHTML = "Hello \
Kitty!";

11.字符串方法

A.length 属性返回字符串的长度.

B.indexOf() 方法返回字符串中指定文本首次出现的索引（位置.
var str = "The full name of China is the People's Republic of China.";
var pos = str.indexOf("China");
C.lastIndexOf() 方法返回指定文本在字符串中最后一次出现的索引.
var str = "The full name of China is the People's Republic of China.";
var pos = str.lastIndexOf("China");
D.slice() 方法：

slice() 提取字符串的某个部分并在新字符串中返回被提取的部分。
var str = "Apple, Banana, Mango";
var res = str.slice(7,13);
E.replace() 方法用另一个值替换在字符串中指定的值.
str = "Please visit Microsoft and Microsoft!";
var n = str.replace("Microsoft", "W3School");

12.JS字符串模板

A.模板字面量提供了一种将变量和表达式插入字符串的简单方法。

模板字面量使用反引号 (``) 而不是引号 ("") 来定义字符串
${...}
let firstName = "John";
let lastName = "Doe";
let text = `Welcome ${firstName}, ${lastName}!`;
Internet Explorer 不支持模板字面量。
B.toFixed(函数)

在变量后面加上知识函数会保留几位小数.

13.JS数字

A.var x = 123e5; // 12300000 var y = 123e-5; // 0.00123

B可使用全局 JavaScript 函数 isNaN() 来确定某个值是否是数.

注意：NaN 是数，typeof NaN 返回 number.

C.Infinity （或 -Infinity）是 JavaScript 在计算数时超出最大可能数范围时返回的值。

var x = 2 / 0; // x 将是 Infinity var y = -2 / 0; // y 将是 -Infinity

D.Infinity 是数：typeOf Infinity 返回 number。

14.JS的const.

A.用 const 声明的数组不能重新赋值.

B.JavaScript const 变量在声明时必须赋值：意思是：用 const 声明的数组必须在声明时进行初始化。使用 const 而不初始化数组是一个语法错误.

15.JS数字方法

A. 以字符串返 .myNumber.toString(进制数)返回数值。

B.toExponential() 返回字符串值.
var x = 9.656;
x.toExponential(2);     // 返回 9.66e+0
x.toExponential(4);     // 返回 9.6560e+0
x.toExponential(6);     // 返回 9.656000e+0
C.toFixed() 返回字符串值，它包含了指定位数小数的数字.
var x = 9.656;
x.toFixed(0);           // 返回 10
x.toFixed(2);           // 返回 9.66
x.toFixed(4);           // 返回 9.6560
x.toFixed(6);           // 返回 9.656000

16.JS数组方法

A.JavaScript 方法 toString() 把数组转换为数组值（逗号分隔）的字符串。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString(); 
B.pop() 方法从数组中删除最后一个元素.
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();              // 从 fruits 删除最后一个元素（"Mango"）
C.push() 方法（在数组结尾处）向数组添加一个新的元素：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");       //  向 fruits 添加一个新元素

16.JS字符串

A.模板字面量使用反引号 (``) 而不是引号 ("") 来定义字符串.
let firstName = "John";
let lastName = "Doe";
Ilet text = `Welcome ${firstName}, ${lastName}!`;

17.JS数组

A.

JavaScript 变量可以是对象。数组是特殊类型的对象。正因如此，我们可以在相同数组中存放不同类型的变量。可以在数组保存对象。可以在数组中保存函数。甚至可以在数组中保存数组.
myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = myCars;
B.也可以使用 length 属性向数组添加新元素
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Lemon";     // 向 fruits 添加一个新元素 (Lemon)
C.在 JavaScript 中，数组使用数字索引。在 JavaScript 中，对象使用命名索引。

D.JavaScript 运算符 typeof 返回 "object".
var fruits = ["Banana", "Orange", "Apple", "Mango"];

typeof fruits;             // 返回 object
typeof 运算符返回 "object"，因为 JavaScript 数组属于对象。

为了解决这个问题，ECMAScript 5 定义了新方法 Array.isArray().
Array.isArray(fruits);     // 返回 true

18.JS数组排序

A.sort() 方法以字母顺序对数组进行排序
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();            // 对 fruits 中的元素进行排序
B.可以用reverse() 方法反转数组中的元素，可以使用它以降序对数组进行排序.
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();            // 对 fruits 中的元素进行排序
fruits.reverse();         // 反转元素顺序
C.数字数字排列
<script>
var points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points;  

function myFunction() {
  points.sort(function(a, b){return a - b});//a-b是从小到大，b-a是从大到小
  document.getElementById("demo").innerHTML = points;
}
</script>
D.JS日期
var d = new Date();
E.getTime() 方法返回自 1970 年 1 月 1 日以来的毫秒数
var d = new Date();
document.getElementById("demo").innerHTML = d.getTime();
F.getFullYear() 方法以四位数字形式返回日期年份
var d = new Date();
document.getElementById("demo").innerHTML = d.getFullYear();
H.getMonth() 以数字（0-11）返回日期的月份
var d = new Date();
document.getElementById("demo").innerHTML = d.getMonth();
I.getDate() 方法以数字（1-31）返回日期的日

getHours() 方法以数字（0-23）返回日期的小时数：

getMinutes() 方法以数字（0-59）返回日期的分钟数

getSeconds() 方法以数字（0-59）返回日期的秒数

getMilliseconds() 方法以数字（0-999）返回日期的毫秒数

getDay() 方法以数字（0-6）返回日期的星期名（weekday）

19. JS数学

A.Math.PI;

B.Math.round(x) 的返回值是 x 四舍五入为最接近的整数

Math.ceil(x) 的返回值是 x 上舍入最接近的整数

Math.floor(x) 的返回值是 x 下舍入最接近的整数
Math.round(6.8);    // 返回 7
Math.round(2.3);    // 返回 2
C.Math.pow(x, y) 的返回值是 x 的 y 次幂.
Math.pow(8, 2);      // 返回 64
D.Math.sqrt(x) 返回 x 的平方根
Math.sqrt(64);      // 返回 8
E.Math.abs(x) 返回 x 的绝对（正）值

F.Math.min() 和 Math.max() 可用于查找参数列表中的最低或最高值
Math.min(0, 450, 35, 10, -8, -300, -78);  // 返回 -300
Math.max(0, 450, 35, 10, -8, -300, -78);  // 返回 450
G.Math.random() 返回 0（包括）至 1（不包括）之间的随机数
Math.floor(Math.random() * A);	// 返回 1 至 A-1之间的数

20.JS逻辑

JavaScript 布尔（逻辑）代表两个值之一：true 或 false.

您可以使用 Boolean() 函数来确定表达式（或变量）是否为真.

0（零）的布尔值为 false

-0 （负零）的布尔值为 false

""（空值）的布尔值为 false

undefined 的布尔值是 false

null 的布尔值是 false

NaN 的布尔值是 false

21.JS比较

variablename = (condition) ? value1:value2
var voteable = (age < 18) ? "太年轻":"足够成熟"

<!DOCTYPE html>
<html>
<body>

<p>输入您的年龄然后点击这个按钮：</p>

<input id="age" value="18" />

<button onclick="myFunction()">试一试</button>

<p id="demo"></p>

<script>
function myFunction() {
  var age, voteable;
  age = document.getElementById("age").value;
  voteable = (age < 18) ? "好年轻":"够成熟";
  document.getElementById("demo").innerHTML = voteable;
}
</script>

</body>
</html>

21.JS条件

if (条件) {
    条件为 true 时执行的代码块
} else { 
    条件为 false 时执行的代码块
}

if (条件 1) {
    条件 1 为 true 时执行的代码块
} else if (条件 2) {
    条件 1 为 false 而条件 2 为 true 时执行的代码块
 } else {
    条件 1 和条件 2 同时为 false 时执行的代码块
}

switch(表达式) {
     case n:
        代码块
        break;
     case n:
        代码块
        break;
     default:
        默认代码块
}

22.JS的For in循环

A.JavaScript for in 语句循环遍历对象的属性
const person = {fname:"John", lname:"Doe", age:25};
let text = "";
for (let x in person) {
  text += person[x];
}
const numbers = [45, 4, 9, 16, 25];
let txt = "";
for (let x in numbers) {
  txt += numbers[x];
}
B.JavaScript for of 语句循环遍历可迭代对象的值。
const cars = ["BMW", "Volvo", "Mini"];
let text = "";
for (let x of cars) {
  text += x;
}
Internet Explorer 不支持 For/of。
let language = "JavaScript";
let text = "";
for (let x of language) {
text += x;
}

23.JS的typeof类型

A.在 JavaScript 中有 5 种不同的可以包含值的数据类型：

string
number
boolean
object
function

有 6 种类型的对象：

Object
Date
Array
String
Number
Boolean

以及 2 种不能包含值的数据类型：

null
undefined

B.可以使用 typeof 运算符来确定 JavaScript 变量的数据类型。
typeof "John"                 // 返回 "string"
typeof 3.14                   // 返回 "number"
typeof NaN                    // 返回 "number"
typeof false                  // 返回 "boolean"
typeof [1,2,3,4]              // 返回 "object"
typeof {name:'John', age:34}  // 返回 "object"
typeof new Date()             // 返回 "object"
typeof function () {}         // 返回 "function"
typeof myCar                  // 返回 "undefined" *
typeof null                   // 返回 "object"

24.JS箭头函数

箭头函数可以编写更短的代码.
hello = () => {
  return "Hello World!";
}

24.JS正则表示

/w3school/i 是一个正则表达式。

w3school 是模式（pattern）（在搜索中使用）。

i 是修饰符（把搜索修改为大小写不敏感）。
<script>
var str = "Visit W3School!"; 
var n = str.search(/w3School/i);
document.getElementById("demo").innerHTML = n;
</script>

25.JS异常

try 语句允许您定义一个代码块，以便在执行时检测错误。

catch 语句允许你定义一个要执行的代码块，如果 try 代码块中发生错误。

JavaScript 语句 try 和 catch 成对出现：
try {
     供测试的代码块
}
 catch(err) {
     处理错误的代码块
} 