0
0

万字JavaScript基础（引入方式+隐式类型转换+Math内置对象+对象属性+函数定义与调用+常见内置函数+数组）

弹窗：alert

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script>
  7.         alert("准备律( law of readiness )是指学习者在学习开始时的预备定势。当某一刺激与某一反应准备联结时，给予联结就引起学习者的满意，反之就会引起烦恼")
  8.     </script>
  9. </head>
  10. <body>
  11. <script>
  12.     alert('练习律（law of exercise）是指一个学会了的反应的重复将增加刺激反应之间的联结。也就是刺激—反应（S-R）之间的联结，' +
  13.         '练习和使用越多，就越来越得到加强，反之会变弱。刺激—反应联结的应用会增强这个联结的力量，联结的失用（不练习）会导致联结的减弱或遗忘。' +
  14.         '但在桑代克后期的著作中，他修改了这一规律，桑代克发现没有奖励的练习是无效的，联结只有通过有奖励的练习才能增强')
  15. </script>
  16. <button onclick="alert('桑代克提出，学习要遵循三条重要的学习原则。')">点击开始学习之路</button>
  17. </body>
  18. <script>
  19.     alert('效果律（law of effect）是指如果一个动作跟随着情境中一个满意的变化，' +
  20.         '在类似的情境中这个动作重复的可能性将增加，但如果跟随的是一个不满意的变化，这个动作重复的可能性将减少。' +
  21.         '导致满意后果的行为被加强，带来烦恼的行为则被削弱或淘汰。后来，他发现惩罚并不一定消弱联结，其效果并非与奖励相对，' +
  22.         '于是，他取消了效果律中消极的或令人烦恼的部分')
  23. </script>
  24. </html>

js的引入方式

1.内部：head和body，也可以放在body外面中script中引入

2.外部:添加js文件：<script src="路径/名称.js"> <script>

注意：不要使用了src然后在使用script会出现结果未显示错误

隐式类型转换

1、字符串和数字的运算

1.1 字符串和数字进行加运算时，会将数字转换成字符串，然后和另一个字符串进行拼接

  1. var num1 = '123'
  2. var num2 = 12
  3. var num3 = num1 + num2
  4. console.log(num3) // 预期输出：'12312'

1.2 字符串和数字进行减、乘、除运算，以及大小比较时，会将字符串转换成数字，再和另一个数字进行运算或比较

  1. var num1 = '123'
  2. var num2 = 12
  3. var num3 = num1 - num2
  4. console.log(num3) // 预期输出：111
  5. var num1 = '123'
  6. var num2 = 12
  7. var num3 = num1 * num2
  8. console.log(num3) // 预期输出：1476
  9. var num1 = '123'
  10. var num2 = 12
  11. var num3 = num1 / num2
  12. console.log(num3) // 预期输出：10.25
  13. var num1 = '123'
  14. var num2 = 15
  15. var t = num1 > num2
  16. console.log(t) // 预期输出：true

2、各种值转换成布尔值

2.1 数字0，空字符串""，null，undefined 转成布尔值的时候都是false

2.2 非0数字，非空字符串转成布尔值的时候都是true

2.3 任何数组（即使是空数组），任何对象（即使是空对象） 转成布尔值的时候都是true

  1. var a = 0
  2. if (a) {
  3.     console.log('hello')
  4. } else {
  5.     console.log('world')
  6. }
  7. // 当a=0或""或null或undefined的时候，预期输出：world
  8. // 当a=[]或空对象的时候，预期输出：hello
  9. // 当a=-1或"abc"时候，预期输出：hello

Math内置对象

1、Math对象的常用方法：

方法名称

作用

示例

结果

max()

用于确定一组数值中的最大值

Math.max(11,3,17,6)

17

min()

用于确定一组数值中的最小值

Math.min(11,3,17,6)

3

ceil()

执行向上取整，即它总是将数值向上取整为最接近的整数

Math.ceil(25.1)

26

floor()

执行向下取整，即它总是将数值向下取整为最接近的整数

Math.floor(25.8)

25

round()

