前言

主要讲解了ES6对字符串的拓展，包括includes，startsWith和endsWith，另外增加了字符串模板。

Start

includes()是否包含

startsWith()以什么开头

endsWith()以什么结尾

<!DOCTYPE html>

<html>

<head>

 <meta charset="UTF-8">

 <title>ES6-字符串</title>

</head>

<body>

 <script>

   let str = "你怎么一直在这";

   let res = str.includes('一');

   console.log(res);

 </script>

</body>

</html>

返回结果为true

<!DOCTYPE html>

<html>

<head>

 <meta charset="UTF-8">

 <title>ES6-字符串</title>

</head>

<body>

 <script>

   let str = "你怎么一直在这";

   let res = str.startsWith('你');

   console.log(res);

 </script>

</body>

</html>

返回结果为true

<!DOCTYPE html>

<html>

<head>

 <meta charset="UTF-8">

 <title>ES6-字符串</title>

</head>

<body>

 <script>

   let str = "你怎么一直在这";

   let res = str.startsWith('你');

   if(str.startsWith('你')){

     执行语句;

   }else if(语句){

     执行语句;

   }else{

     执行语句;

   }

 </script>

</body>

</html>

str.endsWith();

<!DOCTYPE html>

<html>

<head>

 <meta charset="UTF-8">

 <title>ES6-字符串</title>

</head>

<body>

 <script>

   let str = "你怎么一直在这";

   alert( str.endsWith('这'));

 </script>

</body>

</html>


<!DOCTYPE html>

<html>

<head>

 <meta charset="UTF-8">

 <title>ES6-字符串</title>

</head>

<body>

 <script>

   let mail = '34234@qq.com';

   if( mail.endsWith('@qq.com') || main.endsWith('@163.com') ){

      alert('输入正确');

    }else{

      alert('请输入邮箱');

    }

 </script>

</body>

</html>

字符串模板

<!DOCTYPE html>

<html>

<head>

 <meta charset="UTF-8">

 <title>ES6-字符串</title>

</head>

<body>

 <script>

   let str2 = `

               <ul>

                 <li>内容</li>

               </ul>

               `;

    console.log(str2);

 </script>

</body>

</html>

函数的参数

函数的参数，展开运算符：...

<!DOCTYPE html>

<html>

<head>

 <meta charset="UTF-8">

 <title>ES6-函数参数</title>

</head>

<body>

 <script>

  function fun(a,b){

    console.log(a,b);

  }

  fun(1,2);

 </script>

</body>

</html>


<!DOCTYPE html>

<html>

<head>

 <meta charset="UTF-8">

 <title>ES6-函数参数</title>

</head>

<body>

 <script>

  function fun(a,b,...args){

    console.log(a,b);

    console.log(...args);

  }

  fun(1,2,3,4,5);

  fun(1,2);

 </script>

</body>

</html>


<!DOCTYPE html>

<html>

<head>

 <meta charset="UTF-8">

 <title>ES6-函数参数</title>

</head>

<body>

 <script>

  let arr = [1,2,3];

  function fun(a,b,c){

   console.log(a);

   console.log(b);

   console.log(c);

  }

  fun(arr[0],arr[1],arr[2]);

  fun(...arr);

 </script>

</body>

</html>


<!DOCTYPE html>

<html>

<head>

 <meta charset="UTF-8">

 <title>ES6-函数参数</title>

</head>

<body>

 <script>

  let arr = [1,2,3];

  let arr1=[4,5,6];

  let array=[...arr,...arr1];

  console.log(array);

 </script>

</body>

</html>


<!DOCTYPE html>

<html>

<head>

 <meta charset="UTF-8">

 <title>ES6-函数参数</title>

</head>

<body>

 <script>

  function fun(a=1,b=2,c=3){

   console.log(a,b,c);

  }

  fun();

  // fun(4,5,6);

 </script>

</body>

