关于小米

27岁，山西运城人，职业电商经理人，前端开发工作者,从事过网站建设、网络推广、SEO、SEM、信息流推广、二类电商、网络运维、软件开发，等相关电商工作，经验较为丰富，小米技术社区致力于为广大从事Web前端开发的人员提供一些力所能及的引导和帮助 ...[更多]

E-mail:mzze@163.com

Q Q:32362389

W X:xiaomi168527

关于王飞

27岁，山西运城人，职业电商经理人，网络工程师兼运维，从事过运营商网络建设，企业网络建设、优化。数据中心网络维护等通过，经验丰富，座右铭：当自己休息的时候，别忘了别人还在奔跑。 ...[更多]

E-mail:wf_live@126.com

Q Q:3940019

微博:王小贱ss

关于小艳

大于花一样的年龄，河南郑州是我家，2010年在北京接触团购网，2011年进入天猫淘宝一待就是四年，如今已经将设计走向国际化（ps:误打误撞开始进入阿里巴巴国际站的设计，嘿嘿）五年电商设计，丰富经验，从事过天猫淘宝阿里各项设计，店铺运营，产品拍摄；我将我的经历与您分享是我的快乐！座右铭：越努力越幸运！ ...[更多]

E-mail:97157726@qq.com

Q Q:97157726

精品推荐

什么是闭包?js闭包的2个最大用途以及注意事项

各种专业文献上的"闭包"（closure）定义非常抽象，很难看懂。简单的说，闭包就是能够读取其他函数内部变量的函数。由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因……

226人已经看过了

本栏目近期文章

您的位置：首页 > 前端开发 > Javascript > 原生JS

9.第四阶段17 循环数组的方式-数组的判断比较-map的使用-set的使用-解构赋值-1.数组解构-2 对象解构-求最大值-把字符串变成数组

12-25分类: 原生JS101个赞

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

//循环数组的方式  froEach for  , for ..of 
//es6新的数组循环方式 reduce  主要是用在累加上
let arr=[1,2,3,4,5]
let sum=arr.reduce((sum,item)=>{
return sum+item;
},0)
console.log(sum)  //结果15,计算出arr的所有数组相加结果 只能是数字
 
//对于数组的判断 比较麻烦 判断对象是不是数组
console.log(typeof {}); //结果 对象
console.log(typeof []); //结果 也是对象
console.log(Array.isArray()) //结果false 判断当前是不是一个数组
console.log(Array.isArray([])) //结果true 
 
let obj={
    1:"1",
    2:"2",
    length:2,
    push:Array.prototype.push,
    pop:Array.prototype.push
}
obj.push("3");
console.log(obj) //给对象添加了一个3
 
//可迭代的对象
let arr2=[1,2,3,4,5];
let range={
    from:1,
    to:3
}
for (const iterator of arr2) {
    console.log(iterator)
}
 
 
//想让对象被迭代,需要写这段才可以
range[Symbol.iterator] = function(){
    return {
        number:this.from,
        last:this.to,
        next(){
            if(this.number<=this.last){
                return {done:false,value:this.number++};
            }else{
                return{done:true}
            }
        }
    }
}
for (const iterator1 of range) {
    console.log(iterator1)
}
//实例2
let arrayLike = {
    0:"hello",
    1:"World",
    length:2
}
let arr1= Array.from(arrayLike);  //必须先转换为数组才可以被迭代
for (const iterator of arr1) {
    console.log(iterator)
}
 
 
//map  键值项  item value
let map =new Map();
let john = {name:"john"}
map.set(john,100)
map.set("1","str1");
map.set(1,'num1');
map.set(true,"bool1") ;
console.log(map.get(john)); //结果100
console.log(map.get("1")); //结果str1
console.log(map.get(1)); //结果num1
console.log(map.get(true)); //结果bool1
 
//对象的属性只能是文本
let obj1={};
obj1[john] =123; //对象的键值会自动转换为文本
console.log(obj1[john])
 
map.set("11",11).set("22",22)  //map支持链式调用
map.delete("11") //删除掉某个键
map.clear() //清空map
// map.size() //查看有多少成员
map.has("11") //查看键值存在不存在
//map.set(key,value) //创建键值
//map.get(key) //获取键的值
map.keys() //返回所有的键
map.values() //返回所有的值
map.entries() //返回 [key:value]
for (const key of map.keys()) {
    console.log(key)
}
for (const values of map.values()) {
    console.log(values)
}
for (const entries of map.entries()) {
    console.log(entries)
}
map.forEach((value,key)=>{
    console.log(value,key)
}
)
//map 实例1  对象转换为map
 
let obj2={
    siteName:"小米网",
    host:"www.sh.set"
}
let map1 = new Map(Object.entries(obj2));
console.log(map1.get("siteName"))
 
//map 实例2
let obj3= Object.fromEntries([["siteName","小米网"],["host","www.sh.net"]])
console.log(obj3)
 
 
//set 值类型集合  他的每一值只能出现一次
 
