9.15 ES6-展开运算符-新增数组字符串方法-字面量对象简写

展开运算符

展开运算符： … 三个连续的点具有两个含义：展开运算符（spread operator）和剩余运算符（rest operator）。

1. 实现数组的深拷贝（只能有一层引用类型）

// 普通拷贝
let arr1 = [1,2,3];
let arr2 = [];
arr2[1] = 'hello';
console.log(arr1,arr2);
// 深拷贝【数组是单层数据，并且每个值都必须是基础数据类型】
let arr1 = [1,2,3];
let arr2 = [...arr1];  // 等价于：arr2 = [arr[0],arr[1],arr[2]]
arr2[1] = 'hello';
console.log(arr1,arr2);

2. 向函数传递参数

let arr = [1,2,3];
function show(a,b,c){alert(a);alert(b);alert(c);
}
// show(1,2,3); // 正常调用
show(...arr); // 使用...arg调用

3. 合并数组

let arr1=[1,2,3];
let arr2=[4,5,6];
let arr3=arr1.concat(arr2); // 使用concat拼接
// let arr3=[...arr1,...arr2]; // 使用rest参数
alert(arr3);

4. 伪数组

let divList = document.querySelectorAll("div");
// ES5
// for (var i = 0; i < divList.length; i++){
//     console.log(divList[i].innerHTML);
// }
let targetDom = [...divList].filter(el => {console.log(el);
})

5. 与解构赋值一起使用

let [a, ...rest] = [9, 5, 2, 7];
console.log(a, rest);

6. 函数嵌套中使用传递参数

function show(...args){fn(...args);
}
function fn(a,b){alert(a+b)
}
show(12,5);

7. 对象中使用

let person = {name:'jack',age:18,sex:'男'};
console.log({...person}); // 可以获取；使用字面量的形式复制一个对象并输出（使用展开运算符创建字面量对象）

8. 可以在min和max中获取最大值

let arr = [10,50,12,45,67,2];
console.log(Math.min(...arr)); // 最小值
console.log(Math.max(...arr)); // 最小值

字符串的扩展

1. 字符串模板。【${}】

// 自定义背景颜色
let r = 255, g = 255, b = 0;
// 原来的操作
document.body.style.background = 'rgb('+r+','+g+','+b+')';
// 现在的操作
document.body.style.background = `rgb(${r}, ${g}, ${b})`;
// 输出小明的身高，体重，和BMI值
let weight = 75;
let height = 1.75;
// 体重（千克）/身高（米）的平方即kg/m2
console.log(小明的身高是${weight}，体重是${height}，BMI值为${parseInt(weight/(height*height))});

2. includes(str[, index])

3. startsWith(str[, index])

4. endWidth(str[, index])

5. repeat(n): 让字符串重复几次

6. padStart(num[, str])

7. padEnd(num[, str])

8. trimStart()

9. trimEnd()

10. trim()

S5新特性

ES5中新增了一些好用的数组方法：forEach ，map ，filter ，some ，every ，reduce (除了forEach，其他都有回调，都有return)

面试题：ES5中常见的数组方法有哪些？

let data = {code: 1,list: [{id: 23,title: "女装1",price: 300}, {id: 24,title: "女装2",price: 200}, {id: 27,title: "男装1",price: 100}, {id: 29,title: "男装2",price: 400}, {id: 230,title: "女装3",price: 600}, {id: 40,title: "童装1",price: 700}]
}

1. forEach (循环迭代)
   forEach(f(item[,index]){})语法

f:是回调函数
item：数组中的每一个值
index:表示下标值 没有return返回值

var arr = [1,2,3,4,5,6];
arr.forEach(function(item,index){if(item%2==0){console.log(item);}
})

map(映射): 遍历数据并返回一个新的数组，对数据的处理会返回原先对应的位置 需求：所有产品的价格都打5折

let newData = data.list.map((item, index) => {return {id: item.id,title: item.title,price: item.price * 0.6}
})
console.log(newData);

filter(过滤) 返回符合条件的记录 return true,则把当前记录存入新数组，否则不存

let newData = data.list.filter((item, index) => {return item.price > 400
})
console.log(newData);

reduce(减少，汇总) 常用来实现累加

// let arr = [300, 600, 200, 100]
// 首次调用时,sum是第一个元素，val是第二个元素，index是1
// 再次调用时，sum是上一次return的结果，val依次是下一个元素
let result = arr.reduce((sum, val, index) => {// console.log(sum, val, index);return sum + val;
})
console.log(result);
// 第二个参数是sum的初值， 则第一次调用 时， val是第一个元素
let result = data.list.reduce((sum, val, index) => {return sum + val.price;
}, 0)
console.log(result);
// 使用技巧
// 可以给reduce添加初始值
arr.reduce(()=>{},startVal);
var sum = 100;
let score = [1,2,3];
let sum = score.reduce((count,item,index)=>{return count + item
},0);
console.log(sum);
// 案例：购买data数据中价格 > 300的商品，并计算总价
let res = data.list.filter(item=>{return item.price > 300;
}).reduce((count,item)=>{return count + item.price;
},0)
console.log(res);

4. some 如果有符合条件的记录，则返回真，否则返回假 遍历数组的每一项，有一个返回true，就停止循环

let newData = data.list.some((item, index) => {console.log(index);return item.price == 400
})
console.log(newData);

5. every 如果每一个都符合条件，则返回真，否则返回假

6. 遍历数组，每一项都是true，则返回true，只要有一个是false，就返回false

let newData = data.list.every((item, index) => {console.log(index);return item.price > 600
})
console.log(newData);

ES5新增数组方法面试题：

/*
使用map，filter函数完成需求; 筛选一个全数字数组中符合 3n-2(对3取余，余数是2的)的数字，并返回他们的平方；比如：[1,2,5,7] => [4,25]
*/
let arr = [34,25,67,45,82,12,98,11];

ES6新特性

变量声明：const和let
解构赋值
箭头函数
模板字符串
默认参数、剩余参数和展开运算符
类和继承
Promise
模块化
迭代器和生成器
Map和Set

ES7新特性

Array.prototype.includes()方法
求幂运算符 **

ES8新特性

Async/Await
Object.values()，Object.entries()
String padStart

ES9新特性

for — of遍历
Promise.prototype.finally()

ES10新特性

Array.prototype.flat()
Array.prototype.flatMap()
Object.fromEntries()
String.trimStart 和 String.trimEnd
try…catch

自面量对象的简写

在ES6中，如果键和值相同，则可以省略不写

let age = 20,name = 'Alice';
// ES5： 定义对象字面量
let obj = {age: age,name: name,say: function() {console.log(1);}
}
// ES6： 定义对象字面量
let obj = {age,name,say() {console.log(1);}
}
console.log(obj.name)
obj.say();

思考：for，for-in，forEach，for-of几种遍历方式的区别？
链接: https://pan.baidu.com/s/11vSmgRqNK1drY_9dPdSvUQ?pwd=gyrv 提取码: gyrv --来自百度网盘超级会员v5的分享