本次文章时间紧任务汇重，不会有过多文字叙述
尽量用代码举例**+**注释为主，粗略扫一遍JS的知识点。
有可能的话，以后会精改（大概吧？）
Javascript
Javascript是一个基于浏览器的 脚本（script）语言
script 标签 来编写 脚本语言
常见的脚本语言： javascript
通过script标签的 type 属性 设置采用的脚本 type的默认值是text/ javascript
Javascript 中的代码注释风格 和 java相同
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- Javascript 是一个基于浏览器的 脚本（script）语言
script 标签 来编写 脚本语言
常见的脚本语言：
javascript
通过script标签的 type 属性 设置采用的脚本 type的默认值是text/ javascript
Javascript 中的代码注释风格 和 java相同
-->
<script type="text/javascript">
//这是一个单行注释
console.log("hello word")
console.info("hello word")
console.dir("hello word")
console.error("错误")
console.trace("hello word")
</script>
</head>
<body>
</body>
</html>js-变量的定义方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var a = 10;
var a = 10.5;
var a = "字符串";
var a = 'js没有char类型';
//获取a的数据类型
console.log(typeof a);
console.log(typeof a);
console.log(typeof a);
console.log(typeof a);
</script>
</head>
<body>
</body>
</html>var let
var声明
var的变量如果没有设置值，默认是undefined（未定义）
var 可以对变量进行 重复多次声明
var 关键字会产生 变量提升
var 声明的变量是全局变量（函数除外）
let 不能在同一个作用域中 对一个变量进行多次声明
let 不存在 变量提升的问题
let 声明的变量是 局部变量 有块级作用域的概念
let 会产生暂时性死区 问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
let a = 1;//number
let b = Number(1);
//用new构建出来的一定是一个对象
let c = new Number(1);
//==比较两个变量的 值 是否相等
console.log(a == b)
console.log(a == c);
//=== 用来比较 两个变量的 值 和内容是否相等
console.log( a == b);
console.log( a == c);
console.log(typeof a);
console.log(typeof b);
console.log(typeof c);
</script>
</head>
<body>
</body>
</html>字符串、数字、数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
let s = "0X100";
console.log(Number(s));
let a = 20;
/**
* parseInt(str) : 将字符串转成整数
* parseFloat(str) : 将字符串转成小数
*
*/
console.log(parseInt(s, 16))
console.log( s - -a );
//console.log(a + s)
console.log(s / a);
console.log(NaN == NaN);
console.log(isNaN(NaN));
// 返回 Infinity
console.log( 3 / 0);
// isFinite 判断是否是有限的
console.log(isFinite(3/0))
</script>
<!--数组的定义方法-->
<script>
//创建一个空的数组
let array = new Array();
console.log(array);
//创建一个长度为10的数组
let array2 = new Array(10);
console.log(array2);
//创建一个 初始值为3, 2, 1 的数组
let array3 = new Array(3,2,1);
console.log(array3);
//创建一个空数组
let array4 = [];
console.log(array4);
//创建一个 初始值为 3,2的数组
let array5 = [3,2,1,];
console.log(array5);
console.log(array5 == array3);
</script>
<!--数组的基本操作-->
<script>
let array = [];
//向数组中添加数据
array[10] = 100;
//获取数组的元素个数
console.log(array.length);
//通过push 方法向 数组尾部中添加数据
array.push(101);
array.push(11,22,33);
//通过unshift 向数组头部添加数据
array.unshift(1);
array.unshift(1.00);
//向指定位置添加元素
//splice(index, deleteLength, addEle)
array.splice(2,0,12);
array.splice(2,0, 12 ,13 ,"添加好几个");
//删除尾部元素 并返回被删除的元素
let ele = array.pop;
//删除头部元素 并返回被删除的元素
let shift = array.shift();
//删除从指定位置开始的数据，并设置删除的个数
//从第6个位置，删除三个元素
// array.splice (5， 3) ;
console. log (array, ele)
//修改指定为的元素
array[2] = 4300;
console.log(array)
//查看数据
console.log (array[2]);
//遍历数组
for(let i=0 ; i< array. length; i++) {
console.log(array[i]);
}
</script>
<!-- js-array数组的遍历-->
<script>
let array = [12, 32, 54, 23] ;
// 遍历数组
console.log("普通遍历");
for(let i=0 ; i<array.length; i++) {
console.log(array[i]);
}
console.log("for ... in ...")
// for ... in 遍历
for(let index in array) {
console.log(array[index]);
}
console.log("------ES6数组的遍历------")
console.log("------for ... of -------")
for(let data of array) {
console.log(data)
}
console.log("----- 键Key遍历 -------")
//let keys = array.keys();
for(let key of array.keys()) {
console.log(array[key])
}
console.log("----- 键val遍历 -------")
for(let val of array.values()) {
console.log(val)
}
console.log("----- 键值对遍历 -------")
for(let entry of array.entries()) {
console.log(entry[0], entry[1])
}
console.log("----- 键值对遍历(解构赋值) -------")
for(let [key, val] of array.entries()) {
console.log(key, val)
}
</script>
<!--js-array-数组的高阶方法-->
<script>
let array = [23, 34, 246, 2456, 3, 54] ;
// 获取数组中 元素 > 100 的所有数据
// let newArray = array.filter(function(val, index){
// return val > 100;
// });
let newArray = array.filter( val => val > 100 )
// 将数组中的每一个元素 * 2 返回一个新数组
// newArray = array.map( function(val, index, arr) {
// return val * 2 ;
// })
newArray = array.map( val => val * 2 )
// 求数组中所有的元素的和
// let sum = array.reduce(function(sum, ele, index, arr){
// return sum + ele ;
// })
let sum = array.reduce((sum, ele)=> sum + ele , 1)
// 将一个函数用箭头函数表示
// (参数列表) => { 函数体}
console.log(newArray, sum)
// 获取数组中 246 对应的索引
let index = array.indexOf(2461);
console.log(index)
let c = array.includes("246")
console.log(c)
// 只查找第一个满足条件的元素
let ele = array.find( (val, index, arr) => val > 100 )
console.log(ele)
index = array.findIndex((val, index, arr) => val > 100)
console.log(index)
// 判断数组中是否有任何一个满足条件的元素
let d = array.some(val => val > 100)
//array = [];
// 判断数组中是否每一个元素都满足条件
// 注意： 如果数组为空，则直接返回 true
d = array.every(val => val > 1);
// reverse() 反转数组， 会改变原数组
array.reverse()
// 将数组 转成 字符串, 以指定的分隔符进行分隔
let s = array.join(",")
console.log(array,s)
console.log(d)
</script>
</head>
<body>
</body>
</html>对象的操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/**
* 对象-表示的是键值对的数据结构
*
*/
let obj = new Object();
console.log(obj)
let obj2 = {} ;
console.log(obj2);
/**
* 对象中的 键 默认是 字符串类型中，而且 键可以省略 双引号
*
*
*/
let obj3 = {
name: "张三",
sex: "男",
age: 18
} ;
console.log(obj3)
</script>
<script>
/**
* 如果对象中的 属性名 包含 变量名不支持的命名字符， 则 属性名 必须用 双/单引号 引起来
*
* 这种属性，也不能通过 . 的方式 来进行访问
*
* 如果 属性名 是 数字, 也不能通过 . 方式进行访问
*
* 上述情况只能通过 [](属性名表达式) 来进行访问, [] 中支持 表达式
*
*
*/
let obj = {
name: "张三",
sex: "男" ,
"test-01": "xxxx",
1: "ssss"
} ;
// 向对象中，添加一个属性
obj.age = 18 ;
obj["birth"] = "2011-11-11"
console.log(obj);
// 将 obj.name 修改为 李四
obj.name = "李四"
let v = "name" ;
obj[v] = "王五" ;
console.log(obj)
console.log(obj["1"])
// 删除对象中的年龄属性
delete obj.age ;
console.log(obj);
// 获取数据
console.log(obj.name)
</script>
<!-- 对象的遍历-->
<script>
let obj = {
"name": "张三",
sex: "男",
age: 18
}
// for ... in 遍历 对象
for(let key in obj) {
console.log(key, obj[key] )
}
// ES6 给对象提供了 键、值、键值对遍历
console.log(Object.keys(obj))
console.log("----ES6-对象-键遍历----")
for(let key of Object.keys(obj)) {
console.log(key, obj[key] )
}
console.log("----ES6-对象-值遍历----")
for(let val of Object.values(obj)) {
console.log(val);
}
console.log("----ES6-对象-键值对遍历----")
for(let val of Object.entries(obj)) {
console.log(val[0], val[1]);
}
console.log("----ES6-对象-键值对遍历(解构赋值)----")
for(let [key, val] of Object.entries(obj)) {
console.log(key, val);
}
</script>
<!-- 16.js-对象中的toString 和 valueOf-->
<script>
// toString, valueOf 是 Object类自带的方法，索引被所有JS对象继承
// toString : 将对象转成字符串
// valueOf : 将对象转成任意数据类型
/**
* 如果 对象中 valueOf 和 toString 同时存在， 在进行自动类型转换的时候，优先调用 valueOf
*
*/
let obj = {
"name": "张三",
age: 18,
toString() {
console.log("---toString---")
return this.age + "" ;
},
valueOf() { //
console.log("---valueOf---")
return this.name ;
}
}
let obj2 = {
value: 1 ,
valueOf() {
if (this.value ==1) {
return this.value++ ;
}
if (this.value == 2) {
return 12;
}
}
}
console.log(obj2 == 1 && obj2 == 12 )
// 这一行代码 会发生自动类型转换 ， obj 会自动尝试转成 数字
// obj 对象自动转数字 的过程 本质是 调用 valueOf
console.log(obj == 18)
</script>
<!-- 17.对象和数组转数字和字符串-->
<script>
// [] 转成数字的化 代表 0
//console.log( [10] - 3 )
// [] 转成 字符串代表 ""
//console.log([] == "")
// console.log("" == 0)
// 两个空数组 进行 相加
console.log(([] + []).length)
// 空对象无法转成数字
console.log({} + "---")
// 空对象转 字符串 返回的是 [Object Object]
// 两个空对象 进行 相加
console.log(({} + {}).length)
</script>
</head>
<body>
</body>
</html>函数
Js的函数的定义：
函数 关键字 function
Java方法中语法：
[修饰符] 返回值类型 方法名(参数列表) [异常处理] {
}
JS 语法：
function 函数名(参数列表) {
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function sum(a, b) {
console.log(a, b);
return a + b ;
}
/**
* 匿名函数
* @param a
* @param b
* @returns {*}
*/
let max = function(a, b) {
return a > b ? a : b ;
}
//max(10, 20)
console.log(typeof max)
// 调用方法
let s = sum(10, null)
console.log(s)
console.log(null == 0)
</script>
</head>
<body>
</body>
</html>举例说明：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
let lists = [
{name: '访问量', time: '2021-03-01', count: 1000},
{name: '访问量', time: '2021-03-02', count: 1500},
{name: '访问量', time: '2021-03-03', count: 1200},
{name: '点赞数', time: '2021-03-01', count: 70},
{name: '点赞数', time: '2021-03-02', count: 100},
{name: '点赞数', time: '2021-03-03', count: 1100},
{name: '评论数', time: '2021-03-01', count: 800},
{name: '评论数', time: '2021-03-02', count: 900},
{name: '评论数', time: '2021-03-03', count: 1000},
]
let i = {name: '访问量', time: '2021-03-01', count: 1000};
result = [];
rs = lists.reduce((temp,item)=>{
console.log(temp,item);
if(!temp[item.name]){
temp[item.name]={
name:item.name,
time:[item.time],
count:[item.count]
};
}else {
temp[item.name]['time'].push(item.time);
temp[item.name]['count'].push(item.count);
}
return temp;
}, {});
console.log(rs);
console.log(Object.keys(rs));
for (let i =0;i<Object.keys(rs).length;i++){
result.push(rs[Object.keys(rs)[i]]);
}
console.log(result);
</script>
</head>
<body>
</body>
</html>数组
map实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
let obj = {
rows: [
["Lisa", 16, "Female", "2000-12-01"],
["Bob", 22, "Male", "1996-01-21"]
],
metaData: [
{name: "name", note: ''},
{name: "age", note: ''},
{name: "gender", note: ''},
{name: "birthday", note: ''}
]
}
// array 代表的是 rows中的每一条记录，仍旧是一个数组
let newArray = obj.rows.map((array, index)=> {
let result = {} ;
for(let index in obj.metaData) {
// 获取 metaData 中每一条记录中的 name属性
let key = obj.metaData[index].name ;
let val = array[index];
result[key] = val ;
}
return result ;
})
console.log(newArray)
</script>
</head>
<body>
</body>
</html>reduce实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
let array = [
{name: '访问量', time: '2021-03-01', count: 1000},
{name: '访问量', time: '2021-03-02', count: 1500},
{name: '访问量', time: '2021-03-03', count: 1200},
{name: '点赞数', time: '2021-03-01', count: 70},
{name: '点赞数', time: '2021-03-02', count: 100},
{name: '点赞数', time: '2021-03-03', count: 1100},
{name: '评论数', time: '2021-03-01', count: 800},
{name: '评论数', time: '2021-03-02', count: 900},
{name: '评论数', time: '2021-03-03', count: 1000},
]
// 使用 reduce 对数据进行聚合操作
let newArray = array.reduce( (result, obj, index) => {
// 判断 result 数组中 是否包含 一个对象，该对象的 name 属性 = obj.name
let res = result.find( val => val.name == obj.name) ;
if (res == null) {
res = {
name: obj.name ,
time: [obj.time],
count: [obj.count]
}
result.push(res);
}else{
res.time.push(obj.time);
res.count.push(obj.count);
}
return result ;
} , [])
console.log(newArray)
//
let objRet = newArray.reduce( (result, obj)=>{
let time = "2021-03-01"
result["time"] = time;
// 获取 2021-03-01 在 obj.time 中对应的索引位置
let index = obj.time.findIndex( val => time == val) ;
// 获取 obj.count 数组中对应的数据
let count = obj.count[index];
result[obj.name] = count ;
return result ;
}, {})
console.log(objRet)
</script>
</head>
<body>
</body>
</html>数组解构赋值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/**
* 解构赋值：ES6的新特性
*
* 按照一定的规则，对数组或者对象进行数据提取的过程 被称为 解构
*
* 数组解构
*
* 语法： 用 [ ... ] 表示 数组的解构
*/
let array = [12, undefined, 21, null] ;
// 正常解构赋值
//let [a, b, c] = array ;
// 获取数组中的第二个数据
//let [, b] = array ;
// 将数组中的元素 赋值给 a , b , c , d
let [a=1, b=2 ,c=3 , d=4] = array ;
// 交换2个数字
let x = 10 ;
let y = 20 ;
// 使用解构赋值 实现 x, y 的交换
[y, x] = [x, y];
console.log(x, y);
</script>
</head>
<body>
</body>
</html>对象的结构赋值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
let obj = {
name: "张三",
sex: "男",
age: 18
}
// 使用解构赋值 快速提取对应的数据， 对应解构赋值 使用 { ... }
// 当 解构规则 和变量名相同的时候，可以省略 :变量名
// let {name:name, sex:sex, age:age} = obj ;
let name = "xxx";
let {name:name1='张三丰', sex="女", age} = obj ;
console.log(name1, sex, age)
</script>
</head>
<body>
</body>
</html>js-数组以对象的方式进行解构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var array = [1, 2, 3, 4, 5, 6, 7, 8, 9];
// var obj = {
// 0: 1,
// 1: 2,
// 2: 3,
// 3: 4,
// 4: 5,
// 5: 6,
// length: 6
// }
//
// // 将 形似数组的对象 转成数组
// console.log(Array.from(obj))
let { 0:a, [array.length - 1]: b , length } = array ;
console.log(a, b, length)
/**
* 形似数组的对象：
* 1. 是个对象
* 2. 键是数字，且从0开始
* 3. 有一个 length 属性
*
*
* {
* 0:1,
* 1:2,
* 2:3,
* 3:4,
* 4:5,
* 5:6,
* length: 6
* }
*
*
*
/* 获取数组中的 首尾元素 */
//array[0];
//array[array.length - 1]
// let [a , , , , , b] = array;
//
// console.log(a, b)
</script>
</head>
<body>
</body>
</html>js-对象解构-注意事项
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
let obj = {
name: "xxx",
age: 18
}
let name , age ;
({name, age} = obj );
console.log(name, age)
</script>
</head>
<body>
</body>
</html>js-解构赋值-示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
let obj = {
rows: [
["Lisa", 16, "Female", "2000-12-01"],
["Bob", 22, "Male", "1996-01-21"]
],
metaData: [
{name: "name", note: ''},
{name: "age", note: ''},
{name: "gender", note: ''},
{name: "birthday", note: ''}
]
}
// 使用解构赋值快速提取需要的数据
let { rows , metaData:[{name} , {name:age}, {name:gender}, {name:birthday} ] } = obj ;
// console.log(rows, name, age, gender, birthday)
let newArray = rows.map( ([a, b, c, d]) => ({[name]:a , [age]: b, [gender]: c, [birthday]: d}) )
console.log(newArray)
</script>
</head>
<body>
</body>
</html>js-函数-arguments
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/**
* 函数的定义
* 形参 不能设置类型
*
* JS 中函数 没有方法的重载现象，如果多个方法名相同，后者会覆盖掉前者
*/
function sum() {
// arguments 可以获取传入的实际参数
console.log(arguments)
return Array.from(arguments).reduce( (sum, t) => sum + t);
}
// 1 1 2 3 5 8 13 ....
function fab2(n) {
if (n == 1 || n==2) return 1 ;
return arguments.callee(n-1) + arguments.callee(n-2)
}
//console.log(sum(1,2,3,4))
console.log(fab2(8))
</script>
</head>
<body>
</body>
</html>js-函数-参数的默认值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/**
* 如果给函数的参数设置默认值，推荐的做法是 将带有默认值的参数 放在所有参数的后面
*/
function sum(a, b=0) {
return a + b ;
}
// 函数 可以通过 length 属性 获取 函数的参数个数
console.log(sum.length)
console.log(sum(12,1));
</script>
</head>
<body>
</body>
</html>js-函数-参数的解构赋值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/**
* 不能对 null 和 undefined 进行 解构赋值
*
*
*/
//参数是一个对象
function test({name = "李四", sex, age = 18, birth} = {}) {
console.log(name, sex, age, birth)
}
//test({name:"xxx", age:18, birth:"1990-11-22",sex:"男"})
test({sex: "女", age: 19});
function sum([x = 0, y = 0, z = 0] = []) {
return [x, y, z].reduce((s, a) => s + a);
}
//console.log(sum([1,2,3]))
console.log(sum([5]));
</script>
</head>
<body>
</body>
</html>js-函数-不定项参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/**
* 求 至少 两个数的和
*/
function sum(a, b, ...c) {
return c.reduce((s, t)=> s + t, a+b)
}
console.log(sum(2, 3))
</script>
</head>
<body>
</body>
</html>js-展开运算符…的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
let array = [1, 2, 3, 4] ;
let array1 = [32 , 3] ;
// let [a, ...b] = array;
// let newArray = [...array, ...array1] ;
array.push(...array1)
console.log(array)
let obj = {"name": "张三", "age": 18, "sex": "男"}
let {name, ...b} = obj ;
console.log(name, b)
let obj2 = {"name": "李四", birth: "1990-11-11"}
// Object.assign(obj, obj2);
let obj3 = {...obj, ...obj2}
console.log(obj3)
</script>
</head>
<body>
</body>
</html>js-迭代器的遍历方式for…of
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/**
* 如果一个对象是可迭代的（Symbol.iterator）
*
* 那么 该对象就可以使用 for ... of 来遍历
*
* 还可以使用 ... 进行展开
*
* 能使用 ... 展开的 不代表可以使用 for...of 遍历
*
*
*/
// function sum() {
//
// //console.log(arguments)
//
// console.log( [...arguments])
//
// }
// let obj = {}
//
// for(let key of obj) {
// console.log(key)
// }
//
// sum(1, 2)
</script>
</head>
<body>
<p>hello</p>
<p>world</p>
<script>
// 获取 两个 p 标签
let tags = document.getElementsByTagName("p");
for(let tag of tags) {
tag.style.background = "red";
}
</script>
</body>
</html>js-构造函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/**
* 构造函数
* 1.必修通过new来调用
* 2.构造函数名 首字母 推荐大写
* 3.构造函数返回一个 对象
*/
function type(a,b){
this.a = a ;
this.b = b;
//定义一个方法来打印
this.show = function (){
console.log(a + " 爱吃鸡 " + b);
}
}
let p = new type("海豹","脖子")
console.log(p)
p.show();
</script>
</head>
<body>
</body>
</html>js-this关键字在 JS 上下文中的指向
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// this 在 JS上下文中 指向 window 对象 (JS顶层核心对象，代表一个浏览器窗口)
// this 如果在 nodejs环境下，this 指向 Global 对象
// "use strict" 严格模式
// var删不了 window可以
window.b = 10 ;
delete window.b ;
console.log(window.b)
var a = 10 ;
console.log(window.a)
console.log(this)
</script>
</head>
<body>
</body>
</html>js-this关键字在普通函数中的指向
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/**
* 在普通函数中的
*
* this 默认指向 window
*
* 如果在严格模式下， this 指向 undefined
*
*/
function sum() {
"use strict"
console.log(this)
// this.a = 10 ;
// this.b = 100;
}
sum()
console.log(a, window.b)
</script>
</head>
<body>
</body>
</html>js-this关键字在构造函数中的指向
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/**
* 在构造函数中， this 默认指向 new 出来的 对象
*
*/
function Point(x, y){
this.x = x ;
this.y = y ;
console.log(this)
}
new Point(3, 5)
</script>
</head>
<body>
</body>
</html>js-this在箭头函数中的指向
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//study函数是对象 boj 的元素 obj所在环境为window
let obj = {
name: "张三",
study: ()=>{
console.log(this)
}
}
//show 父级的作用域为构造函数 point
function Point(x, y) {
this.x = x ;
this.y = y ;
this.show = ()=> {
console.log(this)
}
}
let p = new Point(3, 5)
p.show()
// obj.study()
let sum = (a, b) => {
console.log(this);
return a + b ;
}
sum(10, 11)
// 1. 箭头函数 不能通过 new 来调用(不能作为 构造方法)
// 2. 箭头函数 中的 this 指向 父级作用域 所在的 this 环境 (在编译阶段作用域已经确定，且不可更改)
</script>
</head>
<body>
</body>
</html>js-修改函数中this的默认指向
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function sum(a, b) {
console.log(this, a , b)
}
// sum(); this 默认指向 window
/**
* 函数对象 有 三个方法， 可以用来 改变 this 的指向
*
* apply()
*
* call()
*
* bind()
*
*/
// sum(1, 2)
/**
* apply 在调用函数的时候，修改 this的指向，并设置 函数需要的参数
*
* apply(bindThis, array)
*
* bindThis : this指向的对象
*
* array : 是一个数组，代表 函数需要的参数列表
*
*
* call(bindThis, ...args)
*
*
* bind(bindThis, ...args)
*
* bind 在更改 this指向的同时，返回一个函数对象, 需要添加 () 进行函数的调用，才可以正常调用函数
*
*
*/
sum.apply(null, [1, 2]) // sum(1, 2)
// console.log( sum.apply("hello", [1, 2]))
// sum.call("hello", 1, 2)
// sum.bind("hello", 1, 2)()
</script>
</head>
<body>
</body>
</html>js-Date日期API
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// 创建一个 日期对象，表示当前系统事件
let date = new Date();
// 获取 2日的毫秒数
let time = 2 * 24 * 60 * 60 * 1000;
// 获取时间戳
time = date.getTime() - time
// 代表 距离1970-1-1 多少毫秒
date = new Date(time)
// 获取 四位数的年份
let year = date.getFullYear();
// 获取 距离 1900 年多少年
// let y = date.getYear();
// 月份 从 0开始 ，0-11 代表 1-12月
let month = date.getMonth();
// 获取星期
// 0 代表星期日 ， 1 代表星期 1
let week = date.getDay();
// 获取天
let day = date.getDate();
// 获取小时
let hour = date.getHours();
// 获取分
let min = date.getMinutes();
// 获取秒
let sec = date.getSeconds();
// 获取毫秒
let mill = date.getMilliseconds();
console.log(year, month , day, hour, min, sec, mill, week);
//
// console.log(date)
//
// console.log(date2)
</script>
</head>
<body>
</body>
</html>js-String常见的API
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
let str = "hello" ;
let a = 4 ;
let b = 5
// JDK 多行字符串 """ .... """
// JS 定义多行字符串 ` ... `
// JS 字符串模板 语法
// `` 可以定义多行字符串，并且直接 变量解析
// ${ JS表达式 }
//
let moreLine = `
${str}
world
test
${sum(a, b)}
data
` ;
console.log(moreLine)
console.log(new String(moreLine))
for(let s of moreLine) {
console.log(s)
}
// 将字符串转成数组
console.log(Array.from(moreLine))
console.log([...moreLine])
function sum(a, b) {
return a + b
}
</script>
</head>
<body>
</body>
</html>