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

前言

主要讲解了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面向对象，设计模式-单例模式，解构赋值

前言

Start

函数的参数

了解函数的arguments对象

js面向对象

设计模式-单例模式

解构赋值

结语

最新文章

热门文章