jquery switch 开启值 js中switch语句怎么用

js中switch语句用法详解+循环相关用法

• switch

• 关键点
• 语法
• 实例
• break关键词
• default关键词
• 不同 case 共享同一个代码块
• Switch case 使用严格比较（===）

• js循环相关

• while循环
• do-while 循环
• for循环
• for-in 循环
• for-of循环

• for-of 循环数组
• for-of 循环Set 和 Map 结构
• for-of 循环类似数组的对象

• 循环控制语句

• break
• continue

• 练习题 排序

switch

关键点

1. 如果多种 case 匹配一个 case 值，则选择第一个 case( break 会跳出 switch 语句)。
2. 如果未找到匹配的 case，程序将执行 default里的代码块。
3. 代码块不需要加花括号
4. Switch case 使用严格比较（===）,也就是值跟类型都得一致
5. 可以多个 case匹配同一代码块

语法

switch 语句来选择多个需被执行的代码块之一。

语法

switch(表达式) {
	case n:
		代码块(如果有多行,不需要加花括号)
		break
	case n:
		代码块
		break
	default
		默认代码块
}

1. 计算一次 switch 表达式
2. 把表达式的值与每个 case 的值进行对比 (===)
3. 如果存在匹配,则执行关联代码,否则执行默认代码块

实例

getDay() 方法返回 0 至 6 之间的周名数字（weekday number）。

(Sunday=0, Monday=1, Tuesday=2 …)

本例使用周名数字来计算周的名称：

switch (new Date().getDay()) {
    case 0:
        day = "星期天";
        break;
    case 1:
        day = "星期一";
         break;
    case 2:
        day = "星期二";
         break;
    case 3:
        day = "星期三";
         break;
    case 4:
        day = "星期四";
         break;
    case 5:
        day = "星期五";
         break;
    case 6:
        day = "星期六";
} 
console.log(`今天是${day}`) // 今天是星期一

break关键词

1. JavaScript 遇到break关键词，它会跳出 switch 代码块
2. break能够节省大量执行时间，因为它会“忽略” switch 代码块中的其他代码的执行
3. 不必中断 switch 代码块中的最后一个 case , 代码块在此处会自然结束

default关键词

default 关键词规定不存在 case 匹配时所运行的代码：

如果今日既不是周六（6）也不是周日（0），则输出一段默认消息：

switch (new Date().getDay()) {
    case 6:
        text = "今天是周六";
        break; 
    case 0:
        text = "今天是周日";
        break; 
    default: 
        text = "期待周末!";
}
console.log(text) // 期待周末

默认的 case 不必是 switch 代码块中最后一个 case：
如果 default 不是 switch 代码块中最后一个 case，请记得用 break 结束默认 case。

switch (new Date().getDay()) {
    default: 
        text = "期待周末！";
         break;
    case 6:
        text = "今天是周六";
        break; 
    case 0:
        text = "今天是周日";
}

不同 case 共享同一个代码块

在本例中，case 4 和 5 分享相同的代码块，而 0 和 6 分享另一段代码块：

switch (new Date().getDay()) {
    case 4:
    case 5:
        text = "周末快到了：）";
        break; 
    case 0:
    case 6:
        text = "今天是周末~";
         break;
    default: 
        text = "期待周末！";
}

Switch case 使用严格比较（===）

下面的代码中，没有匹配的 case ,走 default ：

const x = "0";
switch (x) {
  case 0:
    text = "Off";
    break;
  case 1:
    text = "On";
    break;
  default:
    text = "No value found";
}
console.log(text) // No value found

之前项目中用到 switch 语法时, 因为不熟悉
多行的代码块加了花括号,(可以不加)
放最后的 case 或者 default 加了 break (可以不加)

js循环相关

在讲循环的之前，先知道一下循环结构的执行步骤

1. 声明循环变量；
2. 判断循环条件;
3. 执行循环体操作；
4. 更新循环变量；
5. 然后循环执行2-4，直到条件不成立，跳出循环。

while循环

var num = 1; // 1、声明循环变量
while (num<=10){ // 2、判断循环条件;
    document.write(num+"<br />"); // 3、执行循环体操作；
    num++; // 4、更新循环变量；
}

while循环()中的表达式，运算结果可以是各种类型，但是最终都会转为真假，转换规则如下。

• Boolean：true为真，false为假；
• String：空字符串为假，所有非空字符串为真；
• Number：0为假，一切非0数字为真；
• null/Undefined/NaN:全为假；
• Object：全为真。空数组和空对象也是真

do-while 循环

• while 循环特点：先判断后执行；
• do-while循环特点：先执行再判断，即使初始条件不成立，do-while循环至少执行一次；

var num = 10;
do{
    document.write(num+"<br />"); // 10 9 8 7 6 5 4 3 2 1 0
    num--;
    }while(num>=0);
document.write(num); // -1

for循环

• for有三个表达式：①声明循环变量；②判断循环条件；③更新循环变量；三个表达式之间，用;分割，for循环三个表达式都可以省略，但是两个“;”缺一不可。
• for循环的执行特点：先判断再执行，与while相同
• for循环三个表达式都可以有多部分组成，第二部分多个判断条件用 && || 连接，第一三部分用逗号分割；

