首页 > 编程语言 >JavaScript学习笔记 - 语法篇 - 一句废话没有版

JavaScript学习笔记 - 语法篇 - 一句废话没有版

时间：2023-06-14 18:14:47浏览次数：53  
标签：10 废话 const log map JavaScript 语法 数组 console

写在前面：

  • 绝不废话！放心食用
  • JavaScript语法很简单，可以直接在控制台调试理解

目录

1、变量和常量

/**
 * var : 全局作用域，生命周期问题，容易冲突
 * let ：值可以被修改
 * const ：不可被修改
 */
let age = 30;
console.log(age);
age = 31;
console.log(age);

const agge = 12;
console.log(agge);
// Error：const不能被修改
// agge = 15;

// Error：必须初始化
// const agggge;

2、数据类型

/**
 * Stirng
 * Number
 * Boolean
 * null
 * undefined
 */
// String
const username = "Dandelion";
const oldname = 'Dandelion_000';

// Number
const age = 30;
const score = 4.4;

// Boolean
const flag = true;

// null（非undefined，被定义为null）
const my_null = null;

// undefined
let my_undefined;
const my_undefined_1 = undefined;

console.log(typeof score);
console.log(typeof my_null); // null 输出 object
console.log(typeof my_undefined);

3、字符串

3.1 模板字符串

const username = "Dandelion";
const age = 20;

// 连接
console.log("My name is " + username + " and I am " + age);
// 模板字符串
console.log(`My name is ${username} and I am ${age}`);

3.2 字符串的部分常用函数

const s = "Hello World!";

// length属性
console.log(s.length);

// 全大写
console.log(s.toUpperCase());
// 全小写
console.log(s.toLowerCase());

// 获取子串，参数为起始和终止index，从0开始，左闭右开区间
console.log(s.substring(0, 4));

// 字符串分割，分割为字符数组，参数为字符串时以参数进行分割，为空串时，按字符分割
console.log(s.split(""));
console.log(s.split("r"));
console.log(s.split("Wo"));

4、数组

数组属于对象

const narr = new Array(1, 2, 3, 4, 5);
console.log(narr);

const sarr = new Array("A", "b", "3", "DD", "E");
console.log(sarr);

// 也可以使用这种方式定义，与构造函数相同
const barr = [true, false, false, true. null];
console.log(barr);

// 数组各个元素元素类型可不相同
const arr = new Array(1, 2.2, "CC", false, null, undefined);
console.log(arr);

console.log(arr[1]);	 // 可以使用索引访问元素
arr[2] = "CCC";			// 修改元素
// arr = [];			// Error，数组对象本身为const，不能修改数组本身，只能修改元素

arr.push("push_back");      // 尾部追加
arr.unshift("un_shift");    // 头部插入
console.log(arr);
arr.pop();                  // 尾部删除
console.log(arr);

console.log(Array.isArray(arr));    // Array静态方法，判断是否是数组

// 获得元素索引，没有该元素时返回 -1
console.log(arr.indexOf("CCC"));
console.log(arr.indexOf("CC"));

// 数组扩容
let bigArr = [1, 2, 3, 4];
console.log(bigArr);
bigArr[10] = 11;        // 增加大小并赋值
console.log(bigArr);

// 排序
let sortArr = [5, 2, 1, 6, 8];
sortArr.sort();
console.log(sortArr);

5、对象

const person = {
    name: "Dandelion",
    age: 20,
    hobbies: ["music", "movies", "sports"],
    address: {
        street: "50 main st",
        city:"Boston",
        state:"MA",
    },
};

console.log(person);
console.log(person.name);
console.log(person.hobbies[1]);
console.log(person.address.city);

person.street = "52 main st"		    // 修改属性
person.email = "[email protected]"		// 添加新的属性
console.log(person);

// 抽取，将多个内容从对象中拷贝出来
const { name, age, address: { city } } = person;
console.log(name);
console.log(age);
// Error ： 本质上抽取的是 city，只是对应关系是再person.address.city
// console.log(address);        // Error
// console.log(address.city);   // Error
console.log(city);

6、对象数组 && JSON

const todos = [
    {
        id: 1,
        text: "Take out trash",
        isCompleted: true,
    },
    {
        id: 2,
        text: "Meeting with boss",
        isCompleted: true,
    },
    {
        id: 1,
        text: "Dentist appt",
        isCompleted: false,
    },
];
console.log(todos[1].text);				   // index取值

// 增删改查细节不表，本质都是数组

const todoJSON = JSON.stringify(todos);		// 转为JSON
console.log(todoJSON);

7、if 条件 && 三目运算

7.1 if 条件

if-else嵌套之类的和C、Java都没有区别，细节不表

const x = "10";
const y = 11;
const z = 5;

// === 比较值和类型， == 和 > 、 < 仅比较值
if (x === 10) {
    console.log("x === 10");
}
if (x !== 10) {
    console.log("x !== 10");
}
if (x == 10) {
    console.log("x == 10");
}
if (x != 10) {
    console.log("x != 10");
}
if (x > 5) {
    console.log("x >= 5");
}

