js知识点

最新推荐文章于 2024-04-30 15:27:50 发布

原创最新推荐文章于 2024-04-30 15:27:50 发布 · 230 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js

前端专栏收录该内容

6 篇文章

订阅专栏

浏览器最大化,最小化时,更新echarts

echarts的图例设定为指定的图片

1 数组长度

var arr =[1,2,3,4]

arr.length =>4

arr[10] =1;

arr.length => 11;

数组长度为最大下标+1 ,如果对应下标没有值,则为undefined;

2 遍历数组下标与数组元素

var arr =[1,2,3,4];
arr[10] =4;
console.log(arr.length);
console.log(arr[88])
for( var v in arr){
console.log(v); //得到的是下标

console.log(arr[v]);//得到内容
}
for( var v of arr){
console.log(v); //得到的是内容
}
}

得到结果:

但是for in效率比较低, 所以还是推荐使用for循环即可

for(j = 0,len=arr.length; j < len; j++) {
   
}

箭头函数 =>

箭头函数相当于匿名函数，并且简化了函数定义。

(参数1, 参数2, …, 参数N) => { 函数声明 }

//相当于：(参数1, 参数2, …, 参数N) =>{ return 表达式; }
(参数1, 参数2, …, 参数N) => 表达式（单一）

// 当只有一个参数时，圆括号是可选的：
(单一参数) => {函数声明}
单一参数 => {函数声明}

// 没有参数的函数应该写成一对圆括号。
() => {函数声明}

let func = (value, num) => ({total: value * num}); 返回对象时,需要使用()将对象包起来

let func = ({value, num}) => ({total: value * num})

let func = (value, num) => value * num;

map函数

map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

map() 方法按照原始数组元素顺序依次处理元素。

注意： map() 不会对空数组进行检测。

注意： map() 不会改变原始数组。

var numbers = [65, 44, 12, 4];

numbers.map(num => num+'f'); //65f,44f,12f,4f

播放flash

<embed
	src={d.link} // 地址
	play="true"
	loop="false"
	quality="high"
	pluginspage="http://www.macromedia.com/go/getflashplayer"
	type="application/x-shockwave-flash"
/>

播放MP4

<video controls="controls">
	<source src={d.link} type="video/mp4" />
	您的浏览器不支持video标签
</video>

禁用浏览器的返回事件

react

if(logined) {

// 设置禁用浏览器的返回
            history.pushState(null, null, location.href);
            window.onpopstate = function (event) {
                history.go(1);
            };

效果: 点击回退按钮,什么也不会发生

字符串替换 replace

let str = abcde-f-a b cdef;

str.replace('-', 1); // 只会替换第一个查找到的元素将- 替换为1
如果需要替换多个,则需要使用正则
str.replace(/-/g, 1); 其中 /是转义字符 /- 就是-,是要被替换的内容 /g就是g,表示替换整个字符串
也可以拆分为数组然后再重新组合
str.split('-').join('1')

获取浏览器宽高

网页可见区域宽

document.body.clientWidth

阻止事件冒泡

事件冒泡：当一个元素接收到事件的时候会把他接收到的事件传给自己的父级，一直到window

在onclick事件中根据情况时使用,可以阻止事件冒泡(在子类不希望传递给父类)

react

e.nativeEvent.stopImmediatePropagation();

e.stopPropagation();

超出高度的内容,显示滚动条

设置css

overflow: scroll;

浏览器最大化,最小化时,更新echarts

import echarts from 'echarts';
import 'echarts/lib/chart/line';
...

let myChart = echarts.init(document.getElementById('mycharts'));

            window.onresize = function () {

                myChart.resize();

            };

echarts的图例设定为指定的图片

其中icons是二进制的图片, 可以在 http://tool.c7sky.com/datauri/ 网站进行转换

const icons = [
    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAjCAIAAABpW9/5AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAFiUAABYlAUlSJPAAAAC2SURBVFhH7ZUxCgIxFET/RNhGRBYLD2Kj1ttZi6WFiI2VjWDrNbWysREs1ribxcSAOcP8wjwmRaZ5JHwSVOercHl3spoAxfqSChauldPCYLBhn7hu5Vh9TNoRAVC/LPq7eypYWGf20wfGs0MqWNim2y7nRtAjJyBKTVxgR2JEYbh+ZDGNLKbxb2LE14tO/J0651TEpnneVK46hKJUEHvvh+VIZ7iC9zriSBbTyGIaWUwji0mIfAHXHimY/MnSdAAAAABJRU5ErkJggg==',
    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAjCAIAAABpW9/5AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAFiUAABYlAUlSJPAAAABKSURBVFhH7c2hDQAgDAVRVkGg2H8+EMVBCOoquOZM88UrrfaUhLGEsYSxhLHy4HG62Naz3WV9nz6E4+cTxhLGEsYSxhLG+g2ufQJE316muxGYmgAAAABJRU5ErkJggg==',
    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAIAAAADnC86AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAFiUAABYlAUlSJPAAAAA4SURBVFhH7c0xEQAgDAAx/FRAZeDfDS6eJXfZc+7sF+KMOCPOiDPijDgjzogz4ow4I86IM+LI7AOSzFJ9ntutcgAAAABJRU5ErkJggg=='
];
 let legendData = [{
	name: '真实数据',
	icon: `image://${icons[0]}`
},
{
	name: '估计数据',
	icon: `image://${icons[1]}`
},
{
	name: '低容量时期',
	icon: `image://${icons[2]}`
}];

myChart.setOption({
	legend: {
		data: legendData,
		textStyle: {
			color: '#FFFFFF'
		},
		bottom: 0
	}
}

效果图