</html>

了解函数的arguments对象

arguments为一个对象，类数组

<!DOCTYPE html>

<html>

<head>

 <meta charset="UTF-8">

 <title>Document</title>

</head>

<body>

 <script>

   function add(a,b){

    return a+b;

   }

   console.log(add(1,2);

 </script>

</body>

</html>


<!DOCTYPE html>

<html>

<head>

 <meta charset="UTF-8">

 <title>Document</title>

</head>

<body>

 <script>

   function add(){

    // console.log( arguments); // 返回对象

    return arguments[0] + arguments[1];

   }

   add(1,2);

   console.log( add(1,2) );

 </script>

</body>

</html>

js面向对象

// var student = {}; //创建对象

var student = new Object();

student.name = "dashu";

student.age = 12;

student.job = "school student";

student.study = function(){

 alert("study");

}

student.study();


var student = {

 name : "dashu",

 age : 12;

 job: "school student",

 study : function(){

  alert("study");

  }

};

student.study();

数据属性js中的

var student = {

 name: "dashucoding"

}

alert(student.name);


var student={};

Object.defineProperty(student,"name",{

 writable:true,

 value: "dashucoding"

});

alert(student.name);

configurable表示能否通过delete来删除属性值，默认为true

Enumerable表示能否通过for-in来枚举对象的属性值，默认为true

writable表示能否修改属性值，默认为true

设计模式-单例模式

var mask = function(){

 document.body.appendChild(document.createElement('div'));

}

var obtn = document.getElemetnById("btn");

obtn.onclick = function(){

 mask();

}


// 单例模式

var singleton = function(){

 var res;

 return function(fn){

  return res||(res=fn.apply(this,arguments))

 }

}();

var obtn = document.getElementById("btn");

obtn.onclick=function(){

 singleton(function(){

  return document.body.appendChild(document.createEelement('div'));

 })

}

解构赋值

解构赋值为一种表达式，用来获取数据

let arr=[1,2,3];

let a = arr[0];

let b = arr[1];

let c = arr[2];

console.log(a,b,c);


let arr = [1,2,3];

let [a,b,c] = arr;

console.log(a,b,c);


let arr = {

 a:1,

 b:2,

 c:3

}

let (a,b,c) = arr;

// let(a,b,c) = [1,2,3];

console(a,b,c);

结语

  • 本文主要讲解 ES6教程-字符串，函数的参数，了解函数的arguments对象，js面向对象，设计模式-单例模式，解构赋值
  • 下面我将继续对其他知识 深入讲解 ，有兴趣可以继续关注
  • 小礼物走一走 or 点赞

ES6教程-字符串，函数的参数，了解函数的arguments对象，js面向对象，设计模式-单例模式，解构赋值的更多相关文章

  1. 【ES6】对象的新功能与解构赋值

    ES6 通过字面量语法扩展.新增方法.改进原型等多种方式加强对象的使用,并通过解构简化对象的数据提取过程. 一.字面量语法扩展 在 ES6 模式下使用字面量创建对象更加简洁,对于对象属性来说,属性初始 ...

  2. [ES6系列-03]ES6中关于参数相关特性详解（参数默认值与参数解构赋值与剩余参数）

    [原创] 码路工人 大家好,这里是码路工人有力量,我是码路工人,你们是力量. 今天总结一下 ES6 中跟参数相关的内容. 欢迎补充斧正.留言交流. 让我们互相学习一起进步. 1. ES6 参数默认值( ...

  3. es6之变量的解构赋值

    es5中通常我们声明变量都是以下的方式: var a = 10; var b = 20; var c = 30; //或者 var a = 10,b = 20,c = 30; //或者 var arr ...

  4. es6 解构赋值

    ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 关于给变量赋值,传统的变量赋值是这样的: var arr = [1,2,3];//把数组的值 ...

  5. ES6入门之变量的解构赋值(二)

    前言 在上一章 ES6入门之let和const命令中我们对ES6的相关语法已经有了初步了解,上一章中我们主要学习了三大部分的内容,let命令的使用,块级作用域,const命令的使用,那么从本篇博客将进 ...

  6. JavaScript学习笔记 -- ES6学习(三) 变量的解构赋值

    1.解构赋值的定义 在ES6中,允许按照一定模式,从数组和对象中提取值(所谓解构),然后对变量进行赋值. var a = 1; var b = 2; var c = 3; //等价于 var [a, ...

  7. ES6学习随笔--字符串模板、解构赋值、对象、循环、函数、Promise、Generrator

    在线编译器:babel.github 在nongjs中使用 'use strict' let a = ; 运行node : node --harmony_destructuring xxx.js 代码 ...

  8. ES6新增语法和内置对象（let,const, Array/String/Set 扩展方法(解构赋值，箭头函数，剩余参数)）

    1.let ES6中新增的用于声明变量的关键字. let 声明的变量只在所处于的块级有效. 注意:使用 let 关键字声明的变量才具有块级作用域,var 关键字是不具备这个特点的. 1. 防止循环变量 ...

  9. ES6学习 --函数参数默认值与解构赋值默认值

    1. ES6的解构ES6中引入了解构赋值的操作,其作用是:将值从数组Array或属性从对象Object提取到不同的变量中 即分为两种情况:从数组Array中解构,以及从对象Object中解构 ①.从数 ...

随机推荐

  1. hadoop分布式集群搭建（2.9.1）

    1.环境 操作系统:ubuntu16 jdk:1.8 hadoop:2.9.1 机器:3台,master:192.168.199.88,node1:192.168.199.89,node2:192.1 ...

  2. Jquery中父，子页面之间元素获取及方法调用

    一.jquery 父.子页面之间页面元素的获取,方法的调用: 1. 父页面获取子页面元素: 格式:$("#iframe的ID").contents().find("#if ...

  3. Apache 修改端口号

    默认是80端口,可在httpd.conf文件中修改以下2个地方的端口号为预定的即可,例如修改为8080端口 把httpd.conf 中Listen 80 改成Listen 8080 把ServerNa ...

  4. 连续子数组最大和(python)

    题目描述 HZ偶尔会拿些专业问题来忽悠那些非计算机专业的同学.今天测试组开完会后,他又发话了:在古老的一维模式识别中,常常需要计算连续子向量的最大和,当向量全为正数的时候,问题很好解决.但是,如果向量 ...

  5. 在java项目中使用umeditor

    之前有介绍了ueditor的用法,可看这篇:https://www.cnblogs.com/roy-blog/p/7250668.html umeditor是ueditor的简化版,不仅在功能,容量上 ...

  6. node.js中fs文件系统模块的使用

    node.js中为我们提供了fs文件系统模块,实现对文件或目录的创建,修改和删除等操作. fs模块中,所有的方法分为同步和异步两种实现. 有 sync 后缀的方法为同步方法,没有 sync 后缀的方法 ...

  7. 6E - 寒冰王座

    不死族的巫妖王发工资拉,死亡骑士拿到一张N元的钞票(记住,只有一张钞票),为了防止自己在战斗中频繁的死掉,他决定给自己买一些道具,于是他来到了地精商店前. 死亡骑士:"我要买道具!" ...

  8. downLoad

    String root= ServletActionContext.getServletContext().getRealPath(File.separator).replace("\\&q ...

  9. 设计模式之模板模式 template

    设计模式 模板模式如果有一个流程如下step1();step2();step3();step4();step5();其中step3() step5()是需要用户自己编写使用其他步骤是固定的那么可以写成 ...

  10. 使用Maven搭建SpringMVC

    1.创建Maven Project 注意选择webapp 2.添加Maven依赖 <project xmlns="http://maven.apache.org/POM/4.0.0&q ...