熬夜猛肝万字博文学妹问我怎么入门 Javascript,百般盘问下我终于决定贡献出自己的 JavaScript入门笔记

Posted 请叫我阿ken

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了熬夜猛肝万字博文学妹问我怎么入门 Javascript,百般盘问下我终于决定贡献出自己的 JavaScript入门笔记相关的知识,希望对你有一定的参考价值。

你好,我是阿ken🦁


版权声明:本文为CSDN博主「请叫我阿ken」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
另外,博文中某些图片或内容可能出自网络,如有侵权或问题,请及时私信我

有学妹想以后做前端,就会问到 javascript怎么学的问题,在多次百般盘问下,阿ken🦁 决定贡献出自己之前学习 JavaScript时的笔记。

哈哈哈其实哈(偷偷告诉你们) 这篇文只有6k字,只是不写万字你们怎么会进来呢

 得得得,我们开始言归正传!

 

目录

📚3.1_循环结构

📓3.1.1_for 语句

📒3.1.2_while 语句

📙3.1.3_do...while 语句

📕3.1.4_continue 关键字

📘3.1.5_break 关键字

📚3.2_数组

📓3.2.1_创建数组

📒3.2.2_数组长度

📚3.3_数组案例

📓3.3.1_修改数组长度

📒3.3.2_新增或修改数组元素

📙3.3.3_筛选数组

📕3.3.4_删除指定的数组元素

📘3.3.5_反转数组元素排序

📚3.4_数组排序算法

📓3.4.1_冒泡排序

📒3.4.2_插入排序

📚3.5_二维数组

📓 3.5.1_创建二维数组

📒3.5.2_二维数组求和

📙3.5.3_二维数组转置


📚3.1_循环结构

📓3.1.1_for 语句

for(初始化变量; 条件表达式; 操作表达式) {
 // 循环体
}

先初始化变量后,判断是否满足条件表达式
如果满足条件表达式
则执行循环体语句
如果不满足,结束循环

执行完循环体语句后,再执行操作表达式,然后判断是否满足条件表达式
如果满足条件表达式
则执行循环体语句
如果不满足,结束循环

然后循环以往,直至不满足语句条件,循环结束

所谓断点调试
打开浏览器的开发者工具,找到Sources面板,在里面的网页源代码中可设置断点(单击某一行行号即可添加断点,再次单击即可取消)
在添加断点后,刷新网页,程序就会在断点的位置暂停,此时按F11键让程序单步执行,在旁边的Watch中可以观察变量的值的变化。 

案例:生成 i 行 j 列的星星图案

var j = prompt('请输入列数:');
var str = '';
for(var x = 0; x < i; x++) {
for(var y = 0; y < j; y++) {
str += '*';
}
str += '\\n';
}
console.log(str);

案例:生成九九乘法表

for(var i = 1; i <= 9; i++) {
for(var o = 1; o <= i; o++) {
console.log ('i' + '*' + 'o' + '=' + i * o + '\\t' );
}
console.log ('\\n');
}

📒3.1.2_while 语句

while 语句在条件表达式为 true 的前提下,循环执行指定的一段代码,直到条件表达式为 false 时结束循环。

while (条件表达式){
// 循环体
}

📙3.1.3_do...while 语句

do {
// 循环体
} while (条件表达式);

📕3.1.4_continue 关键字

该关键字可以在for、while 以及 do...while 循环体中使用
它用来**跳出本次循环**,也就是跳过了continue后面的代码

for(var i = 1; i <= 5; i++) {
if (i == 3){
continue;  // 跳出本次循环,直到跳到 i++
}
console.log('我吃完了第' + i + '个苹果');
}

// 我吃完了第1个苹果
// 我吃完了第2个苹果
// 我吃完了第4个苹果
// 我吃完了第5个苹果

📘3.1.5_break 关键字

break 关键字可以用在 switch 语句和循环语句中,在循环语句中使用时,其作用是立即跳出整个循环,也就是循环即将结束。