执行标准取整，即它总是将数值四舍五入为最接近的整数

Math.round(25.8)

26

random()

该方法返回介于 0 到 1 之间一个随机小数，包括 0 和不包含 1

Math.random()

例如0.3123868992708143

abs()

该方法返回参数的绝对值

Math.abs(-9)

9

sqrt()

该方法返回参数的平方根

Math.sqrt(49)

7

2、实例一

// 要想以下JavaScript代码符合预期，空格处应该填什么？

  1. var a = Math._____(-120.38)
  2. console.log(a)

预期输出结果：
-121

【思路】

  • 给出的数值-120.38 ，预期结果-121，说明是向下取整
  • Math.floor() 正是向下取整

3、组合实例

  1. // 获取一个10-50的随机整数
  2. var num = Math.floor(Math.random()*40)+10
  3. Math.random()*40 //获取40以内的随机数（当前还是浮点数）

【思路】

  • Math.random()*40；为获取一个40以内的随机数（浮点数）
  • Math.floor(Math.random()*40)；将这个浮点数舍1取整
  • 在最后加10则不管随机数是最小数还是最大数，都满足要求10-50

对象属性

1、对象定义(以下操作都基于这个对象)

  1. // 定义一个对象
  2. var obj = { name: "李明", age: 18, gender: "man", city: "山东", hobby: "游泳" }

2、访问对象属性的语法

  1. // 访问对象属性方式一
  2. obj.name
  3. // 访问对象属性方式二
  4. obj['name']
  5. // 访问对象属性方式三
  6. // 将对象属性赋值给一个变量，使用变量方式访问
  7. var key = 'name'
  8. obj[key]

3、添加对象的属性语法

  1. // 添加一个属性方式一
  2. obj.nickName = "小明"
  3. // 添加一个属性方式二
  4. obj["nickName"] = "小明"
  5. console.log(obj)
  6. // {name: '李明', age: 19, gender: 'man', city: '山东', hobby: '游泳', nickName: "小明"}

4、修改对象的属性语法

  1. // 修改一个属性方式一
  2. obj.age = 19
  3. // 修改一个属性方式二
  4. obj["age"] = 19
  5. console.log(obj)
  6. // { name: '李明', age: 19, gender: 'man', city: '山东', hobby: '游泳'}

5、删除对象的属性语法

  1. // 删除一个属性
  2. delete obj.age
  4. console.log(obj)
  5. // {name:'李明', gender: 'man', city: '山东', hobby: '游泳'}

6、for循环遍历对象属性的语法

  1. // for循环遍历对象，需要使用for ... in
  2. for (var key in obj) {
  3.     console.log(key)//key是属性名称
  4.     console.log(obj[key])//obj[key]是属性的值
  5. }

函数定义与调用

1、通过声明来定义函数

1.1 function关键字

我们可以使用function关键字来定义一个具有名称的函数，其语法结构如下

  1. function name([param[, param[, ... param]]])
  2. {
  3.     [statements]
  4. }

1.2 说明

  • []表示可选，并不是正常代码中需要使用[]
  • name表示函数名，()中的表示参数，{}中的表示函数体。在函数被调用的时候，会执行函数体中的代码。
  • 注意：函数被定义的时候，函数体中的代码并不会被执行。只有到函数被调用的时候，函数体中的代码才会被执行。
  • 对于使用函数声明这个方法定义的函数，函数调用可以在函数定义之前，如示例中的pri函数。

1.3 示例

  1. pri(); // 预期输出："foo"
  2. function pri() {
  3.     console.log("foo");
  4. }

2、通过表达式来定义函数

2.1 表达式定义法

我们还可以使用函数表达式的方式来定义一个函数，这时可以将函数直接赋值给一个变量，其语法结构如下

  1. var myFunction = function name([param[, param[, ... param]]]) {
  2.     statements
  3. }

