前言

主要讲解了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. python中的多进程与多线程(二）

    1.使用多线程可以有效利用CPU资源,线程享有相同的地址空间和内存,这些线程如果同时读写变量,导致互相干扰,就会产生并发问题,为了避免并发问题,绝不能让多个线程读取或写入相同的变量,因此python中 ...

  2. Halcom学习笔记1——Halcon知识点

    文件: 1.浏览HDevelop示例程序 2.程序另存在:Ctrl+Shift+S 3.导出:Ctrl+Shift+O X 编辑: 1.快捷键:  F3 激活     F4 注销     重复查找:C ...

  3. linux nginx 基本用法

    nginx -s reload -p <nginx环境目录> -c <指定的配置文件> 其中-p -c 为可选,不写为默认路径和配置 在执行命令之前可通过 nginx -t - ...

  4. 【python-dict】dict的使用及实现原理

    以下内容是针对:python源码剖析中的第五章——python中Dict对象 的读书笔记(针对书中讲到的内容进行了自己的整理,并且针对部分内容根据自己的需求进行了扩展) 一.Dict的用法 Dict的 ...

  5. eclipse删除了文件，找回方法

    本人通过eclipse在前段时间上传svn代码的时候,代码掉完了,导致的原因是:svn服务器上有有个一样的文件夹,只是大小写不同,但是svn会认为是一样的文件夹,导致svn[]判别不了传到哪个文件夹去 ...

  6. 用php获取js变量的值

    <script type="text/javascript"> var t1 = "fff"; var t2 = "<?php ec ...

  7. java编译时出现——注：使用了未经检查或不安全的操作。注：有关详细信息，请使用 -Xlint:unchecked 重新编译

    网上说是泛型问题 private List<Product> products = new ArrayList<Product>(); 这种用法绝对没错!(因为是照着书写的)在 ...

  8. JSP的简单介绍

    什么是JSP? JSP全称是Java Server Pages,它和servle技术一样,都是SUN公司定义的一种用于开发动态web资源的技术. JSP这门技术的最大的特点在于,写jsp就像在写htm ...

  9. vs [失败]未能找到文件

    用文本文件打开csproj 文件.将里面的不需要文件删除; 或者在工程里面先将其移出工程.然后再删除;

  10. 地址重写 No input file specified的解决方法

    转载自:http://blog.csdn.net/williamsblog/article/details/37532737 (一)IIS Noinput file specified 方法一:改PH ...