JS高级（含ES6）
2024-04-30 22:59:50
目录
1、ES6中的类和对象
2、构造函数和原型
2.1构造函数
2.2原型
2.2.1对象原型__proto__
2.2.2constructor构造函数
2.2.2构造函数、实例、原型对象关系
2.2.3原型链
2.2.4成员查找机制
3、ES5新增方法
3.1forEach 遍历数组
3.2filter 筛选数组
3.3 some 检测数组中是否满足指定条件
3.4字符串方法（trim）
3.5对象方法
4、函数进阶
4.1、定义
4.2、函数的调用
4.3函数this指向
4.3.1改变函数this指向
4.4严格模式
4.4.1什么是严格模式
4.4.2开启严格模式
4.4.3严格模式的变化
4.5高阶函数
4.6闭包
4.7递归
4.8拷贝
5 正则表达式
5.1概述
5.2特点
5.3 使用
5.4特殊字符
5.4.1边界符
5.4.2字符类
5.4.3量词符
5.4.4括号总结
5.5.5预定义类
5.5.6替换
6、ES6
6.1let关键字（声明变量）
6.2const关键字（声明常量）
let、const、var区别
6.3解构赋值
6.3.1数组解构
6.3.2对象解构
6.4箭头函数
6.4.1定义
6.4.2不绑定this关键字
6.5剩余参数
6.6扩展运算符
6.6.1扩展运算符应用
6.6.2构造函数方法Array.form()
6.6.3实例方法方法find()
6.6.4实例方法方法findIndex()
6.6.5实例方法方法includes()
6.7模板字符串
6.8String的扩展方法
6.9Set数据结构
面向对象和面向过程对比
1、ES6中的类和对象
创建类和对象
类中添加方法
eg：class car {constructor(uname,age) {this.uname=uname;this.age=age;}sing(s) {console.log(s);}}var fa=new car("li",12);console.log(fa.uname);fa.sing('a'); 继承（extends）
class father {constructor(x,y) {this.x=x;this.y=y;}sum(x,y) {console.log(this.x+this.y);}}class Son extends father {constructor(x,y) {super(x,y);//调用父类的构造函数}}var son=new Son(1,2);var son1=new Son(11,22);son.sum();son1.sum();super关键字
注：
子类继承父级同时扩展自己的方法
class father {constructor(x,y) {this.x=x;this.y=y;}sub() {console.log(this.x+this.y);}}// var s=new father(3,2);// s.sub();class son extends father {constructor(x,y) {// 利用super调用父类函数// super必须在子类this之前调用super(x,y);this.x=x;this.y=y;}subs() {console.log(this.x-this.y);}}var sona=new son(4,3);sona.sub();sona.subs();注意：1、ES6中没有变量提升，必须先定义类才能实例化对象
2、类中里面的共有的属性和方法一定要加this使用
3、this指向问题（constructor指向的是实例化对象，方法里面的指方法调用者）
2、构造函数和原型
2.1构造函数
eg:
// 1. 利用 new Object() 创建对象var obj1 = new Object();// 2. 利用 对象字面量创建对象var obj2 = {};// 3. 利用构造函数创建对象function Star(uname, age) {this.uname = uname;this.age = age;this.sing = function() {console.log('我会唱歌');}}var ldh = new Star('刘德华', 18);var zxy = new Star('张学友', 19);console.log(ldh);ldh.sing();zxy.sing();静态成员和实例成员
eg：
// 构造函数中的属性和方法我们称为成员, 成员可以添加function Star(uname, age) {this.uname = uname;this.age = age;this.sing = function() {console.log('我会唱歌');}}var ldh = new Star('刘德华', 18);// 1.实例成员就是构造函数内部通过this添加的成员 uname age sing 就是实例成员// 实例成员只能通过实例化的对象来访问console.log(ldh.uname);ldh.sing();// console.log(Star.uname); // 不可以通过构造函数来访问实例成员// 2. 静态成员 在构造函数本身上添加的成员 sex 就是静态成员Star.sex = '男';// 静态成员只能通过构造函数来访问console.log(Star.sex);2.2原型
eg：
<script>// 1. 构造函数的问题. function Star(uname, age) {this.uname = uname;this.age = age;// this.sing = function() {// console.log('我会唱歌');// }}Star.prototype.sing = function() {console.log('我会唱歌');}var ldh = new Star('刘德华', 18);var zxy = new Star('张学友', 19);console.log(ldh.sing === zxy.sing);// console.dir(Star);ldh.sing();zxy.sing();// 2. 一般情况下,我们的公共属性定义到构造函数里面, 公共的方法我们放到原型对象身上</script>2.2.1对象原型__proto__
eg:
<script>function Star(uname, age) {this.uname = uname;this.age = age;}Star.prototype.sing = function() {console.log('我会唱歌');}var ldh = new Star('刘德华', 18);var zxy = new Star('张学友', 19);ldh.sing();console.log(ldh); // 对象身上系统自己添加一个 __proto__ 指向我们构造函数的原型对象 prototypeconsole.log(ldh.__proto__ === Star.prototype);// 方法的查找规则: 首先先看ldh 对象身上是否有 sing 方法,如果有就执行这个对象上的sing// 如果么有sing 这个方法,因为有__proto__ 的存在,就去构造函数原型对象prototype身上去查找sing这个方法</script>2.2.2constructor构造函数
eg：
<script>function Star(uname, age) {this.uname = uname;this.age = age;}// 很多情况下,我们需要手动的利用constructor 这个属性指回 原来的构造函数// Star.prototype.sing = function() {// console.log('我会唱歌');// };// Star.prototype.movie = function() {// console.log('我会演电影');// }Star.prototype = {// 如果我们修改了原来的原型对象,给原型对象赋值的是一个对象,则必须手动的利用constructor指回原来的构造函数constructor: Star,sing: function() {console.log('我会唱歌');},movie: function() {console.log('我会演电影');}}var ldh = new Star('刘德华', 18);var zxy = new Star('张学友', 19);console.log(Star.prototype);console.log(ldh.__proto__);console.log(Star.prototype.constructor);console.log(ldh.__proto__.constructor);</script>2.2.2构造函数、实例、原型对象关系
2.2.3原型链
2.2.4成员查找机制
3、ES5新增方法
3.1forEach 遍历数组
eg：
<script>// forEach 迭代(遍历) 数组var arr = [1, 2, 3];var sum = 0;arr.forEach(function(value, index, array) {console.log('每个数组元素' + value);console.log('每个数组元素的索引号' + index);console.log('数组本身' + array);sum += value;})console.log(sum);</script>3.2filter 筛选数组
eg：
<script>// filter 筛选数组var arr = [12, 66, 4, 88, 3, 7];var newArr = arr.filter(function(value, index) {// return value >= 20;return value % 2 === 0;});console.log(newArr);</script>3.3 some 检测数组中是否满足指定条件
eg：
<script>// some 查找数组中是否有满足条件的元素 // var arr = [10, 30, 4];// var flag = arr.some(function(value) {// // return value >= 20;// return value < 3;// });// console.log(flag);var arr1 = ['red', 'pink', 'blue'];var flag1 = arr1.some(function(value) {return value == 'pink';});console.log(flag1);// 1. filter 也是查找满足条件的元素 返回的是一个数组 而且是把所有满足条件的元素返回回来// 2. some 也是查找满足条件的元素是否存在 返回的是一个布尔值 如果查找到第一个满足条件的元素就终止循环</script>3.4字符串方法（trim）
eg：
<input type="text"> <button>点击</button><div></div><script>// trim 方法去除字符串两侧空格var str = ' an dy ';console.log(str);var str1 = str.trim();console.log(str1);var input = document.querySelector('input');var btn = document.querySelector('button');var div = document.querySelector('div');btn.onclick = function() {var str = input.value.trim();if (str === '') {alert('请输入内容');} else {console.log(str);console.log(str.length);div.innerHTML = str;}}</script>3.5对象方法
1、keys
eg：
script>// 用于获取对象自身所有的属性var obj = {id: 1,pname: '小米',price: 1999,num: 2000};var arr = Object.keys(obj);console.log(arr);arr.forEach(function(value) {console.log(value);})</script>2、defineProperty
eg：
<script>// Object.defineProperty() 定义新属性或修改原有的属性var obj = {id: 1,pname: '小米',price: 1999};// 1. 以前的对象添加和修改属性的方式// obj.num = 1000;// obj.price = 99;// console.log(obj);// 2. Object.defineProperty() 定义新属性或修改原有的属性Object.defineProperty(obj, 'num', {value: 1000,enumerable: true});console.log(obj);Object.defineProperty(obj, 'price', {value: 9.9});console.log(obj);Object.defineProperty(obj, 'id', {// 如果值为false 不允许修改这个属性值 默认值也是falsewritable: false,});obj.id = 2;console.log(obj);Object.defineProperty(obj, 'address', {value: '中国山东蓝翔技校xx单元',// 如果只为false 不允许修改这个属性值 默认值也是falsewritable: false,// enumerable 如果值为false 则不允许遍历, 默认的值是 falseenumerable: false,// configurable 如果为false 则不允许删除这个属性 不允许在修改第三个参数里面的特性 默认为falseconfigurable: false});console.log(obj);console.log(Object.keys(obj));delete obj.address;console.log(obj);delete obj.pname;console.log(obj);Object.defineProperty(obj, 'address', {value: '中国山东蓝翔技校xx单元',// 如果只为false 不允许修改这个属性值 默认值也是falsewritable: true,// enumerable 如果值为false 则不允许遍历, 默认的值是 falseenumerable: true,// configurable 如果为false 则不允许删除这个属性 默认为falseconfigurable: true});console.log(obj.address);</script>4、函数进阶
4.1、定义
eg：
<script>// 函数的定义方式// 1. 自定义函数(命名函数) function fn() {};// 2. 函数表达式 (匿名函数)var fun = function() {};// 3. 利用 new Function('参数1','参数2', '函数体');var f = new Function('a', 'b', 'console.log(a + b)');f(1, 2);// 4. 所有函数都是 Function 的实例(对象)console.dir(f);// 5. 函数也属于对象console.log(f instanceof Object);</script>
4.2、函数的调用
<script>// 函数的调用方式// 1. 普通函数function fn() {console.log('人生的巅峰');}// fn(); fn.call()// 2. 对象的方法var o = {sayHi: function() {console.log('人生的巅峰');}}o.sayHi();// 3. 构造函数function Star() {};new Star();// 4. 绑定事件函数// btn.onclick = function() {}; // 点击了按钮就可以调用这个函数// 5. 定时器函数// setInterval(function() {}, 1000); 这个函数是定时器自动1秒钟调用一次// 6. 立即执行函数(function() {console.log('人生的巅峰');})();// 立即执行函数是自动调用</script>4.3函数this指向
eg：
<script>// 函数的不同调用方式决定了this 的指向不同// 1. 普通函数 this 指向windowfunction fn() {console.log('普通函数的this' + this);}window.fn();// 2. 对象的方法 this指向的是对象 ovar o = {sayHi: function() {console.log('对象方法的this:' + this);}}o.sayHi();// 3. 构造函数 this 指向 ldh 这个实例对象 原型对象里面的this 指向的也是 ldh这个实例对象function Star() {};Star.prototype.sing = function() {}var ldh = new Star();// 4. 绑定事件函数 this 指向的是函数的调用者 btn这个按钮对象var btn = document.querySelector('button');btn.onclick = function() {console.log('绑定时间函数的this:' + this);};// 5. 定时器函数 this 指向的也是windowwindow.setTimeout(function() {console.log('定时器的this:' + this);}, 1000);// 6. 立即执行函数 this还是指向window(function() {console.log('立即执行函数的this' + this);})();</script>4.3.1改变函数this指向
eg
:
<script>// 改变函数内this指向 js提供了三种方法 call() apply() bind()// 1. call()var o = {name: 'andy'}function fn(a, b) {console.log(this);console.log(a + b);};fn.call(o, 1, 2);// call 第一个可以调用函数 第二个可以改变函数内的this 指向// call 的主要作用可以实现继承function Father(uname, age, sex) {this.uname = uname;this.age = age;this.sex = sex;}function Son(uname, age, sex) {Father.call(this, uname, age, sex);}var son = new Son('刘德华', 18, '男');console.log(son);</script>
eg:
<script>// 改变函数内this指向 js提供了三种方法 call() apply() bind()// 2. apply() 应用 运用的意思var o = {name: 'andy'};function fn(arr) {console.log(this);console.log(arr); // 'pink'};fn.apply(o, ['pink']);// 1. 也是调用函数 第二个可以改变函数内部的this指向// 2. 但是他的参数必须是数组(伪数组)// 3. apply 的主要应用 比如说我们可以利用 apply 借助于数学内置对象求数组最大值 // Math.max();var arr = [1, 66, 3, 99, 4];var arr1 = ['red', 'pink'];// var max = Math.max.apply(null, arr);var max = Math.max.apply(Math, arr);var min = Math.min.apply(Math, arr);console.log(max, min);</script>
<script>// 改变函数内this指向 js提供了三种方法 call() apply() bind()// 3. bind() 绑定 捆绑的意思var o = {name: 'andy'};function fn(a, b) {console.log(this);console.log(a + b);};var f = fn.bind(o, 1, 2);f();// 1. 不会调用原来的函数 可以改变原来函数内部的this 指向// 2. 返回的是原函数改变this之后产生的新函数// 3. 如果有的函数我们不需要立即调用,但是又想改变这个函数内部的this指向此时用bind// 4. 我们有一个按钮,当我们点击了之后,就禁用这个按钮,3秒钟之后开启这个按钮// var btn1 = document.querySelector('button');// btn1.onclick = function() {// this.disabled = true; // 这个this 指向的是 btn 这个按钮// // var that = this;// setTimeout(function() {// // that.disabled = false; // 定时器函数里面的this 指向的是window// this.disabled = false; // 此时定时器函数里面的this 指向的是btn// }.bind(this), 3000); // 这个this 指向的是btn 这个对象// }var btns = document.querySelectorAll('button');for (var i = 0; i < btns.length; i++) {btns[i].onclick = function() {this.disabled = true;setTimeout(function() {this.disabled = false;}.bind(this), 2000);}}</script>call、apply、bind总结
4.4严格模式
4.4.1什么是严格模式
4.4.2开启严格模式
4.4.3严格模式的变化
4.5高阶函数
4.6闭包
eg;
<script>// 闭包（closure）指有权访问另一个函数作用域中变量的函数。// 一个作用域可以访问另外一个函数的局部变量 // 我们fn 外面的作用域可以访问fn 内部的局部变量// 闭包的主要作用: 延伸了变量的作用范围function fn() {var num = 10;// function fun() {// console.log(num);// }// return fun;return function() {console.log(num);}}var f = fn();f();// 类似于// var f = function() {// console.log(num);// }// var f = function fun() {// console.log(num);// }</script>4.7递归
eg：
<script>// 递归函数 : 函数内部自己调用自己, 这个函数就是递归函数var num = 1;function fn() {console.log('我要打印6句话');if (num == 6) {return; // 递归里面必须加退出条件}num++;fn();}fn();</script>4.8拷贝
浅拷贝
<script>// 浅拷贝只是拷贝一层, 更深层次对象级别的只拷贝引用.// 深拷贝拷贝多层, 每一级别的数据都会拷贝.var obj = {id: 1,name: 'andy',msg: {age: 18}};var o = {};// for (var k in obj) {// // k 是属性名 obj[k] 属性值// o[k] = obj[k];// }// console.log(o);// o.msg.age = 20;// console.log(obj);console.log('--------------');Object.assign(o, obj);console.log(o);o.msg.age = 20;console.log(obj);</script>深拷贝
<script>// 深拷贝拷贝多层, 每一级别的数据都会拷贝.var obj = {id: 1,name: 'andy',msg: {age: 18},color: ['pink', 'red']};var o = {};// 封装函数 function deepCopy(newobj, oldobj) {for (var k in oldobj) {// 判断我们的属性值属于那种数据类型// 1. 获取属性值 oldobj[k]var item = oldobj[k];// 2. 判断这个值是否是数组if (item instanceof Array) {newobj[k] = [];deepCopy(newobj[k], item)} else if (item instanceof Object) {// 3. 判断这个值是否是对象newobj[k] = {};deepCopy(newobj[k], item)} else {// 4. 属于简单数据类型newobj[k] = item;}}}deepCopy(o, obj);console.log(o);var arr = [];console.log(arr instanceof Object);o.msg.age = 20;console.log(obj);</script>5 正则表达式
5.1概述
5.2特点
5.3 使用
eg：
<script>// 正则表达式在js中的使用// 1. 利用 RegExp对象来创建 正则表达式var regexp = new RegExp(/123/);console.log(regexp);// 2. 利用字面量创建 正则表达式var rg = /123/;// 3.test 方法用来检测字符串是否符合正则表达式要求的规范console.log(rg.test(123));console.log(rg.test('abc'));</script>5.4特殊字符
5.4.1边界符
5.4.2字符类
<script>//var rg = /abc/; 只要包含abc就可以 // 字符类: [] 表示有一系列字符可供选择，只要匹配其中一个就可以了var rg = /[abc]/; // 只要包含有a 或者 包含有b 或者包含有c 都返回为trueconsole.log(rg.test('andy'));console.log(rg.test('baby'));console.log(rg.test('color'));console.log(rg.test('red'));var rg1 = /^[abc]$/; // 三选一 只有是a 或者是 b 或者是c 这三个字母才返回 trueconsole.log(rg1.test('aa'));console.log(rg1.test('a'));console.log(rg1.test('b'));console.log(rg1.test('c'));console.log(rg1.test('abc'));console.log('------------------');var reg = /^[a-z]$/; // 26个英文字母任何一个字母返回 true - 表示的是a 到z 的范围 console.log(reg.test('a'));console.log(reg.test('z'));console.log(reg.test(1));console.log(reg.test('A'));// 字符组合var reg1 = /^[a-zA-Z0-9_-]$/; // 26个英文字母(大写和小写都可以)任何一个字母返回 true console.log(reg1.test('a'));console.log(reg1.test('B'));console.log(reg1.test(8));console.log(reg1.test('-'));console.log(reg1.test('_'));console.log(reg1.test('!'));console.log('----------------');// 如果中括号里面有^ 表示取反的意思 千万和 我们边界符 ^ 别混淆var reg2 = /^[^a-zA-Z0-9_-]$/;console.log(reg2.test('a'));console.log(reg2.test('B'));console.log(reg2.test(8));console.log(reg2.test('-'));console.log(reg2.test('_'));console.log(reg2.test('!'));</script>5.4.3量词符
eg：
<script>// 量词符: 用来设定某个模式出现的次数// var reg = /^a$/;// console.log(reg.test('a'));// console.log(reg.test('aa'));// 1. * 相当于 >= 0 可以出现0次或者很多次 // var reg = /^a*$/;// console.log(reg.test(''));// console.log(reg.test('a'));// console.log(reg.test('aa'));// console.log(reg.test('aaaaaa'));// 2. + 相当于 >= 1 可以出现1次或者很多次// var reg = /^a+$/;// console.log(reg.test(''));// console.log(reg.test('a'));// console.log(reg.test('aa'));// console.log(reg.test('aaaaaa'));// 3. ? 相当于 1 || 0// var reg = /^a?$/;// console.log(reg.test(''));// console.log(reg.test('a'));// console.log(reg.test('aa'));// console.log(reg.test('aaaaaa'));// 4. {3 } 就是重复3次// var reg = /^a{3}$/;// console.log(reg.test(''));// console.log(reg.test('a'));// console.log(reg.test('aa'));// console.log(reg.test('aaaaaa'));// console.log(reg.test('aaa'));// 5. {3, } 大于等于3var reg = /^a{3,}$/;console.log(reg.test(''));console.log(reg.test('a'));console.log(reg.test('aa'));console.log(reg.test('aaaaaa'));console.log(reg.test('aaa'));// 6. {3, 16} 大于等于3 并且 小于等于16var reg = /^a{3,16}$/;console.log(reg.test(''));console.log(reg.test('a'));console.log(reg.test('aa'));console.log(reg.test('aaaaaa'));console.log(reg.test('aaa'));console.log(reg.test('aaaaaaaaaaaaaaaaaaaaa'));// 量词是设定某个模式出现的次数var reg = /^[a-zA-Z0-9_-]{6,16}$/; // 这个模式用户只能输入英文字母 数字 下划线 短横线但是有边界符和[] 这就限定了只能多选1// {6,16} 中间不要有空格// console.log(reg.test('a'));// console.log(reg.test('8'));// console.log(reg.test('18'));// console.log(reg.test('aa'));// console.log('-------------');// console.log(reg.test('andy-red'));// console.log(reg.test('andy_red'));// console.log(reg.test('andy007'));// console.log(reg.test('andy!007'));</script>5.4.4括号总结
<script>// 中括号 字符集合.匹配方括号中的任意字符. // var reg = /^[abc]$/;// a 也可以 b 也可以 c 可以 a ||b || c// 大括号 量词符. 里面表示重复次数// var reg = /^abc{3}$/; // 它只是让c重复三次 abccc// console.log(reg.test('abc'));// console.log(reg.test('abcabcabc'));// console.log(reg.test('abccc'));// 小括号 表示优先级var reg = /^(abc){3}$/; // 它是让abcc重复三次console.log(reg.test('abc'));console.log(reg.test('abcabcabc'));console.log(reg.test('abccc'));</script>5.5.5预定义类
5.5.6替换
<textarea name="" id="message"></textarea> <button>提交</button><div></div><script>// 替换 replace// var str = 'andy和red';// // var newStr = str.replace('andy', 'baby');// var newStr = str.replace(/andy/, 'baby');// console.log(newStr);var text = document.querySelector('textarea');var btn = document.querySelector('button');var div = document.querySelector('div');btn.onclick = function() {div.innerHTML = text.value.replace(/激情|gay/g, '**');}</script>6、ES6
6.1let关键字（声明变量）
6.2const关键字（声明常量）
注：对应的内存地址不能更改
let、const、var区别
6.3解构赋值
6.3.1数组解构
eg：
<script type="text/javascript">// 数组解构允许我们按照一一对应的关系从数组中提取值 然后将值赋值给变量let ary = [1,2,3];let [a, b, c, d, e] = ary;console.log(a)console.log(b)console.log(c)console.log(d)console.log(e)</script>6.3.2对象解构
第一种：
第二种：
eg：
<script type="text/javascript">// 对象解构允许我们使用变量的名字匹配对象的属性 匹配成功 将对象属性的值赋值给变量let person = {name: 'lisi', age: 30, sex: '男'};// let { name, age, sex } = person;// console.log(name)// console.log(age)// console.log(sex)let {name: myName} = person;console.log(myName)</script>6.4箭头函数
6.4.1定义
<script type="text/javascript">箭头函数是用来简化函数定义语法的const fn = () => {console.log(123)}fn();在箭头函数中 如果函数体中只有一句代码 并且代码的执行结果就是函数的返回值 函数体大括号可以省略const sum = (n1, n2) => n1 + n2; const result = sum(10, 20);console.log(result)在箭头函数中 如果形参只有一个 形参外侧的小括号也是可以省略的const fn = v => {alert(v);}fn(20)</script>6.4.2不绑定this关键字
头函数不绑定this 箭头函数没有自己的this关键字 如果在箭头函数中使用this this关键字将指向箭头函数定义位置中的thisfunction fn () {console.log(this);return () => {console.log(this)}}const obj = {name: 'zhangsan'};const resFn = fn.call(obj);resFn();6.5剩余参数
6.6扩展运算符
6.6.1扩展运算符应用
1合并数组
扩展运算符应用于数组合并let ary1 = [1, 2, 3];let ary2 = [4, 5, 6];// ...ary1 // 1, 2, 3// ...ary1 // 4, 5, 6let ary3 = [...ary1, ...ary2];console.log(ary3)合并数组的第二种方法let ary1 = [1, 2, 3];let ary2 = [4, 5, 6];ary1.push(...ary2);console.log(ary1)2.将类数组或可遍历对象转换为真正得到数组
eg：
// 利用扩展运算符将伪数组转换为真正的数组var oDivs = document.getElementsByTagName('div');console.log(oDivs)var ary = [...oDivs];ary.push('a');console.log(ary);6.6.2构造函数方法Array.form()
1.将类数组或可遍历对象转换为真正得到数组
2.接受第二个参数，作为类似数组map方法，用于对每个元素处理后放入返回数组
6.6.3实例方法方法find()
6.6.4实例方法方法findIndex()
6.6.5实例方法方法includes()
6.7模板字符串
//模板字符串（ES6）的使用//语法：var str = `es6的字符串`； 反单引号表示//用${}在字符串中嵌入变量表达式，var username = "张三";var str1 = `我的名字是${username}`;var str2 = `1+1的结果是${1+1}`;document.write(str1); //输出结果为我的名字是usernamedocument.write(str2); //输出结果为1+1的结果为26.8String的扩展方法
1、startsWith（）和endsWith（）
2、repeat（）
6.9Set数据结构
const s1 = new Set();console.log(s1.size)//0const s2 = new Set(["a", "b"]);console.log(s2.size)//2// 去重const s3 = new Set(["a","a","b","b"]);console.log(s3.size)//2const ary = [...s3];console.log(ary)//含a，b的数组Set数据结构方法
eg：
const s4 = new Set();// 向set结构中添加值 使用add方法s4.add('a').add('b');console.log(s4.size)// 从set结构中删除值 用到的方法是deleteconst r1 = s4.delete('c');console.log(s4.size)console.log(r1);// 判断某一个值是否是set数据结构中的成员 使用hasconst r2 = s4.has('d');console.log(r2)// 清空set数据结构中的值 使用clear方法s4.clear();console.log(s4.size);
// 遍历set数据结构 从中取值const s5 = new Set(['a', 'b', 'c']);s5.forEach(value => {console.log(value)})JS高级（含ES6）相关推荐
- JS高级之ES6类与对象、静态成员、类的继承
一.类与对象 什么是类? 好比:人类.动物类 就是一个群体的统称 类里描述这一类群体,有哪些特征和行为,所谓的特征对应到代码中就是属性,行为对应到代码中就是方法 类理解为是一套描述数据的模板,但是没有 ...
- js高级：面向对象+ES6
js高级:面向对象+ES6 文章目录 js高级:面向对象+ES6 day01 一.ES6中的类和对象 1.1对象 1.2类 1.3创建类 1.4类constructor构造函数 1.5类中添加方法 1 ...
- ~【笔记】黑马js高级和尚硅谷ES6笔记（部分）~
点击通往->黑马pink讲js高级. 点击通往->尚硅谷ES6视频. 目录: js高级: 第一部分.构造函数.原型和继承 第二部分.函数进阶 一.函数的定义和调用 二.this 三.严格模 ...
- JS(第二十四课)JS高级Es6语法
ECMAScript 6_百度百科 (baidu.com) 第一部分:百度简介 ECMAScript 6(简称ES6)是于2015年6月正式发布的JavaScript语言的标准,正式名为ECMAScr ...
- js高级 — ES6
ECMAScript 6 目标:学习完 ES6 可以掌握方便后续的开发,未来工作中大量使用 ES6 开发 ECMAScript 6 介绍 ECMAScript 6 新增语法 内置对象的扩展 ECMAS ...
- JS面试题总结(含ES6)
部分内容来源于网络 广大朋友们,求一个上海的坑位,有需要的可以直接私信我 主要内容包括:数据类型,变量和常量,数组和常用方法,本地存储,关于异步处理:Generator async promi ...
- 前端知识点总结——JS高级（持续更新中）
前端知识点总结--JS高级(持续更新中) 1.字符串 什么是: 连续存储多个字符的字符数组 相同: 1. 下标 2. .length 3. 遍历 4. 选取: slice(starti[, endi] ...
- JS高级的学习(二)
JS高级的学习(二) set对象 Set 是一个对象 存放数据 数据永远不会重复 Set 当成是一个数组 遍历 使用 数组方法 find findIndex Map 数组转成 Set对象 const ...
- 前端复习8：JS高级
前端复习8:JS高级 1.对象 1.1 面向过程与面向对象 1.2 对象与类 2 构造函数和原型 2.1 构造函数 2.2 构造原型prototype 2.2 对象原型 2.3 constructor ...
- JS高级+ES678
js高级 数据类型 基本(值)类型 Number: 任意数值 String: 任意文本 Boolean: true/false undefined: undefined null: null 对象(引 ...
最新文章
- 随笔——js中的this指向，apply()与 call()
- boost::geometry::partition用法的测试程序
- iPhone内存管理基本原则
- vscode 头文件包含问题_WSL+VSCode = Linux ?
- 在安装mysql出现的错误以及解决方法
- Atitit java播放 wav MIXER 混响器编程 目录 1.1. MIXER 混响器编程 1 1.2. 得到系统中一共有多少个混音器设备： 1 1.3. 接口摘要 1 1.4. 调节音量
- Java反射----理解反射的源头Class类
- 圈圈教你学USB第一章
- 【C++项目】Tiny Linux WebServer---开篇介绍
- 贾俊平-第七章：参数估计
- 模拟退火算法（simulated annealing algorithm）求极值
- 单片机延时函数移植问题
- 如何使用Github实现协同工作（例子：两人合作写代码）
- 使用 Visio 绘制卷积示意图
- Pyecharts绘制图表大全——柱形图
- NVIDIA发布移动超级计算机“Jetson TK1”性能超树莓派
- 七月算法机器学习笔记4 凸优化
- C++数组：猴子选大王
- java发送s mime邮件_SpringBoot集成实现各种邮件发送
- 几种bug管理工具比较