2.2 说明

  • []表示可选，并不是正常代码中需要使用[]
  • name表示函数名，可以省略，()中的表示参数，{}中的表示函数体。在函数被调用的时候，会执行函数体中的代码。
  • 注意：函数被定义的时候，函数体中的代码并不会被执行。只有到函数被调用的时候，函数体中的代码才会被执行。
  • 对于使用函数表达式这个方法定义的函数，函数调用必须在函数定义之后。
  • 如果省略name，我们称该函数为匿名函数。

2.3 示例

  1. var myFunction = function foo() {
  2.     // statements
  3. }
  4. myFunction()
  5. foo() // 会报错，并不能调用成功。命名函数表达式的好处是当我们遇到错误时，堆栈跟踪会显示函数名，容易寻找错误。

3、函数调用

  • 对于使用函数声明的方法定义的函数，可以使用函数名加括号的方式来调用；对于使用函数表达式定义的函数，可以使用表达式所赋值的变量名加括号来调用。如上述代码所示。
  • 在函数被执行的时候，会运行函数体中的代码。如果函数体中有return语句，则会在函数被调用处返回return出来的值，并结束函数的运行。return并不是必需的，没有return的话，函数会返回undefined。
  1. function add1(a, b) {
  2.    return a + b;
  3. }
  4. var res = add1(4, 5)
  5. console.log(res) // 预期输出：9
  7. function add2(a, b) {
  8.    a + b;
  9. }
  10. var res = add2(4, 5)
  11. console.log(res) // 预期输出：undefined
  13. 函数在调用的时候，会将调用时给定的参数和定义时设定的参数依次绑定。如果调用时给定的参数个数不够，那么函数体中没有绑定的参数将被赋值为undefined
  14. function foo(a, b) {
  15.     console.log(b)
  16. }
  17. foo(4) // 预期输出：undefined
  18. foo(4,8) // 预期输出：8
  • 函数在调用时可以接受一个函数作为参数，也可以返回一个函数作为返回值。这是函数的高阶用法，暂不涉及，可自行查阅。

常见内置函数

1、eval

eval函数会将传入的字符串当做 JavaScript 代码进行执行。这是一个十分危险的函数，一般情况不建议使用。

  1. var a = eval("2+2")
  2. console.log(a)
  3. // 预期输出：4
  4. // 这里eval把字符串"2+2"，当成js代码执行，得到结果4
  6. eval("console.log('hello world')")
  7. // 预期输出：hello world
  8. // 这里eval把字符串"console.log('hello world')"，当成js代码执行，打印输出：hello world

2、isNaN

用来确定一个值是否为NaN。NaN表示不是一个数字。如果isNaN函数的参数不是Number类型， isNaN函数会首先尝试将这个参数转换为数值，然后才会对转换后的结果是否是NaN进行判断。因此，对于能被强制转换为有效的非NaN数值来说（空字符串和布尔值分别会被强制转换为数值0和1），返回false值也许会让人感觉莫名其妙。比如说，空字符串就明显“不是数值（not a number）”。这种怪异行为起源于："不是数值（not a number）"在基于IEEE-754数值的浮点计算体制中代表了一种特定的含义。isNaN函数其实等同于回答了这样一个问题：被测试的值在被强制转换成数值时会不会返回IEEE-754​中所谓的“不是数值（not a number）”。

  1. isNaN('abc') // 返回值：true 因为字符串'abc'不是一个数字
  2. isNaN('12.23') // 返回值：false 因为字符串'12.23'是一个数字
  4. isNaN(NaN);       // true
  5. isNaN(undefined); // true
  6. isNaN({});        // true
  8. isNaN(true);      // false
  9. isNaN(null);      // false
  10. isNaN(37);        // false
  12. // strings
  13. isNaN("37");      // false: 可以被转换成数值37
  14. isNaN("37.37");   // false: 可以被转换成数值37.37
  15. isNaN("37,5");    // true
  16. isNaN('123ABC');  // true:  parseInt("123ABC")的结果是 123, 但是Number("123ABC")结果是 NaN
  17. isNaN("");        // false: 空字符串被转换成0
  18. isNaN(" ");       // false: 包含空格的字符串被转换成0
  20. // dates
  21. isNaN(new Date());                // false
  22. isNaN(new Date().toString());     // true
  24. isNaN("blabla")   // true: "blabla"不能转换成数值
  25.                   // 转换成数值失败， 返回NaN

