标题图
前言
主要讲解了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 点赞
送❤
网友评论