ES6

  • let 和 const 命令
  1. // ES6 新增 let和const 命令，用来声明变量，用法类似于 var
  2.     // let 声明的变量，只在 let 命令所在的代码块内有效
  3.     // let 命令不存在变量提升
  4.     // let 命令不允许在相同作用域内，重复声明同一个变量
  5.     // const 命令声明的复合类型的数据（主要是对象和数组），变量指向的内存地址
  7.     const NAME = 'Lmonkey';
  8.     const obj = {name:'zhangsan', age:10, sex:'男'};
  9.     obj.name = "Lmonkey";//const 定义的变量对象内属性的值可以改变
  10.     console.log(obj.name);//Lmonkey
  11.     // const [a,b] = [12,23];
  12.     // [a,b]=[25,36];//const 定义后数组中值改变报错，无法修改
  13.     let [a,b] = [12,23];
  14.     [a,b]=[25,36];//
  15.     console.log(a);//25
  1. <button>按钮1</button>
  2. <button>按钮2</button>
  3. <button>按钮3</button>
  4. <button>按钮4</button>
  5. <button>按钮5</button>
  6. <script>
  7.     let btns =document.getElementsByTagName('button');
  8.     for(let i=0;i<btns.length;i++){
  9.         btns[i].addEventListener('click',function (){
  10.             console.log(i)
  11.         })
  12.     }
  13. </script>