3、parseFloat

根据给定的参数返回其对应的浮点数。

  1. parseFloat(3.14);
  2. parseFloat('3.14');
  3. parseFloat(' 3.14 ');
  4. parseFloat('314e-2');
  5. parseFloat('0.0314E+2');
  6. parseFloat('3.14some non-digit characters');
  7. // 以上的返回值都是3.14

4、parseInt

解析一个字符串并返回指定基数的十进制整数。

  1. parseInt("0xF", 16);
  2. parseInt("F", 16);
  3. parseInt("17", 8);
  4. parseInt(021, 8);
  5. parseInt("015", 10); // parseInt(015, 8); 返回 13 parseInt(15.99, 10);
  6. parseInt("15,123", 10);
  7. parseInt("FXX123", 16);
  8. parseInt("1111", 2);
  9. parseInt("15 * 3", 10);
  10. parseInt("15e2", 10);
  11. parseInt("15px", 10);
  12. parseInt("12", 13); // 以上都返回15，第二个参数表示基数（可以理解为进制）

数组

1、数组定义

// 直接使用中括号就能定义一个数组，数组中的值的类型不必相同，数组中可以嵌套数组 

  1. var arr = [1, 2, 5, 'init', ['apple', 2, 4]]

2、数组中值的访问与修改

  1. var arr = [1, 2, 5, 'init', ['apple', 2, 4]] // 可以使用下标（或者叫索引）来取数组中的值。下标是从0开始的
  3. arr[0] // 取下标为0的值，即1
  5. arr[3] // 取下标为3的值，即'init'
  7. // 我们可以给数组中某一个下标的值进行重新赋值，即修改该下标的值
  8. arr[0] = 'name' // 将字符串'name'赋值给数组arr下标为0的位置，此时arr[0]的值就为'name'了，而不是1了

3、数组常见属性

3.1 length

访问一个数组的length属性，返回该数组的长度，即该数组元素的个数

  1. var arr = [1, 2, 5, 'init', ['apple', 2, 4]]
  2.  
  3. arr.length // 返回数组arr的长度，即5

4、数组常见方法

4.1 forEach()

对数组的每个元素执行一次给定的函数

  1. var array1 = ['a', 'b', 'c']
  3. array1.forEach( function(element) {
  4. console.log(element)
  5. })
  6. // 预期输出
  7. // "a"
  8. // "b"
  9. // "c"

4.2 indexOf()

返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。

  1. var beasts = ['ant', 'bison', 'camel', 'duck', 'bison']
  2. console.log(beasts.indexOf('bison')) // 预期输出: 1
  3. // start from index 2
  4. console.log(beasts.indexOf('bison', 2)) // 预期输出: 4
  5. console.log(beasts.indexOf('giraffe')) // 预期输出: -1

4.3 join()

将一个数组的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目，那么将返回该项目而不使用分隔符。

  1. var elements = ['Fire', 'Air', 'Water']
  2. console.log(elements.join()) // 预期输出: "Fire,Air,Water"
  3. console.log(elements.join('')) // 预期输出: "FireAirWater"
  4. console.log(elements.join('-')) // 预期输出: "Fire-Air-Water"

4.4 map()

创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。

  1. var array1 = [1, 4, 9, 16]; // 传入一个回调函数给map方法
  2. var map1 = array1.map(function (x) { return x * 2 });
  3. console.log(map1); // 预期输出: Array [2, 8, 18, 32]

4.5 pop()

从数组中删除最后一个元素，并返回该元素的值。此方法更改数组的长度。

  1. var plants = ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato'];
  2. console.log(plants.pop()); // 预期输出: "tomato"
  3. console.log(plants); // 预期输出: Array ["broccoli", "cauliflower", "cabbage", "kale"]
  4. plants.pop();
  5. console.log(plants); // 预期输出: Array ["broccoli", "cauliflower", "cabbage"]