for(var i = 1; i <= 5; i++){
if (i == 3){
break;  // 跳出本次循环,直到跳到 i++
}
console.log('我吃完了第' + i + '个苹果');
}

// 我吃完了第1个苹果
// 我吃完了第2个苹果


📚3.2_数组

📓3.2.1_创建数组

第一种

var arr1 = new Array();         //空数组
var arr2 = new Array('苹果','橘子','香蕉','桃子');        //里面有4个元素


第二种

var arr3 = [];                                    //空数组
var arr4 = ['苹果', '橘子', '香蕉', '桃子'];         //里面有4个元素


在数组中保存各种常见的数据类型

var arr5 = [123,'abc',true,null,undefined];


在数组中保存数组

var arr6 = [12,[21,22],41];                    


📒3.2.2_数组长度

数组名.length

📚3.3_数组案例

📓3.3.1_修改数组长度

var arr = ['a','b','c'];
console.log(arr.length);  //输出结果:3
var arr1 = [1,2];
arr1.length = 4;    //大于原有长度
document.write(arr1);   //输出结果:  1,2,,,

var arr2 = [1,2,3,4];
arr2.length = 2;  //小于原有长度
document.write(arr2);  //输出结果:1,2
var arr = [1];
arr.length = 4;     // 修改数组的长度为4
console.log(arr);   // 输出结果:(4)[1,empty*3]
console.log(arr[1]);// 输出结果:undefined
var arr = [1,2,,4];
console.log(arr);   // 输出结果:(4)[1,2,empty,4]

var arr = new Array(4);
console.log(arr);   // 输出结果:(4)[empty*4]


var arr = [1];
arr[3] = 4;        // 向数组中添加一个元素,索引为3
console.log(arr);  // 输出结果:(4)[1,empty*2,4]


📒3.3.2_新增或修改数组元素

var arr = ['red', 'green', 'blue'];
arr[3] = 'pink';   //新增元素
console.log(arr);  //(4)["red","green","blue","pink"]
arr(0) = 'yellow'; //修改元素
console.log(arr);  //(4)["yellow","green","blue","pink"]


📙3.3.3_筛选数组

将一个数组中所有大于或等于10的元素筛选出来

var arr = [2,0,6,1,77,0,52,0,25,7];
var newArr = [];
var j = 0;
for(var i = 0; i < arr.length; i++) {
if(arr[i] >= 10) {
newArr[j++] = arr[i];  //新数组索引号从0开始,依次递增
}
}
console.log(newArr);  //输出结果:(3)[77,52,25]


📕3.3.4_删除指定的数组元素

删除数组中所有值为0的元素

var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
var newArr = [];
for (var i = 0;i < arr.length;i++){
if(arr[i] != 0){
newArr[newArr.length] = arr[i];
}
}
console.log(newArr);  //输出结果:(7)[2,6,1,77,52,25,7]


📘3.3.5_反转数组元素排序

var arr = ['red','green','blue','pink','purple'];
var newArr = [];
for(var i = arr.length-1; i >= 0; i--) {
newArr[newArr.length] = arr[i];
}
//  输出结果:(5)["purple","pink","blue","green","red"]
console.log(newArr);

📚3.4_数组排序算法

📓3.4.1_冒泡排序

var arr = [10,7,5,27,98,31];
for(var i = 1; i < arr.length; i++){
for(var j = 0; j < arr.length-i; j++){
if(arr[j] > arr[j+1]){
var temp = arr[j+1];
arr[j+1] = arr[j];
arr[j] = temp;
}
}
}
document.write(arr);  // 输出结果:5,7,10,27,31,98(从小到大输出)

📒3.4.2_插入排序

var arr = [10, 8, 100, 31, 87, 70, 1, 88];

// 按照从小到大的顺序排列,先遍历无序数组下标
for (var i = 1; i < arr.length; i++){
// 遍历并比较一个无序数组元素与所有有序数组元素
for(var j = i; j > 0; j--){
if(arr[j-1] > arr[j]) {
var temp = arr[j-1];
arr[j-1] = arr[j];
arr[j] = temp;
}
}
}
document.write(arr);  // 输出结果: 1,8,10,31,70,87,88,100
console.log(arr); // (8)
// 当定义数组时数字加上单引号或双引号时console.log输出: (8) ["1", "10", "100", "31", "70", "8", "87", "88"]