// 逻辑或和逻辑与
if (y > 10 || z > 10) {
    console.log("y > 10 || z > 10");
}
if (y > 10 && z > 10) {
    console.log("y > 10 && z > 10");
}

7.2 三目运算

const flagA = true;
const flagB = false;
const flagC = true;
const flagD = false;
console.log( flagB ? "BBB" : (flagD ? "DDD" : (flagC ? "CCC" : flagA)));

8、switch

JS 中 ，switch参数可以是字符串，字符串也是基础数据类型

const color = "blue";
switch (color) {
    case "red":
        console.log("red");
        break;
    case "blue":
    case "black":
        console.log("blue or black");
        break;
    case "yellow":
        console.log("yellow");
        break;
    default:
        console.log("other");
        break;
}

9、循环

9.0 准备工作

const person = {
    name: "Dandelion",
    age: 20,
    hobbies: ["music", "movies", "sports"],
    address: {
        street: "50 main st",
        city:"Boston",
        state:"MA",
    },
};

const todos = [
    {
        id: 1,
        text: "Take out trash",
        isCompleted: true,
    },
    {
        id: 2,
        text: "Meeting with boss",
        isCompleted: true,
    },
    {
        id: 1,
        text: "Dentist appt",
        isCompleted: false,
    },
];

9.1 for 循环

9.1.1 for

for (let index = 0; index < 10; ++index) {
    console.log(`for loop number: ${index}`);
}

9.1.2 forin 遍历对象属性

for (const key in person) {
    console.log(`${key}: ${person[key]}`);
}

9.1.3 forof 遍历数组

for (const todo of todos) {
    console.log(todo);
}

9.1.4 foreach - 引子

严格来说 foreach 属于迭代器，将在 第11节迭代器 中详细说明

9.2 while 循环

let i = 0;
while (i < 10) {
    console.log(`for loop number: ${i++}`);
}

9.3 do-while 循环

let j = 0;
do {
    console.log(`for loop number: ${j}`);
} while (j++ < 10);

10、函数

10.1 函数调用

function f() {
    console.log('test func');
}
f();        //调用函数

10.2 参数传递

10.2.1 单个参数

function f1(element) {      // 形参
    console.log(element);
}
f1('test element');          // 实参

10.2.2 多个参数

function f2(a, b, c) {
    console.log(a + b);
}
f2(1, 2, 3, 4);      // 正常 3 实参 > 形参
f2(1, 2, 3);         // 正常 3 实参 === 形参
f2(1, 2);            // 正常 3 实参 < 形参，但 c 在函数中未使用
// f2(1);            // Error  实参 < 形参，被使用到的形参传递不全

10.2.3 arguments

  • arguments 相当于一个数组，里面存储了函数的实参，当出现实参和形参数量不相同，就可以用arguments来获取。
  • arguments 这个"数组"的功能并不全，比如没有push，pop等操作，只是单纯的存储工具，但有length的操作。
  • 这里的 f3 有没有形参都不影响
function f3() {
    console.log(arguments);
    console.log(arguments[1]);
    console.log(arguments.length);
}
f3(1, 2, 3);

10.3 函数返回

可以直接使用return返回内容

function f4(a, b) {
    return a + b;
}
console.log(f4(3, 2));

10.4 箭头函数

省去function，采用let var const的定义方式定义函数

let f5 = (a, b, c) => {
    return a + b + c;
}
console.log(f5(1, 2, 3));

// 单个参数的箭头函数可以省略括号
let f6 = a => {
    return a + 10;
}
console.log(f6(1));

11、迭代器

这里需要进行一些准备工作，详见 9.0准备工作

11.1 foreach

foreach 可以按顺序访问数组中的每一个元素，一般用于遍历

// foreach 迭代器函数形式
todos.forEach(function(todo) {
    console.log(todo);
});

console.log("---------------------------------------------------");

// foreach 迭代器箭头形式
todos.forEach(todo => {
    console.log(todo);
});

11.2 map

  • map 可以获取对象数组中各个的某一种属性，最后使用数组将所有属性以数组的形式进行返回
  • map 也可以使用箭头形式，详见 11.4 map + filter
// map迭代器
let taskText = todos.map(function(todo) {
    return todo.text;
}); //定义数组taskText来接收map的返回值
console.log(taskText);

console.log("---------------------------------------------------");

// map迭代器的结果可以直接使用index，以获取其中某个个对象的某个属性值
let taskTextByIndex = todos.map(function(todo) {
    return todo.text;
}); //定义数组taskTextByIndex来接收map的返回值
console.log(taskTextByIndex[1]);

11.3 filter

  • filter 是唯一有筛选效果的迭代器，一般用于获取满足筛选结果的对象的数组
  • filter 也可以使用箭头形式，详见 11.4 map + filter