let

  • 箭头函数 Arrow Function
  1. function add(a,b){
  2.         return a+b;
  3.     }
  4.     // function 相当于 => 放在参数和函数体中间
  5.     // 1. 如果没有参数， 或有多个参数就需要使用 ()来定义参数列表
  6.     const fun =()=> 'aaa';
  7.     const add =(a,b)=>a+b;
  8.     // 2. 如果有一个参数，可以不用()
  9.     const fun =x =>x*x;
  10.     console.log(fun(10));//100
  11.     // 3. 如果函数体中只有一条语句， 可以不用{}， 就不用使用return 会自动加上
  12.     const add =(a,b)=>a+b;
  14. //箭头函数在返回对象时， 必须在对象外面加上()
  15.  const fun = () =>({id:18, name:'zhangsn'});
  17. //排序
  18. let arr=[1,9,8,6,3,20,80,60,40,2];
  19. arr.sort(function (a,b){
  20.     return b-a; //倒序
  21. })
  22.     console.log(arr);//[80, 60, 40, 20, 9, 8, 6, 3, 2, 1]
  24.     arr.sort((a,b)=>a-b);//正序 一条语句
  25.     console.log(arr);//[1, 2, 3, 6, 8, 9, 20, 40, 60, 80]
  27.     // this 的问题
  28.     function Person(){
  29.         this.name='abc';
  30.         this.age=30;
  31.         this.say= function (){
  32.             console.log(this.name+"####")
  33.         }
  34.     }
  35.     const p =new Person();
  36.     p.say();//abc####
  38.     const pp={
  39.         name:'aaa',
  40.         say:()=>{
  41.             console.log('2223');
  42.         },
  43.         run:function (){
  44.             console.log(this.name)
  45.         }
  46.     };
  47.     pp.say();//2223
  48.     pp.run();//aaa
  50.     const pp={
  51.         name:'aaa',
  52.         say:()=>{
  53.             console.log(this);
  54.         },
  55.         run:function (){
  56.             console.log(this)
  57.         }
  58.     };
  59.     pp.say();//window{....}
  60.     pp.run();//{name: 'aaa', say: ƒ, run: ƒ}
  61.     // 普通函数的this 代表声明的对象,=>函数没 this ,它的this是继承来的,是它所在对象的上一曾的对象
  63.     box.onclick=function (){
  64.         setTimeout(()=>{
  65.             this.className='bname';
  66.         },1000)
  67.     }
  68.     //箭头函数没有自己的this，它的this是继承而来，默认指向在定义它时所处的对象(宿主对象)。
  • 数组的新增高级方法
  1. /*
  2.        有一个商品列表：
  4.        1. 将大于10元的商品打折， 取出大于10元的商品
  5.        2. 将10元以上的商品打5折
  6.        3. 打完折的商品总价是多少
  7.     */
  8. //普通方法
  9.     const goods =[5,10,20,60,3,90,80,4,5,78,65,68];
  10.     const goods1=[];
  11.     for(let i=0;i<goods.length;i++){
  12.         if(goods[i]>=10)
  13.             goods1.push(goods[i]);
  14.     }//先找大于10元
  15.     const goods2=[];
  16.     for(n of goods1){//采用for of更简单
  18.             goods2.push(n*0.5);
  19.     }//再打折
  20.     let sum=0;
  21.     for(let i=0;i<goods2.length;i++){
  23.         sum +=goods2[i];
  24.     }//最后求和
  25.     console.log(sum);//235.5
  27.     // 采用数组的新增高级方法 filter map reduce
  28.     let goods1 = goods.filter(function(n) {
  29.         return n >= 10;
  30.     })//采用filter 过滤器 过滤出大于10的
  31.     let goods2 = goods1.map(function(n) {
  32.         return n*0.5;
  33.     })//map映射 打完折后放回新数组
  34.     let sum = goods2.reduce(function(s, n){
  35.         return s+n;
  36.     }, 0);
  37.     console.log(sum);//235.5
  38.     /*
  39.            第一次，s 参数是 0 , n 是数组中的第一个元素
  40.            第二次，s 参数是 是第一次回调函数返回值 , n 是数组中的第二个元素
  41.            第三次，s 参数是 是第二次回调函数返回值 , n 是数组中的第三个元素
  42.            第四次，s 参数是 是上一次回调函数返回值 , n 是数组中的第二个元素 
  43.          */
  45. // 使用箭头函数简写(一条语句)
  46.     console.log(goods.filter(n => n > 10).map(n => n * 0.5).reduce((s, n) => s + n));//230.5
  • 字符串新增功能
  1. //     字符串的新方法
  2. // startsWith    判断以什么字符串开头
  3. // endsWith      判断以什么字符串结尾
  4.     let url= 'https://www.php.cn';
  5.     if(url.startsWith("https")){
  6.         console.log(url)
  7.     }else{
  8.         console.log("不是https开头的网站");
  9.     }
  10.     if(url.endsWith('cn')){
  11.         console.log(url);
  12.     }else{
  13.         console.log('不是以cn结尾的url');
  14.     }
  16. // 模板字符串
  17. // 模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。
  18.  let title='文章标题';
  19.  let str='文章内容详情文章内容详情文章内容详情文章内容详情文章内容详情';
  20.  let con =`
  21.  <h1>${title}</h1>
  22.  <b>${str}</b>
  23.  `;
  24.  console.log(con);
  • ES6 解构赋值和扩展运算符
  1. //     解构赋值
  2. // 左右两边结构必须一样
  3. // 右边必须有值
  4. // 声明和赋值不能分开
  6. let arr= ['one','two','three'];
  7. let a=arr[0];
  8. console.log(a);//one
  10. let [a,b,c]=['one','two','three'];
  11. console.log(a);//one
  13. const {name,age,sex,say}={name:'xiaoming',age:30,sex:'nan',say(){return 'aaaa'}};
  14. console.log(name);//xiaoming
  15. console.log(say());//aaaa
  16. const [a,b ,{x,y},d,e,f]=['a','b',{x:'xxx',y:'yyy'},'d','w','m'];
  18. // 扩展运算符
  19. // ...三点运算符
  20. // 展开数组
  21. let a=[1,2,3];
  22. let b=[...a,4,5,6,...a];
  23. console.log(b);//[1, 2, 3, 4, 5, 6, 1, 2, 3]
  24. // 默认参数
  25. function add(a,b,c,d,e){
  26.     console.log(a);
  27.     console.log(b);
  28.     console.log(c);
  29.     console.log(d);
  30.     console.log(e);
  31. }
  32. add(...a,5,6);//赋值给每个参数
  34. function demo(...args){
  35.     console.log(args);
  36. }
  37. demo(5,6,7,8,9);//[5, 6, 7, 8, 9]
  • 对象的新语法
  1. //     ES 6 的 Class（类）概念
  2. // constructor 是构造方法
  3. // this关键字代表实例对象
  4. // 通过extends关键字实现继承
  5. // super关键字，表示父类的构造函数，用来新建父类的this对象
  6.     class Person{
  7.         constructor(name,age) {
  8.             this.name=name;
  9.             this.age=age;
  10.         }
  11.         say(){
  12.             console.log(this.name);
  13.             console.log(this.age);
  14.         }
  15.     }
  18.     class Student extends Person{
  19.         constructor(name,age,school) {
  20.             super(name,age);
  21.             this.school=school;
  22.         }
  23.         run(){
  24.             console.log(this.school);
  25.         }
  26.     }
  27.     const p= new Student('xiaoming',30,'php.cn');
  28.     p.run();
  30.     // JSON对象的新应用
  31. // JSON.stringify()      串行化
  32. // JSON.parse()            反串行化
  33. // 简写
  34. // (属性和值)名字一样可以简写
  35. // 方法一样可以简写（:function省）
  36. let name='xiaoming';
  37. let age=30;
  38. let say=function (){
  39.     console.log('aaa');
  40. };
  41. const obj= {
  42.     // name:name,键和值一样写一个
  43.     name,
  44.     age,
  45.     say
  46. }
  47. obj.say();//aaa
  48. let str = JSON.stringify(obj);
  50.  console.log(str);//{"name":"xiaoming","age":30}
  51. let o = JSON.parse(str);
  52. console.log(o.name);//xiaoming
  • Module 模块化编程
  1. //     模块化优点
  2. // 减少命名冲突
  3. // 避免引入时的层层依赖
  4. // 可以提升执行效率
  5. // export命令：用于规定模块的对外接口
  6. // 一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。
  7. //import命令：用于输入其他模块提供的功能
  8. //import命令接受一对大括号，里面指定要从其他模块导入的变量名。大括号里面的变量名，必须与被导入模块（profile.js）对外接口的名称相同。
  10. let a=10;
  11. function add(a,b){
  12.     return a+b;
  13. }
  14. console.log('这是 one.js 文件');
  16. let b=20;
  17. function add(a,b){
  18.     return a+b;
  19. }
  20. console.log('这是 two.js 文件');
  22. console.log('这是 index.js 文件');
  23. console.log(add(10, 20));
  25. <script src="one.js" type="module"></script>
  26.     <script src="two.js"  type="module"></script>
  27.     <script src="index.js"  type="module"></script>
  29.  //报错 Uncaught ReferenceError: add is not defined
  31. export let a=10;
  32. export function add(a,b){
  33.     return a+b;
  34. }
  35. //一个一个导出export
  36. console.log('这是 one.js 文件');
  38. let b=20;
  39. function add(a,b){
  40.     return a+b;
  41. }
  42. function demo(){
  44. }
  45. export  {b ,add,demo};
  46. console.log('这是 two.js 文件');
  48. export let c=50;
  49. export class Person{
  51. }
  52. export default function (){
  53.     console.log('123');
  54. }
  55. //一个js中只能有一个缺省导出
  57. import {a,add} from './one.js';//导入 import
  58. import {b, add as mul} from './two.js';
  59. import hello from './three.js';
  60. console.log('这是 index.js 文件');
  61. console.log(add(10, 20));//30
  62. hello();//123
  64. <script src="index.js"  type="module"></script>
  66. 导出
  67.   可以一个个元素导出
  68.   export let name = "李四";
  70.   export function add(x, y) {
  71.     return x * y;
  72.     }
  73.    可以一起导出
  74.    export {name, age, Person,add}
  75.    可以导出时给别名
  76.     export {name as myname, age, Person,add}
  77.     // 可以缺省导出 一个模块中只能有一个 export default
  78. export default function(args) {
  79.     console.log(args);
  80. }
  82. 导入
  83. 使用解构赋值导入
  84. import {add, Person} from "./one.js"
  85. 如果多个模块有重名元素，可使用别名
  86. import {add as mul} from "./two.js"
  87. 导入default,可自命名
  88. import printx from "./two.js";
  89. 可以一起全部接受
  90. import * as one from "./one.js";

更多相关文章

  1. udp数据报从网卡驱动到用户空间流程总结
  2. 关于ptype_all和pypte_base中的pt_prev的说明
  3. Netfliter状态跟踪之动态协议的实现浅析（tftp实现）
  4. 如何正确使用 Python 的 Lambda 函数
  5. oracle学习笔记
  6. 作用域 常用函数 三元运算符及if条件
  7. isset()与empty()函数 switch语句改写简易计算器
  8. PHP基础：COOKIE/SESSION和命名空间
  9. json数据类型，安装MySQL

随机推荐

  1. 浅议 Promise/Futures 模型 [每日前端夜
  2. 1-20
  3. 现代浏览器探秘(part3)：渲染 [每日前端夜
  4. 自学系列 | 就谈知识体系！
  5. Python异步爬虫进阶必备，效率杠杠的！
  6. Ansible 之 外部变量文件调用
  7. JavaScript的工作原理：引擎、运行时和调用
  8. 图解「剑指Offer」之二维数组中的查找
  9. 超简单的博弈算法题，一行代码解决！
  10. 超经典MySQL练习50题，做完这些你的SQL就过