首页 > 编程语言 >前端（JavaScript）

前端（JavaScript）

时间：2023-07-20 17:55:26浏览次数：31  
标签：function console log 前端 JavaScript 字符串 var

JavaScript

一个完整的 JavaScript 实现是由以下 3 个不同部分组成的：

  • 核心（ECMAScript） ------------>基础语法---------->必须要会的
  • 文档对象模型（DOM） Document object model (整合js，css，html)  ---------->重要
  • 浏览器对象模型（BOM） Broswer object model（整合js和浏览器）------------>不重要

简单地说，ECMAScript 描述了JavaScript语言本身的相关内容

JavaScript 是脚本语言

JavaScript 是一种轻量级的编程语言。

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

JavaScript引入方式

1. 书写位置

　　Script标签内写代码

<script>
  // 在这里写你的JS代码
</script>

　　引入外部的JS文件

<script src="myscript.js"></script>

　　浏览器控制台

2. 注释

单行注释：// 这是单行注释　　快捷键：Ctrl + ?

多行注释：　　快捷键：ctrl + shift + ?

　　/*
　　　　这是
　　　多行注释
　　*/

3. 结束符

JavaScript中的语句要以（；）分号作为结束符。

4. 变量声明

1. JavaScript的变量名可以使用_，数字，字母，$组成，不能以数字开头。

2. 声明变量使用 var 变量名; 的格式来进

在es5中: 　　

　　var name = 'kevin';

es6中:

　　let name='kevin'

5. 变量的命名

 基本上遵循python的变量命名规则即可

下划线、驼峰体、大驼峰、小驼峰, 保留字不能用来做命名。

 

6. 常量

python没有真正意义上的常量，全大写就是常量

js中有真正意义上的常量

在Js中定义常量：const pi = 3.14

JavaScript数据类型:（js也是一门面向对象语言，一切皆对象）

JavaScript拥有动态类型

var x;  // 此时x是undefined
var x = 1;  // 此时x是数字
var x = "Alex"  // 此时x是字符串

 

如何查看数据类型：用 typeof

var a = 1;
var b = 1.11;
console.log(typeof a);
console.log(typeof b);

1. 数值类型（number）

JavaScript不区分整型和浮点型，只有一种数字类型 
var a = 12.34;
var b = 20;
var c = 123e5;  // 12300000 = 123*10**5
var d = 123e-5;  // 0.00123

还有一种NaN，表示不是一个数字（Not a Number）。

<script>
    var a = 'a3432432dsadasd123dasdasds';
    console.log(parseInt(a))
</script>

结果如图所示：

2. 字符串（string）

拼接字符串一般使用“+”

 var s = 'hello';
var ss = "hello";
console.log(s + ss);

结果：

 

常用方法：

方法

说明

.length

返回长度

.trim()

移除空白

.trimLeft()

移除左边的空白

.trimRight()

移除右边的空白

.charAt(n)

返回第n个字符

.concat(value, ...)

拼接

.indexOf(substring, start)

子序列位置

.substring(from, to)

根据索引获取子序列

.slice(start, end)

切片

.toLowerCase()

小写

.toUpperCase()

大写

.split(delimiter, limit)

分割

.length：返回字符串的长度

var s = 'hello,world';
//length：求出字符串的长度
console.log(s.length); // 结果为11

结果如图：

 .trim()：去除字符串两边的空格

.trimLeft()：去除左边的空格

.trimRight()：去除字符串右边的空格

代码演示：

var s = '  hello,world  ';
console.log(s.trim()) //将字符串两边的空格去除
console.log(s.trimLeft()) //去除字符串左边的空格
console.log(s.trimRight())  //去除字符串右边的空格

结果：

 .charAt(n)：返回第n个字符

var s = 'hello,world';
console.log(s.charAt(5)) //返回第五个字符

结果：

 .concat(value, ...)：拼接

var s = 'hello,world';
console.log(s.concat('hello', 'world'))

结果：

 

.indexOf(substring, start)：子序列位置

var s = 'hello,world';
console.log(s.indexOf('hello')) // 当字符在字符传串中，返回第一个字符的序列号即索引，h的索引：0
console.log(s.indexOf('world')) // 当字符在字符传串中，返回第一个字符的序列号即索引，w的索引：6
console.log(s.indexOf('world1')) // 当字符不在字符传串中，返回值：-1

结果：

 

.substring(from, to)：根据索引获取子序列

var s = 'hello,world';
console.log(s.substring(1, 5))

结果：

 

.slice(start, end)：切片

var s = 'hello,world';
console.log(s.slice(1, 5))

结果：

 

slice和substring的区别