4.6 push()

将一个或多个元素添加到数组的末尾，并返回该数组的新长度。

  1. var animals = ['pigs', 'goats', 'sheep'];
  2. var count = animals.push('cows');
  3. console.log(count); // 预期输出: 4
  4. console.log(animals); // 预期输出: Array ["pigs", "goats", "sheep", "cows"]
  5. animals.push('chickens', 'cats', 'dogs');
  6. console.log(animals); // 预期输出: Array ["pigs", "goats", "sheep", "cows", "chickens", "cats", "dogs"]

4.7 reverse()

将数组中元素的位置颠倒，并返回该数组。数组的第一个元素会变成最后一个，数组的最后一个元素变成第一个。该方法会改变原数组。

  1. var array1 = ['one', 'two', 'three'];
  2. console.log('array1:', array1); // 预期输出: "array1:" Array ["one", "two", "three"]
  3. var reversed = array1.reverse();
  4. console.log('reversed:', reversed); // 预期输出: "reversed:" Array ["three", "two", "one"]
  5. // 注意：该方法会修改原数组
  6. console.log('array1:', array1); // 预期输出: "array1:" Array ["three", "two", "one"]

4.8 shift()

从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度。

  1. var array1 = [1, 2, 3];
  2. var firstElement = array1.shift();
  3. console.log(array1); // 预期输出: Array [2, 3]
  4. console.log(firstElement); // 预期输出: 1

4.9 slice()

返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。原始数组不会被改变。

  1. var animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
  2. console.log(animals.slice(2)); // 预期输出: Array ["camel", "duck", "elephant"]
  3. console.log(animals.slice(2, 4)); // 预期输出: Array ["camel", "duck"]
  4. console.log(animals.slice(1, 5)); // 预期输出: Array ["bison", "camel", "duck", "elephant"]
  5. console.log(animals.slice(-2)); // 预期输出: Array ["duck", "elephant"]
  6. console.log(animals.slice(2, -1)); // 预期输出: Array ["camel", "duck"]

4.10 sort()

对数组的元素进行排序，并返回数组。

  1. var months = ['March', 'Jan', 'Feb', 'Dec'];
  2. months.sort();
  3. console.log(months); // 预期输出: Array ["Dec", "Feb", "Jan", "March"]
  4. var array1 = [1, 30, 4, 21, 100000];
  5. array1.sort();
  6. console.log(array1); // 预期输出: Array [1, 100000, 21, 30, 4]
  8. // 如果sort()方法调用的时候没有传入回调函数，会将数组转成字符串然后进行大小比较并升序排列，字符串的大小比较是按照字典顺序进行的。所以10000会比21小。
  10. // 如果sort()方法调用的时候传入了回调函数，会按回调函数的返回值来决定相邻两个元素的排序，例如：
  11. var array1 = [1, 30, 4, 21, 100000];
  12. array1.sort(function (item1, item2) {
  13. return item1 - item2
  14. });
  15. console.log(array1); // 预期输出: Array [1, 4, 21, 30, 100000]
  17. // 这里面的item, item2参数就是array1里面相邻的两个元素
  18. // 如果这个回调函数返回的结果大于0，那么item2将排在item1的前面
  19. // 如果这个回调函数返回的结果小于0，那么item1将排在item2的前面
  20. // 如果这个回调函数返回的是0，那么item1和item2的位置不变

4.11 unshift()

将一个或多个元素添加到数组的开头，并返回该数组的新长度(该方法修改原有数组)。

  1. var array1 = [1, 2, 3];
  2. console.log(array1.unshift(4, 5)); // 预期输出: 5
  3. console.log(array1); // 预期输出: Array [4, 5, 1, 2, 3]
标签： html5 css
本文转载自: https://blog.csdn.net/weixin_54107527/article/details/124281743
版权归原作者 海绵hong 所有， 如有侵权，请联系我们删除。
登录后发布评论

“万字JavaScript基础（引入方式+隐式类型转换+Math内置对象+对象属性+函数定义与调用+常见内置函数+数组）”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？