// 错误反例:
var arr = [10, 8, 100, 31, 87, 70, 1, 88];
            
            // 按照从小到大的顺序排列,先遍历无序数组下标
            for(var i = 1; i < arr.length; i++){
                
                for(; i > 0; i--){
                    if(arr[i-1] > arr[i]){
                    var a = arr[i-1];
                    arr[i-1] = arr[i];
                    arr[i] = a;
                }
                }
            }
            console.log(arr);
            // 内for循环里没有定义新的变量去赋值i而是直接用外for循环中的i,不会报错但会一直运行不会出现结果

📚3.5_二维数组

📓 3.5.1_创建二维数组

//使用Array创建数组
var info = new Array(
new Array('Tom',13,155),
new Array('Lucy',11,152)
);
console.log(info[0]);    //输出结果:(3)["Iom",13,155]
console.log(info[0][0]);//输出结果:Tom

//使用“[]”创建数组
var nums = [[1,2], [3,4]];
console.log(nums[0]);  //输出结果:(2) [1,2]
console.log(nums[1][0])//输出结果:3

var arr = [];  //创建一维空数组
for (var i = 0;i < 3; i++){
arr[i] = [];  //将当前元素设置为数组
arr[i][0] = i;// 为二维数组元素赋值
}


新创建的二维数组结果如下:

[[0],[1],[2]]

📒3.5.2_二维数组求和

var arr = [[12,59,66],[100,888]];
var sum = 0;
for (arr i = 0;i < arr.length;i++){   //遍历arr数组
for(var j = 0;j < arr[i].length;j++){ //arr[i]数组
sum +=arr[i][j];                     //二维数组元素累加
}
} 
console.log(sum);                    //输出结果:1125

📙3.5.3_二维数组转置

var arr = {
['a','b','c'],['d','e','f'],['g','h','i'],['j','k','l']
};
var res = [];
for(var i = 0;i < arr[0].length;i++){
res[i] = [];
for(var j = 0;j < arr.length;j++){
res[i][j] = arr[j][i];  //为二维数组赋值
}
}
console.log(res);


本篇文到这里暂时告一段落咯,请期待阿ken下次更文~

下面是本系列 —— 【熬夜猛肝万字博文】学妹问我怎么入门 Javascript,百般盘问下我终于决定贡献出自己的 JavaScript入门笔记 已更新的文章,有兴趣可看下哦~

【熬夜猛肝万字博文】学妹问我怎么入门 Javascript,百般盘问下我终于决定贡献出自己的 JavaScript入门笔记 (一)

【熬夜猛肝万字博文】学妹问我怎么入门 Javascript,百般盘问下我终于决定贡献出自己的 JavaScript入门笔记 (二)

 

 原创不易,感谢观众老爷们的大力支持,请点亮一下下面的大拇哥、评论区、小星星

最后 感激相遇 我是阿ken🦁

 

 

 

 

以上是关于熬夜猛肝万字博文学妹问我怎么入门 Javascript,百般盘问下我终于决定贡献出自己的 JavaScript入门笔记的主要内容,如果未能解决你的问题,请参考以下文章

熬夜猛肝万字博文学妹问我怎么入门 Javascript,百般盘问下我终于决定贡献出自己的 JavaScript入门笔记

熬夜爆肝万字C#基础入门大总结建议收藏

熬夜爆肝万字C#基础入门大总结建议收藏

(大厂必备)厂长熬夜爆肝万字之多线程高并发JUC编程⭐学妹已收藏

(大厂必备)厂长熬夜爆肝万字之多线程高并发JUC编程⭐学妹已收藏

建议收藏|熬夜爆肝万字文带你了解DOM,文末有彩蛋嗷!!!!✨✨✨