string.slice(start, stop)和string.substring(start, stop)：

两者的相同点：
如果start等于end，返回空字符串
如果stop参数省略，则取到字符串末
如果某个参数超过string的长度，这个参数会被替换为string的长度

substirng()的特点：
如果 start > stop ，start和stop将被交换
如果参数是负数或者不是数字，将会被0替换

silce()的特点：
如果 start > stop 不会交换两者
如果start小于0，则切割从字符串末尾往前数的第abs(start)个的字符开始(包括该位置的字符)
如果stop小于0，则切割在从字符串末尾往前数的第abs(stop)个字符结束(不包含该位置字符)

.toLowerCase()：小写

.toUpperCase()：大写

var s = 'hello,world';
console.log(s.toUpperCase()) //大写
console.log(s.toLowerCase()) //小写

结果：

 

split(delimiter, limit)：分割，以数组的形式返回

var s = 'hello,world';
console.log(s.split(','))

结果：

 ES6中引入了模版字符串（重要）

var name = 'kevin';
var age = 18;
var s = `my name is ${name}, my age is ${age}`;
console.log(s);

 布尔值（true、false）

js中有哪些是假：""(空字符串)、0、null、undefined、NaN都是false

 null和undefined

● null表示值是空，一般在需要指定或清空一个变量时才会使用，如 name=null;

● undefined表示当声明一个变量但未初始化时，该变量的默认值是undefined。还有就是函数无明确的返回值时，返回的也是undefined。

对象（object）

　　对象只是带有属性和方法的特殊数据类型。JavaScript 中的所有事物都是对象：字符串、数值、数组、函数...此外，JavaScript 允许自定义对象。

数组

数组对象的作用是：使用单独的变量名来存储一系列的值。类似于Python中的列表。

var a = [123, "ABC"];
console.log(a[1]);  // 输出"ABC"

结果：

数组的常用方法：

方法

说明

.length

数组的大小

.push(ele)

尾部追加元素

.pop()

获取尾部的元素

.unshift(ele)

头部插入元素

.shift()

头部移除元素

.slice(start, end)

切片

.reverse()

反转

.join(seq)

将数组元素连接成字符串

.concat(val, ...)

连接数组

.sort()

排序

.forEach()

将数组的每个元素传递给回调函数

.splice()

删除元素，并向数组添加新元素。

.map()

返回一个数组元素调用函数处理后的值的新数组

 

运算符

1.  + - * / % ++ --

var x=10;
var res1=x++;
var res2=++x;

res1; //结果为10
res2; // 结果为12

这里由于的x++和++x在出现赋值运算式，x++会先赋值再进行自增1运算，而++x会先进行自增运算再赋值！

比较运算符

> >= < <= != == === !====  //===(强等于，即比较数值，又比较类型) !==

逻辑运算符

&&(and) ||(or) !(not)

赋值运算符

= += -= *= /=

流程控制

if-else

var a = 10;
    if (a > 5) {
        console.log("yes");
        console.log(("no"))
    } else {
        console.log("no");
    }

结果：

switch

 var day = new Date().getDay(); // 获取星期几 2
    switch (day) {
        case 0:
        case 1:
        case 2:
            console.log("Monday");
            break;
        case 3:
            console.log("Monday");
            break;
        case 4:
            console.log("Monday");
            console.log("Monday");
            console.log("Monday");
            console.log("Monday");
            console.log("Monday");
            console.log("Monday");
            console.log("Monday");
            break;
        case 5:
            console.log("Monday");
            break;
        default:
            console.log("...")
}

注意：

　　switch中的case子句通常都会加break语句，否则程序会继续执行后续case中的语句。

结果：

 

for

   for (var i = 0; i < 10; i++) {
        console.log(i);
    }

 

结果：

while

   var i = 0;
    while (i < 10) {
        console.log(i);
        i++;
    }

结果：

 

三元运算

var a = 1;
var b = 2;
var c = a > b ? a : b  // a if a>b else b
//这里的三元运算顺序是先写判断条件a>b再写条件成立返回的值为a,条件不成立返回的值为b;三元运算可以嵌套使用；
var a=10,b=20;
var x=a>b ?a:(b=="20")?a:b; //  x=10

函数

函数定义

JavaScript中的函数和Python中的非常类似，只是定义方式有点区别。

普通函数定义

function f1() {
  console.log("Hello world!");
}
f1() // 调用函数

带参数的函数

function f2(a, b) {
  console.log(arguments);  // 内置的arguments对象
  console.log(arguments.length);
  console.log(a, b);
}
f2(1,2) //调用函数并传参

带返回值的函数

