标签：console log 04 let 数组 挖掘 array name
<!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>
标签：console,log,04,let,数组,挖掘,array,name 来源： https://www.cnblogs.com/LiuChang-blog/p/16485253.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。