for (let num =1; num<=10; num++) {
    document.write(num+" <br />"); //1 2 3 4 5 6 7 8 9 10 
}

for-in 循环

for-in MDN文档for...in 语句以任意顺序遍历一个对象的除 Symbol 以外的可枚举属性，包括继承的可枚举属性。

for-in 循环主要用于遍历对象

• for()中的格式：for(keys in zhangsan){}
• keys表示obj对象的每一个键值对的键！！所有循环中，需要使用obj[keys]来取到每一个值！！！
• for-in 循环，遍历时不仅能读取对象自身上面的成员属性，也能延续原型链遍历出对象的原型属性, 所以，可以使用hasOwnProperty判断一个属性是不是对象自身上的属性.obj.hasOwnProperty(keys) === true 表示这个属性是对象的成员属性，而不是原型属性

// 声明一个Peson类
function Person(){
    this.name = "张三";
    this.age = 25;
    this.func1 = function(){
        console.log('func1')
    }
}
// 实例化这个类
var zhangsan = new Person();
// 使用for-in遍历这个对象
for(keys in zhangsan){
   console.log('keys:', keys)
   console.log(`zhangsan.${keys}:`, zhangsan[keys])
}

查看dom元素对象所有属性名

let div = document.createElement('div')
let str = ''
let num = 0
for (let keys in div) {
	str += `${keys} `
	num++
}
console.log(str)
console.log('num: ', num)
// 打印出下面这些内容
"align title lang translate dir dataset hidden tabIndex accessKey draggable spellcheck autocapitalize contentEditable isContentEditable inputMode offsetParent offsetTop offsetLeft offsetWidth offsetHeight style innerText outerText oncopy oncut onpaste onabort onblur oncancel oncanplay oncanplaythrough onchange onclick onclose oncontextmenu oncuechange ondblclick ondrag ondragend ondragenter ondragleave ondragover ondragstart ondrop ondurationchange onemptied onended onerror onfocus oninput oninvalid onkeydown onkeypress onkeyup onload onloadeddata onloadedmetadata onloadstart onmousedown onmouseenter onmouseleave onmousemove onmouseout onmouseover onmouseup onmousewheel onpause onplay onplaying onprogress onratechange onreset onresize onscroll onseeked onseeking onselect onstalled onsubmit onsuspend ontimeupdate ontoggle onvolumechange onwaiting onwheel onauxclick ongotpointercapture onlostpointercapture onpointerdown onpointermove onpointerup onpointercancel onpointerover onpointerout onpointerenter onpointerleave onselectstart onselectionchange nonce click focus blur namespaceURI prefix localName tagName id className classList slot attributes shadowRoot assignedSlot innerHTML outerHTML scrollTop scrollLeft scrollWidth scrollHeight clientTop clientLeft clientWidth clientHeight attributeStyleMap onbeforecopy onbeforecut onbeforepaste onsearch previousElementSibling nextElementSibling children firstElementChild lastElementChild childElementCount onfullscreenchange onfullscreenerror onwebkitfullscreenchange onwebkitfullscreenerror setPointerCapture releasePointerCapture hasPointerCapture hasAttributes getAttributeNames getAttribute getAttributeNS setAttribute setAttributeNS removeAttribute removeAttributeNS hasAttribute hasAttributeNS toggleAttribute getAttributeNode getAttributeNodeNS setAttributeNode setAttributeNodeNS removeAttributeNode closest matches webkitMatchesSelector attachShadow getElementsByTagName getElementsByTagNameNS getElementsByClassName insertAdjacentElement insertAdjacentText insertAdjacentHTML requestPointerLock getClientRects getBoundingClientRect scrollIntoView scroll scrollTo scrollBy scrollIntoViewIfNeeded animate computedStyleMap before after replaceWith remove prepend append querySelector querySelectorAll requestFullscreen webkitRequestFullScreen webkitRequestFullscreen part createShadowRoot getDestinationInsertionPoints ELEMENT_NODE ATTRIBUTE_NODE TEXT_NODE CDATA_SECTION_NODE ENTITY_REFERENCE_NODE ENTITY_NODE PROCESSING_INSTRUCTION_NODE COMMENT_NODE DOCUMENT_NODE DOCUMENT_TYPE_NODE DOCUMENT_FRAGMENT_NODE NOTATION_NODE DOCUMENT_POSITION_DISCONNECTED DOCUMENT_POSITION_PRECEDING DOCUMENT_POSITION_FOLLOWING DOCUMENT_POSITION_CONTAINS DOCUMENT_POSITION_CONTAINED_BY DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC nodeType nodeName baseURI isConnected ownerDocument parentNode parentElement childNodes firstChild lastChild previousSibling nextSibling nodeValue textContent hasChildNodes getRootNode normalize cloneNode isEqualNode isSameNode compareDocumentPosition contains lookupPrefix lookupNamespaceURI isDefaultNamespace insertBefore appendChild replaceChild removeChild addEventListener removeEventListener dispatchEvent "

