敲开前端的学习大门---技术小白该如何自学了解工程师大佬们？

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第2天，点击查看活动详情

作为产品，每天都要跟开发同学打交道。实际工作中，处理问题时，技术方案选型和细节也是跟产品需求或多或少有关联的。不如借此机会，能跟开发同学肩并肩，好好学习技术知识。也能希望切身了解了解技术大佬们的思考过程～

为什么学习JS

全世界几乎所有网页都有 JavaScript，作为想技术入门、了解技术的其他岗位同学（例如我这种技术小小白，但日常工作经常遇到开发同学的各类方案和问题），学习JS可以是很好的入门之路，也是必学之路。

大概学习分为这几个方向，可以供大家参考下：基本语法、标准库、浏览器 API、DOM。学完这四个方向，能通过一些练习题，熟能生巧，也许就是很好的开始哦～

了解JS

参考“网道”的描述：JavaScript是一种轻量级的脚本语言。它本身提供的核心语法不算很多，只能用来做一些数学和逻辑运算。核心语法部分包括两个部分：基本的语法构造（比如操作符、控制结构、语句）和标准库（就是一系列具有各种功能的对象比如Array、Date、Math等）。

当然还提供额外的 API，以便JS调用。大概三类：（一）浏览器控制类：操作浏览器、（二）DOM 类：操作网页的各种元素、（三）Web 类：实现互联网的各种功能

学习Day 1

伴随例题，从各个论坛学习的笔记&练习过程。

基本语法

【变量】
var a; // 申明了变量a，此时a的值为undefined
var $b = 1; // 申明了变量$b，同时给$b赋值，此时$b的值为1
var s_007 = '007'; // s_007是一个字符串
var Answer = true; // Answer是一个布尔值true
var t = null; // t的值是null

【条件语句】

-多行条件判断
（else if，注意不要缺少了最后的中括号）

var age = 3;
if (age >= 18) {
    alert('adult');
} else if (age >= 6) {
    alert('teenager');
} else {
    alert('kid');
}

-多重条件判断
var height =1.75
var weight =80.5

var bmi = weight/(height*height);

if (bmi > 32) {
console.log('严重肥胖');
}
else if (bmi >= 28){
console.log('肥胖');

}else if(bmi >= 25){
console.log('过重');

}else if(bmi >=18.5){
console.log('正常');


}else {
console.log('过轻');}

【循环语句】

var x = 0;
var i;
for (i=1; i<=10000; i++) {
    x = x + i;
}
x;// 50005000

-遍历数组
var arr = ['Apple', 'Google', 'Microsoft'];
var i, x;
for (i=0; i<arr.length; i++) {
    x = arr[i];
    console.log(x);
} //输出三个词汇的列表 Array代替数组，i大于数组的个数，退出循环



-退出循环条件break
var x = 0;
for (;;) {                // 将无限循环下去
    if (x > 100) {
        break;            // 通过if判断来退出循环
    }
    x ++;
} //每一次循环打印出来一次结果，得到的是一个结果列表


-循环一个对象的所有属性 for (var key in sth)
var o = {
    name: 'Jack',
    age: 20,
    city: 'Beijing'
};
for (var key in o) {
    console.log(key); // 'name', 'age', 'city'
}  //依次打印name age city


var a = ['A', 'B', 'C'];
for (var i in a) {
    console.log(i); // '0', '1', '2'
    console.log(a[i]); // 'A', 'B', 'C'
} //i为索引


-while循环，相比for更容易判断，仅有一种条件，不满足时直接退出
var x = 0;
var n = 99;
while (n > 0) {
    x = x + n;
    n = n - 2;
}
x;

do{...} while 循环。与while循环不同的是，会在开始时先循环一次然后结束一次循环后再判断；所以至少会运行一次，与while、for不一样
var n = 0;
do {
    n = n + 1;
} while (n < 100);
n;

数据类型

【操作字符串】

var s = 'Hello, world!';
s.length; // 13

var s = 'Hello, world!';
    s[0]; // 'H'
    s[6]; // ' '
    s[7]; // 'w'
    s[12]; // '!'
    s[13]; // undefined 超出范围的索引不会报错，但一律返回undefined


-slice (截取Array的部分元素，然后返回一个新的Array)
var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
arr.slice(0, 3); // 从索引0开始，到索引3结束，但不包括索引3: ['A', 'B', 'C']
arr.slice(3); // 从索引3开始到结束: ['D', 'E', 'F', 'G']

注意到slice()的起止参数包括开始索引，不包括结束索引。

如果不给slice()传递任何参数，它就会从头到尾截取所有元素。利用这一点，我们可以很容易地复制一个

var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
var aCopy = arr.slice();
aCopy;          // ['A', 'B', 'C', 'D', 'E', 'F', 'G']
aCopy === arr;  // false,高级处理，需要对数组内的全部进行对比才能完全true

各类数组操作，见（https://www.liaoxuefeng.com/wiki/1022910821149312/1023020967732032）

【对象】

   var person = {
   name: 'Bob',
   age: 20,
   tags: ['js', 'web', 'mobile'],
   city: 'Beijing',
   hasCar: true,
   zipcode: null
   };

person.name; // Bob
person.zipcode; // null

【数组】

a.[ 任意数据类型,元素之间用逗号隔开]
b.Array()可用函数实现数组
c.var Array(1,2,3)
    arr[0]=1 返回索引为0的元素，即1

函数内容有点小多，待我消化消化前来一起分享～

以上笔记从大佬们的论坛学习而来，特感谢大佬们的知识分享～（学习技术知识，果然要看大佬们的技术博客，大家有好的推荐也欢迎指引我这个小白哈，感恩！）

附上学习链接：

www.liaoxuefeng.com/wiki/102291…

wangdoc.com/javascript/…

【产品学习前端入门】也算是体恤开发小哥哥的一次好机会？

敲开前端的学习大门---技术小白该如何自学了解工程师大佬们？

为什么学习JS

了解JS

学习Day 1