let object = todos.filter(function(todo) {
    return todo.isCompleted === true;	// 按照筛选条件返回
});
console.log(object);

11.4 map + filter

  • filter 和 map 迭代器组合使用，仅取筛选后对象数组的某一个属性，仍得到属性值的数组
  • 这里均采用箭头形式
  • 本质上是进行了两次迭代，filter 负责筛选出满足条件的对象，map 负责取出所需的属性值，最后返回所需的属性值的数组
let taskTextByFilterAndMapArr = todos.filter(todo => {
    return todo.isCompleted === true;
}).map(todo => {
    return todo.text;
});
console.log(taskTextByFilterAndMapArr);

标签：10,废话,const,log,map,JavaScript,语法,数组,console
From： https://www.cnblogs.com/dandelion-000-blog/p/17481006.html

相关文章

  • Markdown语法
    markdown语法1.标题井号+空格一级标题两个井号+空格二级标题最多支持六级标题2.引用大于号表示引用3.列表有序列表数字+点+空格开门关门无序列表短横线+空格无序列表1无序列表2任务列表短横线+空格+左方括号+空格+右方括号吃......
  • JavaScript 动态编辑元素某属性值（例如：元素div的class属性）
    元素<divclass="h5-box-search-itemusimglistnodisplay"id="usimglist"></div>（满足条件）动态更新div元素的class属性值：//获取目标容器letusimglist=document.getElementById('usimglist');//获取其class的属性值letclassinfo=usimglist.ge......
  • JavaScript中数组（Array）与对象（Object）中的检索方式
    这里只是要说明一点，数组（Array）和对象（Object）都可以用[...]的方式来进行检索[...]中包含的需要是一个表达式，这个表达式的值最终会以字符串的形式被使用因为不论是数组（Array)还是对象（Object），他们都是以键值对的形式存储内容的，而所有的键的数据类型都是字符串（Array好像不是，但是先这样......
  • 编译原理动手实操,用java实现编译器-算术表达式及其语法解析器的实现
     本节代码下载地址：http://pan.baidu.com/s/1sjWiwPn代码的理解和运行是吃透编译原理的关键，如果我们看的是爱情动作片，自然选择无码的好，但如果看得是计算机课程，则必须有码，无码的计算机理论都是耍流氓。当前，java所实现的简易编译器目的是将一条或一组含有加号和乘号的算术表达式编译......
  • 编译原理动手实操,用java实现一个简易编译器-语法解析
    语法和解析树：举个例子看看，语法解析的过程。句子：“我看到刘德华唱歌”。在计算机里，怎么用程序解析它呢。从语法上看，句子的组成是由主语，动词，和谓语从句组成，主语是“我”，动词是“看见”，谓语从句是”刘德华唱歌“。因此一个句子可以分解成主语＋动词＋谓语从句：句子-->主语＋动词＋谓语......
  • 书写高质量JavaScript代码的要义（The Essentials of Writing High Quality JavaScript）
    原文：TheEssentialsofWritingHighQualityJavaScript才华横溢的StoyanStefanov，在他写的由O’Reilly初版的新书《JavaScriptPatterns》(JavaScript模式)中，我想要是为我们的读者贡献其摘要，那会是件很美妙的事情。具体一点就是编写高质量JavaScript的一些要素，例如避免全局变量，使......
  • vuex基础语法
    //importVuexfrom"vuex";//importVuefrom"vue";//Vue.use(Vuex);///*//vuex作用：数据共享//用法：在store新建一个js文件；newVuex.Store//方法：//state：初始状态数据//mutations：监控数据的变化//流程：state仓库---UI---mutations（提交方法：commit）//注意：必须......
  • javascript现代编程系列教程之二——IIFE
    IIFE（ImmediatelyInvokedFunctionExpression，立即执行函数表达式）是一个在定义后立即执行的JavaScript函数。它具有以下特点：是一个匿名函数：通常情况下，IIFE是一个没有名字的函数，称为匿名函数。立即执行：这个函数在声明后立即被调用并执行，而无需手动调用。创建局部作用域：它创建......
  • javascript现代编程系列教程之一：区块作用域对VAR不起作用的问题
    在JavaScript中，使用var声明的变量具有函数作用域，而不是块级作用域。这意味着在一个函数内部，使用var声明的变量在整个函数范围内都是可见的，包括嵌套的块（如if语句、for循环等）。为了避免区块对var不起作用的问题，你可以采用以下方法：使用let和const代替var：从ECMAScript2015（ES6）开始，引......
  • JavaScript 全局对象参考手册 encodeURIComponent() 函数
    JavaScriptencodeURIComponent()函数JavaScript全局对象参考手册定义和用法encodeURIComponent()函数可把字符串作为URI组件进行编码。语法encodeURIComponent(URIstring)  参数描述URIstring必需。一个字符串，含有URI组件或其他要编码的文本。返回值URIstring的副......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99