前言

主要讲解了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. 尚硅谷springboot学习27-使用外置servlet容器

    嵌入式Servlet容器:应用打成可执行的jar ​ 优点:简单.便携: ​ 缺点:默认不支持JSP.优化定制比较复杂(使用定制器[ServerProperties.自定义EmbeddedServle ...

  2. chrome.debugger

    官网: https://chromedevtools.github.io/devtools-protocol/ https://developer.chrome.com/extensions/debu ...

  3. Add Inline Actions

    [Add Inline Actions] 1.为了使用 inline action,需要给 eosio.code 账号添加active权限. To use the 'activeauthority i ...

  4. ubuntu安装jdk,maven,tomcat

    ubuntu16.04安装jdk8 -jdk 检查是否安装成功 java -version 出现如上信息即安装成功 安装maven,先去官网下载指定版本的maven,个人使用apache-maven- ...

  5. 20175126《Java程序设计》第一周学习总结

    # 学号 20175126 <Java程序设计>第一周学习总结   ## 教材学习内容总结   - 1.安装了WINDOS系统的JDK,并学会了利用JDK编写并编译JAVA程序的基本方法. ...

  6. Python类继承（转发）

    目录 一.概述 二.类的继承 2.1 继承的定义 2.2 构造函数的继承 2.3 子类对父类方法的重写 三.类继承的事例 回到顶部 一.概述 面向对象编程 (OOP) 语言的一个主要功能就是“继承”. ...

  7. node.js中使用http模块创建服务器和客户端

    node.js中的 http 模块提供了创建服务器和客户端的方法,http 全称是超文本传输协议,基于 tcp 之上,属于应用层协议. 一.创建http服务器 const http = require ...

  8. Python - 最大公约数算法

    # Python 3.6 # 最大公约数,最大公因子 # Greatest Common Divisor # 辗转相除法 def gcd(num1: object, num2: object) -&g ...

  9. 使用U盘安装CentOS7

    为了在公司的旧笔记本电脑上安装centos供自己学习使用折腾了两天,终于在看了https://www.cnblogs.com/yeeo1/p/7306611.html这篇博文后装上了, 以下内容为转载 ...

  10. Web 研发模式的演变

    前不久徐飞写了一篇很好的文章:Web 应用的组件化开发.本文尝试从历史发展角度,说说各种研发模式的优劣. 一.简单明快的早期时代 可称之为 Web 1.0 时代,非常适合创业型小项目,不分前后端,经常 ...