// num: 299

与其他遍历语法的比较
for…in循环有几个缺点

• 数组的键名是数字，但是 for...in 循环是以字符串作为键名“0”、“1”、“2”等等。
• for...in 循环不仅遍历数字键名，还会遍历手动添加的其他键，甚至包括原型链上的键。
• 某些情况下，for...in 循环会以任意顺序遍历键名。
• for...in 循环主要是为遍历对象而设计的，不适用于遍历数组。

for…of循环

• 有着同for...in 一样的简洁语法，但是没有 for...in 那些缺点。
• 不同于forEach 方法，它可以与 break、continue 和 return 配合使用。
• 提供了遍历所有数据结构的统一操作接口。

for-of循环

for-of MDN文档for...of 语句在可迭代对象（包括 Array，Map，Set，String，TypedArray，arguments 对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句

ES6 借鉴 C++、Java、C# 和 Python 语言，引入了 for...of 循环，作为遍历所有数据结构的统一的方法。

一个数据结构只要部署了 Symbol.iterator 属性，就被视为具有 iterator 接口，就可以用 for...of 循环遍历它的成员。也就是说，for…of 循环内部调用的是数据结构的Symbol.iterator 方法。

下面是一些数据结构的遍历

for-of 循环数组

JavaScript 原有的 for...in 循环，只能获得对象的键名，不能直接获取键值。ES6 提供 for...of 循环，允许遍历获得键值。

let arr = ['a', 'b', 'c', 'd'];
for (let key in arr) {
  console.log(key); // 0 1 2 3   类型都是 string
}
for (let value of arr) {
  console.log(value ); // a b c d
}

上面代码表明， for...in 循环读取键名，for...of 循环读取键值。如果要通过 for...of 循环，获取数组的索引，可以借助数组实例的 entries 方法和 keys 方法

for-of 循环Set 和 Map 结构

let engines = new Set(["Gecko", "Trident", "Webkit", "Webkit"]); // Set(3) {'Gecko', 'Trident', 'Webkit'}
for (let value of engines) {
  console.log(value);
}
// Gecko  Trident    Webkit
let es6 = new Map();
es6.set("edition", 6);
es6.set("committee", "TC39");
es6.set("standard", "ECMA-262");
for (let [name, value] of es6) {
  console.log(name + ": " + value);
}
// edition: 6
// committee: TC39
// standard: ECMA-262

上面代码演示了如何遍历 Set 结构和 Map 结构。值得注意的地方有两个，

• 首先，遍历的顺序是按照各个成员被添加进数据结构的顺序。
• 其次，Set 结构遍历时，返回的是一个值，而 Map 结构遍历时，返回的是一个数组，该数组的两个成员分别为当前 Map 成员的键名和键值。

for-of 循环类似数组的对象

类似数组的对象包括好几类。下面是 for...of 循环用于字符串、DOM NodeList 对象、arguments对象的例子。

// 字符串
let str = "hello";

for (let s of str) {
  console.log(s);  // h e l l o
}

// DOM NodeList对象
let paras = document.querySelectorAll("p");

for (let p of paras) {
  p.classList.add("test");
}

// arguments对象
function printArgs() {
  for (let x of arguments) {
    console.log(x);
  }
}
printArgs('a', 'b'); // 'a' 'b'

循环控制语句

break

• 跳出本层循环，继续执行循环后面的语句。常用于跳出 switch 语句
• 如果循环有多层，则break只能跳出一层。

continue

• 跳过本次循环剩余的代码，继续执行下一次循环。
• 对于 for 循环，continue 之后执行的语句，是循环变量更新语句 i++；
• 对于 while、do-while 循环，continue 之后执行的语句，是循环条件判断；

因此，使用这两个循环时，必须将 continue 放到 i++ 之后使用，否则，continue 将跳过 i++ 进入死循环。

for(let i = 1; i < 10; i++){
    if(i == 4){
        continue;
    }
    console.log(i);//1 2 3 5 6 7 8 9
}

for(let i = 1; i < 10; i++){
    if(i == 4){
        break;
    }
     console.log(i);//1 2 3
}

练习题 排序

给一字符串 按照各个单词出现的次数从高到低排序 次数相同的话字符的 Unicode 位点从低到高排序

Java is strongly typed language and variable must be declare first to use in program.In Java the type of a variable is checked at compile-time. JavaScript is weakly typed language and have more relaxed syntax and rules. Java is an object oriented programming language. JavaScript is an object based scripting language

let str = ' Java is strongly typed language and variable must be declare first to use in program.In Java the type of a variable is checked at compile-time. JavaScript is weakly typed language and have more relaxed syntax and rules. Java is an object oriented programming language. JavaScript is an object based scripting language'
let arr = str.split(' ')
let map  = new Map()
arr.forEach(item=> {
  if (map.has(item)) {
    map.set(item, +map.get(item) + 1)
  } else {
    map.set(item, 1)
  }
})
let arr1 = []
for (let key of map) {
  arr1.push(key)
}
arr1.sort((a, b) =>a[0] - b[0])
arr1.sort((a, b) => b[1] - a[1])