<a href="javascript:alert('hello world!');">点我一下</a><div onclick="alert('hello world!')">点我一下</div>将JavaScript代码书写在script标签内
<script>
alert('hello world!')
</script>将JavaScript代码书写在一个.js格式的外部文件内,然后将其引入html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script src="./test1.js"></script>
</head>
<body>
<script src="./test2.js"></script>
</body>
</html>详见:Number类型
详见:String类型
详见:Boolean类型
详见:Undefined
详见:Null ==著名历史遗留Bug==
// JavaScript 诞生以来便如此
typeof null === "object";在 JavaScript 最初的实现中,JavaScript 中的值是由一个表示类型的标签和实际数据值表示的。对象的类型标签是 0。由于 null 代表的是空指针(大多数平台下值为 0x00),因此,null 的类型标签是 0,typeof null 也因此返回 "object"。曾有一个 ECMAScript 的修复提案(通过选择性加入的方式),但被拒绝了。该提案会导致 typeof null === 'null'。
详见:BigInt类型
详见:Symbol类型
typeof 运算符返回一个字符串,表示操作数的类型。
| 类型 | 返回结果 |
|---|---|
| Undefined | "undefined" |
| Null | "object"(历史原因) |
| Boolean | "boolean" |
| Number | "number" |
| BigInt | "bigint" |
| String | "string" |
| Symbol | "symbol" |
| Function(在 ECMA-262 中实现 [[Call]];classes也是函数) | "function" |
| 其他任何对象 | "object" |
| 转换前类型 | 转换后的情况 |
|---|---|
| String | 如果字符串是一个合法的数字,则直接转换为对应的数字;如果字符串是一个非法的数字,则转换为NaN;如果是一个空串或纯空格的字符串,则转换为0。 |
| Boolean | true转换为1;false转换为0 |
| Null | null转换为0 |
| Undefined | undefined转换为NaN |
常用方法:
- 调用Number()方法
- 调用parseInt()或parseFloat()方法
| 转换前类型 | 转换后的情况 |
|---|---|
| Number | '等于字面值' |
| Boolean | '等于字面值' |
| Null | 'null' |
| Undefined | 'undefined' |
常用方法:
- 调用String()方法
- 调用toString()方法
| 转换前类型 | 转换后的情况 |
|---|---|
| Number | 除了0和NaN其余都是true |
| String | 除了空字符串其余都是true |
| Null | false |
| Undefined | false |
| 对象 | true |
常用方法:
- 调用Boolean()方法
任意数据类型做两次非运算结果一定为Boolean类型
var a = 'hello'
a = !!a //true+ - * / %
= += -= *= /= %=
> < >= <= == === != !==
&& || !
++ --
if (判断条件) {执行语句}
// 条件为true则执行语句,否则不执行。
if (判断条件) {执行语句} else {执行语句}
// 条件为true则执行if的语句,否则执行else的语句。
if (判断条件) {执行语句} else if (判断条件) {执行语句}
// 哪个条件为true就执行哪个的if的语句,前面有条件为true,则后面不再判断。
if (判断条件) {执行语句} else if (判断条件) {执行语句} else {执行语句}
// 只有所有条件都不为true的时候,就会执行else后面的{}switch (表达式的值) { // 表达式的值会和下列选项的值进行完全匹配,匹配到则执行对应语句
case 值1:
执行语句
...
break // 执行语句结束后,需要写break,不然会向下穿透
case 值2:
执行语句
...
break
case 值3:
执行语句
...
break
default: // 可以写一个default,会在所有选项都不匹配的时候执行
}定义初始变量n
while (判断条件) {
重复执行的代码
改变初始变量n的值
}定义初始变量n
do {
重复执行的代码
改变初始变量n的值
} while (判断条件)for (var i = 0; i < 10; i++) {
console.log('Hello World !')
}
// 控制台输出10遍 Hello World !const obj = {
name: '张三',
age: 18
}
for (let key in obj) {
console.log(key + ':' +obj.key)
}
// 控制台输出obj的所有属性名及属性值// for...in和for...of的区别
let arr = [3, 5, 7];
arr.foo = "hello";
for (let i in arr) {
console.log(i); // 输出 "0", "1", "2", "foo"
}
for (let i of arr) {
console.log(i); // 输出 "3", "5", "7"
}/*
Array.prototype.forEach():对数组的每个元素执行一次给定的函数。
forEach()中的回调函数会传入以下参数:
element:数组中正在处理的当前元素。
index:数组中正在处理的当前元素的索引。
array:调用了forEach()的数组本身。
*/
const arr = ['a', 'b', 'c'];
arr.forEach((element) => console.log(element));
// 控制台输出'a' 'b' 'c'求n的阶乘:
function fn (n) {
if (n === 1) return 1;
return n*fn(n-1);
}求斐波那契数列第n项的值:
function fib(n) {
if (n === 1 || n === 2)
return n - 1
return fib(n - 1) + fib(n - 2)
}var obj = {name:'jack',age:18}
obj.属性名 = 值 or obj['属性名'] = 值
delete obj.属性名 or delete obj.['属性名']
obj.属性名 = 值 or obj['属性名'] = 值
obj.属性名 or obj['属性名']
var arr = [1, 2, 3] 创建一个包含3个元素的数组
var arr = new Array() 创建一个空数组
var arr = new Array(20) 创建一个初始长度为20的空数组
var arr = [18, 2, 10, 9, 88, 66, 22];
arr.sort(function (a, b) {
return a - b; // 升序排序
// return b - a; // 降序排序
});参数为新增的元素,返回新数组的长度,改变原数组
let arr=[1,2,3]
var longth=arr.push(4,5);
console.log(arr, longth);
输出结果:
arr [1,2,3,4,5]
5参数为空,返回被删除的元素,改变原数组
let arr=[1,2,3,4,5]
var delElement=arr.pop();
console.log(arr, delElement);
输出结果:
arr [1,2,3,4]
5参数为新增的元素,返回新数组的长度,改变原数组
let arr=[1,2,3,4,5]
var length=arr.unshift(0)
console.log(arr,length)
输出结果:
arr [0,1,2,3,4,5]
6参数为空,返回被删除的元素,改变原数组
let arr=[1,2,3,4,5]
var delElement=arr.shift();
console.log(arr, delElement);
输出结果:
arr [2,3,4,5]
1参数为元素或数组,返回新数组,不改变原数组
let arr=[1,2,3]
let newArr=arr.concat([4,5],6,7);
console.log(newArr,arr);
输出结果:
newArr [1,2,3,4,5,6,7]
arr [1,2,3]slice(开始位置,结束位置),第二个参数不写默认到尾部,只能从前往后截取,返回值为截取到的内容形成的新数组,不改变原数组
let arr=[1,2,3,4,5]
let copyArr=arr.slice() // slice()或者slice(0)都可以复制数组;
let newArr=arr.slice(1,3) // 截取索引1到索引3(不包括3,前闭后开原则)的值;
console.log(newArr,arr)
输出结果:
newArr [2,3]
arr [1,2,3,4,5]splice()在任意位置增删元素,返回删除或被替换的值,如果没有被删除或替换则返回空数组,splice()会改变原数组
语法:数组.splice(开始索引,多少个,要插入的数据)
开始索引默认为0
多少个为0
要插入的数据默认为空
作用:删除数组中的若干数据,并选择是否插入新数据
示例1:
let arr=[1,2,3,4,5]
let num=arr.splice(2,3) //删除从索引值2开始的3个元素
console.log(num;arr) // num=[3,4,5],arr=[1,2]
示例2:
let arr=[1,2,3,4,5]
let num=arr.splice(2,1,6,7,8)
//从索引值2开始替换掉指定位置的前1个元素,并且插入6,7,8
//如果第二个值为0,则不替换,直接插入6,7,8;
console.log(num;arr) // 被替换的值num=[3] arr=[1,2,6,7,8,4,5]let arr=[1,2,3,4,5];
let newArr=arr.join() // 默认用逗号连接
console.log(newArr) // newArr=1,2,3,4,5;
//如果连接符为空字符串,则会无缝连接
console.log(arr.join("")) // 输出为12345;可以将数组进行倒序,返回值为新数组,改变原数组
let arr=[1,2,3,4,5]
let newArr=arr. reverse()
console.log(newArr,arr) // newArr=[5,4,3,2,1]; arr=[5,4,3,2,1];语法:数组.indexOf(数据)
作用:查找数据对应索引
返回值:有该数据,返回第一次出现的位置索引;没有该数据,返回-1
array.forEach(callbackFn(item, index, arr))
// forEach接收一个回调,并且没有返回值
// forEach()不会改变其调用的数组,但是,作为callbackFn的函数可以更改数组。map() 方法创建一个新数组,这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。
arr1 = array.map(callbackFn(item, index, arr))
// map接收一个回调,并且返回一个新数组
// map()不会改变其调用的数组,但是,作为callbackFn的函数可以更改数组。返回给定数组的一部分的浅拷贝,其中只包括通过提供的函数实现的测试的元素。如果没有元素通过测试,则返回一个空数组
function isBigEnough(value){
return value>10
}
const filtered = [12,5,8,130,44].filter(isBigEnough);
// 过滤结果 [12,130,44]every()方法测试一个数组内的所有元素是否都能通过指定函数的测试。它返回一个布尔值
function isBigEnough(element, index, array) {
return element >= 10;
}
[12, 5, 8, 130, 44].every(isBigEnough); // false
[12, 54, 18, 130, 44].every(isBigEnough); // truesome()方法测试数组中是否至少有一个元素通过了由提供的函数实现的测试。如果在数组中找到一个元素使得提供的函数返回 true,则返回 true;否则返回 false。它不会修改数组
const fruits = ["apple", "banana", "mango", "guava"];
function checkAvailability(arr, val) {
return arr.some((arrVal) => val === arrVal);
}
checkAvailability(fruits, "kela"); // false
checkAvailability(fruits, "banana"); // truedocument.createElement('标签名称')父节点.appendChild(子节点)
父节点.insertBefore(要插入的子节点,哪一个子节点的前面)父节点.removeChild(子节点)
节点.remove()父节点.replaceChild(换上节点,换下节点)节点.cloneNode(是否克隆后代节点)事件源.on事件类型 = 事件处理函数(事件对象)
例如:button.onclick = fn (e) {
console.log(e)
}