<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>04数组挖掘</title>
</head>
<body>
<!--4.6 点语法操作DOM节点元素-->
<!--<div>zhangSan</div>-->
<!--<div>liSi</div>-->
<script>
/*通过new创建的类型为object类型，非new创建的类型为普通值类型*/
/*4.1 基本使用*/
/*4.1.1 使用new对象方式声明数组*/
// const array = new Array("liu", "chang");
// console.log(typeof array, array); // object (2)['liu', 'chang']
/*4.1.2 使用自变量的形式定义数组*/
// const array = ["liu", "chang"];
// console.log(typeof array, array); // object (2)['liu', 'chang']
/*4.1.3 数组是一个对象，是一个引用类型*/
// let array = [1, 2, 3, 4];
// let web = array;
// web[1] = "www.baidu.com"
// console.log(web); //(4)[1, 'www.baidu.com', 3, 4]
// console.log(array); //(4)[1, 'www.baidu.com', 3, 4]
/*4.1.4 控制台表单*/
// const name = ['1', '2', '3', '4'];
// console.table(name);
/*4.2 多维数组操作*/
/*4.2.1 数组取值*/
// let array = [1, 2, 3, 4];
// console.log(array[1]); // 2
/*4.2.2 多维数组取值*/
// let array = [[1,2,3], [4,5,6,7]];
// console.log(array[1][2]); // 6
/*4.2.3 数组中存储对象并取值*/
// let array = [{name: "zhangSan", age: 12}, {name: "liSi", age: 13}];
// console.log(array[1].name); // liSi
/*4.2.4 const声明的引用类型的变量可以改值*/
// const array = [1,2,3,4];
// array[1] = 88;
// console.log(array); // (4)[1, 88, 3, 4]
/*4.3 Array.of与数组创建细节*/
/*4.3.1 获取数组元素的数量*/
// let array = [1,2,3,4];
// console.log(array.length); // 4
/*4.3.2 数组的默认填充值*/
// let array = [1];
// array[3] = "baidu";
// console.log(array.length, array, array[2]); //4 (4)[1, empty × 2, 'baidu'] undefined
/*4.3.3 旧版本js，new数组时单个值代表数组的数量*/
// let array = new Array(6);
// console.log(array.length, array, array[2]); // 6 (6)[empty × 6] undefined
/*4.3.4 新版本js，new数组时补足老版本的缺陷*/
// let array = Array.of(6);
// console.log(array.length, array, array[0]); // 1 [6] 6
/*4.4 类型检测与转换*/
/*4.4.1 判断传入的变量是否为数组*/
// console.log(Array.isArray([1,2])); // true
/*4.4.2 toString方法将数组转为字符串*/
// let name = [1,2,3].toString();
// console.log(typeof name, name); //string 1,2,3
/*4.4.3 join方法按照要求连接数组为字符串*/
// let name = [1,2,3].join("-");
// console.log(typeof name, name); // string 1-2-3
/*4.4.4 split方法将字符串转为数组*/
// let name = "www.baidu.com".split(".");
// console.log(typeof name, name); // object (3)['www', 'baidu', 'com']
/*4.4.5 Array.from方法将字符串转为数组*/
// let name = "baidu";
// // 提示: 拥有length属性的变量都可以转为数组
// console.log(Array.from(name)); // (5)['b', 'a', 'i', 'd', 'u']
/*4.5 展开语法*/
// 展开语法作为值时是展开，作为变量时是把值合并为一个数组。
/*4.5.1 数组合并*/
// let array1 = ["zhang","san"];
// let array2 = ["li","si"];
// array1 = [...array1,...array2];
// console.log(array1); // (4)['zhang', 'san', 'li', 'si']
/*4.5.2 函数接收参数*/
// function sum(...args) {
// console.log(typeof args, args); // object (5)[1, 2, 3, 4, 5]
// return args.reduce((s,v) => {
// return (s += v);
// }, 0);
// }
// console.log(sum(1,2,3,4,5)); // 15
/*4.6 点语法操作DOM节点元素*/
// 将dom元素按照数组的方式操作
// const div = document.querySelectorAll("div");
// console.log(div.length, div); // 2 NodeList(2)[div, div]
//
// /*4.6.1 方式一*/
// Array.from(div).map(function (item){
// console.log(item); // <div>zhangSan</div> <div>liSi</div>
// });
//
// /*4.6.2 方式二*/
// [...div].map(function (item) {
// console.log(item); // <div>zhangSan</div> <div>liSi</div>
// });
/*4.7 使用解构赋值*/
// 把数组中的值批量赋值给变量
// 解构基础
// let arr = ["liSi", 26];
// let [name1,age1] = arr;
// console.log(name1,age1); // liSi 26
// let [,age2] = arr;
// console.log(age2); // 26
// 解构和展开语法的综合使用
// let [name,...args] = ["张三","李四",27];
// console.log(name,args) // 张三 (2)['李四', 27]
/*4.8 添加元素的多种操作*/
/*4.8.1 数组的普通追加*/
// let array = ["souHu","baiDu"];
// array[array.length] = "xinLang";
// console.log(array); // (3)['souHu', 'baiDu', 'xinLang']
/*4.8.2 使用数组的对象方法进行追加*/
// let array = ["souHu","baiDu"];
// array.push("shop","fish");
// console.log(array); // (4)['souHu', 'baiDu', 'shop', 'fish']
/*4.8.2 数组合并*/
// let array = ["souHu","baiDu"];
// let array1 = ["shop","fish"];
// array.push(...array1);
// console.log(array); // (4)['souHu', 'baiDu', 'shop', 'fish']
/*4.9 数据出栈与入栈及填充操作*/
/*4.9.1 从数组最后压数据和弹数据*/
// let array = ["baiDu","souHu"];
// array.push("xinLang");
// console.log(array); //(3)['baiDu', 'souHu', 'xinLang']
// let name = array.pop();
// console.log(name,array); //xinLang (2)['baiDu', 'souHu']
/*4.9.2 从数组最前压数据和弹数据*/
// let array = ["baiDu","souHu"];
// array.unshift("xinLang");
// console.log(array); //(3)['xinLang', 'baiDu', 'souHu']
// let name = array.shift();
// console.log(name,array); //xinLang (2)['baiDu', 'souHu']
/*4.9.3 元素填充*/
// console.log(Array(2).fill("baidu")); // (2)['baidu', 'baidu']
// console.log([1,2,3,4].fill("baidu",1,3)); // (4)[1, 'baidu', 'baidu', 4]
/*4.10 splice与slice实现数组的增删改查*/
/*
会改变原数组: unshift()、 shift()，push()、pop()，splice()
不会改变原数组: slice()
*/
/*4.10。1 slice基本使用*/
// slice第二个参数截到第几个（下标）
// let array = [1,2,3,4];
// console.log(array.slice(1,3)); //(2)[2, 3]
// console.log(array); //(4)[1, 2, 3, 4]
/*4.10。2 splice基本使用*/
// splice第二个参数是截几个（数量）
// let array = [1,2,3,4,5];
// console.log(array.splice(1,3)); //(3)[2, 3, 4]
// console.log(array); //(2)[1, 5]
/*4.10.3 splice实现指定位置替换*/
// let array = [1,2,3,4,5];
// console.log(array.splice(1,3,"baidu")); //(3)[2, 3, 4]
// console.log(array); //(3)[1, 'baidu', 5]
/*4.10.3 splice实现指定位置追加*/
// let array = [1,2,3,4,5];
// console.log(array.splice(1,0,"baidu")); //[]
// console.log(array); //(6)[1, 'baidu', 2, 3, 4, 5]
/*4.11 清空数组的方式*/
/*4.11.1 清空数组方式一*/
// let array = [1,2,3,4,5];
// array = [];
// console.log(array); // []
// 注意点:
// let array1 = [1,2,3,4];
// let array2 = array1;
// array1 = [];
// console.log(array1,array2); // [] (4)[1, 2, 3, 4]
/*4.11.2 清空数组方式二(推荐使用)*/
// let array = [1,2,3,4,5];
// array.length = 0;
// console.log(array); // []
// 注意点:
// let array1 = [1,2,3,4];
// let array2 = array1;
// array1.length = 0;
// console.log(array1,array2); // [] []
/*4.12 数组的拆分与合并*/
/*4.12.1 split把字符串转换成数组*/
// let str = "baidu.com";
// console.log(str.split("."));//(2)['baidu', 'com']
/*4.12.2 join把数组转换成字符串*/
// let str = "baidu.com";
// let name = str.split(".");
// console.log(name.join("-"));//baidu-com
/*4.12.3 数组合并*/
// let array1 = ["baidu","xinLang"];
// let array2 = [1,2,3,4];
// let array3 = [5,6,7];
// let name = array1.concat(array2,array3);
// console.log(name); // (9)['baidu', 'xinLang', 1, 2, 3, 4, 5, 6, 7]
/*4.12.4 数组元素的复制*/
// let array = [1,2,3,4,5,6,7];
// // Array.copyWithin(a,b,c) a:要赋值到的位置 b:开始的位置 c:结束的位置
// console.log(array.copyWithin(2,0,2)); //(7)[1, 2, 1, 2, 5, 6, 7]
/*4.13 查找元素基本使用*/
/*4.13.1 查找元素返回下标*/
// 注意: indexOf、lastIndexOf方法为严格类型匹配查找。
// let array = [1,2,3,4,2,5,6,7];
// // 从左往右进行查找，查到时返回对应值的下标，查找不到时返回 -1
// console.log(array.indexOf(2)); // 1
// // 从右往左进行查找，查到时返回对应值的下标，查找不到时返回 -1
// console.log(array.lastIndexOf(2)); // 4
// let array = [1,2,3,4];
// if (array.includes(2)) {
// console.log("找到了");
// } else {
// console.log("没有找到");
// }
// 注意: 查找引用类型时includes无法匹配，因为引用类型比较的是内存地址
// let lesson = [{name:"js"},{name:"go"},{name:"vue"}];
// console.log(lesson.includes({name:"go"})); // false
//
// let a = 123;
// let b = 123;
// console.log(a == b); // true
//
// let c = [1,2,3];
// let d = [1,2,3];
// console.log(c == d) ; // false
/*4.14 高效的find与findIndex*/
/*4.14.1 find遍历数组元素*/
// let array = ["baidu","souHu","xinLang"];
// array.find(function (item) {
// console.log(item); // baidu souHu xinLang
// });
/*4.14.2 find查找引用类型*/
// let lesson = [{name:"js"},{name:"go"},{name:"vue"},{name:"go"}];
// let status = lesson.find(function (item) {
// return item.name == "go";
// });
// console.log(status); // {name: 'go'}
/*4.14.3 find查找引用类型的位置*/
// let lesson = [{name:"js"},{name:"go"},{name:"vue"},{name:"go"}];
// let index = lesson.findIndex(function (item) {
// return item.name == "go";
// });
// console.log(index); // 1
/*4.15 数组排序使用*/
/*4.15.1 数组排序*/
// let array = [1,5,3,9,7];
// array = array.sort(function (a,b){
// // 从小到大排序
// return a-b;
// // 从大到小排序
// // return b-a;
// });
// console.log(array); // (5)[1, 3, 5, 7, 9]
/*4.15.2 对数组内的引用对象进行排序*/
// let cart = [{name: 'iphone',price: 12000},
// {name: 'imac', price: 18000},
// {name: 'ipad', price: 3200}
// ];
// cart = cart.sort(function (a,b){
// return b.price-a.price;
// });
// console.log(cart);
// (3) [{…}, {…}, {…}]
// 0: {name: 'imac', price: 18000}
// 1: {name: 'iphone', price: 12000}
// 2: {name: 'ipad', price: 3200}
/*4.16 循环操作数组中的引用类型*/
/*4.16.1 普通循环方式*/
// let lessons = [
// { title: "go语言", category: "program"},
// { title: "vue前端", category: "js"},
// { title: "mysql操作", category: "mysql"}
// ];
// for (let i=0;i<lessons.length;i++) {
// lessons[i].title=`Learn_${lessons[i].title}`;
// }
// console.log(lessons);
/*
(3) [{…}, {…}, {…}]
0: {title: 'Learn_go语言', category: 'program'}
1: {title: 'Learn_vue前端', category: 'js'}
2: {title: 'Learn_mysql操作', category: 'mysql'}
*/
/*4.16.2 for-of循环方式*/
// let lessons = [
// { title: "go语言", category: "program"},
// { title: "vue前端", category: "js"},
// { title: "mysql操作", category: "mysql"}
// ];
// for (let value of lessons) {
// value.title =`Learn_${value.title}`;
// }
// console.log(lessons);
/*
(3) [{…}, {…}, {…}]
0: {title: 'Learn_go语言', category: 'program'}
1: {title: 'Learn_vue前端', category: 'js'}
2: {title: 'Learn_mysql操作', category: 'mysql'}
*/
/*4.16.3 注意：循环操作数组中的非引用类型*/
// 值类型传的是值，引用类型(对象)传的是指针(内存地址)。
// let array = [1,2,3];
// for (let value of array) {
// value += 10;
// }
// console.log(array); // (3)[1, 2, 3]
/*4.16.4 for-in循环方式*/
// let lessons = [
// { title: "go语言", category: "program"},
// { title: "vue前端", category: "js"},
// { title: "mysql操作", category: "mysql"}
// ];
// for (let key in lessons) {
// lessons[key].title =`Learn_${lessons[key].title}`;
// }
// console.log(lessons);
/*
(3) [{…}, {…}, {…}]
0: {title: 'Learn_go语言', category: 'program'}
1: {title: 'Learn_vue前端', category: 'js'}
2: {title: 'Learn_mysql操作', category: 'mysql'}
*/
/*4.17 forEach循环方法使用*/
// let lessons = [
// { title: "go语言", category: "program"},
// { title: "vue前端", category: "js"},
// { title: "mysql操作", category: "mysql"}
// ];
//
// lessons.forEach(function (item,index) {
// console.log(index,item);
// });
/*
0 {title: 'go语言', category: 'program'}
1 {title: 'vue前端', category: 'js'}
2 {title: 'mysql操作', category: 'mysql'}
*/
/*4.18 iterator迭代器方法操作数组*/
/*4.18.1 普通方法使用*/
// let array = ["baidu","xinLang"];
// let values = array.values();
// console.log(values.next()); //{value: 'baidu', done: false}
// console.log(values.next()); //{value: 'xinLang', done: false}
// console.log(values.next()); //{value: undefined, done: true}
// console.log(array); //(2)['baidu', 'xinLang']
// let array = ["baidu","xinLang"];
// let values = array.values();
// let {value,done} = values.next();
// console.log(value,done); // baidu false
// let array = ["baidu","xinLang"];
// let values = array.keys();
// console.log(values.next()); //{value: 0, done: false}
/*4.18.2 for-of方法操作*/
// let array = ["baidu","xinLang"];
// for (let value of array.values()) {
// console.log(value); //baidu xinLang
// }
// let array = ["baidu","xinLang"];
// for (let key of array.keys()) {
// console.log(key); //0 1
// }
/*4.18.3 补充方法*/
// let array = ["baidu","xinLang"];
// let entries = array.entries();
// console.log(entries.next()); //{value: Array(2), done: false} value: (2) [0, 'baidu']
// console.log(entries.next()); //{value: Array(2), done: false} value: (2) [1, 'xinLang']
// console.log(entries.next()); //{value: undefined, done: true} value: undefined
// let array = ["baidu","xinLang"];
// let entries = array.entries();
// let {value, done} = entries.next();
// console.log(value,done); //(2)[0, 'baidu'] false
// let array = ["baidu","xinLang"];
// for (let [key,value] of array.entries()) {
// console.log(key,value);
// /*
// 0 'baidu'
// 1 'xinLang'
// */
// }
/*4.19 every与some的使用*/
/*4.19.1 every的使用*/
// 所有为真时才为真
// const user = [
// {name:'李四',js: 89},
// {name:'张三',js: 55},
// {name:'马六',js: 65},
// ];
// let res = user.every(function (item) {
// // 为true时继续循环并返回true，为false时停止循环并返回false。
// return item.js >= 60;
// });
// console.log(res ? "全部同学都及格" : "有同学没有及格"); //有同学没有及格
/*4.19.2 some的使用*/
// 有一个为真则为真
/*4.20 filter过滤元素使用*/
// let lessons = [
// { title: "vue前端", category: "js"},
// { title: "mysql操作", category: "mysql"},
// { title: "js语言", category: "js"}
// ];
// let res = lessons.filter(function(item){
// return item.category === "js";
// });
// console.log(res);
/*
(2) [{…}, {…}]
0: {title: 'vue前端', category: 'js'}
1: {title: 'js语言', category: 'js'}
*/
/*4.21 map映射数组与引用类型处理*/
// 复制一份数组并对复制的数组进行修改
/*4.21.1 map对值类型操作*/
// let array = ['baidu','souHu'];
// let res = array.map(function(value) {
// return value = `view-${value}`;
// });
// console.log(res); //['view-baidu', 'view-souHu']
// console.log(array); //['baidu', 'souHu']
/*4.21.2 map对引用类型操作*/
// 没有返回值
// let lessons = [
// { title: "go语言", category: "program"},
// { title: "vue前端", category: "js"},
// { title: "mysql操作", category: "mysql"}
// ];
// // 不返回值
// lessons.map(function (value) {
// value.click = 200;
// });
// console.log(lessons);
/*
(3) [{…}, {…}, {…}]
0: {title: 'go语言', category: 'program', click: 200}
1: {title: 'vue前端', category: 'js', click: 200}
2: {title: 'mysql操作', category: 'mysql', click: 200}
*/
// 有返回值
// let lessons = [
// { title: "go语言", category: "program"},
// { title: "vue前端", category: "js"},
// { title: "mysql操作", category: "mysql"}
// ];
// // 有返回值
// let res = lessons.map(function (value) {
// return Object.assign({click: 200}, value);
// });
// console.log(res);
/*
(3) [{…}, {…}, {…}]
0: {click: 200, title: 'go语言', category: 'program'}
1: {click: 200, title: 'vue前端', category: 'js'}
2: {click: 200, title: 'mysql操作', category: 'mysql'}
*/
// console.log(lessons);
/*
(3) [{…}, {…}, {…}]
0: {title: 'go语言', category: 'program'}
1: {title: 'vue前端', category: 'js'}
2: {title: 'mysql操作', category: 'mysql'}
*/
/*4.22 reduce方法操作数组*/
/*4.22.1 基本语法*/
// let array = [1,2,3,4,5];
// // pre(上一次返回的结果),value(值),index(索引),arr(原数组)
// array.reduce(function(pre,value,index,arr) {
// console.log(pre,value);
// },0);
/*
0 1
undefined 2
undefined 3
undefined 4
undefined 5
*/
/*4.22.2 统计数组元素出现的次数*/
// let array = [1,2,2,3,1,3,3,2,3];
// function arrayCount(array,item) {
// return array.reduce(function(total, cur) {
// total += item === cur ? 1 : 0;
// return total;
// }, 0);
// }
// console.log(arrayCount(array,2)); // 3
/*4.22.3 统计数组元素的最大值*/
// let array = [1,6,3,88,2,5];
// function arrayMax(array) {
// return array.reduce(function(pre, cur) {
// return pre > cur ? pre : cur;
// });
// }
// console.log(arrayMax(array)); // 88
/*4.23 reduce取价格最高的商品*/
// let cart = [
// { name: "iphone", price: 12000 },
// { name: "imac", price: 25000 },
// { name: "ipad", price: 3600 }
// ];
// function maxPrice(goods) {
// return cart.reduce(function (pre,cur){
// return pre.price > cur.price ? pre : cur;
// });
// }
// console.log(maxPrice(cart)); //{name: 'imac', price: 25000}
/*4.24 reduce计算购物车中的商品总价*/
// let cart = [
// { name: "iphone", price: 12000 },
// { name: "imac", price: 25000 },
// { name: "ipad", price: 3600 }
// ];
// function sum(goods) {
// return goods.reduce(function (total,cur){
// total += cur.price;
// return total;
// }, 0);
// }
// console.log(sum(cart)); // 40600
/*4.25 reduce处理购物车中的重复商品*/
/*4.25.1 reduce查找符合条件的数据*/
// let cart = [
// { name: "iphone", price: 12000 },
// { name: "imac", price: 25000 },
// { name: "ipad", price: 3600 }
// ];
// function getNameByPrice(goods,price) {
// return goods.reduce(function (arr,cur){
// if (cur.price > price) arr.push(cur);
// return arr;
// },[]).map(function (item){
// return item.name;
// });
// }
// console.log(getNameByPrice(cart,10000)); // ['iphone', 'imac']
/*4.25.2 reduce元素去重*/
// let array = [1,2,3,3,1,4,2];
// let newArray = array.reduce(function (arr, cur){
// if (arr.includes(cur) === false) {
// arr.push(cur);
// }
// return arr;
// }, []);
// console.log(newArray); // [1, 2, 3, 4]
// let cart = [
// { name: "imac", price: 25000 },
// { name: "iphone", price: 12000 },
// { name: "imac", price: 25000 },
// { name: "ipad", price: 3600 },
// { name: "ipad", price: 3600 }
// ];
// function filterGoods(goods) {
// return goods.reduce(function (arr,cur){
// let find = arr.find(function (v){
// return v.name === cur.name;
// });
// if (!find) arr.push(cur);
// return arr;
// },[]);
// }
// console.log(filterGoods(cart));
/*
(3) [{…}, {…}, {…}]
0: {name: 'imac', price: 25000}
1: {name: 'iphone', price: 12000}
2: {name: 'ipad', price: 3600}
*/
</script>
</body>
</html>
