前言

主要讲解了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. layer.js 中弹框显示不全的问题

    在使用 layer.js 做弹框的时候,遇到在浏览器缩小时,弹框显示不全的问题,如下: 这是不行的,因为我们有的时候想缩小浏览器视窗,但是一旦缩小到一定程度,就会把弹窗的关闭按钮遮住一部分,并且主体弹 ...

  2. spring @transactional 注解事务

    1.在spring配置文件中引入<tx:>命名空间 <beans xmlns="http://www.springframework.org/schema/beans&qu ...

  3. Mesh属性[Unity]

    Mesh属性[Unity] Mesh是Unity内的一个组件,称为网格组件.3D网格是Unity中最重要的图形元素.在Unity中存在多种组件用于渲染标准网格或者蒙皮网格.拖尾或者3D线条. 在Uni ...

  4. Unity3D AssetBundle相关

    Unity3D AssetBundle相关 首先,先看一下原理吧  Unity3D研究院之Assetbundle的原理(六十一) 其次,接着往下看:Unity3D研究院之Assetbundle的实战( ...

  5. Redis核心原理

    Redis系统介绍: Redis的基础介绍与安装使用步骤:https://www.jianshu.com/p/2a23257af57b Redis的基础数据结构与使用:https://www.jian ...

  6. 微软BI 之SSIS 系列 - 数据仓库中实现 Slowly Changing Dimension 缓慢渐变维度的三种方式

    开篇介绍 关于 Slowly Changing Dimension 缓慢渐变维度的理论概念请参看 数据仓库系列 - 缓慢渐变维度 (Slowly Changing Dimension) 常见的三种类型 ...

  7. 解决xcode10打包报错：That command depends on command in Target ‘xxx’:scrpit phase"[CP] Copy Pods Resources"

    问题:使用xcode10打包报错,提示 error:Multiple commands produce ‘xxxx/xxx.app’ 1)Target ‘xx’ has create director ...

  8. 大数据学习笔记2 - 分布式文件系统HDFS（待续）

    分布式文件系统结构 分布式文件系统是一种通过网络实现文件在多台主机上进行分布式存储的文件系统,采用C/S模式实现文件系统数据访问,目前广泛应用的分布式文件系统主要包括GFS和HDFS,后者是前者的开源 ...

  9. Codeforces Round #499 (Div. 2)

    Codeforces Round #499 (Div. 2) https://codeforces.com/contest/1011 A #include <bits/stdc++.h> ...

  10. Python基础-python基本语法（二）

    一.注释 分类:单行注释和多行注释 1.单行注释 单行注释以#开头,在当前行内,#后面的内容就是注释内容 2.多行注释 被两个   '''    或     ''''''    包括起来的内容就是注释 ...