学习ES6笔记[尚硅谷教育一]
01.严格模式
<!-- 1. 理解: * 除了正常运行模式(混杂模式)，ES5添加了第二种运行模式："严格模式"（strict mode）。 * 顾名思义，这种模式使得Javascript在更严格的语法条件下运行 2. 目的/作用 * 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为 * 消除代码运行的一些不安全之处，为代码的安全运行保驾护航 * 为未来新版本的Javascript做好铺垫 3. 使用 * 在全局或函数的第一条语句定义为: 'use strict'; * 如果浏览器不支持, 只解析为一条简单的语句, 没有任何副作用 4. 语法和行为改变 * 必须用var声明变量 * 禁止自定义的函数中的this指向window * 创建eval作用域 * 对象不能有重名的属性 --> <script type="text/javascript"> 'use strict' var username='coke' console.log(username) function Person(name,age){ this.name=name; this.age=age } new Person('coke',26) var str='NBA' eval('var str="CBA";alert(str)') alert(str) </script>
02.JSON对象
<!-- 1.JSON.stringify(obj/arr) *js对象(数组)转换为js对象(数组) 2.JSON.parse(json) *json对象(数组)转换为js对象(数组) --> <script> var obj={username:'kobe'}; obj=JSON.stringify(obj); console.log(typeof obj); obj=JSON.parse(obj); console.log(typeof obj); //var a='aaa' //var b="bbb" </script>
03.Object扩展
<!-- ES5给Object扩展了好一些静态方法, 常用的2个: 1. Object.create(prototype, [descriptors]) * 作用: 以指定对象为原型创建新的对象 * 为新的对象指定新的属性, 并对属性进行描述 value : 指定值 writable : 标识当前属性值是否是可修改的, 默认为false configurable: 标识当前属性是否可以被删除 默认为false enumerable： 标识当前属性是否能用for in 枚举 默认为false 2. Object.defineProperties(object, descriptors) * 作用: 为指定对象定义扩展多个属性 * get ：用来获取当前属性值得回调函数 * set ：修改当前属性值得触发的回调函数，并且实参即为修改后的值 * 存取器属性：setter,getter一个用来存值，一个用来取值 --> <script> var obj={username:'coke',age:'26'}; var obj1={} obj1=Object.create(obj,{ sex:{value:'男', writable:true, configurable:true, enumerable:true } }); console.log(obj1.sex) obj1.sex='女' console.log(obj1.sex) // delete obj1.sex // console.log(obj1) for(var i in obj1){ console.log(i) } //Object.defineProperties(object,descriptors) var obj2={firstName:'Kobe',lastName:'bryant'}; Object.defineProperties(obj2,{ fullName:{ get:function(){//获取扩展属性的值,获取扩展属性的get方法自动调用 console.log('get()') return this.firstName+' '+this.lastName; }, set:function(data){//监听扩展属性，当扩展属性发生变化的时候会自动调用，自动调用后会将变化的值作为实参 console.log('set()',data); var names=data.split(' '); this.firstName=names[0]; this.lastName=names[1]; } } }) console.log(obj2) console.log(obj2.fullName); obj2.fullName='tim duncan' console.log(obj2.fullName) </script>
04.Object扩展2
<!-- 对象本身的两个方法： *get propertyName(){}用来得到当前属性值得回调函数 *set propertyName(){} 用来监视当前属性值变化的回调函数 --> <script> var obj={ fisrtName:'curry', lastName:'stephen', get fullName(){ return this.firstName+' '+this.lastName ; }, set fullName(data){ var names=data.split(' '); this.firstName=names[0]; this.lastName=names[1]; } } console.log(obj); obj.fullName='kebo bryant' console.log(obj.fullName) </script>
05.数组遍历
<!-- 1. Array.prototype.indexOf(value) : 得到值在数组中的第一个下标 2. Array.prototype.lastIndexOf(value) : 得到值在数组中的最后一个下标 3. Array.prototype.forEach(function(item, index){}) : 遍历数组 4. Array.prototype.map(function(item, index){}) : 遍历数组返回一个新的数组，返回加工之后的值 5. Array.prototype.filter(function(item, index){}) : 遍历过滤出一个新的子数组， 返回条件为true的值 --> <script> /*需求: 1. 输出第一个6的下标 2. 输出最后一个6的下标 3. 输出所有元素的值和下标 4. 根据arr产生一个新数组,要求每个元素都比原来大10 5. 根据arr产生一个新数组, 返回的每个元素要大于4 */ arr=[2,1,3,4,5,2,8,4,1] console.log(arr.indexOf(4)); console.log(arr.lastIndexOf(4)); arr.forEach(function(item,index){ console.log(item,index) }) var arr1=arr.map(function(item,index){ return item+10; }); console.log(arr1,arr) var arr2=arr.filter(function(item,index){ return item>3 }) console.log(arr,arr2) </script>
06.Function扩展
<!-- 1. Function.prototype.bind(obj) : * 作用: 将函数内的this绑定为obj, 并将函数返回 2. 面试题: 区别bind()与call()和apply()? * 都能指定函数中的this * call()/apply()是立即调用函数 * bind()是将函数返回 --> <script type="text/javascript"> var obj={username:'kobe'}; function foo(){ console.log(this) } console.log(foo(obj)) console.log(foo.call(obj)) console.log(foo.apply(foo)) function foo2(data){ console.log(this,data) } // console.log(foo2.call(obj,33))//直接从第二个参数开始，依次传入 // console.log(foo2.apply(obj,[22]))//第二个参数必须是数组，传入放在数组里 //bind的特点：绑定完this不会立即调用当前的函数，而是将函数返回 //bind传参的方式同call一样 // var bar=foo.bind(obj) // console.log(bar) // bar() //foo2.bind(obj,33)() setTimeout(function(){ console.log(this) }.bind(obj),1000) </script>
07.let关键字
<button >按钮1</button> <button >按钮2</button> <button >按钮3</button> <script type="text/javascript"> let username='kobe'; console.log(username); let btns=document.getElementsByTagName('button'); for(let i=0;i<btns.length;i++){ var btn=btns[i]; /*(function(i){ btn.onclick=function(){ alert(i);} })(i)*/ btn.onclick=function(){ alert(i);} } </script>
08.ES6字符串简写
<script> let username='kobe'; let age=39; let obj={ username,//同名的属性可以省略不写 age, getName(){//可以上略函数的function return this.username } } console.log(obj) console.log(obj.getName()) </script>
09.箭头函数
<button id="btn1">测试箭头函数this_1</button> <button id="btn2">测试箭头函数this_2</button> <!-- * 作用: 定义匿名函数 * 基本语法: * 没有参数: () => console.log('xxxx') * 一个参数: i => i+2 * 大于一个参数: (i,j) => i+j * 函数体不用大括号: 默认返回结果 * 函数体如果有多个语句, 需要用{}包围，若有需要返回的内容，需要手动返回 * 使用场景: 多用来定义回调函数 * 箭头函数的特点： 1、简洁 2、箭头函数没有自己的this，箭头函数的this不是调用的时候决定的，而是在定义的时候处在的对象就是它的this 3、扩展理解： 箭头函数的this看外层的是否有函数， 如果有，外层函数的this就是内部箭头函数的this， 如果没有，则this是window。 --> <script> // let fun=function(){ // console.log('我是箭头函数') // } let fun=()=>console.log('我是箭头函数') fun(); //形参的情况 //1、没有形参的时候 let fun1=()=>console.log('我是箭头函数'); fun1(); //2、只有一个形参的时候()可以省略 let fun2=a=>console.log(a); fun2('aaa'); //3、两个及两个以上的形参的时候()不能省略 let fun3=(x,y)=>console.log(x,y) fun3(25,36) //函数体的情况 //1、函数体只有一条语句或者是表达式的时候{}可以省略-->会自动返回语句执行的结果或者是表达式的结果 let fun4=(x,y)=>x+y; console.log(fun4(24,36)); //2.函数体不止一条语句或者是表达式的情况{}不可以省略 let fun5=(x,y)=>{ console.log(x,y); return x+y; } console.log(fun5(35,49)); let btn1=document.getElementById('btn1'); let btn2=document.getElementById('btn2'); btn1.onclick=function(){ console.log(this) } //let that=this; var obj={ username:'箭头函数', getName:()=>{ btn2.onclick=()=>{ console.log(this) }; } }; obj.getName(); </script>
10.点点运算符
<!-- 1. rest(可变)参数 * 用来取代arguments 但比 arguments 灵活,只能是最后部分形参参数 function fun(...values) { console.log(arguments); arguments.forEach(function (item, index) { console.log(item, index); }); console.log(values); values.forEach(function (item, index) { console.log(item, index); }) } fun(1,2,3); 2. 扩展运算符 let arr1 = [1,3,5]; let arr2 = [2,...arr1,6]; arr2.push(...arr1); --> <script> function foo(a,...value){ console.log(arguments); //arguments.callee(); console.log(value) // arguments.forEach(function(item,index){ // console.log(item,index); // }) value.forEach(function(item,index){ console.log(item,index); }) } foo(2,65,33,45); let arr=[1,6]; let arr1=[2,3,4,5]; arr=[1,...arr1,6]; console.log(arr) console.log(...arr) </script>
11.promise函数
<!-- 1. 理解: * Promise对象: 代表了未来某个将要发生的事件(通常是一个异步操作) * 有了promise对象, 可以将异步操作以同步的流程表达出来, 避免了层层嵌套的回调函数(俗称'回调地狱') * ES6的Promise是一个构造函数, 用来生成promise实例 2. 使用promise基本步骤(2步): * 创建promise对象 let promise = new Promise((resolve, reject) => { //初始化promise状态为 pending //执行异步操作 if(异步操作成功) { resolve(value);//修改promise的状态为fullfilled } else { reject(errMsg);//修改promise的状态为rejected } }) * 调用promise的then() promise.then(function( result => console.log(result), errorMsg => alert(errorMsg) )) 3. promise对象的3个状态 * pending: 初始化状态 * fullfilled: 成功状态 * rejected: 失败状态 4. 应用: * 使用promise实现超时处理 * 使用promise封装处理ajax请求 let request = new XMLHttpRequest(); request.onreadystatechange = function () { } request.responseType = 'json'; request.open("GET", url); request.send(); --> <script> /* //创建promise对象 let promise=new Promise((resolve,reject)=>{ //初始化promise状态；pending：初始化 console.log('111') //执行异步操作，通常是发送ajax请求，开启定时器 setTimeout(()=>{ console.log('333'); //根据异步任务的返回结果来去修改promise的状态 //异步任务执行成功 //resolve('哈哈');//修改promise的状态为 fullfilled:成功的状态 //异步任务执行失败 reject('555');//修改promise的状态为 rejected 失败的状态 },2000) }) console.log('222'); promise .then((data)=>{//成功的回调 console.log(data,'成功了.....'); },(error)=>{//失败的回调 console.log(error,'失败了....') }, ) */ //定义获取新闻的功能函数 function getNews(url){ let promise=new Promise((resolve,reject)=>{ //状态：初始化 //执行异步任务 //创建xmlHttp实例对象 let xmlHttp=new XMLHttpRequest(); //绑定监听 readyState xmlHttp.onreadystatechange=function(){ if(xmlHttp.readyState===4){//请求成功 if(xmlHttp.status===200){ // console.log(xmlHttp.responseText); //修改状态 resolve(xmlHttp.responseText);//修改promise的状态为成功的状态 }else{//请求失败 reject('暂时没有新闻内容!!'); } } }; //open设置请求的方式以及url xmlHttp.open('GET',url); // xmlHttp.send() }) return promise } getNews('http://localhost:3000/news?id=2') .then((data)=>{ console.log(data) //发送请求获取评论内容准备url let commentsUrl=JSON.parse(data).commentsUrl; let url='http://localhost:3000'+commentsUrl; //发送请求 return getNews(url); }, (error)=>{ console.log(error) }) .then((data)=>{ console.log(data) }, ()=>{ }) </script>
12.symbol用法
<!-- 前言：ES5中对象的属性名都是字符串，容易造成重名，污染环境 Symbol： 概念：ES6中的添加了一种原始数据类型symbol(已有的原始数据类型：String, Number, boolean, null, undefined, 对象) 特点： 1、Symbol属性对应的值是唯一的，解决命名冲突问题 2、Symbol值不能与其他数据进行计算，包括同字符串拼串 3、for in, for of遍历时不会遍历symbol属性。 使用： 1、调用Symbol函数得到symbol值 let symbol = Symbol(); let obj = {}; obj[symbol] = 'hello'; 2、传参标识 let symbol = Symbol('one'); let symbol2 = Symbol('two'); console.log(symbol);// Symbol('one') console.log(symbol2);// Symbol('two') 3、内置Symbol值 * 除了定义自己使用的Symbol值以外，ES6还提供了11个内置的Symbol值，指向语言内部使用的方法。 - Symbol.iterator * 对象的Symbol.iterator属性，指向该对象的默认遍历器方法(后边讲) --> <script> //创建symbol属性值 let symbol=Symbol(); console.log(symbol); let obj={username:'kobe',age:39}; obj[symbol]='hello'; console.log(obj); let symbol2=Symbol('one'); let symbol3=Symbol('two'); console.log(symbol2===symbol3); console.log(symbol2,symbol3) //可以去定义常量 const Person_key=Symbol('person_key'); console.log(Person_key); const myIterable={}; myIterable[Symbol.iterator]=function*(){ yield 1; yield 2; yield 3; }; console.log([...myIterable]) </script>
13.Iterator对象
<!-- 概念： iterator是一种接口机制，为各种不同的数据结构提供统一的访问机制 作用： 1、为各种数据结构，提供一个统一的、简便的访问接口； 2、使得数据结构的成员能够按某种次序排列 3、ES6创造了一种新的遍历命令for...of循环，Iterator接口主要供for...of消费。 工作原理： - 创建一个指针对象(遍历器对象)，指向数据结构的起始位置。 - 第一次调用next方法，指针自动指向数据结构的第一个成员 - 接下来不断调用next方法，指针会一直往后移动，直到指向最后一个成员 - 每调用next方法返回的是一个包含value和done的对象，{value: 当前成员的值,done: 布尔值} * value表示当前成员的值，done对应的布尔值表示当前的数据的结构是否遍历结束。 * 当遍历结束的时候返回的value值是undefined，done值为false 原生具备iterator接口的数据(可用for of遍历) 1、Array 2、arguments 3、set容器 4、map容器 5、String 。。。 --> <script> //模拟指针对象(遍历器对象) function myIterator(arr){//iterator接口 let nextIndex=0;//记录指针的位置 return {//遍历器对象 next:function(){ return nextIndex<arr.length?{value:arr[nextIndex++],done:false}:{value:undefined,done:false} //return {value:arr[nextIndex++],done:false} } } } let arr=[1,4,65,'abc']; let iteratorObj=myIterator(arr); console.log(iteratorObj.next()) console.log(iteratorObj.next()) console.log(iteratorObj.next()) console.log(iteratorObj.next()) console.log(iteratorObj.next()) console.log(iteratorObj.next()) //将Iterator接口部署到指定的数据类型上，可以使用for of 去循环遍历 //数组，字符串，arguments，set容器。map容器 for (let i of arr){ console.log(i) } let str ='abcdef'; for(let i of str){ console.log(i) } function fun(){ for(let i of arguments){ console.log(i); } } fun(1,4,5,'abc') //等同于在指定的数据内结构上部署了Iterator接口 //当使用for of 去遍历某一个数据结构的时候，首先去找symbol.iterator,找到了就去遍历，没有找到的话不能遍历 xxx is not iterable let targetData={ [Symbol.iterator]:function(){ let nextIndex=0;//记录指针的位置 return {//遍历器对象 next:function(){ return nextIndex<this.length?{value:this[nextIndex++],done:false}:{value:undefined,done:false} //return {value:arr[nextIndex++],done:false} }} } } //使用三点运算符，结构赋值，默认去调用iteartor接口 let arr2=[1,6] let arr3=[2,3,4,5] arr2=[1,...arr3,6] console.log(arr2) let [a,b]=arr2 console.log(a,b) </script>
14.generator函数
<!-- Generator函数 概念： 1、ES6提供的解决异步编程的方案之一 2、Generator函数是一个状态机，内部封装了不同状态的数据， 3、用来生成遍历器对象 4、可暂停函数(惰性求值), yield可暂停，next方法可启动。每次返回的是yield后的表达式结果 特点： 1、function 与函数名之间有一个星号 2、内部用yield表达式来定义不同的状态 例如： function* generatorExample(){ let result = yield 'hello'; // 状态值为hello yield 'generator'; // 状态值为generator } 3、generator函数返回的是指针对象(接11章节里iterator)，而不会执行函数内部逻辑 4、调用next方法函数内部逻辑开始执行，遇到yield表达式停止，返回{value: yield后的表达式结果/undefined, done: false/true} 5、再次调用next方法会从上一次停止时的yield处开始，直到最后 6、yield语句返回结果通常为undefined， 当调用next方法时传参内容会作为启动时yield语句的返回值。 --> <script src="./js/jquery.js"></script> <script> function *myGenerator(){ console.log('开始执行') let result= yield 'hello'; console.log(result) console.log('暂停后，再次执行') yield 'generator'; console.log('遍历完毕，结束'); return "返回结果" } let MG= myGenerator();//返回的指针对象 console.log(MG) console.log(MG.next()); console.log(MG.next('qqq')); console.log(MG.next()); //对象的symbol.iterator属性 指向遍历器对象 let obj={username:'kobe',age:39}; obj[Symbol.iterator]=function *myTest(){ yield 1 yield 2 yield 3 } for (let i of obj){ console.log(i) } // 对象的symbol.iterator属性 指向遍历器对象 // 案例练习 /* * 需求： * 1、发送ajax请求获取新闻内容 * 2、新闻内容获取成功后再次发送请求，获取对应的新闻评论内容 * 3、新闻内容获取失败则不需要再次发送请求。 * * */ function getNews(url){ $.get(url,function(data){ console.log(data) let url='http://localhost:3000'+data.commentsUrl; SX.next(url); }) } function *sendXml(){ let url=yield getNews('http://localhost:3000/news?id=2') yield getNews(url) } //获取遍历器对象 let SX=sendXml(); SX.next(); </script>
15.async函数
<!-- async函数(源自ES2017) 概念： 真正意义上去解决异步回调的问题，同步流程表达异步操作 本质： Generator的语法糖 语法： async function foo(){ await 异步操作; await 异步操作； } 特点： 1、不需要像Generator去调用next方法，遇到await等待，当前的异步操作完成就往下执行 2、返回的总是Promise对象，可以用then方法进行下一步操作 3、async取代Generator函数的星号*，await取代Generator的yield 4、语意上更为明确，使用简单，经临床验证，暂时没有任何副作用 --> <script> /* //async 基本使用 async function foo(){ return new Promise(resolve=>{ // setTimeout(function(){ // resolve(); // },2000) setTimeout(resolve,2000); }) } async function test(){ console.log('开始执行',new Date().toTimeString()); await foo(); console.log('执行完毕',new Date().toTimeString()); } test(); */ /* //async 里await返回值 function test2(){ return 'xxxx' } async function asyncPrint(){ // let result=await test2() let result=await Promise.resolve('promise'); console.log(result) result=await Promise.reject('失败了.....') console.log(result) } asyncPrint(); */ //获取新闻内容 async function getNews(url){ return new Promise((resolve,reject)=>{ $.ajax({ method:'GET', url, success:data=>resolve(data), error:error=>resolve(false) // success:function(data){ // resolve(); // }, // error:function(error){ // reject(); // } }) }) } async function sendXml(){ let result= await getNews('http://localhost:3000/news?id=2'); console.log(result) if (!result){alert('暂时没有新闻推送...');return;} result=await getNews('http://localhost:3000'+result.commentsUrl) console.log(result) } sendXml() </script>
16.class
<!-- 1. 通过class定义类/实现类的继承 2. 在类中通过constructor定义构造方法 3. 通过new来创建类的实例 4. 通过extends来实现类的继承 5. 通过super调用父类的构造方法 6. 重写从父类中继承的一般方法 --> <script> /* function Person(name,age){ this.name=name; this.age=age; } let person=new Person('kobe',39); console.log(person) */ //定义一个人物的类 class Person{ //类的构造方法 constructor(name,age){ this.name=name; this.age=age; } //类的一般方法 showName(){ console.log('调用父类的方法') console.log(this.name,this.age) } } let person =new Person('kobe',39); console.log(person); person.showName(); //子类 class StarPerson extends Person{ constructor(name,age,salary){ super(name,age);//调用父类的构造方法 this.salary=salary; } //父类方法重写 showName(){ console.log('调用子类的方法') console.log(this.name,this.age,this.salary) } } let p1=new StarPerson('wade',36,10000000); console.log(p1); p1.showName() </script>
17.数字进制
<!-- 1. 二进制与八进制数值表示法: 二进制用0b, 八进制用0o 2. Number.isFinite(i) : 判断是否是有限大的数 3. Number.isNaN(i) : 判断是否是NaN 4. Number.isInteger(i) : 判断是否是整数 5. Number.parseInt(str) : 将字符串转换为对应的数值 6. Math.trunc(i) : 直接去除小数部分 1. includes(str) : 判断是否包含指定的字符串 2. startsWith(str) : 判断是否以指定字符串开头 3. endsWith(str) : 判断是否以指定字符串结尾 4. repeat(count) : 重复指定次数 --> <script> console.log(0b1010);//10 console.log(0o56);//46 console.log(Number.isFinite(Infinity)); console.log(Number.isNaN(NaN)); console.log(Number.isInteger(123.12)); console.log(Number.isInteger(123.0)); console.log(Number.parseInt('123abc123')); console.log(Number.parseInt('a123sd123')); console.log(Math.trunc(123.123)); let str='abcde' console.log(str.includes('a')) console.log(str.startsWith('a')) console.log(str.endsWith('e')) console.log(str.repeat(2)) </script>
18.数组扩展
<!-- 1. Array.from(v) : 将伪数组对象或可遍历对象转换为真数组 2. Array.of(v1, v2, v3) : 将一系列值转换成数组 3. find(function(value, index, arr){return true}) : 找出第一个满足条件返回true的元素 4. findIndex(function(value, index, arr){return true}) : 找出第一个满足条件返回true的元素下标 --> <h1>你好，世界！</h1> <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <script> let btns=document.getElementsByTagName('button'); Array.from(btns).forEach(function(item,index){ console.log(item) }) let arr=Array.of(1,4,'aba',true); console.log(arr) let arr2=[2,3,4,2,5,7,3,6] let result=arr2.findIndex(function(item,index){ return item>4; }) console.log(result) </script>
19.对象扩展
<!-- 1. Object.is(v1, v2) * 判断2个数据是否完全相等 2. Object.assign(target, source1, source2..) * 将源对象的属性复制到目标对象上 3. 直接操作 __proto__ 属性 let obj2 = {}; obj2.__proto__ = obj1; --> <script> console.log(0==-0);//true console.log(NaN==NaN);//false console.log(Object.is(0,-0));//false console.log(Object.is(NaN,NaN));//true let obj={}; let obj1={username:'anverson',age:42}; let obj2={sex:'男'}; Object.assign(obj,obj1,obj2); console.log(obj); </script>
20.对象拷贝
<!-- 1、数据类型： * 数据分为基本的数据类型(String, Number, boolean, Null, Undefined)和对象数据类型 - 基本数据类型： 特点： 存储的是该对象的实际数据 - 对象数据类型： 特点： 存储的是该对象在栈中引用，真实的数据存放在堆内存里 2、复制数据 - 基本数据类型存放的就是实际的数据，可直接复制 let number2 = 2; let number1 = number2; - 克隆数据：对象/数组 1、区别： 浅拷贝/深度拷贝 判断： 拷贝是否产生了新的数据还是拷贝的是数据的引用 知识点：对象数据存放的是对象在栈内存的引用，直接复制的是对象的引用 let obj = {username: 'kobe'} let obj1 = obj; // obj1 复制了obj在栈内存的引用 2、常用的拷贝技术 1). arr.concat(): 数组浅拷贝 2). arr.slice(): 数组浅拷贝 3). JSON.parse(JSON.stringify(arr/obj)): 数组或对象深拷贝, 但不能处理函数数据 4). 浅拷贝包含函数数据的对象/数组 5). 深拷贝包含函数数据的对象/数组 --> <script> /* //不会影响元数据 let str='abcd'; let str2=str; console.log(str2); str2=''; console.log(str); let bool1=true; let bool2=bool1; bool2=false; console.log(bool1); let obj={username:'kobe',age:39}; let obj1=obj; console.log(obj1); obj1.username='wade'; console.log(obj.username); //拷贝数组/对象 没有生成新的数据而是复制了一份引用。 let arr=[1,4,{username:'kobe',age:39}]; let arr2=arr; arr[0]='abcd'; console.log(arr,arr2); */ /* *拷贝数据： * 基本数据类型： * 拷贝后会生成一份新的数据，修改拷贝以后的数据不会影响元数据 * 对象/数组 * 拷贝后不会生成新的数据，而是拷贝是引用。修改拷贝以后的数据会影响原来的数据 * 拷贝数据的方法 * 1.直接赋值给一个变量 //浅拷贝 * 2.Object.assign() //浅拷贝 * 3.Array.prototype.concat()//浅拷贝 * 4.Array.prototype.slice()//浅拷贝 * 5.JSON.parse(JSON.stringify())//深拷贝(深度克隆)，拷贝的数据里不能有函数 ，处理不了 * 浅拷贝(对象/数组)： * 特点：拷贝的引用，修改拷贝以后的数据会影响原数据 * 深拷贝(深度克隆) * 特点：拷贝的时候生成新数据，修改拷贝以后的数据不会影响原数据 * */ /* let obj={username:'kobe'}; let obj2=Object.assign(obj); console.log(obj2);//{username: "kobe"} obj2.username='wade'; console.log(obj);//{username: "wade"} let arr=[1,3,{username:'kobe'}] //let testArr=[2,4] let arr2=arr.concat(); console.log(arr2); arr2[2].username='wade'; console.log(arr); let arr3=arr.slice(); arr3[2].username='anverson'; console.log(arr) console.log('--------'); let arr4=JSON.parse(JSON.stringify(arr)); console.log(arr4); arr4[2].username='duncan'; console.log(arr,arr4); */ /* * 思考： * 如何实现深度拷贝(克隆) * 拷贝的数据里面由对象/数组 * 拷贝的数据里不能有对象/数组 * 即使有对象/数组可以继续遍历对象、数组拿到里边每一项值，一直到拿到是基本数据类型， * 然后再去复制，就是深度拷贝 * */ /* * 如何判断数据类型:arr--->Array null-->Null * 1.typeof返回的数据类型：String,Number,Boolean,Undefined,Object,Function * 2.Object.prototype.toString.call() * */ let result='abcd'; result=null; // result=[1,2]; //console.log(Object.prototype.toString.call(result).slice(8,-1)) //for in 循环 对象(属性名) 数组(下标) let obj={username:'kobe',age:39}; for(let i in obj){ console.log(i) } let arr=[1,3,'abc'] for(let i in arr){ console.log(i) } //定义检测数据类型的功能函数 function checkedType(target){ return Object.prototype.toString.call(target).slice(8,-1) } //实现深度克隆-->对象/数组 function clone(target){ //判断拷贝的数据类型 //初始化变量result 成为最终克隆的数据 let result,targetType=checkedType(target); if (targetType==='Object'){ result={}; }else if(targetType==='Array'){ result=[]; }else{ return target; } //遍历目标数据 for(let i in target){ //获取遍历数据结构的每一项值； let value=target[i]; //判断目标结构里的每一项值是否存在对象/数组 if(checkedType(value)==='Object'||checkedType(value)==='Array'){//对象/数组里嵌套了对象/数组 //继续遍历获取到的value值 result[i]=clone(value) }else{//获取到的value值是基本的数据类型或者是函数 result[i]=value ; } } return result; } let arr3=[1,2,{username:'kobe'}] let arr4=clone(arr3); console.log(arr4); arr4[2].username='wade'; console.log(arr3,arr4); let obj3={username:'kobe',age:39}; let obj4=clone(obj3); console.log(obj4) obj4.username='wade'; console.log(arr4,arr3) </script>
21.set和map对象
<!-- 1. Set容器 : 无序不可重复的多个value的集合体 * Set() * Set(array) * add(value) * delete(value) * has(value) * clear() * size 2. Map容器 : 无序的 key不重复的多个key-value的集合体 * Map() * Map(array) * set(key, value)//添加 * get(key) * delete(key) * has(key) * clear() * size --> <script> /* let set=new Set([1,2,3,4,3,2,5,3,6]); console.log(set) set.add(7) console.log(set.size,set) console.log(set.has(8))//false console.log(set.has(7))//true */ let map=new Map([['aaa','username1'],[39,'age']]); console.log(map) map.set(77,'hahah') console.log(map) </script>
22.for，of循环
<!-- for(let value of target){}循环遍历 1. 遍历数组 2. 遍历Set 3. 遍历Map 4. 遍历字符串 5. 遍历伪数组 --> <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <script> // let set=new Set([1,2,3,5,4,6,7]); // for(let i of set){ // console.log(i) // } let arr=[1,2,3,2,4,5,3]; let arr1=arr; arr=[]; let set=new Set(arr1) for(let i of set){ arr.push(i) } console.log(arr) </script>
23.遍历伪数组
<!-- 1. 指数运算符(幂): ** 2. Array.prototype.includes(value) : 判断数组中是否包含指定value --> <script> console.log(3**3) let arr=[1,3,4,'abc']; //console.log(arr.includes('a')); console.log(Array.prototype.includes('a')) </script>
