1.let、const和var区别
let允许声明一个在作用域限制在块级中的变量、语句或者表达式，不会被预解析，必须先声明后使用，不能重复声明，全局作用域，块级作用域
var全局作用域 函数作用域，可以先声明后使用，能重复声明
const声明一个常量只能在声明时赋值，并且一旦赋值不能修改，不能重复声明，不会被预解析
2.解构赋值
let str = "ABCD";
let [a,b] = str;
console.log(a,b);
let obj = {
a: 1,
b: 2,
c: 3
};
// 交互对象的 a,c两个属性
// let a = obj.a;
// let c = obj.c;
// obj.a = c;
// obj.c = a;
// 对象的解构赋值
let {a,c} = obj;
console.log(a,c);
// let {a} = obj ==> let a = obj.a;
let {d} = obj;
console.log(d);
// let arr = [1,2,3];
// let [a,b,c] = arr;
// console.log(a,b,c);
/*
对象解构：变量名 和 属性名 要对应
数组解构：变量名 和 值索引对应
*/
let a = 0;
let b = 1;
let arr = [a,b];
[b,a] = arr;
console.log(a,b);3.展开运算
// 展开运算符
let arr = [1,2,3,4,5];
let arr2 = ["a",...arr,"b","c"];
// 把 arr 中的数据放入 arr2 中，从 第 1 位开始排列
// ["a",1,2,3,4,5,"b","c"]
console.log(arr2);
// 剩余参数
let arr3 = [1,2,3,4,5];
let [a,...b] = arr3;
console.log(a,b);
// 展开运算符
let obj = {
a: 1,
b: 2
};
let obj2 = {
...obj,
c: 3,
d: 4
};
console.log(obj2);
// 剩余参数
let {a,...d} = obj2;
console.log(a,d);4.Set对象 ，会进行去重
size 返回数据长度
set.clear() 清空所有值
set.delete(val) 删除某一项
参数：val删除的值
返回值：true || false 是否删除成功（没有这个值才会删除不成功）
set.has(val) 是否包含某一项
参数：val要查找的值
返回值：true || false 是否包含这个值
set.add(val) 添加一项
参数：val要添加的项
返回值：set对象本身
let arr = [1,2,3,4,1,3,5,2];
let data = new Set(arr);
console.log(data);
//去重
console.log([...data]);
let arr = [1,2,3,4,1,3,5,2,"c"];
let data = new Set(arr);
//console.log(data.add("a").add("b"));
// console.log(data.delete("b"));
//console.log(data.has(2));
data.clear();
console.log(data.size,data);5.Map对象
clear() 清空所有值
delete(key) 删除某一项
参数：key 数据的key值
返回值：true || false 是否删除成功（没有这个key才会删除不成功）
get(key) 获取某一项的值
参数：key数据的key值
返回值：返回键对应的值，如果不存在，则返回undefined。
has(key) 包含某项
参数：key数据的key值
返回值：true || false，表示Map实例是否包含键对应的值。
set(key,val) 添加一项
参数：key 数据的key值 val 数据的val值
返回值：map对象本身
let data = new Map([["leo",40],["zmouse",30],["reci",20]]);
data.set("刘伟",41);
data.delete("leo");
console.log(data.get("zmouse"));
console.log(data);6.箭头函数用法
形参=>返回值
(形参，形参)=>返回值
()=>返回值
()=>{
执行语句
return 返回值;
}
(形参)=>{
执行语句
return 返回值;
}
原始的函数接收全部的参数可以使用arguments来接收，但是箭头函数没有不定参，可以使用rest 参数 剩余参数来接收全部参数
箭头函数本身没有this,调用箭头函数的this时，指向是其声明时所在的作用域的this
let fn = ()=>{
console.log(1);
};
fn();
// let fn = (nub1,nub2)=>nub1*nub2;
// console.log(fn(2,3));
let fn = (a,...arg)=>{
//console.log(arguments);
console.log(a,arg);
};
fn(1,2,3,4);
document.onclick = function(){
let fn = (a,...arg)=>{
console.log(this);
};
fn();
};
//参数的默认值
let fn = (nub=0,nub2=0)=>{
console.log(nub+nub2);
}
fn();7.数组的新增方法
Array.from
Array Array.from(arrayLike[, mapFn[, thisArg]]) 将类数组转换成数组
参数：arrayLike 类数组
可选参数：mapFn 类似 map 方法，循环类数组时的回函函数，返回值组成新数组
thisArg mapFn 函数执行时的 this 指向
返回值：根据 arrayLike 生成的新数组
(function(){
// let list = document.getElementById("list");
// let lists = list.getElementsByTagName("li");
// //lists = [...lists];
// lists = Array.from(lists);
// // lists.forEach(item => {
// // console.log(item);
// // });
// console.log(lists);
let datas = {
0: "a",
1: "b",
2: "c",
length: 3
};
// datas = Array.from(datas);
datas = Array.from(datas,function(item,index){
console.log(item,index,this);
return item.toUpperCase();
},document);
console.log(datas);
})();Array.isArray
Boolean Array.isArray(data) 检测数据是否是个数组
参数：data 要检测的数据
返回值:true 数组，false 非数组
(function(){
let list = document.getElementById("list");
let lists = list.querySelectorAll("li");
let arr = [];
console.log(Array.isArray(lists));
})();Array.of
Array Array.of(element0[, element1[, ...[, elementN]]]) 将参数转成一个数组
参数：elementN 要放入数组中的数据
返回值：新数组
(function(){
let arr = Array.of(1,2,3,4,5,5,6);
console.log(arr);
let arr2 = [].of(12,23);
})();arr.find
Value arr.find(callback[, thisArg]) 查找数组中满足要求的第一个元素的值
参数：callback
在数组每一项上执行的函数，接收 3 个参数：element：当前遍历到的元素；index：[可选]当前遍历到的索引；array：[可选]数组本身
可选参数：thisArg：执行回调时用作this 的对象
返回值：数组中第一个满足所提供测试函数的元素的值，否则返回 undefined
arr.findIndex
Index arr.findIndex(callback[, thisArg]) 查找数组中满足要求的第一个元素的值的索引
参数:callback
针对数组中的每个元素, 都会执行该回调函数, 执行时会自动传入下面三个参数:element：当前元素；index：当前元素的索引；array：调用findIndex的数组。
可选参数：thisArg：执行callback时作为this对象的值
返回值：满足要求的值的索引
// let arr = [1,2,5,6];
// let val = arr.find((item)=>{
// return item >= 5;
// });
// console.log(val);
let arr = [1,2,5,6];
let index = arr.findIndex((item)=>{
return item >= 5;
});
console.log(index);arr.flat
Array arr.flat([depth]) 扁平化多维数组
可选参数：depth：指定要提取嵌套数组的结构深度，默认值为 1。
返回值：一个包含将数组与子数组中所有元素的新数组
let arr = [
[1,2],
[3,4],
[
[6,7],
[
[8],
[9,10]
]
]
];
console.log(arr.flat(Infinity));arr.flatMap
Array arr.flatMap(function callback(currentValue[, index[, array]]) {
// 返回新数组的元素
}[, thisArg]) 方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。它与 map 和 深度值1的 flat 几乎相同，但 flatMap 通常在合并成一种方法的效率稍微高一些
参数：callback
可以生成一个新数组中的元素的函数，可以传入三个参数：currentValue：当前正在数组中处理的元素；index可选：可选的，数组中正在处理的当前元素的索引；array可选：可选的，被调用的 map 数组
可选参数：thisArg：执行 callback 函数时 使用的this 值
返回值：一个包含将数组与子数组中所有元素的新数组
let arr = [
[1,2],
[3,4],
[6,8]
];
let arr2 = arr.flatMap(item=>{
item = item.filter(item=>item>=2);
return item;
});
console.log(arr2);arr.fill
Array arr.fill(value[, start[, end]]); 用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引
参数：用来填充数组元素的值。
可选参数：start：起始索引，默认值为0；end：终止索引，默认值为 arr.length
/*
Array arr.fill(value[, start[, end]]); 用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引
参数：
用来填充数组元素的值。
可选参数：
start
起始索引，默认值为0。
end
终止索引，默认值为 arr.length
*/
let arr = ["a","b","c","d","e"];
arr.fill("f",1,3);
console.log(arr);arr.includes
Boolean arr.includes(valueToFind[, fromIndex]) 判断数组中是否包含一个指定的值
参数：valueToFind 需要查找的值
可选参数：从 fromIndex 处开始向后查找
返回值：true 代表数组中包含 valueToFind， false 代表数组中不包含 fromIndex
let arr = ["a","b","c","d"];
console.log(arr.includes("a",-3));8.字符串新增方法
str.includes
Boolean str.includes(valueToFind[, fromIndex]) 判断字符串是否包含一个指定的值
详细： 参考数组的 includes
str.endsWith
Boolean str.endsWith(searchString[, length]) 判断当前字符串是否是以另外一个给定的子字符串“结尾”
参数：searchString：要搜索的子字符串。
可选参数：length ：作为 str 的长度；默认值为 str.length
返回值：如果传入的子字符串在搜索字符串的末尾则返回true；否则将返回 false。
str.startsWith
Boolean str.startsWith(searchString[, position]) 判断当前字符串是否以另外一个给定的子字符串开头
参数：searchString：要搜索的子字符串。
可选参数：position：在 str 中搜索 searchString 的开始位置，默认值为 0，也就是真正的字符串开头处。
返回值：如果传入的子字符串在搜索字符串的开始则返回true；否则将返回 false。
let str = "123456789";
//console.log(str.startsWith("56",4));
console.log(str.endsWith("67",7));str.repeat
String str.repeat(count) 构造并返回一个新字符串，该字符串包含被连接在一起的指定数量的字符串的副本
参数：count：介于0和正无穷大之间的整数。表示在新构造的字符串中重复了多少遍原字符串
返回值：生成的新字符串
let str = "123";
console.log(str.repeat(10000000));模板字符串
模板字面量 是允许嵌入表达式的字符串字面量。你可以使用多行字符串和字符串插值功能。它们在ES2015规范的先前版本中被称为“模板字符串”。
let name = "LEO";
let age = 40;
let gender = "男";
//let str = '姓名：' + name + '，年龄：' + age + '岁，性别：男';
let str = `姓名：${name}，
年龄：${age}岁，
性别：${gender}`;
console.log(str);
let name = "LEO";
let age = 40;
let gender = function(){
return "男"
};
let str = `姓名：${[1,2,3,4]}，
年龄：${age}岁，
性别：${gender()}`;
// 插值表达式
console.log(str);9.新增对象方法
Object.assign
Object Object.assign(target, ...sources) 将所有可枚举属性的值从一个或多个源对象复制到目标对象
参数：target：目标对象；sources：源对象
返回值：目标对象
let obj = {
a: 1,
b: 2
};
let obj2 = {
c: 3,
d: 4
};
let f = null;
let obj3 = Object.assign({},obj,obj2,{f});
console.log(obj,obj2,obj3);Object.is
Boolean Object.is(value1, value2) 判断两个值是否是相同的值。
规则：两个值都是 undefined
两个值都是 null
两个值都是 true 或者都是 false
两个值是由相同个数的字符按照相同的顺序组成的字符串
两个值指向同一个对象
两个值都是数字并且
都是正零 +0
都是负零 -0
都是 NaN
let nub = NaN;
let str = NaN;
console.log(Object.is(nub,str));对象简洁表示法
- 属性简洁表示
- 方法简洁表示
let a = 0;
let b = 1;
let obj = {
a,// a: a
b, // b: b
c(){
console.log(123);
}
};
obj.c();
//console.log();
属性名表达式
let n = "name" ;
let obj = {
[n]: "leo"
};
console.log(obj);
10.babel
babel 是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中.
<script src="babel.min.js"></script>
<script type="text/babel">
let name = "LEO";
let age = 40;
let gender = "男";
let str = `姓名：${name}，
年龄：${age}岁，
性别：${gender}`;
console.log(str);
let arr = [1,2,3];
let val = arr.find((item)=>{
return item > 1
});
console.log(val);
</script>
扫一扫
577
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