let set= new Set();
set.add(1);
set.add(2);
set.add(3);
set.add(1);
set.add(3);
console.log(set.size) //结果是3 值是唯一的 新出的东西 以前没有 
//set 实例1 去重函数
let  arr3=[11,2,3,4,564,5,45,3,34,1,3,2,3,4]
function unique(arr3){
    return Array.from(new Set(arr3)) //记得Set S是大写
}
console.log(unique(arr3)) //去重后的结果
//Object.keys()  获取对象所有键
//Object.values()  获取对象所有值
//Object.entries() 获取键值
 
 
//解构赋值
//1.数组解构
let arr4=["hello","xiaomi"]
let [name1,name2] = arr4;
let [name3,name4] = "hello xiaomi".split(" ") //原理和上面一样
console.log(name3,name4)
 
//数据解构 只拿1 2 4
let arr5=["hello","xiaomi","hello2","baidu"]
let [name5,name6,,name7]=arr5;
console.log(name5,name6,name7) //结果
 
let [a,b,c] = "abc"; //这个可以吗?  可以 不仅限于数组
let [one,two,three] = new Set([1,2,3]) //这个可以吗? 可以 
console.log(a,b,c,one,two,three) //结果 abc123
 
let map3=new Map();
map3.set("1","1");
map3.set("2","2");
map3.set("3","3")
for (const [key,value]of map3.entries()) {
    console.log(key,value) //结果11 22 33
}
 
//对象解构
let obj5={
    name:"hello",
    age:17,
    height:178,
    width:180
}
let {name,age} = obj5;
console.log(name,age) //结果 hello 17
//如何用这种方法想重命名键名怎么办?
let {name:a1,age:n1} = obj5;
console.log(a,n1)
let {a1:a2=27,n2="excel"} = obj5; //不仅可以对对象改名,还可以直接赋值的哦
console.log(a2,n2) ;//结果27和excel
 
let{height} = obj5; //也可以只调用一个值
console.log(height) //结果178
 
let{width,...obj1111} = obj5;  //obj1111随便定义  可以调用出其他所有
console.log(width)  //结果180
console.log(obj1111) //结果剩余的 { name: 'hello', age: 17, height: 178 }
 
//例子2
let options = {
    size:{
        width1:100,
        height1:200
    },
    items:["hello","no"],
    extra:true
};
//下来开始拆解  然后分别调用
let {
    size,
  /*   size:{
        width1,
        height1,
    }, //也可以*/ 
    items:[item1,item2],
    extra
} = options;
console.log(size.width1,size.height1,item1,item2,extra) //结果 100 200 hello no true 分别拆解
 
//解构例子3 计算最高工资  用对象
let salaries ={   //salaries 工资的意思
    "John":100,
    "Pete":300,
    "Mary":250
}
function toSalary(obj){
    let max=0;
    let maxName = null;
    for (let [name,salary] of Object.entries(obj)) {  //把对象变成数组 Object.entries
        if(max<salary){
            max = salary;
            maxName = name;
        }
    }
    return maxName;  //返回最高工资 姓名
};
console.log(toSalary(salaries)) //结果pete工资最高
 
//解构例子4   我们要实现无限参数的函数 
function sum1(a,b){  //正常加法运算
    return a+b;
};
//如想实现console.log(sum(1,2,3,4,5,6))  等等无限参数怎么办呐
function sum1(...args){
    console.log(args)
    let sum1 = 0;
    for (const iterator of args) {
        sum1+=iterator
    }
    return sum1
}
console.log(sum1(1,2,3,4,5,6))  //结果是21
 
/* function sum1(a,b...args){
    //这种调用方式也支持,注意...args只能放在最后
    } */
 
//例子5 求最大数
console.log(Math.max(1,2,3,5,33,2,3)) //能够输出我们当前传入数的最大值  Math.max求最大值
//但是 console.log(Math.max([1,2,3])) 会报NAN错误 我们可以这样
let arr8=[1,2,3];
let arr9 = [-1,10,20]
console.log(Math.max(...arr8)) //结果3 ...arr8会把数组变成Math.max(1,2,3)
console.log(Math.max(...arr8,...arr9))  //结果20
console.log(Math.max(50,...arr8,...arr9))  //结果50 可以很方便最运算
let merged = [0,...arr8,5,6,7,...arr9,2,3,4];
console.log(merged) //结果[0,  1,  2,  3, 5, 6,7, -1, 10, 20, 2, 3,4]
//例子6 把一个字符串变成一个数组
let str="hello"
console.log(...str) //结果是 h e l l o
console.log([...str]) //把str变成数组
 
let obj8 = {a:1,b:2,c:3};
let objCopy = {...obj8};
console.log(objCopy) //结果是obj8的值  {a:1,b:2,c:3} 简易的拷贝,2个值并不相等哦

小米技术社区

本站内容均为小米原创，转载请注明出处：小米技术社区>> 9.第四阶段17 循环数组的方式-数组的判断比较-map的使用-set的使用-解构赋值-1.数组解构-2 对象解构-求最大值-把字符串变成数组

标签：百度编辑器 sublime animation node.js SEO技巧 Html+Css jQuery 小米社区发展史帝国插件帝国CMS插件

这篇文章不错，赞哦(101)

猜你喜欢

什么是闭包?js闭包的2个最大用途以及注意事项

9.第四阶段17 循环数组的方式-数组的判断比较-map的使用-set的使用-解构赋值-1.数组解构-2 对象解构-求最大值-把字符串变成数组

猜你喜欢