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

目录

弹窗:alert

js的引入方式

隐式类型转换

1、字符串和数字的运算

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

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

2、各种值转换成布尔值

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

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

2.3 任何数组(即使是空数组),任何对象(即使是空对象) 转成布尔值的时候都是true

Math内置对象

1、Math对象的常用方法:

2、实例一

3、组合实例

对象属性

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

2、访问对象属性的语法

3、添加对象的属性语法

4、修改对象的属性语法

5、删除对象的属性语法

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

函数定义与调用

1、通过声明来定义函数

1.1 function关键字

1.2 说明

1.3 示例

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

2.1 表达式定义法

2.2 说明

2.3 示例

3、函数调用

常见内置函数

1、eval

2、isNaN

3、parseFloat

4、parseInt

数组

1、数组定义

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

3、数组常见属性

3.1 length

4、数组常见方法

4.1 forEach()

4.2 indexOf()

4.3 join()

4.4 map()

4.5 pop()

4.6 push()

4.7 reverse()

4.8 shift()

4.9 slice()

4.10 sort()

4.11 unshift()


弹窗:alert

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

js的引入方式

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

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

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

隐式类型转换

1、字符串和数字的运算

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

var num1 = '123'
var num2 = 12
var num3 = num1 + num2
console.log(num3) // 预期输出:'12312'

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

var num1 = '123'
var num2 = 12
var num3 = num1 - num2
console.log(num3) // 预期输出:111
var num1 = '123'
var num2 = 12
var num3 = num1 * num2
console.log(num3) // 预期输出:1476
var num1 = '123'
var num2 = 12
var num3 = num1 / num2
console.log(num3) // 预期输出:10.25
var num1 = '123'
var num2 = 15
var t = num1 > num2
console.log(t) // 预期输出:true

2、各种值转换成布尔值

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

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

2.3 任何数组(即使是空数组),任何对象(即使是空对象) 转成布尔值的时候都是true

var a = 0
if (a) {
    console.log('hello')
} else {
    console.log('world')
}
// 当a=0或""或null或undefined的时候,预期输出:world
// 当a=[]或空对象的时候,预期输出:hello
// 当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代码符合预期,空格处应该填什么?

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


预期输出结果:
-
121

【思路】

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

3、组合实例

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

【思路】

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

对象属性

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

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

2、访问对象属性的语法

// 访问对象属性方式一
obj.name
// 访问对象属性方式二
obj['name']
// 访问对象属性方式三
// 将对象属性赋值给一个变量,使用变量方式访问
var key = 'name'
obj[key]

3、添加对象的属性语法

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

4、修改对象的属性语法

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

5、删除对象的属性语法

// 删除一个属性
delete obj.age

console.log(obj)
// {name:'李明', gender: 'man', city: '山东', hobby: '游泳'}

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

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

函数定义与调用

1、通过声明来定义函数

1.1 function关键字

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

function name([param[, param[, ... param]]])
{
    [statements]
}

1.2 说明

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

1.3 示例

pri(); // 预期输出:"foo"
function pri() {
    console.log("foo");
}

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

2.1 表达式定义法

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

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

2.2 说明

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

2.3 示例

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

3、函数调用

  • 对于使用函数声明的方法定义的函数,可以使用函数名加括号的方式来调用;对于使用函数表达式定义的函数,可以使用表达式所赋值的变量名加括号来调用。如上述代码所示。
  • 在函数被执行的时候,会运行函数体中的代码。如果函数体中有return语句,则会在函数被调用处返回return出来的值,并结束函数的运行。return并不是必需的,没有return的话,函数会返回undefined。
function add1(a, b) {
   return a + b;
}
var res = add1(4, 5)
console.log(res) // 预期输出:9

function add2(a, b) {
   a + b;
}
var res = add2(4, 5)
console.log(res) // 预期输出:undefined