function sum(a, b){
  return a + b;
}
sum(1, 2);  // 调用函数

匿名函数方式

var sum = function(a, b){
  return a + b;
}
sum(1, 2);

立即执行函数

　　书写立即执行的函数，首先先写两个括号()()这样防止书写混乱 
(function(a, b){
  return a + b;
})(1, 2);

补充：

ES6中允许使用“箭头”（=>）定义函数。

var f = v => v;
// 等同于
var f = function(v){
  return v;
}

如果箭头函数不需要参数或需要多个参数，就是用圆括号代表参数部分：

var f = () => 5;
// 等同于
var f = function(){return 5};

var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2){
  return num1 + num2;  //这里的return只能返回一个值，如果想返回多个值需要自己手动给他们包一个数组或对象中
}

函数中的arguments参数

function add(a,b){
  console.log(a+b);
  console.log(arguments.length);
　console.log(arguments[0]);//arguments相当于将出传入的参数全部包含，这里取得就是第一个元素1
}

add(1,2)

结果：

函数的全局变量和局部变量

局部变量：

　　在JavaScript函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它（该变量的作用域是函数内部）。只要函数运行完毕，本地变量就会被删除。

全局变量：

　　在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。

变量生存周期：

　　JavaScript变量的生命期从它们被声明的时间开始。

　　局部变量会在函数运行以后被删除。

　　全局变量会在页面关闭后被删除。

作用域

　　首先在函数内部查找变量，找不到则到外层函数查找，逐步找到最外层。与python作用域关系查找一模一样！

 

 例子1 ：

var city = "BeiJing";
function f() {
  var city = "ShangHai";
  function inner(){
    var city = "ShenZhen";
    console.log(city);
  }
  inner();
}

f();  //输出结果是ShenZhen

结果：从里面一层层往外找，找到哪个就返回哪个的值

 例子2：

var city = "BeiJing";
function Bar() {
  console.log(city);
}
function f() {
  var city = "ShangHai";
  return Bar;
}
var ret = f(); // ret = Bar
ret();  // 打印结果是 BeiJing

结果：

 例子3：

    var city = "BeiJing";
function f(){
    var city = "ShangHai";
    function inner(){
        console.log(city);
    }
    return inner;
}
var ret = f();
ret();

结果：

自定义对象

JavaScript的对象（Object）本质上是键值对的集合（Hash结构），但是只能用字符串作为键。

var a = {"name": "Alex", "age": 18};
console.log(a.name);
console.log(a["age"]);

遍历对象中的内容：

var a = {"name": "Alex", "age": 18};
for (var i in a){
  console.log(i, a[i]);
}

创建对象：

var person=new Object();  // 创建一个person对象
person.name="Alex";  // person对象的name属性
person.age=18;  // person对象的age属性

Date对象

创建Date对象

//方法1：不指定参数
var d1 = new Date();
console.log(d1.toLocaleString());
//方法2：参数为日期字符串
var d2 = new Date("2004/3/20 11:12");
console.log(d2.toLocaleString());
var d3 = new Date("04/03/20 11:12");
console.log(d3.toLocaleString());
//方法3：参数为毫秒数
var d3 = new Date(5000);
console.log(d3.toLocaleString());
console.log(d3.toUTCString());

//方法4：参数为年月日小时分钟秒毫秒
var d4 = new Date(2004,2,20,11,12,0,300);
console.log(d4.toLocaleString());  //毫秒并不直接显示

Date对象的方法：

var d = new Date(); 
//getDate()                 获取日
//getDay ()                 获取星期
//getMonth ()               获取月（0-11）
//getFullYear ()            获取完整年份
//getYear ()                获取年
//getHours ()               获取小时
//getMinutes ()             获取分钟
//getSeconds ()             获取秒
//getMilliseconds ()        获取毫秒
//getTime ()                返回累计毫秒数(从1970/1/1午夜)

练习：

编写代码，将当前日期按“2017-12-27 11:11 星期三”格式输出。

const WEEKMAP = {  
  0:"星期天",
  1:"星期一",
  2:"星期二",
  3:"星期三",
  4:"星期四",
  5:"星期五",
  6:"星期六"
};  //定义一个数字与星期的对应关系对象


function showTime() {
    var d1 = new Date();
    var year = d1.getFullYear();
    var month = d1.getMonth() + 1;  //注意月份是从0~11
    var day = d1.getDate();
    var hour = d1.getHours();
    var minute = d1.getMinutes() < 10?"0"+d1.getMinutes():d1.getMinutes();  //三元运算

    var week = WEEKMAP[d1.getDay()];  //星期是从0~6

    var strTime = `
    ${year}-${month}-${day} ${hour}:${minute} ${week}
    `;
    console.log(strTime)
};

