1.package.json==>npm init
-
node_modules==>npm install webpack -D
-
webpack.config.js==>创建配置文件
-
新建public
-
新建src
-
src里新建index.html,index.js
-
src里新建js文件夹,js文件夹下简历01.js
如图:
函数-默认值-箭头函数
js …test参数
{
function fn(…test) {
console.log(test)
}
fn(1, 2, 3, 4, 5, 6, 7)
}
结果: (7) [1, 2, 3, 4, 5, 6, 7]
//箭头函数
(参数,参数)=>{
}
{
// 第一种箭头函数
let fn = v => v;
console.log(fn(10));
//等同于第二种声明函数
let fn1 = function(v) {
return v;
}
console.log(fn1(20))
}
数组的扩展
-
Array.from(); 把一个看起来类似于数组的对象,转成真正的数组
例子:
{
let span = document.getElementsByTagName(“span”);
console.log(typeof(span)); //类似于数组的对象
let arr = Array.from(span); //Array.from()把类似于数组的对象转成数组
console.log(arr);
}
2.Array.of(); 把一组值,转换为数组
3.copyWithin() ; 把指定位置的成员复制到其他位置 (会覆盖原有成员)
参数1:target 从该位置开始替换 ,如果为负值,表示倒数
参数2:start 从该位置开始读取数据,默认为0 。如果为负值,表示从末尾开始计算。
参数3:end 到该位置前停止读取数据,默认等于数组长度。如果为负值,表示从末尾开始计算。
4.find()
用于找出第一个符合条件的数组成员,如果没有符合条件的,返回undefined;
[1, 5, 10, 15].find(function(value, index, arr) {
return value > 9;}) // 10
上面代码中,find方法的回调函数可以接受三个参数,依次为当前的值、当前的位置和原数组。
5.findIndex()
用于找回第一个符合条件的数组成员的索引位置,如果都不符合条件,则返回-1
6.fill() 填充数组
参数1:填充的内容
参数2:起始位置
参数3:结束位置;
{
let arr = [‘a’, ‘b’, ‘c’];
arr.fill(‘o’, 1, 2);
console.log(arr); //[‘a’,’o’,’c’];
}
7.entries(),keys(),values()
-
entries() 是对键值对的遍历
-
keys()是对键名的遍历
-
values()是对键值对的遍历
{
let arr = [‘a’, ‘b’, ‘c’];
for (let [k, v] of arr.entries()) {
console.log(k, v);
}
}
8.includes(); 查看数组是否包含某个值,返回的是布尔值
包含返回true,否则返回false
对象的扩展
let a = “简单写法”;
{
let obj = {
a //属性名和变量名字一样,简单化
}
console.log(obj.a);
}
let obj = {
run() {
return ‘我是谁’
}
}
console.log(obj.run.name) //获取函数名称是什么,
也就是run
ES5 比较两个值是否相等,只有两个运算符:相等运算符(`==`)和严格相等运算符(`===`)。它们都有缺点,前者会自动转换数据类型,后者的`NaN`不等于自身,以及`+0`等于`-0`。JavaScript 缺乏一种运算,在所有环境中,只要两个值是一样的,它们就应该相等。
ES6 提出“Same-value equality”(同值相等)算法,用来解决这个问题。`Object.is`就是部署这个算法的新方法。它用来比较两个值是否严格相等,与严格比较运算符(===)的行为基本一致。
用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target)。
例子:
const target = { a: 1 };
const source1 = { b: 2 };
const source2 = { c: 3 };
Object.assign(target, source1, source2);
console.log(target);
Object.getOwnPropertyDescriptor 方法可以获取该属性的描述对象。
7.Object.entries(),Object.keys(),Object.values()
class类
基本语法:
demo:
class aa {
constructor(name, age) {
this.name = name;
this.age = age;
}
run() {
return ‘你会class类了吗’;
}
init() {
return ‘初始化’;
}
}
let bb = new aa(name = ‘小仙女’, age = 15);
console.log(bb);
console.log(bb.run());
console.log(bb.init());
class 继承性
// 继承属性extends
class Child extends Parent {
constructor() {
super(); //继承属性必须用super,放置在构造函数的最前面
this.age = 17;
}
}
// let aa = new Parent();
let bb = new Child();
// console.log(aa.name);
console.log(bb.age);
Symbol
作用:解决命名冲突
概述:
使用:
方法:
取值
Reflect.ownKeys(obj) 返回的是个数组
Set,WeakSet
Set
是什么?
使用方法:
-
new Set();
-
add:增
-
size:lengtg
-
clear:全删
-
delete :删除某一个
-
has:查
例子:
var set2 = new Set(); //先new一个Set
set2.add(‘1’); //Set(1) {“1”}
set2.add(10);
//set2.size 1
//set2.clear(); //删除所有内容
//set2.delete(10) //删除10
console.log(set2.has(10)); //包含10,返回true
功能:
强大的去重功能,要看数据类型的
let arr = [1, 2, 3, 12, 2, 3, 4];
let set1 = new Set(arr);
console.log(set1);
3.遍历
4.WeakSet
与Set区别
-
new Set()
-
new WeakSet({})
-
值必须是对象
-
方法:只有add,delete,has
-
不可遍历
Map
-
key可是是数组,字符串
-
size:长度
-
delete 删除 clear 全部清除
-
set 增加
-
get 查询
-
has 表示某个键是否在当前Map对象之中
-
Map.prototype.keys():返回键名的遍历器。
-
Map.prototype.values():返回键值的遍历器。
-
Map.prototype.entries():返回所有成员的遍历器。
-
Map.prototype.forEach():遍历 Map 的所有成员。
WeakMap()
Map和WeakMap区别
-
没有遍历操作
-
无法清空,不支持clear,因此只有四个方法可用:get(),set(),has(),delete()
-
垃圾回收机制
proxy (代理)
理解:
-
源对象 类似于供应商
-
代理 类似于代理商
-
操作 类似于用户
使用(拦截):
-
get():拦截对象属性的读取
-
set():拦截对象属性的设置
-
deleteProperty():拦截删除对象key操作的操作
Reflect(反射):
对象的设计目的:
-
以后方法都只会在Reflect对象上
-
修改某些object方法的返回结果
-
让object 操作都变成函数行为
-
Reflect对象的方法与Proxy对象的方法一一对应,只要是Proxy对象的方法,就能在Reflect对象上找到对应的方法。
方法(使用):
-
Reflect.apply(target, thisArg, args)
-
Reflect.construct(target, args)
-
Reflect.get(target, name, receiver)
-
Reflect.set(target, name, value, receiver)
-
Reflect.defineProperty(target, name, desc)
-
Reflect.deleteProperty(target, name)
-
Reflect.has(target, name)
-
Reflect.ownKeys(target)
-
Reflect.isExtensible(target)
-
Reflect.preventExtensions(target)
-
Reflect.getOwnPropertyDescriptor(target, name)
-
Reflect.getPrototypeOf(target)
-
Reflect.setPrototypeOf(target, prototype)