目录
解构和ECMA6字符串
中括号解构
var x = 10, y = 20, z= 30;
var [x, y, z] = [10, 20, 30];
alert(x + "," + y);//10,20
var [x, [a, b], y] = [10, [20, 30], 40];
alert(a + "," + y);//20,40
var [x, [a, b], y] = [10, [20], 40];
alert(a + "," + y);//20,40
alert(b);//undefined
大括号解构
var {name, age, sex} = {
name: "钢铁侠",
age: 18,
sex: "男"
};
/* 不是对象 */
alert(name);//钢铁侠
alert(age);//18
alert(sex);//男
解构对传统的颠覆(好处)
1、交换两个数的值
var [x, y] = [10, 20];
[x, y] = [y, x];
alert(x + "," + y); //20, 10
2、函数可以返回多个值
function show(){
return ["结果1", "结果2", "结果3"];
}
var [a, b, c] = show();
alert(a + "," + c); //结果1,结果3
3、函数定义参数和传入参数的顺序改变 【注】参数可以带默认值
function showSelf(name, age, sex){
alert("我叫" + name + ",今年" + age + ",是一位" + sex + "性");
}
showSelf("小明", 18, "男");
/* 当参数过多时可以使用,不需要按照顺序传参 */
function showSelf({name, age, sex}){
alert("我叫" + name + ",今年" + age + ",是一位" + sex + "性");
}
showSelf({
age: 18,
name: "小明",
sex: "男"
});
function showSelf({name, age, sex = "男"}){
alert("我叫" + name + ",今年" + age + ",是一位" + sex + "性");
}
showSelf({
age: 18,
name: "小明",
}); //sex = 男
function showSelf({name, age, sex = "男"}){
alert("我叫" + name + ",今年" + age + ",是一位" + sex + "性");
}
showSelf({
age: 18,
name: "小明",
sex: "女"
}); //sex = 女
4、快速取出数组中的某一个元素
var arr = [10, 20, 30, 40, 50];
var {0:first, 4:last} = arr;
alert(first);//10
alert(last == arr[4]);//true
ECMA6字符串
传统字符串:所有单引号,双引号括起来的都叫做字符串
ECMA6字符串:反引号 ` `
1、ECMA6字符串,想怎么写怎么写,换行,代码缩进,都能在字符串中体现出来
//var str1 = "hello
//world";
//alert(str); //Uncaught SyntaxError: Invalid or unexpected token
var str2 = "hello \
world";
alert(str2);
var str3 = `hello
world`;
alert(str3);
2、$(变量/表达式/函数调用)
function showSelf({name, age, sex = "男"}){
alert(`我叫${name},今年${age}岁,是一位${sex}性`);
alert(`我叫${name},今年${Math.max(age,20,30)}岁,是一位${sex}性`);
}
showSelf({
age: 18,
name: "小明",
sex: "女"
});
新增数组方法和合并对象
新增数组方法
Array.from( )
将伪书组转成真数组
<script>
window.onload = function(){
var aLis = document.getElementsByTagName("li");
alert(aLis.length); //6,为伪数组
// aLis.push("hello"); //数组的方法;Uncaught TypeError: aLis.push is not a function
aLis = Array.from(aLis);
aLis.push("hello");
alert(aLis); //[object HTMLLIElement],[object HTMLLIElement],[object HTMLLIElement],[object HTMLLIElement],[object HTMLLIElement],[object HTMLLIElement],hello
}
</script>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
find( )
功能:在数组中查找符合条件的元素,只要找到第一个符合条件的元素就终止遍历
返回值:找到的元素
var arr = [10, 20, 30, 40, 50];
var res = arr.find(function(item, index, arr){
return item > 20;
})
alert(res);
var arr = [10, 20, 30, 40, 50];
alert(arr.find(item => item > 20));
findIndex( )
返回值:找到元素的下标
var arr = [10, 20, 30, 40, 50];
alert(arr.findIndex(item => item > 20));
copyWithin( )
第一个参数:从哪个下标开始
第二个参数和第三个参数:范围 [ start,end )
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
arr.copyWithin(3,7,9); //从下标3开始,取[7,9)的下标,从下标3开始覆盖
alert(arr); //1,2,3,8,9,6,7,8,9,10
合并对象
Object.assign
将所有传入的对象合并到第一个对象中
var obj1 = {
a: 10
}
var obj2 = {
b: 20,
c: 30
}
var obj3 = {
d: 40,
f: ["hello", "world", true]
}
Object.assign(obj1, obj2, obj3);
console.log(obj1);
console.log(obj2);
console.log(obj3);
修改obj2的值,obj1内不会改变,obj2会变
var obj1 = {
a: 10
}
var obj2 = {
b: 20,
c: 30
}
var obj3 = {
d: 40,
f: ["hello", "world", true]
}
Object.assign(obj1, obj2, obj3);
obj2.b = 100;
console.log(obj1);
console.log(obj2);
给obj3push一个元素,obj1内同样也被push此元素
var obj1 = {
a: 10
}
var obj2 = {
b: 20,
c: 30
}
var obj3 = {
d: 40,
f: ["hello", "world", true]
}
Object.assign(obj1, obj2, obj3);
obj3.f.push("xxx");
console.log(obj1);
console.log(obj3);
浅拷贝:遇到比较复杂的数据结构的时候,只拷贝变量地址
深拷贝:将符合数据类型重新生成一份,进行拷贝