函数在调用的时候,会将调用时给定的参数和定义时设定的参数依次绑定。如果调用时给定的参数个数不够,那么函数体中没有绑定的参数将被赋值为undefined
function foo(a, b) {
    console.log(b)
}
foo(4) // 预期输出:undefined
foo(4,8) // 预期输出:8
  • 函数在调用时可以接受一个函数作为参数,也可以返回一个函数作为返回值。这是函数的高阶用法,暂不涉及,可自行查阅。

常见内置函数

1、eval

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

var a = eval("2+2")
console.log(a)
// 预期输出:4
// 这里eval把字符串"2+2",当成js代码执行,得到结果4

eval("console.log('hello world')")
// 预期输出:hello world
// 这里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)”。

isNaN('abc') // 返回值:true 因为字符串'abc'不是一个数字
isNaN('12.23') // 返回值:false 因为字符串'12.23'是一个数字

isNaN(NaN);       // true
isNaN(undefined); // true
isNaN({});        // true

isNaN(true);      // false
isNaN(null);      // false
isNaN(37);        // false

// strings
isNaN("37");      // false: 可以被转换成数值37
isNaN("37.37");   // false: 可以被转换成数值37.37
isNaN("37,5");    // true
isNaN('123ABC');  // true:  parseInt("123ABC")的结果是 123, 但是Number("123ABC")结果是 NaN
isNaN("");        // false: 空字符串被转换成0
isNaN(" ");       // false: 包含空格的字符串被转换成0

// dates
isNaN(new Date());                // false
isNaN(new Date().toString());     // true

isNaN("blabla")   // true: "blabla"不能转换成数值
                  // 转换成数值失败, 返回NaN

3、parseFloat

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

parseFloat(3.14);
parseFloat('3.14');
parseFloat(' 3.14 ');
parseFloat('314e-2');
parseFloat('0.0314E+2');
parseFloat('3.14some non-digit characters');
// 以上的返回值都是3.14

4、parseInt

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

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

数组

1、数组定义

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

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

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

var arr = [1, 2, 5, 'init', ['apple', 2, 4]] // 可以使用下标(或者叫索引)来取数组中的值。下标是从0开始的

arr[0] // 取下标为0的值,即1

arr[3] // 取下标为3的值,即'init'

// 我们可以给数组中某一个下标的值进行重新赋值,即修改该下标的值
arr[0] = 'name' // 将字符串'name'赋值给数组arr下标为0的位置,此时arr[0]的值就为'name'了,而不是1了

3、数组常见属性

3.1 length

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

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

4、数组常见方法

4.1 forEach()

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

var array1 = ['a', 'b', 'c']

array1.forEach( function(element) {
console.log(element)
})
// 预期输出
// "a"
// "b"
// "c"

4.2 indexOf()

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

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

4.3 join()

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

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

4.4 map()

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

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

4.5 pop()

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

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

4.6 push()

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

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

4.7 reverse()

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

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

4.8 shift()

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

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

4.9 slice()

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

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

4.10 sort()

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

var months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months); // 预期输出: Array ["Dec", "Feb", "Jan", "March"]
var array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1); // 预期输出: Array [1, 100000, 21, 30, 4]

// 如果sort()方法调用的时候没有传入回调函数,会将数组转成字符串然后进行大小比较并升序排列,字符串的大小比较是按照字典顺序进行的。所以10000会比21小。

// 如果sort()方法调用的时候传入了回调函数,会按回调函数的返回值来决定相邻两个元素的排序,例如:
var array1 = [1, 30, 4, 21, 100000];
array1.sort(function (item1, item2) {
return item1 - item2
});
console.log(array1); // 预期输出: Array [1, 4, 21, 30, 100000]

// 这里面的item, item2参数就是array1里面相邻的两个元素
// 如果这个回调函数返回的结果大于0,那么item2将排在item1的前面
// 如果这个回调函数返回的结果小于0,那么item1将排在item2的前面
// 如果这个回调函数返回的是0,那么item1和item2的位置不变

4.11 unshift()

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

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

  • 8
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 5
    评论
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

海绵hong

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值