showTime();

 

JSON对象

python中序列化和反序列化

import json​

json.dumps

json.loads

在js中如何序列化和反序列化

JSON.stringify()  # json.dumps

JSON.parse()      # json.loads

例子：

var str1 = '{"name": "Alex", "age": 18}';
var obj1 = {"name": "Alex", "age": 18};
// JSON字符串转换成对象
var obj = JSON.parse(str1); 
// 对象转换成JSON字符串
var str = JSON.stringify(obj1);

 

 

 

 

 

 

标签：function,console,log,前端,JavaScript,字符串,var
From： https://www.cnblogs.com/Lucky-Hua/p/17569163.html

相关文章

  • CSSS属性overflow（溢出） 、CSS定位、JavaScript
    overflow溢出属性overflow（水平和垂直均设置）overflow-x（设置水平方向）overflow-y（设置垂直方向<title>溢出</title><style>div{text-indent:32px;border:5pxsolidred;height:400px;width:400px;/*overflow:hidden;*/......
  • javascript中map reduce filter的示例代码
    以下是JavaScript中map、reduce和filter的示例代码：Map（映射）示例代码：Map函数将数组中的每个元素映射为一个新的值，返回一个新的数组。constnumbers=[1,2,3,4,5];//将数组中的每个元素平方constsquaredNumbers=numbers.map(num=>num*num);console.log(square......
  • javascript中json 对象 数组之间相互转化的示例
    在JavaScript中，你可以使用JSON.stringify()将JSON对象转换为JSON字符串，使用JSON.parse()将JSON字符串转换为JSON对象。而要将JSON对象转换为数组，可以使用Object.values()方法，而要将数组转换为JSON对象，可以使用Array.reduce()方法。下面是这些转换的示例代码：将JSON对象转换为JSON......
  • [Javascript] [] is ArrayList
    Runthefollowingcode,foundthatfor get&push&pop,itisO(1)time;Butfor shift/unshfit,itisO(n)time.Inthiscases,Javascript's[],isaArrayList,everytimeyoudoshiftorunshiftitneedtomovetherestofitemsbyoneoffw......
  • kettle javascript获取变量
    kettlejavascript获取变量在Kettle（也称为PentahoDataIntegration）中，JavaScript是一种非常强大的编程语言，可以用于在ETL过程中执行各种复杂的数据处理和转换任务。JavaScript可以帮助我们访问和操作变量，以及在转换过程中进行条件判断和控制流程。本文将介绍如何在Kettle的JavaScr......
  • JavaScript学习 -- Promise的使用
    在JavaScript中，Promise是一种用于处理异步操作的对象。它表示某个异步操作的最终完成或失败，并提供了一种优雅的方式来处理异步操作的结果。本文将介绍JavaScript如何使用Promise，并提供一个实际的例子。什么是PromisePromise是一种异步操作的解决方案，它有三种状态：pending(等待)、re......
  • win nginx 用include管理多个配置文件,如部署多个web前端程序 配置host域名访问
    当要部署多个web程序时，先将web程序分文件夹到html, 1在conf目录下新建conf-test/test_web.conf内容为：server{ listen80; server_namewebone.com; location/{ roothtml/web1; indexindex.htmlindex.htm; }}server{ listen80; serve......
  • python flask中如何根据前端传来的数据
    项目方案：PythonFlask中如何根据前端传来的数据1.项目概述该项目旨在展示如何使用PythonFlask框架来处理前端传来的数据。Flask是一个轻量级的Web微框架，使用Python编写，可以帮助我们快速搭建Web应用。在这个项目中，我们将使用Flask来接收前端传来的数据，并进行相应的处理和响应。......
  • Javascript和jQuery有什么不同？
     Javascript和jQuery都是前端开发必备的语言和框架，但他们之间有很多不同。下面我们来详细的分析一下。Javascript是一种脚本语言，可以在浏览器端直接运行。它的语法简单，可以操作HTML和CSS，实现动态效果，如表单验证、动态创建元素等。Javascript的核心是ECMAScript标准，它定义了语......
  • JavaScript和Java如何进行通信
     JavaScript和Java是两种不同的编程语言，但是它们可以通过一些技术手段进行通信。在Web开发领域，JavaScript和Java的交互性十分重要，因为它们可以实现复杂的交互操作和数据处理，为Web应用程序带来更好的用户体验。一、Java与JavaScript的通信方式1.JavaappletJavaapplet是一......

赞助商

阅读排行

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

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

Copyright © 2020-2023 IPS99 版权所有 IPS99