搜索到
104
篇与
的结果
-
Web APIs（二） 1.1. 排他操作1.1.1 排他思想如果有同一组元素，我们想要某一个元素实现某种样式， 需要用到循环的排他思想算法：所有元素全部清除样式（干掉其他人）给当前元素设置样式 （留下我自己）注意顺序不能颠倒，首先干掉其他人，再设置自己 <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <button>按钮4</button> <button>按钮5</button> <script> // 1. 获取所有按钮元素 var btns = document.getElementsByTagName('button'); // btns得到的是伪数组 里面的每一个元素 btns[i] for (var i = 0; i < btns.length; i++) { btns[i].onclick = function() { // (1) 我们先把所有的按钮背景颜色去掉 干掉所有人 for (var i = 0; i < btns.length; i++) { btns[i].style.backgroundColor = ''; } // (2) 然后才让当前的元素背景颜色为pink 留下我自己 this.style.backgroundColor = 'pink'; } } </script>1.2 案例：百度换肤<body> <ul class="baidu"> <li><img src="images/1.jpg"></li> <li><img src="images/2.jpg"></li> <li><img src="images/3.jpg"></li> <li><img src="images/4.jpg"></li> </ul> <script> // 1. 获取元素 var imgs = document.querySelector('.baidu').querySelectorAll('img'); // console.log(imgs); // 2. 循环注册事件 for (var i = 0; i < imgs.length; i++) { imgs[i].onclick = function() { // this.src 就是我们点击图片的路径 images/2.jpg // console.log(this.src); // 把这个路径 this.src 给body 就可以了 document.body.style.backgroundImage = 'url(' + this.src + ')'; } } </script> </body>1.3 案例：表格隔行变色 <script> // 1.获取元素 获取的是 tbody 里面所有的行 var trs = document.querySelector('tbody').querySelectorAll('tr'); // 2. 利用循环绑定注册事件 for (var i = 0; i < trs.length; i++) { // 3. 鼠标经过事件 onmouseover trs[i].onmouseover = function() { // console.log(11); this.className = 'bg'; } // 4. 鼠标离开事件 onmouseout trs[i].onmouseout = function() { this.className = ''; } } </script>1.4 案例：全选 <script> // 1. 全选和取消全选做法： 让下面所有复选框的checked属性（选中状态） 跟随 全选按钮即可 // 获取元素 var j_cbAll = document.getElementById('j_cbAll'); var j_tbs = document.getElementById('j_tb').getElementsByTagName('input'); // 全选按钮注册事件 j_cbAll.onclick = function() { // this.checked 当前复选框的选中状态 console.log(this.checked); for (var i = 0; i < j_tbs.length; i++) { j_tbs[i].checked = this.checked; } } // 给所有的子复选框注册单击事件 for (var i = 0; i < j_tbs.length; i++) { j_tbs[i].onclick = function() { // flag 控制全选按钮是否选中 var flag = true; // 每次点击下面的复选框都要循环检查者4个小按钮是否全被选中 for (var i = 0; i < j_tbs.length; i++) { if (!j_tbs[i].checked) { flag = false; break; } } // 设置全选按钮的状态 j_cbAll.checked = flag; } } </script>1.5. 自定义属性操作1.5.1 获取属性值 <div id="demo" index="1" class="nav"></div> <script> var div = document.querySelector('div'); // 1. 获取元素的属性值 // (1) element.属性 console.log(div.id); //(2) element.getAttribute('属性') get得到获取 attribute 属性的意思 我们程序员自己添加的属性我们称为自定义属性 index console.log(div.getAttribute('id')); console.log(div.getAttribute('index')); </script>1.5.2. 设置属性值 // 2. 设置元素属性值 // (1) element.属性= '值' div.id = 'test'; div.className = 'navs'; // (2) element.setAttribute('属性', '值'); 主要针对于自定义属性 div.setAttribute('index', 2); div.setAttribute('class', 'footer'); // class 特殊 这里面写的就是1.5.3. 移出属性 // class 不是className // 3 移除属性 removeAttribute(属性) div.removeAttribute('index');1.5.4. 案例：tab栏 <script> // 获取元素 var tab_list = document.querySelector('.tab_list'); var lis = tab_list.querySelectorAll('li'); var items = document.querySelectorAll('.item'); // for循环，给选项卡绑定点击事件 for (var i = 0; i < lis.length; i++) { // 开始给5个小li 设置索引号 lis[i].setAttribute('index', i); lis[i].onclick = function() { // 1. 上的模块选项卡，当前这一个底色会是红色，其余不变（排他思想） // 干掉所有人 其余的li清除 class 这个类 for (var i = 0; i < lis.length; i++) { lis[i].className = ''; } // 留下我自己 this.className = 'current'; // 2. 下面的显示内容模块 var index = this.getAttribute('index'); console.log(index); // 干掉所有人 让其余的item 这些div 隐藏 for (var i = 0; i < items.length; i++) { items[i].style.display = 'none'; } // 留下我自己 让对应的item 显示出来 items[index].style.display = 'block'; } } </script>1.5.5. H5自定义属性自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。自定义属性获取是通过getAttribute(‘属性’) 获取。但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。H5给我们新增了自定义属性： <div getTime="20" data-index="2" data-list-name="andy"></div> <script> var div = document.querySelector('div'); // console.log(div.getTime); console.log(div.getAttribute('getTime')); div.setAttribute('data-time', 20); console.log(div.getAttribute('data-index')); console.log(div.getAttribute('data-list-name')); // h5新增的获取自定义属性的方法 它只能获取data-开头的 // dataset 是一个集合里面存放了所有以data开头的自定义属性 console.log(div.dataset); console.log(div.dataset.index); console.log(div.dataset['index']); // 如果自定义属性里面有多个-链接的单词，我们获取的时候采取 驼峰命名法 console.log(div.dataset.listName); console.log(div.dataset['listName']); </script>1.6. 节点操作1.6.1. 节点概述 网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM 中，节点使用 node 来表示。 HTML DOM 树中的所有节点均可通过 JavaScript 进行访问，所有 HTML 元素（节点）均可被修改，也可以创建或删除。 一般地，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性。1.6.2. 节点层级 利用 DOM 树可以把节点划分为不同的层级关系，常见的是父子兄层级关系。1.6.3. 父级节点 <div class="demo"> <div class="box"> <span class="erweima">×</span> </div> </div> <script> // 1. 父节点 parentNode var erweima = document.querySelector('.erweima'); // var box = document.querySelector('.box'); // 得到的是离元素最近的父级节点(亲爸爸) 如果找不到父节点就返回为 null console.log(erweima.parentNode); </script>1.6.4. 子节点所有子节点子元素节点 <ul> <li>我是li</li> <li>我是li</li> <li>我是li</li> <li>我是li</li> </ul> <script> // DOM 提供的方法（API）获取 var ul = document.querySelector('ul'); var lis = ul.querySelectorAll('li'); // 1. 子节点 childNodes 所有的子节点 包含 元素节点 文本节点等等 console.log(ul.childNodes); console.log(ul.childNodes[0].nodeType); console.log(ul.childNodes[1].nodeType); // 2. children 获取所有的子元素节点 也是我们实际开发常用的 console.log(ul.children); </script>第1个子节点最后1个子节点第1个子元素节点最后1个子元素节点 实际开发中，firstChild 和 lastChild 包含其他节点，操作不方便，而 firstElementChild 和 lastElementChild 又有兼容性问题，那么我们如何获取第一个子元素节点或最后一个子元素节点呢？ <ol> <li>我是li1</li> <li>我是li2</li> <li>我是li3</li> <li>我是li4</li> <li>我是li5</li> </ol> <script> var ol = document.querySelector('ol'); // 1. firstChild 第一个子节点 不管是文本节点还是元素节点 console.log(ol.firstChild); console.log(ol.lastChild); // 2. firstElementChild 返回第一个子元素节点 ie9才支持 console.log(ol.firstElementChild); console.log(ol.lastElementChild); // 3. 实际开发的写法 既没有兼容性问题又返回第一个子元素 console.log(ol.children[0]); console.log(ol.children[ol.children.length - 1]); </script>1.6.5. 案例：新浪下拉菜单 <script> // 1. 获取元素 var nav = document.querySelector('.nav'); var lis = nav.children; // 得到4个小li // 2.循环注册事件 for (var i = 0; i < lis.length; i++) { lis[i].onmouseover = function() { this.children[1].style.display = 'block'; } lis[i].onmouseout = function() { this.children[1].style.display = 'none'; } } </script>1.6.6. 兄弟节点下一个兄弟节点上一个兄弟节点 <div>我是div</div> <span>我是span</span> <script> var div = document.querySelector('div'); // 1.nextSibling 下一个兄弟节点 包含元素节点或者 文本节点等等 console.log(div.nextSibling); console.log(div.previousSibling); // 2. nextElementSibling 得到下一个兄弟元素节点 console.log(div.nextElementSibling); console.log(div.previousElementSibling); </script>下一个兄弟元素节点（有兼容性问题）上一个兄弟元素节点（有兼容性问题） function getNextElementSibling(element) { var el = element; while (el = el.nextSibling) { if (el.nodeType === 1) { return el; } } return null; } 1.6.7. 创建节点1.6.8. 添加节点 <ul> <li>123</li> </ul> <script> // 1. 创建节点元素节点 var li = document.createElement('li'); // 2. 添加节点 node.appendChild(child) node 父级 child 是子级 后面追加元素 var ul = document.querySelector('ul'); ul.appendChild(li); // 3. 添加节点 node.insertBefore(child, 指定元素); var lili = document.createElement('li'); ul.insertBefore(lili, ul.children[0]); // 4. 我们想要页面添加一个新的元素 ： 1. 创建元素 2. 添加元素 </script>1.6.9. 案例：简单版发布留言<body> <textarea name="" id=""></textarea> <button>发布</button> <ul> </ul> <script> // 1. 获取元素 var btn = document.querySelector('button'); var text = document.querySelector('textarea'); var ul = document.querySelector('ul'); // 2. 注册事件 btn.onclick = function() { if (text.value == '') { alert('您没有输入内容'); return false; } else { // console.log(text.value); // (1) 创建元素 var li = document.createElement('li'); // 先有li 才能赋值 li.innerHTML = text.value; // (2) 添加元素 // ul.appendChild(li); ul.insertBefore(li, ul.children[0]); } } </script> </body> -
Web APIs（一） 1.1. Web API介绍1.1.1 API的概念API（Application Programming Interface，应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，无需理解其内部工作机制细节，只需直接调用使用即可。举例解释什么是API。例如， C语言中有一个函数 fopen()可以打开硬盘上的文件，这个函数对于我们来说，就是一个C语言提供的打开文件的工具。 javascript中有一个函数alert()可以在页面弹一个提示框，这个函数就是js提供的一个弹框工具。这些工具（函数）由编程语言提供，内部的实现已经封装好了，我们只要学会灵活的使用这些工具即可。1.1.2 Web API的概念 Web API 是浏览器提供的一套操作浏览器功能和页面元素的 API ( BOM 和 DOM )。 现阶段我们主要针对于浏览器讲解常用的 API , 主要针对浏览器做交互效果。比如我们想要浏览器弹出一个警示框， 直接使用 alert(‘弹出’) MDN 详细 API : https://developer.mozilla.org/zh-CN/docs/Web/API 因为 Web API 很多，所以我们将这个阶段称为 Web APIs。 此处的 Web API 特指浏览器提供的一系列API(很多函数或对象方法)，即操作网页的一系列工具。例如：操作html标签、操作页面地址的方法。1.1.3 API 和 Web API 总结API 是为我们程序员提供的一个接口，帮助我们实现某种功能，我们会使用就可以了，不必纠结内部如何实现Web API 主要是针对于浏览器提供的接口，主要针对于浏览器做交互效果。Web API 一般都有输入和输出（函数的传参和返回值），Web API 很多都是方法（函数）学习 Web API 可以结合前面学习内置对象方法的思路学习1.2. DOM 介绍1.2.1 什么是DOM 文档对象模型（Document Object Model，简称DOM），是 W3C 组织推荐的处理可扩展标记语言（html或者xhtml）的标准编程接口。 W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。DOM是W3C组织制定的一套处理 html和xml文档的规范，所有的浏览器都遵循了这套标准。1.2.2. DOM树DOM树 又称为文档树模型，把文档映射成树形结构，通过节点对象对其处理，处理的结果可以加入到当前的页面。文档：一个页面就是一个文档，DOM中使用document表示节点：网页中的所有内容，在文档树中都是节点（标签、属性、文本、注释等），使用node表示标签节点：网页中的所有标签，通常称为元素节点，又简称为“元素”，使用element表示1.3. 获取元素为什么要获取页面元素？例如：我们想要操作页面上的某部分(显示/隐藏，动画)，需要先获取到该部分对应的元素，再对其进行操作。1.3.1. 根据ID获取语法：document.getElementById(id) 作用：根据ID获取元素对象 参数：id值，区分大小写的字符串 返回值：元素对象 或 null案例代码<body> <div id="time">2019-9-9</div> <script> // 因为我们文档页面从上往下加载，所以先得有标签 所以我们script写到标签的下面 var timer = document.getElementById('time'); console.log(timer); console.log(typeof timer); // console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法 console.dir(timer); </script> </body>1.3.2. 根据标签名获取元素语法：document.getElementsByTagName('标签名') 或者 element.getElementsByTagName('标签名') 作用：根据标签名获取元素对象 参数：标签名 返回值：元素对象集合（伪数组，数组元素是元素对象）案例代码<body> <ul> <li>知否知否，应是等你好久11</li> <li>知否知否，应是等你好久22</li> <li>知否知否，应是等你好久33</li> <li>知否知否，应是等你好久44</li> <li>知否知否，应是等你好久55</li> </ul> <ul id="nav"> <li>生僻字</li> <li>生僻字</li> <li>生僻字</li> <li>生僻字</li> <li>生僻字</li> </ul> <script> // 1.返回的是 获取过来元素对象的集合 以伪数组的形式存储的 var lis = document.getElementsByTagName('li'); console.log(lis); console.log(lis[0]); // 2. 我们想要依次打印里面的元素对象我们可以采取遍历的方式 for (var i = 0; i < lis.length; i++) { console.log(lis[i]); } // 3. element.getElementsByTagName() 可以得到这个元素里面的某些标签 var nav = document.getElementById('nav'); // 这个获得nav 元素 var navLis = nav.getElementsByTagName('li'); console.log(navLis); </script> </body>注意：getElementsByTagName()获取到是动态集合，即：当页面增加了标签，这个集合中也就增加了元素。1.3.3. H5新增获取元素方式案例代码<body> <div class="box">盒子1</div> <div class="box">盒子2</div> <div id="nav"> <ul> <li>首页</li> <li>产品</li> </ul> </div> <script> // 1. getElementsByClassName 根据类名获得某些元素集合 var boxs = document.getElementsByClassName('box'); console.log(boxs); // 2. querySelector 返回指定选择器的第一个元素对象 切记 里面的选择器需要加符号 .box #nav var firstBox = document.querySelector('.box'); console.log(firstBox); var nav = document.querySelector('#nav'); console.log(nav); var li = document.querySelector('li'); console.log(li); // 3. querySelectorAll()返回指定选择器的所有元素对象集合 var allBox = document.querySelectorAll('.box'); console.log(allBox); var lis = document.querySelectorAll('li'); console.log(lis); </script> </body>1.3.4 获取特殊元素（body，html）1.4. 事件基础1.4.1. 事件概述JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。简单理解： 触发--- 响应机制。 网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，我们可以在用户点击某按钮时产生一个 事件，然后去执行某些操作。1.4.2. 事件三要素事件源（谁）：触发事件的元素事件类型（什么事件）： 例如 click 点击事件事件处理程序（做啥）：事件触发后要执行的代码(函数形式)，事件处理函数案例代码<body> <button id="btn">唐伯虎</button> <script> // 点击一个按钮，弹出对话框 // 1. 事件是有三部分组成 事件源 事件类型 事件处理程序 我们也称为事件三要素 //(1) 事件源 事件被触发的对象 谁 按钮 var btn = document.getElementById('btn'); //(2) 事件类型 如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下 //(3) 事件处理程序 通过一个函数赋值的方式 完成 btn.onclick = function() { alert('点秋香'); } </script> </body>1.4.3. 执行事件的步骤案例代码<body> <div>123</div> <script> // 执行事件步骤 // 点击div 控制台输出 我被选中了 // 1. 获取事件源 var div = document.querySelector('div'); // 2.绑定事件 注册事件 // div.onclick // 3.添加事件处理程序 div.onclick = function() { console.log('我被选中了'); } </script> </body>1.4.4. 常见的鼠标事件1.4.5. 分析事件三要素下拉菜单三要素关闭广告三要素1.5. 操作元素 JavaScript的 DOM 操作可以改变网页内容、结构和样式，我们可以利用 DOM 操作元素来改变元素里面的内容、属性等。（注意：这些操作都是通过元素对象的属性实现的）1.5.1. 改变元素内容（获取或设置）innerText改变元素内容<body> <button>显示当前系统时间</button> <div>某个时间</div> <p>1123</p> <script> // 当我们点击了按钮， div里面的文字会发生变化 // 1. 获取元素 var btn = document.querySelector('button'); var div = document.querySelector('div'); // 2.注册事件 btn.onclick = function() { // div.innerText = '2019-6-6'; div.innerHTML = getDate(); } function getDate() { var date = new Date(); // 我们写一个 2019年 5月 1日 星期三 var year = date.getFullYear(); var month = date.getMonth() + 1; var dates = date.getDate(); var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']; var day = date.getDay(); return '今天是：' + year + '年' + month + '月' + dates + '日 ' + arr[day]; } </script> </body>innerText和innerHTML的区别获取内容时的区别： innerText会去除空格和换行，而innerHTML会保留空格和换行设置内容时的区别： innerText不会识别html，而innerHTML会识别案例代码<body> <div></div> <p> 我是文字 <span>123</span> </p> <script> // innerText 和 innerHTML的区别 // 1. innerText 不识别html标签 非标准 去除空格和换行 var div = document.querySelector('div'); // div.innerText = '<strong>今天是：</strong> 2019'; // 2. innerHTML 识别html标签 W3C标准 保留空格和换行的 div.innerHTML = '<strong>今天是：</strong> 2019'; // 这两个属性是可读写的 可以获取元素里面的内容 var p = document.querySelector('p'); console.log(p.innerText); console.log(p.innerHTML); </script> </body>1.5.2. 常用元素的属性操作获取属性的值元素对象.属性名设置属性的值元素对象.属性名 = 值案例代码<body> <button id="ldh">刘德华</button> <button id="zxy">张学友</button> <br> <img src="images/ldh.jpg" alt="" title="刘德华"> <script> // 修改元素属性 src // 1. 获取元素 var ldh = document.getElementById('ldh'); var zxy = document.getElementById('zxy'); var img = document.querySelector('img'); // 2. 注册事件 处理程序 zxy.onclick = function() { img.src = 'images/zxy.jpg'; img.title = '张学友思密达'; } ldh.onclick = function() { img.src = 'images/ldh.jpg'; img.title = '刘德华'; } </script> </body>1.5.3. 案例：分时问候1.5.4. 表单元素的属性操作获取属性的值元素对象.属性名设置属性的值元素对象.属性名 = 值表单元素中有一些属性如：disabled、checked、selected，元素对象的这些属性的值是布尔型。案例代码<body> <button>按钮</button> <input type="text" value="输入内容"> <script> // 1. 获取元素 var btn = document.querySelector('button'); var input = document.querySelector('input'); // 2. 注册事件 处理程序 btn.onclick = function() { // 表单里面的值 文字内容是通过 value 来修改的 input.value = '被点击了'; // 如果想要某个表单被禁用 不能再点击 disabled 我们想要这个按钮 button禁用 // btn.disabled = true; this.disabled = true; // this 指向的是事件函数的调用者 btn } </script> </body>1.5.5. 案例：仿京东显示密码1.5.6. 样式属性操作我们可以通过 JS 修改元素的大小、颜色、位置等样式。常用方式方式1：通过操作style属性元素对象的style属性也是一个对象！元素对象.style.样式属性 = 值;案例代码<body> <div></div> <script> // 1. 获取元素 var div = document.querySelector('div'); // 2. 注册事件 处理程序 div.onclick = function() { // div.style里面的属性 采取驼峰命名法 this.style.backgroundColor = 'purple'; this.style.width = '250px'; } </script> </body>案例：淘宝点击关闭二维码案例：循环精灵图背景案例：显示隐藏文本框内容方式2：通过操作className属性元素对象.className = 值;因为class是关键字，所有使用className。案例代码<body> <div class="first">文本</div> <script> // 1. 使用 element.style 获得修改元素样式 如果样式比较少 或者 功能简单的情况下使用 var test = document.querySelector('div'); test.onclick = function() { // this.style.backgroundColor = 'purple'; // this.style.color = '#fff'; // this.style.fontSize = '25px'; // this.style.marginTop = '100px'; // 2. 我们可以通过 修改元素的className更改元素的样式 适合于样式较多或者功能复杂的情况 // 3. 如果想要保留原先的类名，我们可以这么做 多类名选择器 // this.className = 'change'; this.className = 'first change'; } </script> </body>案例：密码框格式提示错误信息1.6. 今日总结
-
ES6语法 ES6相关概念（★★）什么是ES6ES 的全称是 ECMAScript , 它是由 ECMA 国际标准化组织,制定的一项脚本语言的标准化规范。为什么使用 ES6 ?每一次标准的诞生都意味着语言的完善，功能的加强。JavaScript语言本身也有一些令人不满意的地方。变量提升特性增加了程序运行时的不可预测性语法过于松散，实现相同的功能，不同的人可能会写出不同的代码ES6新增语法let（★★★）ES6中新增了用于声明变量的关键字let声明的变量只在所处于的块级有效 if (true) { let a = 10; } console.log(a) // a is not defined注意：使用let关键字声明的变量才具有块级作用域，使用var声明的变量不具备块级作用域特性。不存在变量提升console.log(a); // a is not defined let a = 20;暂时性死区利用let声明的变量会绑定在这个块级作用域，不会受外界的影响 var tmp = 123; if (true) { tmp = 'abc'; let tmp; } 经典面试题 var arr = []; for (var i = 0; i < 2; i++) { arr[i] = function () { console.log(i); } } arr[0](); arr[1](); 经典面试题图解：此题的关键点在于变量i是全局的，函数执行时输出的都是全局作用域下的i值。 let arr = []; for (let i = 0; i < 2; i++) { arr[i] = function () { console.log(i); } } arr[0](); arr[1](); 经典面试题图解：此题的关键点在于每次循环都会产生一个块级作用域，每个块级作用域中的变量都是不同的，函数执行时输出的是自己上一级（循环产生的块级作用域）作用域下的i值.小结let关键字就是用来声明变量的使用let关键字声明的变量具有块级作用域在一个大括号中 使用let关键字声明的变量才具有块级作用域 var关键字是不具备这个特点的防止循环变量变成全局变量使用let关键字声明的变量没有变量提升使用let关键字声明的变量具有暂时性死区特性const（★★★）声明常量，常量就是值（内存地址）不能变化的量具有块级作用域 if (true) { const a = 10; } console.log(a) // a is not defined声明常量时必须赋值const PI; // Missing initializer in const declaration常量赋值后，值不能修改const PI = 3.14; PI = 100; // Assignment to constant variable. const ary = [100, 200]; ary[0] = 'a'; ary[1] = 'b'; console.log(ary); // ['a', 'b']; ary = ['a', 'b']; // Assignment to constant variable.小结const声明的变量是一个常量既然是常量不能重新进行赋值，如果是基本数据类型，不能更改值，如果是复杂数据类型，不能更改地址值声明 const时候必须要给定值let、const、var 的区别使用 var 声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象使用 let 声明的变量，其作用域为该语句所在的代码块内，不存在变量提升使用 const 声明的是常量，在后面出现的代码中不能再修改该常量的值解构赋值（★★★）ES6中允许从数组中提取值，按照对应位置，对变量赋值，对象也可以实现解构数组解构 let [a, b, c] = [1, 2, 3]; console.log(a)//1 console.log(b)//2 console.log(c)//3 //如果解构不成功，变量的值为undefined对象解构 let person = { name: 'zhangsan', age: 20 }; let { name, age } = person; console.log(name); // 'zhangsan' console.log(age); // 20 let {name: myName, age: myAge} = person; // myName myAge 属于别名 console.log(myName); // 'zhangsan' console.log(myAge); // 20 小结解构赋值就是把数据结构分解，然后给变量进行赋值如果结构不成功，变量跟数值个数不匹配的时候，变量的值为undefined数组解构用中括号包裹，多个变量用逗号隔开，对象解构用花括号包裹，多个变量用逗号隔开利用解构赋值能够让我们方便的去取对象中的属性跟方法箭头函数（★★★）ES6中新增的定义函数的方式。() => {} //()：代表是函数； =>：必须要的符号，指向哪一个代码块；{}：函数体 const fn = () => {}//代表把一个函数赋值给fn函数体中只有一句代码，且代码的执行结果就是返回值，可以省略大括号 function sum(num1, num2) { return num1 + num2; } //es6写法 const sum = (num1, num2) => num1 + num2; 如果形参只有一个，可以省略小括号 function fn (v) { return v; } //es6写法 const fn = v => v; 箭头函数不绑定this关键字，箭头函数中的this，指向的是函数定义位置的上下文thisconst obj = { name: '张三'} function fn () { console.log(this);//this 指向 是obj对象 return () => { console.log(this);//this 指向 的是箭头函数定义的位置，那么这个箭头函数定义在fn里面，而这个fn指向是的obj对象，所以这个this也指向是obj对象 } } const resFn = fn.call(obj); resFn(); 小结箭头函数中不绑定this，箭头函数中的this指向是它所定义的位置，可以简单理解成，定义箭头函数中的作用域的this指向谁，它就指向谁箭头函数的优点在于解决了this执行环境所造成的一些问题。比如：解决了匿名函数this指向的问题（匿名函数的执行环境具有全局性），包括setTimeout和setInterval中使用this所造成的问题面试题var age = 100; var obj = { age: 20, say: () => { alert(this.age) } } obj.say();//箭头函数this指向的是被声明的作用域里面，而对象没有作用域的，所以箭头函数虽然在对象中被定义，但是this指向的是全局作用域剩余参数（★★）剩余参数语法允许我们将一个不定数量的参数表示为一个数组，不定参数定义方式，这种方式很方便的去声明不知道参数情况下的一个函数function sum (first, ...args) { console.log(first); // 10 console.log(args); // [20, 30] } sum(10, 20, 30) 剩余参数和解构配合使用let students = ['wangwu', 'zhangsan', 'lisi']; let [s1, ...s2] = students; console.log(s1); // 'wangwu' console.log(s2); // ['zhangsan', 'lisi'] ES6 的内置对象扩展Array 的扩展方法（★★）扩展运算符（展开语法）扩展运算符可以将数组或者对象转为用逗号分隔的参数序列 let ary = [1, 2, 3]; ...ary // 1, 2, 3 console.log(...ary); // 1 2 3,相当于下面的代码 console.log(1,2,3);扩展运算符可以应用于合并数组// 方法一 let ary1 = [1, 2, 3]; let ary2 = [3, 4, 5]; let ary3 = [...ary1, ...ary2]; // 方法二 ary1.push(...ary2);将类数组或可遍历对象转换为真正的数组let oDivs = document.getElementsByTagName('div'); oDivs = [...oDivs];构造函数方法：Array.from()将伪数组或可遍历对象转换为真正的数组//定义一个集合 let arrayLike = { '0': 'a', '1': 'b', '2': 'c', length: 3 }; //转成数组 let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']方法还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组 let arrayLike = { "0": 1, "1": 2, "length": 2 } let newAry = Array.from(arrayLike, item => item *2)//[2,4] 注意：如果是对象，那么属性需要写对应的索引实例方法：find()用于找出第一个符合条件的数组成员，如果没有找到返回undefinedlet ary = [{ id: 1, name: '张三' }, { id: 2, name: '李四' }]; let target = ary.find((item, index) => item.id == 2);//找数组里面符合条件的值，当数组中元素id等于2的查找出来，注意，只会匹配第一个 实例方法：findIndex()用于找出第一个符合条件的数组成员的位置，如果没有找到返回-1let ary = [1, 5, 10, 15]; let index = ary.findIndex((value, index) => value > 9); console.log(index); // 2实例方法：includes()判断某个数组是否包含给定的值，返回布尔值。[1, 2, 3].includes(2) // true [1, 2, 3].includes(4) // false String 的扩展方法模板字符串（★★★）ES6新增的创建字符串的方式，使用反引号定义let name = `zhangsan`; 模板字符串中可以解析变量let name = '张三'; let sayHello = `hello,my name is ${name}`; // hello, my name is zhangsan模板字符串中可以换行 let result = { name: 'zhangsan', age: 20, sex: '男' } let html = ` <div> <span>${result.name}</span> <span>${result.age}</span> <span>${result.sex}</span> </div> `; 在模板字符串中可以调用函数const sayHello = function () { return '哈哈哈哈 追不到我吧 我就是这么强大'; }; let greet = `${sayHello()} 哈哈哈哈`; console.log(greet); // 哈哈哈哈 追不到我吧 我就是这么强大 哈哈哈哈 实例方法：startsWith() 和 endsWith()startsWith()：表示参数字符串是否在原字符串的头部，返回布尔值endsWith()：表示参数字符串是否在原字符串的尾部，返回布尔值let str = 'Hello world!'; str.startsWith('Hello') // true str.endsWith('!') // true 实例方法：repeat()repeat方法表示将原字符串重复n次，返回一个新字符串'x'.repeat(3) // "xxx" 'hello'.repeat(2) // "hellohello"Set 数据结构（★★）ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。Set本身是一个构造函数，用来生成 Set 数据结构const s = new Set();Set函数可以接受一个数组作为参数，用来初始化。const set = new Set([1, 2, 3, 4, 4]);//{1, 2, 3, 4} 实例方法add(value)：添加某个值，返回 Set 结构本身delete(value)：删除某个值，返回一个布尔值，表示删除是否成功has(value)：返回一个布尔值，表示该值是否为 Set 的成员clear()：清除所有成员，没有返回值 const s = new Set(); s.add(1).add(2).add(3); // 向 set 结构中添加值 s.delete(2) // 删除 set 结构中的2值 s.has(1) // 表示 set 结构中是否有1这个值 返回布尔值 s.clear() // 清除 set 结构中的所有值 //注意：删除的是元素的值，不是代表的索引遍历Set 结构的实例与数组一样，也拥有forEach方法，用于对每个成员执行某种操作，没有返回值。s.forEach(value => console.log(value))
