主要讲解了 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 面向对象, 设计模式 - 单例模式, 解构赋值
来源: http://www.jianshu.com/p/41b179bd3d67