JS tutorial_1 | Notion

复习

三种输出方式

alert('q')
prompt('q')

console.log('p')
console.log('p')

数据类型
- 基本数据类型
  - string, number, boolean, undefined, null
    - String
      - string.length
      - num.toString() String(num) num+’’ // ’num’
    - Num
      - parseInt(num/string) parseFloat(bum)
      - Number(string)
      - string-, */ ,num
    - Boolean
      - Boolean(string)
        
        num: 0→ true. 除0之外都是false
        
        string: ‘’→false，除‘’之外都是true
- 对象 object: object
  - object, array
    - for loop
    - while
  typeof

运算符

自增 a=a++ a+=1
- 先自增还是先付值
- a=a++ 先付值再自增
- a+=1 先自增再付值
循环

for(let i=0; i++; i<10){
...logic
	for(){
		if()  continue;
		break;
	}
}

let i=0
while(i<10){
	...logic
	i++;
}

do{
	...logic
}while(i<10)

条件


if(condition){
	...logic
}if else{
	...logic
}else{
	...logic
}

switch(i){
	case i===1: ....; break;
	case i===2: ....;
	
}

//continue

expression (condition)?logic(true):logic(false)
- const b =a?1:2
```
let b;
if(a===true){
	b=1
}else{
	b=2
}
```
- const b =a||1
- const b = a&&1

练习

数据类型

在他们的网站上放置了以下的HTML代码，然后访问了这个网站，他们会看到什么？
```
<p dfsd="1"></p>
```
写一段 CSS 使h1 elements 红色加粗
```
h1{
	color: red;
	font-weight: bold;
}
```
为什么要使用CSS类而不是直接使用标签选择器？
1. class name
2. h1
当我们像这样两次定义相同的CSS规则时会发生什么：
```
h1{
	color: red;
}
h1{
	color: blue;
}
```
DevTools上的sources、network和console标签的目的是什么？
哪里可以获取有关CSS、定位和网站布局的更多信息？
- key resource
JavaScript — Dynamic client-side scripting

Web APIs

The HTML DOM (Document Object Model)

World Wide Web consortium (w3c) DOM specification
- css
- Book
https://github.com/getify/You-Dont-Know-JS

https://github.com/sorrycc/awesome-javascript

https://github.com/stoeffel/awesome-fp-js
当我们说JavaScript是单线程时，它是指JavaScript在执行时只有一个主线程。这意味着JavaScript代码是按顺序执行的，一次只能执行一个任务。如果有多个任务需要执行，它们会按照顺序排队等待执行，直到前一个任务完成。

由于JavaScript是单线程的，所以在执行某个耗时的任务时，其他任务必须等待。这也意味着如果一个任务出现阻塞或执行时间过长，会导致整个应用程序的响应变慢或冻结。

然而，JavaScript也支持异步编程模式，通过使用回调函数、Promise、async/await等机制，可以在执行异步任务时不阻塞主线程，从而提高应用程序的性能和响应能力。
- 按顺序执行，前面function执行结束才会执行后面的function
a=100
1. 线上消费 a=100 -10 a=90
2. 线下消费 a=100 -20. a=80
为什么我们要避免使用 var 或者简单地用 x=1 声明一个变量？
1. const let (es6)
什么是箭头函数（也被称为匿名函数或lambda），它的语法是怎样的？
```
function functionA(){
	
}
const functionA=()=>{}
```
for(x in items) 和 for(x of items) 之间有什么区别？a=[1,2,3,4,5]

for(let i=1; i<100; i++)
- for(x in items) : index : 0,1,2,3,4
- for(x of items) : value: 1,2,3,4,5

这段代码有什么问题？


console.log(`2 + 2 = ${sum(2, 2)}`)；

function sum(a, b) {
    return a + b
}

JavaScript 是在哪里运行的？

可以通过我访问的网站上的 JavaScript 删除我所有的文件吗？

给定一个类似下面的数据集，您如何找到名字以'A'开头的男性的平均年龄。

hint：string.startsWith(letter) name 以A开头，男性的平均年纪

const users = [
  {
    name: 'Jeff',
    age: 52,
    gender: 'male'
  },
  {
    name: 'Andy',
    age: 25,
    gender: 'male'
  },
  {
    name: 'Sarah',
    age: 30,
    gender: 'female'
  },
  {
    name: 'Phoebe',
    age: 21,
    gender: 'female'
  },
  {
    name: 'Doris',
    age: 81,
    gender: 'female'
  }
];

let totalAge = 0;
let count = 0;

for(let i=0; i < users.length; i++){
  const user = users[i];
  if(user.gender === 'male' && user.name.startsWith('A')){
    totalAge += user.age;
    count++;
  }
}

if(count>0){
  console.log(totalAge/count)
}

请编写一个函数，给定一个表示购物车的字符串数组，按每个商品及其在数组中出现的次数。

const cart = ['Apple', 'Orange', 'Apple', 'Strawberry', 'Orange'];

countCart(cart);
// above would print
// Apple 2
// Orange 2
// Strawberry 1

object ={
	a:0;
	b:1;
}
let obejct;
object[key]=value

object[key] undefined

const cart = ['Apple', 'Orange', 'Apple', 'Strawberry', 'Orange'];

const count = {}

for (const item of cart){
  count[item] = count[item]? count[item]+1 : 1;//count[item] += count[item]

  // if(count[item]){
  //   count[item]++
  // }else{
  //   count[item]=1
  // }
  //count[item] = count[item]++
  //count[item] += count[item]
  
  console.log(item, count[item])
}

 for (const item of Object.keys(count)){
   console.log(item+':'+count[item])
 }