为了账号安全,请及时绑定邮箱和手机立即绑定

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

标签:
Java

webp

标题图

前言

主要讲解了ES6对字符串的拓展,包括includesstartsWithendsWith,另外增加了字符串模板。

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. = function(){
 mask();
}
// 单例模式var singleton = function(){ var res; return function(fn){  return res||(res=fn.apply(this,arguments))
 }
}();var obtn = document.getElementById("btn");
obtn.=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);



作者:达叔小生
链接:https://www.jianshu.com/p/41b179bd3d67


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消