es6_解构赋值
解构赋值
<script>
//对象的解构赋值 属性和属性名
let {a,b} = {"a":"1","b":"2"};
console.log(a);
console.log(b);
let a = {"b":"我的名字叫卡卡西"};
console.log(a); //object>我的名字叫卡卡西
let obj = {
vlaue:[
"Hello world",
{content:"Hello world"}
]
}
let {vlaue:[x,{y}]} = obj;
console.log(x);
// vlaue是模式
// 默认值
let {d = 1}={d:2};
console.log(d); //2
// 字符串也可以进行赋值
let [a,b,c,d] = "world";
console.log(a);
console.log(b);
console.log(c);
console.log(d);
let {length:len} = "world";
console.log(len);
// 函数的解构赋值
// 参数
function fn([x,y]){
return x+y;
}
console.log(fn([996,985]));
// 交换变量的值
let x = 996;
let y = 985;
[x,y] = [y,x];
console.log(x);
console.log(y);
// 函数返回多个值
// 原本函数只能返回一个值,如果想要返回多个值,用解构赋值就非常方便了
// 返回数组
function fn(){
return [1,2,3]
}
let [a,b,c] = fn();
console.log(a);
console.log(b);
console.log(c);
// 返回对象
function fn(){
return {
e:123,
f:456
}
}
let {e,f} = fn();
console.log(e);
console.log(f);
</script>
模板字符串
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>模板字符串</title>
</head>
<body>
<input type="text">
<button>添加</button>
<script src="./jquery-3.1.1.min.js"></script>
<script>
// $("button").click(function(){
// alert($("input").val());
// $("input").val("");
// });
$("button").click(function(){
let text = $("input").val();
alert(`我喜欢${text}`)
$("input").val("");
});
//也可以加html标签
</script>
</body>
</html>
字符串新增方法
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>新增方法</title>
</head>
<body>
<script>
// includes() startsWith() endsWith()
// includes()返回布尔值,表示是否找到了参数字符串
// startsWith()返回布尔值,表示参数字符串是否在原字符串头部/开始的位置
// endsWith()返回布尔值,表示参数字符串是否在原字符串尾部/结束的位置
var content = "我的名字叫卡卡西";
console.log(content.includes("卡卡西")); //true
console.log(content.includes("鞠婧祎")); //false
console.log(content.startsWith("卡卡西")); //false
console.log(content.startsWith("鞠婧祎")); //false
console.log(content.endsWith("卡卡西")); //true
console.log(content.endsWith("鞠婧祎")); //false
// 都支持第二个参数
// 第二个参数表示开始搜索的位置
console.log(content.includes("卡卡西",5)); //true 第二个参数为下标
// repeat()方法返回一个新字符串,表示将原字符重复多少次
console.log(content.repeat(3.14)); //重复三次 向上取整
// es2017引入的方法
// 补全字符串长度的功能
// padStart() 从头部补全 padEnd() 从尾部补全
console.log("d".padStart(8,"car")); //carcarcd
console.log("d".padEnd(8,"car")); //dcarcarc
// es2019对字符串新增的方法
// .trim() 取消空格 .trimStart() .trimEnd()
console.log(" a b c ".trim()); //去除二边的空格
console.log(" a b c ".trimStart()); //去除开始的空格
console.log(" a b c ".trimEnd()); //去除最后的空格
</script>
</body>
</html>